File

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

Description

Component representing a custom multiselect input using the ECL design system.

Should be used on a native element to enhance it with ECL multiselect behavior. Replaces the original element with a custom dropdown rendered dynamically.

Extends

ECLBaseDirective

Implements

DoCheck OnInit OnDestroy

Metadata

encapsulation	ViewEncapsulation.None
providers	)
selector	select[eclMultiselect]
templateUrl	ecl-multiselect.component.html

Index

Properties

eclOptionItems injector

Methods

getCssClasses

Inputs

ariaDescribedby ariaLabeledby disabled eclPlaceholder eclSize hasSearchBox hasSelectAll id isInvalid toggleLabel class e2eAttr tabindex

Outputs

eclChange

HostBindings

class

Accessors

isInvalid disabled cssClasses hasSearchBox hasSelectAll eclPlaceholder

Constructor

constructor()

Inputs

ariaDescribedby

Type : string | undefined

Default value : undefined

Defines the aria-describedby attribute for accessibility.

ariaLabeledby

Type : string | undefined

Default value : undefined

Defines the aria-labelledby attribute for accessibility.

disabled

Type : BooleanInput

Disables the multiselect component when set to true.

eclPlaceholder

Type : string

Placeholder text to show in the multiselect input field when no options are selected.

eclSize

Type : string

Default value : 'm'

Multiselect size: 's' | 'm' | 'l'. Default is 'm'.

hasSearchBox

Type : string

Enables the search box within the dropdown.

hasSelectAll

Type : string

Displays the "Select all" option in the dropdown.

id

Type : string | undefined

Default value : undefined

Sets the id attribute of the multiselect component.

isInvalid

Type : boolean | undefined

Marks the multiselect as invalid.

toggleLabel

Type : string | undefined

Default value : undefined

Label used for the toggle button that expands or collapses the dropdown.

class

Type : string

e2eAttr

Type : any

tabindex

Type : number

Outputs

eclChange

Type : EventEmitter

Emits an array of selected option values when the selection changes.

HostBindings

class

Type : string

CSS classes applied to the host element.

Methods

getCssClasses

getCssClasses(rootClass: string)

Parameters : Name Type Optional rootClass string No Returns : string

Properties

eclOptionItems

Type : QueryList<EclMultiselectOptionDirective>

Decorators : @ContentChildren(undefined)

List of option directives projected into the component.

injector

Type : unknown

Default value : inject(Injector)

Accessors

isInvalid

getisInvalid()

Marks the multiselect as invalid. Returns : boolean | undefined

setisInvalid(value: boolean | undefined)

Parameters : Name Type Optional value boolean | undefined No Returns : void

disabled

getdisabled()

setdisabled(value: BooleanInput)

Disables the multiselect component when set to true. Parameters : Name Type Optional value BooleanInput No Returns : void

cssClasses

getcssClasses()

CSS classes applied to the host element. Returns : string

hasSearchBox

sethasSearchBox(value: string)

Enables the search box within the dropdown. Parameters : Name Type Optional value string No Returns : void

hasSelectAll

sethasSelectAll(value: string)

Displays the "Select all" option in the dropdown. Parameters : Name Type Optional value string No Returns : void

eclPlaceholder

geteclPlaceholder()

seteclPlaceholder(value: string)

Placeholder text to show in the multiselect input field when no options are selected. Parameters : Name Type Optional value string No Returns : void

results matching ""

No results matching ""