### File

`packages/ecl/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.ts`

### Description

Component that renders a dropdown-style multiselect UI element. Used internally by the `EclMultiselectComponent`.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `ControlValueAccessor` `DoCheck` `OnDestroy`

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EclMultiselectDropdownComponent), multi: true, }`
selector | `div[eclMultiselectDropdown]`
imports | `EUI_ECL_BUTTON` `EclMultiselectOptionComponent` `EclMultiselectOptgroupComponent` `EclMultiselectInputComponent` `EUI_ECL_CHECKBOX` `TranslateModule`
templateUrl | `ecl-multiselect-dropdown.component.html`

### Index

###### Properties
ariaDescribedby ariaLabeledby clearAllBtn closeBtn eclMultiselectInput form hasSearchBox hasSelectAll id isShowMultiselectDropdown isShowNoResultsFound multiOptionComponents multiOptionDirectives optionsCount searchInput selectAllCheckbox toggleLabel
###### Methods
initSelectedOptions onArrowDownClear onArrowDownClose onArrowDownSearch onArrowDownSelectAll onArrowUpClear onArrowUpClose onArrowUpSearch onArrowUpSelectAll onClickClearAll onClickClose onClickMainInput onEnterClear onEnterSearch onEnterSelectAll onEscapeKey onKeydownMainInput onKeydownOption onKeyUp onOptionSelected onSearch onSelectAll onTabClear onTabClose Public registerOnChange Public registerOnTouched Public setDisabledState Public writeValue getCssClasses
###### Inputs
disabled eclSize isInvalid mainInputPlaceholder searchFieldPlaceholder class e2eAttr tabindex
###### Outputs
eclChange
###### HostBindings
class
###### HostListeners
document:click document:keyup.escape
###### Accessors
isInvalid cssClasses disabled selectedItems isItemsSelected isShowToolbar

### Constructor

`constructor(elRef: ElementRef, differs: IterableDiffers, renderer: Renderer2)`
Parameters :
Name | Type | Optional
elRef | `ElementRef` | No
differs | `IterableDiffers` | No
renderer | `Renderer2` | No

### Inputs

disabled
Type : `boolean | undefined`
Disables the component when true.

eclSize
Type : `string`
Default value : `'m'`
Size of the multiselect dropdown (e.g., 'm', 'l').

isInvalid
Type : `boolean | undefined`
Marks the component as visually invalid.

mainInputPlaceholder
Type : `string`
Default value : `'Select an item'`
Placeholder for the main multiselect input.

searchFieldPlaceholder
Type : `string`
Default value : `'Enter filter keyword'`
Placeholder for the search field input.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

eclChange
Type : `EventEmitter`
Emits the list of selected values whenever the selection changes.

### HostBindings

class
Type : `string`
Adds the ECL base CSS class for multiselect dropdowns.

### HostListeners

document:click
Arguments : `'$event'`
`document:click(event: MouseEvent)`

document:keyup.escape
Arguments : `'$event'`
`document:keyup.escape(event: KeyboardEvent)`

### Methods

initSelectedOptions
`initSelectedOptions()`
Returns : `void`

onArrowDownClear
`onArrowDownClear(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowDownClose
`onArrowDownClose(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowDownSearch
`onArrowDownSearch(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowDownSelectAll
`onArrowDownSelectAll(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowUpClear
`onArrowUpClear(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowUpClose
`onArrowUpClose(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowUpSearch
`onArrowUpSearch(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onArrowUpSelectAll
`onArrowUpSelectAll(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onClickClearAll
`onClickClearAll(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onClickClose
`onClickClose(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onClickMainInput
`onClickMainInput(evt: EclMultiselectMainInputClickEvent)`
Parameters :
Name | Type | Optional
evt | `EclMultiselectMainInputClickEvent` | No
Returns : `void`

onEnterClear
`onEnterClear(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onEnterSearch
`onEnterSearch(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onEnterSelectAll
`onEnterSelectAll(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onEscapeKey
`onEscapeKey(event: KeyboardEvent)`
Decorators : `@HostListener('document:keyup.escape', ['$event'])`
Parameters :
Name | Type | Optional
event | `KeyboardEvent` | No
Returns : `void`

onKeydownMainInput
`onKeydownMainInput(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onKeydownOption
`onKeydownOption(evt: EclMultiselectOptionKeydownEvent)`
Handles keyboard interaction on option items. Supports arrow keys, tab, escape, and enter. Parameters :
Name | Type | Optional
evt | `EclMultiselectOptionKeydownEvent` | No
Returns : `void`

onKeyUp
`onKeyUp(event: MouseEvent)`
Decorators : `@HostListener('document:click', ['$event'])`
Parameters :
Name | Type | Optional
event | `MouseEvent` | No
Returns : `void`

onOptionSelected
`onOptionSelected(evt: EclMultiselectOptionClickEvent)`
Triggered when a single option is clicked/selected. Updates selected items, emits changes. Parameters :
Name | Type | Optional
evt | `EclMultiselectOptionClickEvent` | No
Returns : `void`

onSearch
`onSearch(input: EventTarget)`
Handles search input, filters options, and updates their visibility. Parameters :
Name | Type | Optional
input | `EventTarget` | No
Returns : `void`

onSelectAll
`onSelectAll()`
Toggles all visible options based on the "Select All" checkbox. Returns : `void`

onTabClear
`onTabClear(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onTabClose
`onTabClose(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`
Registers a callback function to be called when the value changes. Required by ControlValueAccessor. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`
Registers a callback function to be called when the component is touched. Required by ControlValueAccessor. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

Public setDisabledState
`setDisabledState(isDisabled: boolean)`
Enables or disables the component. Required by ControlValueAccessor. Parameters :
Name | Type | Optional
isDisabled | `boolean` | No
Returns : `void`

Public writeValue
`writeValue(values: any)`
Writes a new value to the component from the outside (e.g., form model). Required by ControlValueAccessor. Parameters :
Name | Type | Optional
values | `any` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

ariaDescribedby
Type : `string | undefined`
Default value : `undefined`
Optional ARIA description used for accessibility purposes.

ariaLabeledby
Type : `string | undefined`
Default value : `undefined`
Optional ARIA label reference for screen readers.

clearAllBtn
Type : `ElementRef`
Decorators : `@ViewChild('clearAllBtn', {read: ElementRef})`

closeBtn
Type : `ElementRef`
Decorators : `@ViewChild('closeBtn', {read: ElementRef})`

eclMultiselectInput
Type : `EclMultiselectInputComponent`
Decorators : `@ViewChild('eclMultiselectInput')`

form
Type : `FormGroup`
Reactive form group managing internal form state.

hasSearchBox
Default value : `true`
Enables the search box in the dropdown interface.

hasSelectAll
Default value : `true`
Displays the "Select all" checkbox above the list of options.

id
Type : `string`
Default value : `''`
Optional identifier used for the dropdown element.

isShowMultiselectDropdown
Default value : `false`
Controls the visibility of the multiselect dropdown.

isShowNoResultsFound
Default value : `false`
Indicates that the "no results found" message should be displayed.

multiOptionComponents
Type : `QueryList<EclMultiselectOptionComponent>`
Decorators : `@ViewChildren(EclMultiselectOptionComponent)`

multiOptionDirectives
Type : `EclMultiselectOptionDirective[]`
Default value : `[]`
List of option directives currently rendered in the dropdown.

optionsCount
Type : `number`
Default value : `0`
Total number of options available in the dropdown list.

searchInput
Type : `ElementRef`
Decorators : `@ViewChild('searchInput')`

selectAllCheckbox
Type : `ElementRef`
Decorators : `@ViewChild('selectAllCheckbox')`

toggleLabel
Type : `string | undefined`
Default value : `undefined`
Label displayed for the toggle button to assist screen readers.

### Accessors

isInvalid
get `isInvalid()`
Marks the component as visually invalid. Returns : `boolean | undefined`
set `isInvalid(value: boolean | undefined)`
Parameters :
Name | Type | Optional
value | `boolean | undefined` | No
Returns : `void`

cssClasses
get `cssClasses()`
Adds the ECL base CSS class for multiselect dropdowns. Returns : `string`

disabled
get `disabled()`
Disables the component when true. Returns : `boolean | undefined`
set `disabled(value: boolean | undefined)`
Parameters :
Name | Type | Optional
value | `boolean | undefined` | No
Returns : `void`

selectedItems
get `selectedItems()`
Gets labels of currently selected options. Returns : `string[]`

isItemsSelected
get `isItemsSelected()`
Indicates if any options are currently selected. Returns : `boolean`

isShowToolbar
get `isShowToolbar()`
Controls the visibility of the multiselect toolbar. Returns : `boolean`

# results matching ""

# No results matching ""