@eui/ecl 22.0.0-alpha.30 → 22.0.0-alpha.31

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-29T06:54:10.873Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-29T14:38:17.262Z, llm-md export.
 
 ## Modules
 
@@ -1705,16 +1705,16 @@ Selector: `select[eclMultiselect]`
 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.
 
 Inputs:
-- `counterLabel: string` — Label for the selections counter, read by screen readers. Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
-- `disabled: BooleanInput` — Disables the multiselect component when set to true.
-- `eclPlaceholder: string` — Placeholder text to show in the multiselect input field when no options are selected.
-- `hasSearchBox: string` — Enables the search box within the dropdown.
-- `hasSelectAll: string` — Displays the "Select all" option in the dropdown.
-- `isInvalid: boolean | undefined` — Marks the multiselect as invalid.
-- `isSubmitOnApply: string` — When true, the Apply button in the dropdown acts as a submit button (type="submit").
 - `ariaDescribedby: string | undefined = undefined` — Defines the aria-describedby attribute for accessibility.
+- `counterLabel: string = 'ecl.multiselect.SELECTED'` — Label for the selections counter, read by screen readers. Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
+- `disabled: boolean = false` — Disables the multiselect component when set to true.
+- `eclPlaceholder: string = 'Select item'` — Placeholder text to show in the multiselect input field when no options are selected.
 - `eclSize: string = 'm'` — Multiselect size: 's' \| 'm' \| 'l'. Default is 'm'.
+- `hasSearchBox: boolean = true` — Enables the search box within the dropdown.
+- `hasSelectAll: boolean = true` — Displays the "Select all" option in the dropdown.
 - `id: string | undefined = undefined` — Sets the id attribute of the multiselect component.
+- `isInvalid: boolean = false` — Marks the multiselect as invalid.
+- `isSubmitOnApply: boolean = false` — When true, the Apply button in the dropdown acts as a submit button (type="submit").
 - `toggleLabel: string | undefined = undefined` — Label used for the toggle button that expands or collapses the dropdown.
 - `class: string`
 - `e2eAttr: any`
@@ -1725,7 +1725,6 @@ Outputs:
 
 Properties:
 - `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — List of option directives projected into the component.
-- `injector: unknown = inject(Injector)`
 
 Methods:
 - `getCssClasses(rootClass: string): string`
@@ -1738,66 +1737,29 @@ Selector: `div[eclMultiselectDropdown]`
 Description: Component that renders a dropdown-style multiselect UI element. Used internally by the EclMultiselectComponent .
 
 Inputs:
-- `disabled: boolean | undefined` — Disables the component when true.
-- `eclSize: string = 'm'` — Size of the multiselect dropdown (e.g., 'm', 'l').
-- `isInvalid: boolean | undefined` — Marks the component as visually invalid.
-- `mainInputPlaceholder: string = 'Select an item'` — Placeholder for the main multiselect input.
-- `searchFieldPlaceholder: string = 'Enter filter keyword'` — Placeholder for the search field input.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
-- `eclChange: EventEmitter = new EventEmitter<string[]>()` — Emits the list of selected values whenever the selection changes.
+- `eclChange: string[]` — Emits the list of selected values whenever the selection changes.
 
 Properties:
-- `ariaDescribedby: string | undefined = undefined` — Optional ARIA description used for accessibility purposes.
-- `clearAllBtn: unknown = viewChild('clearAllBtn', { read: ElementRef })`
-- `closeBtn: unknown = viewChild('closeBtn', { read: ElementRef })`
-- `counterLabel: string = 'ecl.multiselect.SELECTED'` — Label for the selections counter, read by screen readers.
-- `eclMultiselectInput: unknown = viewChild<EclMultiselectInputComponent>('eclMultiselectInput')`
-- `form: FormGroup` — Reactive form group managing internal form state.
-- `hasSearchBox: unknown = true` — Enables the search box in the dropdown interface.
-- `hasSelectAll: unknown = true` — Displays the "Select all" checkbox above the list of options.
-- `id: string = ''` — Optional identifier used for the dropdown element.
-- `isItemsSelected: unknown = computed(() => this._selectedItems().length > 0)` — Indicates if any options are currently selected.
-- `isShowMultiselectDropdown: unknown = false` — Controls the visibility of the multiselect dropdown.
-- `isShowNoResultsFound: unknown = false` — Indicates that the "no results found" message should be displayed.
-- `isShowToolbar: unknown = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0)` — Controls the visibility of the multiselect toolbar. Always visible when isSubmitOnApply is true so the user can submit the form.
+- `ariaDescribedby: unknown = signal<string | undefined>(undefined)` — Optional ARIA description used for accessibility purposes.
+- `counterLabel: unknown = signal('ecl.multiselect.SELECTED')` — Label for the selections counter, read by screen readers.
+- `disabled: unknown = signal<boolean | undefined>(undefined)` — Disables the component when true. Set by the parent and by ControlValueAccessor.setDisabledState .
+- `eclSize: unknown = signal('m')` — Size of the multiselect dropdown (e.g., 'm', 'l').
+- `hasSearchBox: unknown = signal(true)` — Enables the search box in the dropdown interface.
+- `hasSelectAll: unknown = signal(true)` — Displays the "Select all" checkbox above the list of options.
+- `id: unknown = signal('')` — Optional identifier used for the dropdown element.
+- `isInvalid: unknown = signal<boolean | undefined>(undefined)` — State configured imperatively by the parent EclMultiselectComponent . This dropdown is created dynamically and is never bound in a template, so these are writable signals set through their .set() accessor rather than inputs.
 - `isSubmitOnApply: unknown = signal(false)` — When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
-- `multiOptionComponents: QueryList<EclMultiselectOptionComponent>`
+- `mainInputPlaceholder: unknown = signal('Select an item')` — Placeholder for the main multiselect input.
 - `multiOptionDirectives: unknown = signal<EclMultiselectOptionDirective[]>([])` — List of option directives currently rendered in the dropdown.
-- `optionsCount: number = 0` — Total number of options available in the dropdown list.
-- `searchInput: unknown = viewChild<ElementRef>('searchInput')`
-- `selectAllCheckbox: unknown = viewChild<ElementRef>('selectAllCheckbox')`
-- `selectedItems: unknown = computed(() => this._selectedItems().map((item) => item.label))` — Gets labels of currently selected options.
-- `toggleLabel: string | undefined = undefined` — Label displayed for the toggle button to assist screen readers.
-
-Methods:
-- `initSelectedOptions(): void`
-- `onArrowDownClear(evt: Event): void`
-- `onArrowDownClose(evt: Event): void`
-- `onArrowDownSearch(evt: Event): void`
-- `onArrowDownSelectAll(evt: Event): void`
-- `onArrowUpClear(evt: Event): void`
-- `onArrowUpClose(evt: Event): void`
-- `onArrowUpSearch(evt: Event): void`
-- `onArrowUpSelectAll(evt: Event): void`
-- `onClickClearAll(evt: Event): void`
-- `onClickClose(evt: Event): void`
-- `onClickMainInput(evt: EclMultiselectMainInputClickEvent): void`
-- `onEnterClear(evt: Event): void`
-- `onEnterSearch(evt: Event): void`
-- `onEnterSelectAll(evt: Event): void`
-- `onEscapeKey(): void`
-- `onKeydownMainInput(evt: Event): void`
-- `onKeydownOption(evt: EclMultiselectOptionKeydownEvent): void` — Handles keyboard interaction on option items. Supports arrow keys, tab, escape, and enter.
-- `onKeyUp(event: MouseEvent): void`
-- `onOptionSelected(evt: EclMultiselectOptionClickEvent): void` — Triggered when a single option is clicked/selected. Updates selected items, emits changes.
-- `onSearch(input: EventTarget): void` — Handles search input, filters options, and updates their visibility.
-- `onSelectAll(): void` — Toggles all visible options based on the "Select All" checkbox.
-- `onTabClear(evt: Event): void`
-- `onTabClose(evt: Event): void`
+- `searchFieldPlaceholder: unknown = signal('Enter filter keyword')` — Placeholder for the search field input.
+- `toggleLabel: unknown = signal<string | undefined>(undefined)` — Label displayed for the toggle button to assist screen readers.
+
+Methods:
 - `registerOnChange(fn: any): void` — Registers a callback function to be called when the value changes. Required by ControlValueAccessor.
 - `registerOnTouched(fn: any): void` — Registers a callback function to be called when the component is touched. Required by ControlValueAccessor.
 - `setDisabledState(isDisabled: boolean): void` — Enables or disables the component. Required by ControlValueAccessor.
@@ -1820,7 +1782,7 @@ Inputs:
 - `isDisabled: boolean = false` — Marks the component as disabled.
 - `isDropdownExpanded: boolean = false` — Indicates that the dropdown is currently expanded.
 - `isInvalid: boolean = false` — Marks the component as being in an invalid state.
-- `selectedItems: string[] = []` — Array of currently selected item labels.
+- `selectedItemsLabels: string[] = []` — Array of currently selected item labels.
 - `toggleId: string = ''` — ID of the toggle button element (used for accessibility).
 - `toggleLabel: string | undefined = undefined` — Label for the toggle button (optional).
 - `class: string`
@@ -1831,19 +1793,8 @@ Outputs:
 - `mainInputClick: EclMultiselectMainInputClickEvent` — Event emitted when the input is clicked.
 - `mainInputKeydown: Event` — Event emitted when a key is pressed on the input.
 
-Properties:
-- `ariaDescribedbyFull: unknown = computed(() => { const describedby = this.ariaDescribedby(); const counter = this.counterId(); return [describedby, counter].filter(Boolean).join(' ') || undefi…` — Computed ARIA describedby combining the input value with the counter ID.
-- `buttonText: unknown = computed(() => { const items = this.selectedItems(); return items.length === 0 ? this.inputPlaceholder() : items.join(','); })` — Returns the label text shown inside the button.
-- `counterId: unknown = signal(crypto.randomUUID())` — Unique ID for the counter element.
-- `inputMultiselect: unknown = viewChild<ElementRef>('inputMultiselect')` — Reference to the internal input element.
-- `isActive: unknown = computed(() => this.isDropdownExpanded())` — Indicates that the dropdown is expanded (active).
-- `isShowCounter: unknown = computed(() => this.selectedItems().length > 0)` — Displays a count badge when items are selected.
-- `selectedItemsCount: unknown = computed(() => this.selectedItems().length)` — Returns the count of selected items.
-
 Methods:
-- `onClick(evt: Event): void` — Handles click on the input container. Emits custom event with original DOM event.
 - `onFocus(): void` — Focuses the multiselect input element.
-- `onKeydown(evt: KeyboardEvent): void` — Handles keydown events on the input. Only emits event on ArrowDown, Enter, or Space keys.
 - `getCssClasses(rootClass: string): string`
 
 ### EclMultiselectOptgroupComponent
@@ -1871,28 +1822,22 @@ Description: Component representing a single selectable option in the multiselec
 
 Inputs:
 - `disabled: boolean = false` — Disables the option when true.
-- `isChecked: boolean` — Indicates whether the option is selected.
-- `label: string` — Display label for the option.
-- `value: string`
+- `isChecked: boolean = false` — Indicates whether the option is selected.
+- `label: string = ''` — Display label for the option.
+- `value: string = ''` — Value assigned to the option.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Outputs:
+- `isChecked: boolean = false` — Indicates whether the option is selected.
 - `optionClick: EclMultiselectOptionClickEvent` — Emits when the option is clicked.
 - `optionKeydown: EclMultiselectOptionKeydownEvent` — Emits when a key is pressed while focused on the option.
 
-Properties:
-- `changes: unknown = new Subject()`
-- `eclCheckboxInput: unknown = viewChild<ElementRef>('checkboxInput')`
-- `keyword: string = ''`
-
 Methods:
 - `hide(): void` — Hides the option from view.
-- `highlightSearchText(keyword: string): void` — Sets the keyword for search highlighting.
+- `highlightSearchText(keyword: string): void` — Sets the keyword used by the boldText pipe to highlight matching text.
 - `onFocus(): void` — Focuses the checkbox input.
-- `onOptionClick(): void` — Toggles the selected state and emits the optionClick event.
-- `onOptionKeydown(evt: KeyboardEvent): void` — Emits the optionKeydown event when a key is pressed.
 - `show(): void` — Makes the option visible.
 - `getCssClasses(rootClass: string): string`
 
@@ -2434,13 +2379,7 @@ Outputs:
 - `searchEvent: EclSearchFormEvent` — This event is emited, when user performs the search action. Includes the search text from the input field.
 - `searchInputText: string = undefined` — The current/default search text.
 
-Properties:
-- `role: string = 'search'`
-
 Methods:
-- `onEnterKeyDown(evt: Event): void` — Perform search when user clicks Enter when on the input field. Emits the search event with the search text.
-- `onModelChange(newValue: string): void` — Assigns the new input text value to the 'searchInputText' property, each time the input is changed.
-- `onSearchClick(evt: Event): void` — Perform search when user clicks the search button. Emits the search event with the search text.
 - `registerOnChange(fn: function): void`
 - `registerOnTouched(fn: function): void`
 - `writeValue(value: any): void`
@@ -5126,16 +5065,15 @@ Selector: `optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]`
 Description: Directive used to decorate and elements within a multiselect. Adds support for value, label, disabled, selected states and styling.
 
 Inputs:
-- `disabled: boolean` — Indicates that the option is disabled.
-- `selected: boolean` — Indicates that the option is selected.
+- `disabled: boolean = false` — Indicates that the option is disabled.
 - `label: string = undefined` — Label displayed for the option.
+- `selected: boolean = false` — Indicates that the option is selected.
 - `value: string = undefined` — Value assigned to the option.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
 
 Properties:
-- `changes: unknown = new Subject()` — Emits whenever the option's state changes (used internally).
 - `eclOptionItems: unknown = contentChildren(forwardRef(() => EclMultiselectOptionDirective))` — Nested option directives (used for optgroups).
 
 Methods:
@@ -7437,9 +7375,9 @@ File: `packages/ecl/components/ecl-multiselect/models/ecl-multiselect-option.mod
 Properties:
 - `id?: string`
 - `isActive: boolean`
-- `isChecked: boolean`
-- `label?: string`
-- `value?: string`
+- `isChecked: ModelSignal<boolean>`
+- `label?: InputSignal<string>`
+- `value?: InputSignal<string>`
 
 ### EclQuizCardFlipEvent
 

package/docs/properties.html

@@ -128,7 +128,7 @@
     </ol>
     <ul class="properties-list">
         <li>
-            <b>Version</b> : 22.0.0-alpha.30</li>
+            <b>Version</b> : 22.0.0-alpha.31</li>
     </ul>