eui documentation
  1. Components
  2. EclMultiselectInputComponent

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

host {
}
selector div[eclMultiselectInput]
imports TranslateModule EUI_ECL_BUTTON EUI_ECL_ICON
templateUrl ./ecl-multiselect-input.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

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.
counterLabel
Default value : 'ecl.multiselect.SELECTED'

Label for the selections counter, read by screen readers.
eclSize
Default value : 'm'

Size modifier for the multiselect input (e.g., 's', 'm', 'l').
inputPlaceholder
Default value : ''

Placeholder text for the input when no items are selected.
isDisabled
Default value : false, { transform: booleanAttribute }

Marks the component as disabled.
isDropdownExpanded
Default value : false

Indicates that the dropdown is currently expanded.
isInvalid
Default value : false, { transform: booleanAttribute }

Marks the component as being in an invalid state.
selectedItems
Type : string[]
Default value : []

Array of currently selected item labels.
toggleId
Type : string
Default value : ''

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

ariaDescribedbyFull
Type : unknown
Default value : computed(() => { const describedby = this.ariaDescribedby(); const counter = this.counterId(); return [describedby, counter].filter(Boolean).join(' ') || undefined; })

Computed ARIA describedby combining the input value with the counter ID.
buttonText
Type : unknown
Default value : computed(() => { const items = this.selectedItems(); return items.length === 0 ? this.inputPlaceholder() : items.join(','); })

Returns the label text shown inside the button.
counterId
Type : unknown
Default value : signal(crypto.randomUUID())

Unique ID for the counter element.
inputMultiselect
Type : ElementRef
Decorators :
@ViewChild('inputMultiselect')

Reference to the internal input element.
isActive
Type : unknown
Default value : computed(() => this.isDropdownExpanded())

Indicates that the dropdown is expanded (active).
isShowCounter
Type : unknown
Default value : computed(() => this.selectedItems().length > 0)

Displays a count badge when items are selected.
selectedItemsCount
Type : unknown
Default value : computed(() => this.selectedItems().length)

Returns the count of selected items.

Accessors

cssClasses
getcssClasses()

CSS classes for the component, including size and inherited classes.

Returns : string
sizeIcon
getsizeIcon()

Returns icon size depending on the theme.

Returns : string

results matching ""

    No results matching ""