### File

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

### Description

Component representing the main input of a multiselect component. Handles displaying selected items, opening the dropdown, and managing accessibility.

### Extends

`ECLBaseDirective`

### Metadata

selector | `div[eclMultiselectInput]`
imports | `TranslateModule` `EUI_ECL_BUTTON` `EUI_ECL_ICON`
templateUrl | `./ecl-multiselect-input.component.html`

### Index

###### Properties
inputMultiselect
###### Methods
onClick onFocus onKeydown getCssClasses
###### Inputs
ariaControls ariaDescribedby ariaLabeledby eclSize inputPlaceholder isDisabled isDropdownExpanded isInvalid selectedItems toggleId toggleLabel class e2eAttr tabindex
###### Outputs
mainInputClick mainInputKeydown
###### HostBindings
class
###### Accessors
cssClasses buttonText selectedItemsCount isShowCounter isActive sizeIcon

### Constructor

`constructor(eclThemeService: EclThemeService, renderer: Renderer2)`
Parameters :
Name | Type | Optional
eclThemeService | `EclThemeService` | No
renderer | `Renderer2` | No

### Inputs

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`

### Outputs

mainInputClick
Type : `EventEmitter`
Event emitted when the input is clicked.

mainInputKeydown
Type : `EventEmitter`
Event emitted when a key is pressed on the input.

### HostBindings

class
Type : `string`
CSS classes for the component, including size and inherited classes.

### Methods

onClick
`onClick(evt: Event)`
Handles click on the input container. Emits custom event with original DOM event. Parameters :
Name | Type | Optional
evt | `Event` | No
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 :
Name | Type | Optional
evt | `KeyboardEvent` | No
Returns : `void`

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

### Properties

inputMultiselect
Type : `ElementRef`
Decorators : `@ViewChild('inputMultiselect')`
Reference to the internal input element.

### Accessors

cssClasses
get `cssClasses()`
CSS classes for the component, including size and inherited classes. Returns : `string`

buttonText
get `buttonText()`
Returns the label text shown inside the button. Returns : `string`

selectedItemsCount
get `selectedItemsCount()`
Returns the count of selected items. Returns : `number`

isShowCounter
get `isShowCounter()`
Displays a count badge when items are selected. Returns : `boolean`

isActive
get `isActive()`
Indicates that the dropdown is expanded (active). Returns : `boolean`

sizeIcon
get `sizeIcon()`
Returns icon size depending on the theme. Returns : `string`

# results matching ""

# No results matching ""