packages/ecl/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.ts
Component representing the main input of a multiselect component. Handles displaying selected items, opening the dropdown, and managing accessibility.
| selector | div[eclMultiselectInput] |
| imports |
TranslateModule
EUI_ECL_BUTTON
EUI_ECL_ICON
|
| templateUrl | ./ecl-multiselect-input.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
| ariaControls |
Type : string | undefined
|
Default value : undefined
|
|
ARIA controls attribute for accessibility. |
| ariaDescribedby |
Type : string | undefined
|
Default value : undefined
|
|
ARIA describedby attribute for accessibility. |
| ariaLabeledby |
Type : string | undefined
|
Default value : undefined
|
|
ARIA labelledby attribute for accessibility. |
| eclSize |
Type : string
|
Default value : 'm'
|
|
Size modifier for the multiselect input (e.g., 's', 'm', 'l'). |
| inputPlaceholder |
Type : string
|
|
Placeholder text for the input when no items are selected. |
| isDisabled |
Type : boolean | undefined
|
Default value : false
|
|
Marks the component as disabled. |
| isDropdownExpanded |
Type : boolean
|
Default value : false
|
|
Indicates that the dropdown is currently expanded. |
| isInvalid |
Type : boolean | undefined
|
Default value : false
|
|
Marks the component as being in an invalid state. |
| selectedItems |
Type : {}
|
Default value : []
|
|
Array of currently selected item labels. |
| toggleId |
Type : string
|
|
ID of the toggle button element (used for accessibility). |
| toggleLabel |
Type : string | undefined
|
Default value : undefined
|
|
Label for the toggle button (optional). |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| mainInputClick |
Type : EventEmitter
|
|
Event emitted when the input is clicked. |
| mainInputKeydown |
Type : EventEmitter
|
|
Event emitted when a key is pressed on the input. |
| class |
Type : string
|
|
CSS classes for the component, including size and inherited classes. |
| onClick | ||||||
onClick(evt: Event)
|
||||||
|
Handles click on the input container. Emits custom event with original DOM event.
Parameters :
Returns :
void
|
| onFocus |
onFocus()
|
|
Focuses the multiselect input element.
Returns :
void
|
| onKeydown | ||||||
onKeydown(evt: KeyboardEvent)
|
||||||
|
Handles keydown events on the input. Only emits event on ArrowDown, Enter, or Space keys.
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| inputMultiselect |
Type : ElementRef
|
Decorators :
@ViewChild('inputMultiselect')
|
|
Reference to the internal input element. |
| cssClasses |
getcssClasses()
|
|
CSS classes for the component, including size and inherited classes.
Returns :
string
|
| buttonText |
getbuttonText()
|
|
Returns the label text shown inside the button.
Returns :
string
|
| selectedItemsCount |
getselectedItemsCount()
|
|
Returns the count of selected items.
Returns :
number
|
| isShowCounter |
getisShowCounter()
|
|
Displays a count badge when items are selected.
Returns :
boolean
|
| isActive |
getisActive()
|
|
Indicates that the dropdown is expanded (active).
Returns :
boolean
|
| sizeIcon |
getsizeIcon()
|
|
Returns icon size depending on the theme.
Returns :
string
|