packages/ecl/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.ts
Component that renders a dropdown-style multiselect UI element.
Used internally by the EclMultiselectComponent.
OnInit
ControlValueAccessor
DoCheck
OnDestroy
AfterViewInit
| providers |
)
|
| selector | div[eclMultiselectDropdown] |
| imports |
EUI_ECL_BUTTON
EclMultiselectOptionComponent
EclMultiselectOptgroupComponent
EclMultiselectInputComponent
EUI_ECL_CHECKBOX
TranslateModule
|
| templateUrl | ecl-multiselect-dropdown.component.html |
constructor()
|
| 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
|
| eclChange |
Type : EventEmitter
|
|
Emits the list of selected values whenever the selection changes. |
| class |
Type : string
|
|
Adds the ECL base CSS class for multiselect dropdowns. |
| document:click |
Arguments : '$event'
|
document:click(event: MouseEvent)
|
| document:keyup.escape |
document:keyup.escape()
|
| initSelectedOptions |
initSelectedOptions()
|
|
Returns :
void
|
| onArrowDownClear | ||||||
onArrowDownClear(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowDownClose | ||||||
onArrowDownClose(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowDownSearch | ||||||
onArrowDownSearch(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowDownSelectAll | ||||||
onArrowDownSelectAll(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowUpClear | ||||||
onArrowUpClear(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowUpClose | ||||||
onArrowUpClose(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowUpSearch | ||||||
onArrowUpSearch(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onArrowUpSelectAll | ||||||
onArrowUpSelectAll(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onClickClearAll | ||||||
onClickClearAll(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onClickClose | ||||||
onClickClose(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onClickMainInput | ||||||
onClickMainInput(evt: EclMultiselectMainInputClickEvent)
|
||||||
|
Parameters :
Returns :
void
|
| onEnterClear | ||||||
onEnterClear(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onEnterSearch | ||||||
onEnterSearch(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onEnterSelectAll | ||||||
onEnterSelectAll(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onEscapeKey |
onEscapeKey()
|
Decorators :
@HostListener('document:keyup.escape')
|
|
Returns :
void
|
| onKeydownMainInput | ||||||
onKeydownMainInput(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onKeydownOption | ||||||
onKeydownOption(evt: EclMultiselectOptionKeydownEvent)
|
||||||
|
Handles keyboard interaction on option items. Supports arrow keys, tab, escape, and enter.
Parameters :
Returns :
void
|
| onKeyUp | ||||||
onKeyUp(event: MouseEvent)
|
||||||
Decorators :
@HostListener('document:click', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| onOptionSelected | ||||||
onOptionSelected(evt: EclMultiselectOptionClickEvent)
|
||||||
|
Triggered when a single option is clicked/selected. Updates selected items, emits changes.
Parameters :
Returns :
void
|
| onSearch | ||||||
onSearch(input: EventTarget)
|
||||||
|
Handles search input, filters options, and updates their visibility.
Parameters :
Returns :
void
|
| onSelectAll |
onSelectAll()
|
|
Toggles all visible options based on the "Select All" checkbox.
Returns :
void
|
| onTabClear | ||||||
onTabClear(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| onTabClose | ||||||
onTabClose(evt: Event)
|
||||||
|
Parameters :
Returns :
void
|
| Public registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Registers a callback function to be called when the value changes. Required by ControlValueAccessor.
Parameters :
Returns :
void
|
| Public registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Registers a callback function to be called when the component is touched. Required by ControlValueAccessor.
Parameters :
Returns :
void
|
| Public setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Enables or disables the component. Required by ControlValueAccessor.
Parameters :
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 :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| ariaDescribedby |
Type : string | undefined
|
Default value : undefined
|
|
Optional ARIA description used for accessibility purposes. |
| clearAllBtn |
Type : ElementRef
|
Decorators :
@ViewChild('clearAllBtn', {read: ElementRef})
|
| closeBtn |
Type : ElementRef
|
Decorators :
@ViewChild('closeBtn', {read: ElementRef})
|
| counterLabel |
Type : string
|
Default value : 'ecl.multiselect.SELECTED'
|
|
Label for the selections counter, read by screen readers. |
| eclMultiselectInput |
Type : EclMultiselectInputComponent
|
Decorators :
@ViewChild('eclMultiselectInput')
|
| form |
Type : FormGroup
|
|
Reactive form group managing internal form state. |
| hasSearchBox |
Type : unknown
|
Default value : true
|
|
Enables the search box in the dropdown interface. |
| hasSelectAll |
Type : unknown
|
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. |
| isItemsSelected |
Type : unknown
|
Default value : computed(() => this._selectedItems().length > 0)
|
|
Indicates if any options are currently selected. |
| isShowMultiselectDropdown |
Type : unknown
|
Default value : false
|
|
Controls the visibility of the multiselect dropdown. |
| isShowNoResultsFound |
Type : unknown
|
Default value : false
|
|
Indicates that the "no results found" message should be displayed. |
| isShowToolbar |
Type : unknown
|
Default value : computed(() => this._selectedItems().length > 0)
|
|
Controls the visibility of the multiselect toolbar. |
| isSubmitOnApply |
Type : unknown
|
Default value : false
|
|
When true, the Apply button acts as a submit button (type="submit") instead of a regular button. |
| 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')
|
| selectedItems |
Type : unknown
|
Default value : computed(() => this._selectedItems().map((item) => item.label))
|
|
Gets labels of currently selected options. |
| toggleLabel |
Type : string | undefined
|
Default value : undefined
|
|
Label displayed for the toggle button to assist screen readers. |
| isInvalid | ||||||
getisInvalid()
|
||||||
|
Marks the component as visually invalid.
Returns :
boolean | undefined
|
||||||
setisInvalid(value: boolean | undefined)
|
||||||
|
Parameters :
Returns :
void
|
| cssClasses |
getcssClasses()
|
|
Adds the ECL base CSS class for multiselect dropdowns.
Returns :
string
|
| disabled | ||||||
getdisabled()
|
||||||
|
Disables the component when true.
Returns :
boolean | undefined
|
||||||
setdisabled(value: boolean | undefined)
|
||||||
|
Parameters :
Returns :
void
|