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

package/types/eui-ecl-components-ecl-multiselect.d.ts

@@ -1,9 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { PipeTransform, ElementRef, OnChanges, OnDestroy, OnInit, DoCheck, AfterViewInit, QueryList, EventEmitter, Injector } from '@angular/core';
-import { ControlValueAccessor, FormGroup } from '@angular/forms';
+import { PipeTransform, InputSignal, ModelSignal, ElementRef, OnInit, DoCheck, OnDestroy } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 import { ECLBaseDirective } from '@eui/ecl/core';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject } from 'rxjs';
 import * as i1 from '@eui/ecl/components/ecl-checkbox';
 
 declare class BoldTextPipe implements PipeTransform {
@@ -22,10 +20,10 @@ declare class EclMultiselectMainInputClickEvent {
 
 interface EclMultiselectOption {
     id?: string;
-    label?: string;
-    value?: string;
+    label?: InputSignal<string>;
+    value?: InputSignal<string>;
     isActive: boolean;
-    isChecked: boolean;
+    isChecked: ModelSignal<boolean>;
 }
 
 declare class EclMultiselectOptionClickEvent {
@@ -47,10 +45,6 @@ declare class EclMultiselectInputComponent extends ECLBaseDirective {
      * Size modifier for the multiselect input (e.g., 's', 'm', 'l').
      */
     eclSize: _angular_core.InputSignal<string>;
-    /**
-     * Unique ID for the counter element.
-     */
-    counterId: _angular_core.WritableSignal<`${string}-${string}-${string}-${string}-${string}`>;
     /**
      * Label for the selections counter, read by screen readers.
      */
@@ -71,10 +65,6 @@ declare class EclMultiselectInputComponent extends ECLBaseDirective {
      * Marks the component as being in an invalid state.
      */
     isInvalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * CSS classes for the component, including size and inherited classes.
-     */
-    get cssClasses(): string;
     /**
      * Placeholder text for the input when no items are selected.
      */
@@ -82,7 +72,7 @@ declare class EclMultiselectInputComponent extends ECLBaseDirective {
     /**
      * Array of currently selected item labels.
      */
-    selectedItems: _angular_core.InputSignal<string[]>;
+    selectedItemsLabels: _angular_core.InputSignal<string[]>;
     /**
      * Indicates that the dropdown is currently expanded.
      */
@@ -95,14 +85,6 @@ declare class EclMultiselectInputComponent extends ECLBaseDirective {
      * ARIA describedby attribute for accessibility.
      */
     ariaDescribedby: _angular_core.InputSignal<string>;
-    /**
-     * Computed ARIA describedby combining the input value with the counter ID.
-     */
-    ariaDescribedbyFull: _angular_core.Signal<string>;
-    /**
-     * Reference to the internal input element.
-     */
-    readonly inputMultiselect: _angular_core.Signal<ElementRef<any>>;
     /**
      * Event emitted when the input is clicked.
      */
@@ -111,45 +93,61 @@ declare class EclMultiselectInputComponent extends ECLBaseDirective {
      * Event emitted when a key is pressed on the input.
      */
     readonly mainInputKeydown: _angular_core.OutputEmitterRef<Event>;
-    private readonly ICON_SIZE_FOR_EC_THEME_ON;
-    private readonly ICON_SIZE_FOR_EU_THEME_ON;
-    private eclThemeService;
-    private renderer;
+    /**
+     * Unique ID for the counter element.
+     */
+    protected counterId: _angular_core.WritableSignal<`${string}-${string}-${string}-${string}-${string}`>;
+    /**
+     * Reference to the internal input element.
+     */
+    protected readonly inputMultiselect: _angular_core.Signal<ElementRef<any>>;
+    /**
+     * Computed ARIA describedby combining the input value with the counter ID.
+     */
+    protected ariaDescribedbyFull: _angular_core.Signal<string>;
     /**
      * Returns the label text shown inside the button.
      */
-    buttonText: _angular_core.Signal<string>;
+    protected buttonText: _angular_core.Signal<string>;
     /**
      * Returns the count of selected items.
      */
-    selectedItemsCount: _angular_core.Signal<number>;
+    protected selectedItemsCount: _angular_core.Signal<number>;
     /**
      * Displays a count badge when items are selected.
      */
-    isShowCounter: _angular_core.Signal<boolean>;
+    protected isShowCounter: _angular_core.Signal<boolean>;
     /**
      * Indicates that the dropdown is expanded (active).
      */
-    isActive: _angular_core.Signal<boolean>;
+    protected isActive: _angular_core.Signal<boolean>;
+    /**
+     * CSS classes for the component, including size and inherited classes.
+     */
+    protected get cssClasses(): string;
     /**
      * Returns icon size depending on the theme.
      */
-    get sizeIcon(): string;
+    protected get sizeIcon(): string;
+    private readonly ICON_SIZE_FOR_EC_THEME_ON;
+    private readonly ICON_SIZE_FOR_EU_THEME_ON;
+    private eclThemeService;
+    private renderer;
+    /**
+     * Focuses the multiselect input element.
+     */
+    onFocus(): void;
     /**
      * Handles click on the input container. Emits custom event with original DOM event.
      */
-    onClick(evt: Event): void;
+    protected onClick(evt: Event): void;
     /**
      * Handles keydown events on the input.
      * Only emits event on ArrowDown, Enter, or Space keys.
      */
-    onKeydown(evt: KeyboardEvent): void;
-    /**
-     * Focuses the multiselect input element.
-     */
-    onFocus(): void;
+    protected onKeydown(evt: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclMultiselectInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectInputComponent, "div[eclMultiselectInput]", never, { "eclSize": { "alias": "eclSize"; "required": false; "isSignal": true; }; "counterLabel": { "alias": "counterLabel"; "required": false; "isSignal": true; }; "toggleId": { "alias": "toggleId"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; "isSignal": true; }; "selectedItems": { "alias": "selectedItems"; "required": false; "isSignal": true; }; "isDropdownExpanded": { "alias": "isDropdownExpanded"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, { "mainInputClick": "mainInputClick"; "mainInputKeydown": "mainInputKeydown"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectInputComponent, "div[eclMultiselectInput]", never, { "eclSize": { "alias": "eclSize"; "required": false; "isSignal": true; }; "counterLabel": { "alias": "counterLabel"; "required": false; "isSignal": true; }; "toggleId": { "alias": "toggleId"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; "isSignal": true; }; "selectedItemsLabels": { "alias": "selectedItemsLabels"; "required": false; "isSignal": true; }; "isDropdownExpanded": { "alias": "isDropdownExpanded"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, { "mainInputClick": "mainInputClick"; "mainInputKeydown": "mainInputKeydown"; }, never, never, true, never>;
 }
 
 /**
@@ -169,52 +167,47 @@ declare class EclMultiselectOptionDirective extends ECLBaseDirective {
      * Label displayed for the option.
      */
     readonly label: _angular_core.InputSignal<string>;
-    /**
-     * Emits whenever the option's state changes (used internally).
-     */
-    changes: Subject<unknown>;
     /**
      * Indicates that the option is disabled.
      */
-    get disabled(): boolean;
-    set disabled(value: BooleanInput);
-    private _disabled;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Indicates that the option is selected.
      */
-    get selected(): boolean;
-    set selected(value: boolean);
-    private _selected;
-    private elRef;
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Applies ECL checkbox styling class to the option.
      */
-    get cssClasses(): string;
+    protected get cssClasses(): string;
+    private readonly elRef;
     /**
      * Returns true if this directive is applied to an <optgroup> element.
      */
     isOptGroup(): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclMultiselectOptionDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EclMultiselectOptionDirective, "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["eclOptionItems"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EclMultiselectOptionDirective, "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, ["eclOptionItems"], never, true, never>;
 }
 
 /**
  * Component representing a single selectable option in the multiselect dropdown.
  */
-declare class EclMultiselectOptionComponent extends ECLBaseDirective implements EclMultiselectOption, OnChanges, OnDestroy, OnInit {
-    readonly eclCheckboxInput: _angular_core.Signal<ElementRef<any>>;
-    keyword: string;
-    set value(value: string);
-    get value(): string;
+declare class EclMultiselectOptionComponent extends ECLBaseDirective implements EclMultiselectOption, OnInit {
+    /**
+     * Value assigned to the option.
+     */
+    readonly value: _angular_core.InputSignal<string>;
     /**
      * Display label for the option.
      */
-    label: string;
-    changes: Subject<unknown>;
+    readonly label: _angular_core.InputSignal<string>;
     /**
      * Disables the option when true.
      */
-    disabled: boolean;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicates whether the option is selected.
+     */
+    readonly isChecked: _angular_core.ModelSignal<boolean>;
     /**
      * Emits when the option is clicked.
      */
@@ -223,17 +216,20 @@ declare class EclMultiselectOptionComponent extends ECLBaseDirective implements
      * Emits when a key is pressed while focused on the option.
      */
     readonly optionKeydown: _angular_core.OutputEmitterRef<EclMultiselectOptionKeydownEvent>;
-    protected display: string;
-    get cssClasses(): string;
     /**
-     * Indicates whether the option is selected.
+     * Reference to the checkbox input element.
+     */
+    protected readonly eclCheckboxInput: _angular_core.Signal<ElementRef<any>>;
+    /**
+     * Keyword used by the boldText pipe to highlight matching text.
+     */
+    protected keyword: string;
+    /**
+     * Controls the host element visibility (`display` style).
      */
-    get isChecked(): boolean;
-    set isChecked(value: boolean);
+    protected readonly display: _angular_core.WritableSignal<string>;
+    private readonly renderer;
     private _id;
-    private _checked;
-    private _value;
-    private renderer;
     /**
      * Returns the unique identifier for the option.
      */
@@ -242,17 +238,7 @@ declare class EclMultiselectOptionComponent extends ECLBaseDirective implements
      * Indicates whether the option is active (visible and not disabled).
      */
     get isActive(): boolean;
-    ngOnChanges(): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
-    /**
-     * Toggles the selected state and emits the optionClick event.
-     */
-    onOptionClick(): void;
-    /**
-     * Emits the optionKeydown event when a key is pressed.
-     */
-    onOptionKeydown(evt: KeyboardEvent): void;
     /**
      * Focuses the checkbox input.
      */
@@ -266,110 +252,121 @@ declare class EclMultiselectOptionComponent extends ECLBaseDirective implements
      */
     hide(): void;
     /**
-     * Sets the keyword for search highlighting.
+     * Sets the keyword used by the boldText pipe to highlight matching text.
      */
     highlightSearchText(keyword: string): void;
+    /**
+     * Applies ECL checkbox styling class to the option.
+     */
+    protected get cssClasses(): string;
+    /**
+     * Toggles the selected state and emits the optionClick event.
+     */
+    protected onOptionClick(): void;
+    /**
+     * Emits the optionKeydown event when a key is pressed.
+     */
+    protected onOptionKeydown(evt: KeyboardEvent): void;
     private createId;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclMultiselectOptionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectOptionComponent, "div[eclMultiselectOption]", never, { "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isChecked": { "alias": "isChecked"; "required": false; }; }, { "optionClick": "optionClick"; "optionKeydown": "optionKeydown"; }, never, never, true, [{ directive: typeof i1.EclCheckboxDirective; inputs: {}; outputs: {}; }]>;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectOptionComponent, "div[eclMultiselectOption]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "isChecked": { "alias": "isChecked"; "required": false; "isSignal": true; }; }, { "isChecked": "isCheckedChange"; "optionClick": "optionClick"; "optionKeydown": "optionKeydown"; }, never, never, true, [{ directive: typeof i1.EclCheckboxDirective; inputs: {}; outputs: {}; }]>;
 }
 
 /**
  * Component that renders a dropdown-style multiselect UI element.
  * Used internally by the `EclMultiselectComponent`.
  */
-declare class EclMultiselectDropdownComponent extends ECLBaseDirective implements OnInit, ControlValueAccessor, DoCheck, OnDestroy, AfterViewInit {
-    readonly searchInput: _angular_core.Signal<ElementRef<any>>;
-    readonly eclMultiselectInput: _angular_core.Signal<EclMultiselectInputComponent>;
-    readonly selectAllCheckbox: _angular_core.Signal<ElementRef<any>>;
-    readonly closeBtn: _angular_core.Signal<ElementRef<any>>;
-    readonly clearAllBtn: _angular_core.Signal<ElementRef<any>>;
-    multiOptionComponents: QueryList<EclMultiselectOptionComponent>;
+declare class EclMultiselectDropdownComponent extends ECLBaseDirective implements OnInit, ControlValueAccessor, DoCheck, OnDestroy {
     /**
      * Emits the list of selected values whenever the selection changes.
      */
-    eclChange: EventEmitter<string[]>;
-    /**
-     * Marks the component as visually invalid.
-     */
-    get isInvalid(): boolean | undefined;
-    set isInvalid(value: boolean | undefined);
+    readonly eclChange: _angular_core.OutputEmitterRef<string[]>;
     /**
-     * Adds the ECL base CSS class for multiselect dropdowns.
+     * 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.
      */
-    get cssClasses(): string;
+    readonly isInvalid: _angular_core.WritableSignal<boolean>;
     /**
      * Placeholder for the main multiselect input.
      */
-    mainInputPlaceholder: string;
+    readonly mainInputPlaceholder: _angular_core.WritableSignal<string>;
     /**
      * Placeholder for the search field input.
      */
-    readonly searchFieldPlaceholder: _angular_core.InputSignal<string>;
+    readonly searchFieldPlaceholder: _angular_core.WritableSignal<string>;
     /**
      * Size of the multiselect dropdown (e.g., 'm', 'l').
      */
-    eclSize: string;
+    readonly eclSize: _angular_core.WritableSignal<string>;
     /**
      * Disables the component when true.
+     * Set by the parent and by `ControlValueAccessor.setDisabledState`.
      */
-    get disabled(): boolean | undefined;
-    set disabled(value: boolean | undefined);
+    readonly disabled: _angular_core.WritableSignal<boolean>;
     /**
      * Optional ARIA description used for accessibility purposes.
      */
-    ariaDescribedby: string | undefined;
+    readonly ariaDescribedby: _angular_core.WritableSignal<string>;
     /**
      * Label displayed for the toggle button to assist screen readers.
      */
-    toggleLabel: string | undefined;
+    readonly toggleLabel: _angular_core.WritableSignal<string>;
     /**
      * Enables the search box in the dropdown interface.
      */
-    hasSearchBox: boolean;
+    readonly hasSearchBox: _angular_core.WritableSignal<boolean>;
     /**
      * Displays the "Select all" checkbox above the list of options.
      */
-    hasSelectAll: boolean;
+    readonly hasSelectAll: _angular_core.WritableSignal<boolean>;
     /**
      * When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
      */
-    isSubmitOnApply: _angular_core.WritableSignal<boolean>;
+    readonly isSubmitOnApply: _angular_core.WritableSignal<boolean>;
     /**
      * Label for the selections counter, read by screen readers.
      */
-    counterLabel: string;
+    readonly counterLabel: _angular_core.WritableSignal<string>;
     /**
      * Optional identifier used for the dropdown element.
      */
-    id: string;
+    readonly id: _angular_core.WritableSignal<string>;
     /**
-     * Indicates that the "no results found" message should be displayed.
+     * List of option directives currently rendered in the dropdown.
+     */
+    multiOptionDirectives: _angular_core.WritableSignal<EclMultiselectOptionDirective[]>;
+    protected readonly searchInput: _angular_core.Signal<ElementRef<any>>;
+    protected readonly eclMultiselectInput: _angular_core.Signal<EclMultiselectInputComponent>;
+    protected readonly selectAllCheckbox: _angular_core.Signal<ElementRef<any>>;
+    protected readonly closeBtn: _angular_core.Signal<ElementRef<any>>;
+    protected readonly clearAllBtn: _angular_core.Signal<ElementRef<any>>;
+    protected readonly multiOptionComponents: _angular_core.Signal<readonly EclMultiselectOptionComponent[]>;
+    /**
+     * Gets labels of currently selected options.
      */
-    isShowNoResultsFound: boolean;
+    protected selectedItemsLabels: _angular_core.Signal<string[]>;
     /**
-     * Controls the visibility of the multiselect dropdown.
+     * Controls the visibility of the multiselect toolbar.
+     * Always visible when isSubmitOnApply is true so the user can submit the form.
      */
-    isShowMultiselectDropdown: boolean;
+    protected isShowToolbar: _angular_core.Signal<boolean>;
     /**
-     * List of option directives currently rendered in the dropdown.
+     * Indicates that the "no results found" message should be displayed.
      */
-    multiOptionDirectives: _angular_core.WritableSignal<EclMultiselectOptionDirective[]>;
+    protected isShowNoResultsFound: boolean;
     /**
-     * Reactive form group managing internal form state.
+     * Controls the visibility of the multiselect dropdown.
      */
-    form: FormGroup;
+    protected isShowMultiselectDropdown: boolean;
     /**
      * Total number of options available in the dropdown list.
      */
-    optionsCount: number;
+    protected optionsCount: number;
     protected dropdownId: string;
     protected isSelectAllDisabled: boolean | null;
     protected selectAllId: string;
     protected toggleId: string;
-    private _disabled;
-    private _isInvalid;
     private _selectedItems;
     private destroy$;
     private isWriteValueCalled;
@@ -379,8 +376,6 @@ declare class EclMultiselectDropdownComponent extends ECLBaseDirective implement
     constructor();
     ngDoCheck(): void;
     ngOnInit(): void;
-    ngAfterViewInit(): void;
-    private applyOptionState;
     ngOnDestroy(): void;
     /**
      * Writes a new value to the component from the outside (e.g., form model).
@@ -402,57 +397,49 @@ declare class EclMultiselectDropdownComponent extends ECLBaseDirective implement
      * Required by ControlValueAccessor.
      */
     setDisabledState(isDisabled: boolean): void;
-    onEscapeKey(): void;
-    onKeyUp(event: MouseEvent): void;
-    /**
-     * Gets labels of currently selected options.
-     */
-    selectedItems: _angular_core.Signal<string[]>;
     /**
-     * Indicates if any options are currently selected.
-     */
-    isItemsSelected: _angular_core.Signal<boolean>;
-    /**
-     * Controls the visibility of the multiselect toolbar.
-     * Always visible when isSubmitOnApply is true so the user can submit the form.
+     * Adds the ECL base CSS class for multiselect dropdowns.
      */
-    isShowToolbar: _angular_core.Signal<boolean>;
-    initSelectedOptions(): void;
-    onClickClearAll(evt: Event): void;
-    onEnterClear(evt: Event): void;
-    onClickClose(evt: Event): void;
-    onArrowUpClose(evt: Event): void;
-    onArrowDownClose(evt: Event): void;
-    onTabClose(evt: Event): void;
-    onArrowUpClear(evt: Event): void;
-    onArrowDownClear(evt: Event): void;
-    onTabClear(evt: Event): void;
-    onEnterSearch(evt: Event): void;
-    onArrowDownSearch(evt: Event): void;
-    onArrowUpSearch(evt: Event): void;
-    onKeydownMainInput(evt: Event): void;
-    onClickMainInput(evt: EclMultiselectMainInputClickEvent): void;
-    onArrowDownSelectAll(evt: Event): void;
-    onArrowUpSelectAll(evt: Event): void;
-    onEnterSelectAll(evt: Event): void;
+    protected get cssClasses(): string;
+    protected onEscapeKey(): void;
+    protected onKeyUp(event: MouseEvent): void;
+    protected onClickClearAll(evt: Event): void;
+    protected onEnterClear(evt: Event): void;
+    protected onClickClose(evt: Event): void;
+    protected onArrowUpClose(evt: Event): void;
+    protected onArrowDownClose(evt: Event): void;
+    protected onTabClose(evt: Event): void;
+    protected onArrowUpClear(evt: Event): void;
+    protected onArrowDownClear(evt: Event): void;
+    protected onTabClear(evt: Event): void;
+    protected onEnterSearch(evt: Event): void;
+    protected onArrowDownSearch(evt: Event): void;
+    protected onArrowUpSearch(evt: Event): void;
+    protected onKeydownMainInput(evt: Event): void;
+    protected onClickMainInput(evt: EclMultiselectMainInputClickEvent): void;
+    protected onArrowDownSelectAll(evt: Event): void;
+    protected onArrowUpSelectAll(evt: Event): void;
+    protected onEnterSelectAll(evt: Event): void;
     /**
      * Handles search input, filters options, and updates their visibility.
      */
-    onSearch(input: EventTarget): void;
+    protected onSearch(input: EventTarget): void;
     /**
      * Toggles all visible options based on the "Select All" checkbox.
      */
-    onSelectAll(): void;
+    protected onSelectAll(): void;
     /**
      * Handles keyboard interaction on option items.
      * Supports arrow keys, tab, escape, and enter.
      */
-    onKeydownOption(evt: EclMultiselectOptionKeydownEvent): void;
+    protected onKeydownOption(evt: EclMultiselectOptionKeydownEvent): void;
     /**
      * Triggered when a single option is clicked/selected.
      * Updates selected items, emits changes.
      */
-    onOptionSelected(evt: EclMultiselectOptionClickEvent): void;
+    protected onOptionSelected(evt: EclMultiselectOptionClickEvent): void;
+    private applyOptionState;
+    private initSelectedOptions;
     private selectAllActiveOptions;
     private unselectAllActiveOptions;
     private propagateChange;
@@ -476,9 +463,7 @@ declare class EclMultiselectDropdownComponent extends ECLBaseDirective implement
     private getToggleId;
     private modifyParentLabelForAttribute;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclMultiselectDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectDropdownComponent, "div[eclMultiselectDropdown]", never, { "isInvalid": { "alias": "isInvalid"; "required": false; }; "mainInputPlaceholder": { "alias": "mainInputPlaceholder"; "required": false; }; "searchFieldPlaceholder": { "alias": "searchFieldPlaceholder"; "required": false; "isSignal": true; }; "eclSize": { "alias": "eclSize"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "eclChange": "eclChange"; }, never, never, true, never>;
-    static ngAcceptInputType_isInvalid: unknown;
-    static ngAcceptInputType_disabled: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectDropdownComponent, "div[eclMultiselectDropdown]", never, {}, { "eclChange": "eclChange"; }, never, never, true, never>;
 }
 
 /**
@@ -505,7 +490,6 @@ declare class EclMultiselectOptgroupComponent extends ECLBaseDirective {
  * Replaces the original element with a custom dropdown rendered dynamically.
  */
 declare class EclMultiselectComponent extends ECLBaseDirective implements DoCheck, OnInit, OnDestroy {
-    injector: Injector;
     /**
      * List of option directives projected into the component.
      */
@@ -525,17 +509,11 @@ declare class EclMultiselectComponent extends ECLBaseDirective implements DoChec
     /**
      * Marks the multiselect as invalid.
      */
-    get isInvalid(): boolean | undefined;
-    set isInvalid(value: boolean | undefined);
+    readonly isInvalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Disables the multiselect component when set to true.
      */
-    set disabled(value: BooleanInput);
-    get disabled(): boolean | undefined;
-    /**
-     * CSS classes applied to the host element.
-     */
-    get cssClasses(): string;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Emits an array of selected option values when the selection changes.
      */
@@ -543,20 +521,19 @@ declare class EclMultiselectComponent extends ECLBaseDirective implements DoChec
     /**
      * Enables the search box within the dropdown.
      */
-    set hasSearchBox(value: string);
+    readonly hasSearchBox: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Displays the "Select all" option in the dropdown.
      */
-    set hasSelectAll(value: string);
+    readonly hasSelectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * When true, the Apply button in the dropdown acts as a submit button (type="submit").
      */
-    set isSubmitOnApply(value: string);
+    readonly isSubmitOnApply: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Placeholder text to show in the multiselect input field when no options are selected.
      */
-    set eclPlaceholder(value: string);
-    get eclPlaceholder(): string;
+    readonly eclPlaceholder: _angular_core.InputSignal<string>;
     /**
      * Multiselect size: 's' | 'm' | 'l'. Default is 'm'.
      */
@@ -565,16 +542,15 @@ declare class EclMultiselectComponent extends ECLBaseDirective implements DoChec
      * Label for the selections counter, read by screen readers.
      * Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
      */
-    set counterLabel(value: string);
+    readonly counterLabel: _angular_core.InputSignal<string>;
     private readonly SELECT_CONTAINER_CLASS;
     private readonly SELECT_CONTAINER_HIDDEN_CLASS;
-    private _disabled;
-    private _hasSelectAll;
-    private _hasSearchBox;
-    private _isSubmitOnApply;
-    private _counterLabel;
-    private _isInvalid;
-    private _eclPlaceholder;
+    private readonly injector;
+    private readonly el;
+    private readonly viewContainerRef;
+    private readonly differs;
+    private readonly renderer;
+    private readonly platformId;
     private differ;
     private multiselectComponent;
     private hostEl;
@@ -582,15 +558,14 @@ declare class EclMultiselectComponent extends ECLBaseDirective implements DoChec
     private hostWrapperEl;
     private multiselectComponentHtml;
     private destroy$;
-    private el;
-    private viewContainerRef;
-    private differs;
-    private renderer;
-    private platformId;
     constructor();
     ngDoCheck(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /**
+     * CSS classes applied to the host element.
+     */
+    protected get cssClasses(): string;
     private hideOriginalSelectComponent;
     private createHostWrapperContainer;
     private getHostElement;
@@ -599,11 +574,7 @@ declare class EclMultiselectComponent extends ECLBaseDirective implements DoChec
     private setAriaLabelledBy;
     private attachOptions;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EclMultiselectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectComponent, "select[eclMultiselect]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hasSearchBox": { "alias": "hasSearchBox"; "required": false; }; "hasSelectAll": { "alias": "hasSelectAll"; "required": false; }; "isSubmitOnApply": { "alias": "isSubmitOnApply"; "required": false; }; "eclPlaceholder": { "alias": "eclPlaceholder"; "required": false; }; "eclSize": { "alias": "eclSize"; "required": false; "isSignal": true; }; "counterLabel": { "alias": "counterLabel"; "required": false; }; }, { "eclChange": "eclChange"; }, ["eclOptionItems"], ["*"], true, never>;
-    static ngAcceptInputType_isInvalid: unknown;
-    static ngAcceptInputType_hasSearchBox: unknown;
-    static ngAcceptInputType_hasSelectAll: unknown;
-    static ngAcceptInputType_isSubmitOnApply: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EclMultiselectComponent, "select[eclMultiselect]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "toggleLabel": { "alias": "toggleLabel"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasSearchBox": { "alias": "hasSearchBox"; "required": false; "isSignal": true; }; "hasSelectAll": { "alias": "hasSelectAll"; "required": false; "isSignal": true; }; "isSubmitOnApply": { "alias": "isSubmitOnApply"; "required": false; "isSignal": true; }; "eclPlaceholder": { "alias": "eclPlaceholder"; "required": false; "isSignal": true; }; "eclSize": { "alias": "eclSize"; "required": false; "isSignal": true; }; "counterLabel": { "alias": "counterLabel"; "required": false; "isSignal": true; }; }, { "eclChange": "eclChange"; }, ["eclOptionItems"], ["*"], true, never>;
 }
 
 declare const EUI_ECL_MULTISELECT: readonly [typeof EclMultiselectComponent, typeof EclMultiselectOptionDirective, typeof EclMultiselectOptionComponent, typeof EclMultiselectInputComponent, typeof EclMultiselectDropdownComponent, typeof EclMultiselectOptgroupComponent, typeof BoldTextPipe];