Info

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	`)`
selector	`div[eclMultiselectDropdown]`
imports	`EUI_ECL_BUTTON` `EclMultiselectOptionComponent` `EclMultiselectOptgroupComponent` `EclMultiselectInputComponent` `EUI_ECL_CHECKBOX` `TranslateModule`
templateUrl	`ecl-multiselect-dropdown.component.html`

Index

Constructor

constructor()

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

document:keyup.escape()

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()

Decorators :

@HostListener('document:keyup.escape')

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

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.

Type : string

Default value : ''

Optional identifier used for the dropdown element.

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.

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

getisInvalid()

Marks the component as visually invalid.

Returns : boolean | undefined

setisInvalid(value: boolean | undefined)

Parameters :

Name	Type	Optional
value	`boolean \| undefined`	No

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 :

Name	Type	Optional
value	`boolean \| undefined`	No

Returns : void

selectedItems

getselectedItems()

Gets labels of currently selected options.

Returns : string[]

isItemsSelected

getisItemsSelected()

Indicates if any options are currently selected.

Returns : boolean

isShowToolbar

getisShowToolbar()

Controls the visibility of the multiselect toolbar.

Returns : boolean

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

HostListeners

Accessors

Constructor

Inputs

Outputs

HostBindings

HostListeners

Methods

Properties

Accessors

results matching ""

No results matching ""