# MUK DROP DOWN

## Usage

```html

<lib-muk-drop-down
        [controller]="controller"
        [label]="label"
        [value]="value"
        [key]="key"
        [options]="options"
        [optionsObservable]="optionsObservable"
        [isObservable]="isObservable"
        [isMultiple]="isMultiple"
        [isSearchable]="isSearchable"
        [isDisplayClearBtn]="isDisplayClearBtn"
        [placeholder]="placeholder"
        [searchOptions]="searchOptions"
        [controllerValue]="controllerValue"
        [isDisplayChips]="isDisplayChips"
        [isDisabled]="isDisabled"

        (onChange)="onChange($event)"
        (onSearch)="onSearch($event)"
        (onScroll)="onScroll($event)"
        (onClear)="onClear($event)"
        (onRemoveChip)="onRemoveChip($event)"
        [isLoading]="isLoading"
        [searchValue]="searchValue"
        [textButton]="'Add a new profile'"
></lib-muk-drop-down>
```

```typescript
import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    controller = new FormControl();
    searchValue = '';

    label = 'Label';
    value = 'value';
    key = 'key';
    options = [
        {key: 'key1', value: 'value1'},
        {key: 'key2', value: 'value2'},
    ];
    optionsObservable = of([
        {key: 'key1', value: 'value1'},
        {key: 'key2', value: 'value2'},
    ]);
    isObservable = false;
    isMultiple = false;
    isSearchable = false;
    isDisplayClearBtn = false;
    isLoading=false;
    placeholder = 'Placeholder';
    searchOptions = {
        debounceTime: 500,
        minLength: 3
    };
    controllerValue = 'value';
    isDisplayChips = false;
    isDisabled = false;

    onChange(event: any) {
        console.log(event);
    }

    onSearch(event: any) {
        console.log(event);
    }

    onScroll(event: any) {
        console.log(event);
    }

    onClear(event: any) {
        console.log(event);
    }

    onRemoveChip(event: any) {
        console.log(event);
    }
}
```

### Properties

| Name              | Type                               | Description                                           |
|-------------------|------------------------------------|-------------------------------------------------------|
| controller        | FormControl                        | The form control associated to the input              |
| label             | string                             | The label of the input                                |
| value             | string                             | The value of the input                                |
| key               | string                             | The key of the input                                  |
| options           | any[]                              | The options of the input                              |
| optionsObservable | Observable<any[]>                  | The observable of the options of the input            |
| isObservable      | boolean                            | The flag to indicate if the input is observable       |
| isMultiple        | boolean                            | The flag to indicate if the input is multiple         |
| isSearchable      | boolean                            | The flag to indicate if the input is searchable       |
| isDisplayClearBtn | boolean                            | The flag to indicate if the clear button is displayed |
| placeholder       | string                             | The placeholder of the input                          |
| searchOptions     | SearchOptions                      | The search options of the input                       |
| controllerValue   | { key: unknown, value: unknown }[] | The value of the controller array                     |
| isDisplayChips    | boolean                            | The flag to indicate if the chips are displayed       |
| isDisabled        | boolean                            | The flag to indicate if the input is disabled         |
| isLoading         | boolean                            | The flag to indicate if the spinner is loading        |
| textButton        | string                             | The text for button added in footer of ddl            |
| searchValue       | string                             | The text associated to the search value            |
### Events

| Name         | Type              | Description                                              |
|--------------|-------------------|----------------------------------------------------------|
| onChange     | EventEmitter<any> | The event emitted when the value of the input changes    |
| onSearch     | EventEmitter<any> | The event emitted when the search of the input changes   |
| onScroll     | EventEmitter<any> | The event emitted when the scroll of the input changes   |
| onClear      | EventEmitter<any> | The event emitted when the clear button is clicked       |
| onRemoveChip | EventEmitter<any> | The event emitted when the remove chip button is clicked |