npm package: @gb-pkm/components
Description: ## Dropdown Importing: ```typescript @NgModule({   imports: [GbDropdownModule] }) ``` Using: ```html <gb-dropdown>    <gb-dropdown-item>      Item_1    </gb-dropdown-item>    <gb-dropdown-item>      Item_2    </gb-dropdown-item>  </gb-dropdown> ``` ## Not
Latest version: 1.1.47

# Components

## Dropdown
Importing:
```typescript
@NgModule({
  imports: [GbDropdownModule]
})
```
Using:
```html
<gb-dropdown>
   <gb-dropdown-item>
     Item_1
   </gb-dropdown-item>
   <gb-dropdown-item>
     Item_2
   </gb-dropdown-item>
 </gb-dropdown>
```
## Notification
Importing:
```typescript
@NgModule({
  imports: [GbNotificationModule]
})
```
Using:
```typescript
constructor(private notificationService: GbNotificationService) {
    this.showNotification();
}

public showNotification() {
    this.notificationService.createNotification('Notification text', NotificationType.INFO, 3000);
}
```
## Popover
Importing:
```typescript
@NgModule({
  imports: [GbPopoverModule]
})
```

Using:
```html
<div #popoverElement>
  Popover
</div>
<popover [element]="popoverElement">
  Popover
</popover>
```
## Modal window
```typescript
@NgModule({
  imports: [GbModalWindowModule.forRoot()]
})
```

Modal in template:
```html
<button (click)="openModalWithId('modalWindow')">
  Open modal
</button>

<button (click)="openModalWithComponent(modalWindow)">
  Open modal component
</button>

<gb-modal-window #modalWindow
                 modalId="modalWindow"
                 [title]="'Modal title'">
  <div modal-body>
    Modal body
  </div>
  <div modal-footer>
    Modal footer
  </div>
</gb-modal-window>
```

```typescript
constructor(public modalService: GbModalWindowService) {
}

public openModalWithId(id: string): void {
    this.modalService.openModal(id);
}

public openModalWithComponent(modal: GbModalWindowComponent): void {
    this.modalService.openModal(modal);
}
```
Modal as a component:
```typescript
export class ModalComponent extends GbModalWindow<InputData, OutputData> {

  public data: InputData;

  constructor() {
    super();
  }

  public setData(data: InputData): any {
    this.data = data;
  }

  public save(): void {
    this.selected.next(outputData as OutputData);
  }
}
```
```html
<gb-modal-window [title]="'Modal window'">
  <div modal-body>
   Modal body
  </div>
  <div modal-footer>
    <button (click)="close()">
      Close
    </button>
    <button (click)="save()">
      Save
    </button>
  </div>
</gb-modal-window>
```

```typescript
constructor(public modalService: GbModalWindowService) {
}

public openModalComponent(): void {
    this.modalService.openModalComponent(ModalComponent);
}
```

Settings:
```typescript
GbModalWindowSettings

padding: boolean;
closable: boolean;
closeOnOutsideClick: boolean;
hasBackground: boolean;
type: ModalType;
```
```html
<gb-modal-window [settings]="settings"></gb-modal-window>
```
```typescript
modalWindow.open(settings);
```

## Context menu
Importing:
```typescript
@NgModule({
  imports: [GbContextMenuModule]
})
```

Using:
```html
<div gbContextMenu>
  Context menu container
  <gb-context-menu>
    Context menu content
  </gb-context-menu>
</div>
```

## Pipes
Importing:
```typescript
@NgModule({
  imports: [GbPipesModule]
})
```
### Highlight

### Map Values

### New Array

### Object keys

### Safe html

### Object values

## Directives
Importing:
```typescript
@NgModule({
  imports: [GbDirectivesModule]
})
```
### Click outside

### Lifecycle

### Stop propagation

### Number