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

package/fesm2022/eui-ecl-components-ecl-multiselect.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, signal, booleanAttribute, computed, viewChild, output, inject, Renderer2, HostBinding, Component, Input, ElementRef, EventEmitter, forwardRef, Output, ViewChildren, contentChildren, Directive, Injector, ViewContainerRef, IterableDiffers, PLATFORM_ID, afterNextRender, ViewEncapsulation } from '@angular/core';
+import { Pipe, input, booleanAttribute, output, signal, viewChild, computed, inject, Renderer2, Component, model, HostBinding, ElementRef, viewChildren, effect, untracked, forwardRef, contentChildren, Directive, Injector, ViewContainerRef, IterableDiffers, PLATFORM_ID, afterNextRender, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject } from 'rxjs';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ECLBaseDirective, EclThemeService, KeyCode } from '@eui/ecl/core';
 import * as i1 from '@eui/ecl/components/ecl-button';
@@ -10,7 +10,6 @@ import * as i2 from '@eui/ecl/components/ecl-icon';
 import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 import * as i1$1 from '@eui/ecl/components/ecl-checkbox';
 import { EclCheckboxDirective, EUI_ECL_CHECKBOX } from '@eui/ecl/components/ecl-checkbox';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isPlatformBrowser } from '@angular/common';
 
 class BoldTextPipe {
@@ -77,11 +76,6 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
          */
         this.eclSize = input('m', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclSize" }] : /* istanbul ignore next */ []));
-        /**
-         * Unique ID for the counter element.
-         */
-        this.counterId = signal(crypto.randomUUID(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "counterId" }] : /* istanbul ignore next */ []));
         /**
          * Label for the selections counter, read by screen readers.
          */
@@ -113,8 +107,8 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
         /**
          * Array of currently selected item labels.
          */
-        this.selectedItems = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        this.selectedItemsLabels = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItemsLabels" }] : /* istanbul ignore next */ []));
         /**
          * Indicates that the dropdown is currently expanded.
          */
@@ -130,54 +124,59 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
         this.ariaDescribedby = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
         /**
-         * Computed ARIA describedby combining the input value with the counter ID.
+         * Event emitted when the input is clicked.
          */
-        this.ariaDescribedbyFull = computed(() => {
-            const describedby = this.ariaDescribedby();
-            const counter = this.counterId();
-            return [describedby, counter].filter(Boolean).join(' ') || undefined;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaDescribedbyFull" }] : /* istanbul ignore next */ []));
+        this.mainInputClick = output();
+        /**
+         * Event emitted when a key is pressed on the input.
+         */
+        this.mainInputKeydown = output();
+        /**
+         * Unique ID for the counter element.
+         */
+        this.counterId = signal(crypto.randomUUID(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "counterId" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the internal input element.
          */
         this.inputMultiselect = viewChild('inputMultiselect', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputMultiselect" }] : /* istanbul ignore next */ []));
         /**
-         * Event emitted when the input is clicked.
-         */
-        this.mainInputClick = output();
-        /**
-         * Event emitted when a key is pressed on the input.
+         * Computed ARIA describedby combining the input value with the counter ID.
          */
-        this.mainInputKeydown = output();
-        this.ICON_SIZE_FOR_EC_THEME_ON = 'xs';
-        this.ICON_SIZE_FOR_EU_THEME_ON = 's';
-        this.eclThemeService = inject(EclThemeService);
-        this.renderer = inject(Renderer2);
+        this.ariaDescribedbyFull = computed(() => {
+            const describedby = this.ariaDescribedby();
+            const counter = this.counterId();
+            return [describedby, counter].filter(Boolean).join(' ') || undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDescribedbyFull" }] : /* istanbul ignore next */ []));
         /**
          * Returns the label text shown inside the button.
          */
         this.buttonText = computed(() => {
-            const items = this.selectedItems();
+            const items = this.selectedItemsLabels();
             return items.length === 0 ? this.inputPlaceholder() : items.join(',');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "buttonText" }] : /* istanbul ignore next */ []));
         /**
          * Returns the count of selected items.
          */
-        this.selectedItemsCount = computed(() => this.selectedItems().length, /* @ts-ignore */
+        this.selectedItemsCount = computed(() => this.selectedItemsLabels().length, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedItemsCount" }] : /* istanbul ignore next */ []));
         /**
          * Displays a count badge when items are selected.
          */
-        this.isShowCounter = computed(() => this.selectedItems().length > 0, /* @ts-ignore */
+        this.isShowCounter = computed(() => this.selectedItemsLabels().length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowCounter" }] : /* istanbul ignore next */ []));
         /**
          * Indicates that the dropdown is expanded (active).
          */
         this.isActive = computed(() => this.isDropdownExpanded(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+        this.ICON_SIZE_FOR_EC_THEME_ON = 'xs';
+        this.ICON_SIZE_FOR_EU_THEME_ON = 's';
+        this.eclThemeService = inject(EclThemeService);
+        this.renderer = inject(Renderer2);
     }
     /**
      * CSS classes for the component, including size and inherited classes.
@@ -199,6 +198,12 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
             return this.ICON_SIZE_FOR_EU_THEME_ON;
         }
     }
+    /**
+     * Focuses the multiselect input element.
+     */
+    onFocus() {
+        this.renderer.selectRootElement(this.inputMultiselect().nativeElement, true).focus();
+    }
     /**
      * Handles click on the input container. Emits custom event with original DOM event.
      */
@@ -223,25 +228,17 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
             }
         }
     }
-    /**
-     * Focuses the multiselect input element.
-     */
-    onFocus() {
-        this.renderer.selectRootElement(this.inputMultiselect().nativeElement, true).focus();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectInputComponent, isStandalone: true, selector: "div[eclMultiselectInput]", inputs: { eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleId: { classPropertyName: "toggleId", publicName: "toggleId", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: false, transformFunction: null }, isDropdownExpanded: { classPropertyName: "isDropdownExpanded", publicName: "isDropdownExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "isDisabled()", "class.ecl-select__container--invalid": "isInvalid()", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter()\"\n    class=\"ecl-select-multiple-selections-counter\" [id]=\"counterId()\">\n    <div class=\"ecl-select-multiple-selections-counter__label\">{{ counterLabel() | translate }}</div>\n    <span>{{ selectedItemsCount() }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    [class.ecl-select--active]=\"isActive()\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId()\"\n    [attr.aria-expanded]=\"isDropdownExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.disabled]=\"isDisabled() ? true : undefined\"\n    [attr.aria-describedby]=\"ariaDescribedbyFull()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText() }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"tertiary\" tabindex=\"-1\">\n    <span eclButtonLabel>\n        {{ toggleLabel() || 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}\n    </span>\n        <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"></ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectInputComponent, isStandalone: true, selector: "div[eclMultiselectInput]", inputs: { eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleId: { classPropertyName: "toggleId", publicName: "toggleId", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabels: { classPropertyName: "selectedItemsLabels", publicName: "selectedItemsLabels", isSignal: true, isRequired: false, transformFunction: null }, isDropdownExpanded: { classPropertyName: "isDropdownExpanded", publicName: "isDropdownExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-select__container--disabled": "isDisabled()", "class.ecl-select__container--invalid": "isInvalid()" } }, viewQueries: [{ propertyName: "inputMultiselect", first: true, predicate: ["inputMultiselect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter()\"\n    class=\"ecl-select-multiple-selections-counter\" [id]=\"counterId()\">\n    <div class=\"ecl-select-multiple-selections-counter__label\">{{ counterLabel() | translate }}</div>\n    <span>{{ selectedItemsCount() }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    [class.ecl-select--active]=\"isActive()\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId()\"\n    [attr.aria-expanded]=\"isDropdownExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.disabled]=\"isDisabled() ? true : undefined\"\n    [attr.aria-describedby]=\"ariaDescribedbyFull()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText() }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"tertiary\" tabindex=\"-1\">\n    <span eclButtonLabel>\n        {{ toggleLabel() || 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}\n    </span>\n        <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"></ecl-icon>\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclMultiselectInput]', imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON], host: {
+                        '[class]': 'cssClasses',
                         '[class.ecl-select__container--disabled]': 'isDisabled()',
                         '[class.ecl-select__container--invalid]': 'isInvalid()',
                     }, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter()\"\n    class=\"ecl-select-multiple-selections-counter\" [id]=\"counterId()\">\n    <div class=\"ecl-select-multiple-selections-counter__label\">{{ counterLabel() | translate }}</div>\n    <span>{{ selectedItemsCount() }}</span>\n</div>\n<button\n    class=\"ecl-select ecl-select__multiple-toggle\"\n    [class.ecl-select--active]=\"isActive()\"\n    #inputMultiselect\n    type=\"button\"\n    [id]=\"toggleId()\"\n    [attr.aria-expanded]=\"isDropdownExpanded()\"\n    [attr.aria-controls]=\"ariaControls()\"\n    [attr.disabled]=\"isDisabled() ? true : undefined\"\n    [attr.aria-describedby]=\"ariaDescribedbyFull()\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText() }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"tertiary\" tabindex=\"-1\">\n    <span eclButtonLabel>\n        {{ toggleLabel() || 'ecl.multiselect.TOGGLE.DROPDOWN' | translate }}\n    </span>\n        <ecl-icon icon=\"corner-arrow\" [size]=\"sizeIcon\" transform=\"rotate-180\"></ecl-icon>\n    </button>\n</div>\n" }]
-        }], propDecorators: { eclSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclSize", required: false }] }], counterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterLabel", required: false }] }], toggleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleId", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }], isDropdownExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDropdownExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], inputMultiselect: [{ type: i0.ViewChild, args: ['inputMultiselect', { isSignal: true }] }], mainInputClick: [{ type: i0.Output, args: ["mainInputClick"] }], mainInputKeydown: [{ type: i0.Output, args: ["mainInputKeydown"] }] } });
+        }], propDecorators: { eclSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclSize", required: false }] }], counterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterLabel", required: false }] }], toggleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleId", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], selectedItemsLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabels", required: false }] }], isDropdownExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDropdownExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], mainInputClick: [{ type: i0.Output, args: ["mainInputClick"] }], mainInputKeydown: [{ type: i0.Output, args: ["mainInputKeydown"] }], inputMultiselect: [{ type: i0.ViewChild, args: ['inputMultiselect', { isSignal: true }] }] } });
 
 /**
  * Component representing a single selectable option in the multiselect dropdown.
@@ -249,14 +246,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class EclMultiselectOptionComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.eclCheckboxInput = viewChild('checkboxInput', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclCheckboxInput" }] : /* istanbul ignore next */ []));
-        this.keyword = '';
-        this.changes = new Subject();
+        /**
+         * Value assigned to the option.
+         */
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Display label for the option.
+         */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * Disables the option when true.
          */
-        this.disabled = false;
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Indicates whether the option is selected.
+         */
+        this.isChecked = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
         /**
          * Emits when the option is clicked.
          */
@@ -265,30 +273,22 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
          * Emits when a key is pressed while focused on the option.
          */
         this.optionKeydown = output();
-        this.display = 'flex';
-        this._id = '';
-        this._checked = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
-        this._value = '';
+        /**
+         * Reference to the checkbox input element.
+         */
+        this.eclCheckboxInput = viewChild('checkboxInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclCheckboxInput" }] : /* istanbul ignore next */ []));
+        /**
+         * Keyword used by the boldText pipe to highlight matching text.
+         */
+        this.keyword = '';
+        /**
+         * Controls the host element visibility (`display` style).
+         */
+        this.display = signal('flex', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
         this.renderer = inject(Renderer2);
-    }
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    get cssClasses() {
-        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
-    }
-    /**
-     * Indicates whether the option is selected.
-     */
-    get isChecked() {
-        return this._checked();
-    }
-    set isChecked(value) {
-        this._checked.set(value);
+        this._id = '';
     }
     /**
      * Returns the unique identifier for the option.
@@ -300,30 +300,11 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
      * Indicates whether the option is active (visible and not disabled).
      */
     get isActive() {
-        return this.display === 'flex' && !this.disabled;
-    }
-    ngOnChanges() {
-        this.changes.next(this.label);
+        return this.display() === 'flex' && !this.disabled();
     }
     ngOnInit() {
         this._id = this.createId();
     }
-    ngOnDestroy() {
-        this.changes.complete();
-    }
-    /**
-     * Toggles the selected state and emits the optionClick event.
-     */
-    onOptionClick() {
-        this.isChecked = !this.isChecked;
-        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));
-    }
-    /**
-     * Emits the optionKeydown event when a key is pressed.
-     */
-    onOptionKeydown(evt) {
-        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
-    }
     /**
      * Focuses the checkbox input.
      */
@@ -334,53 +315,54 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
      * Makes the option visible.
      */
     show() {
-        this.display = 'flex';
+        this.display.set('flex');
     }
     /**
      * Hides the option from view.
      */
     hide() {
-        this.display = 'none';
+        this.display.set('none');
     }
     /**
-     * Sets the keyword for search highlighting.
+     * Sets the keyword used by the boldText pipe to highlight matching text.
      */
     highlightSearchText(keyword) {
         this.keyword = keyword;
-        const re = new RegExp(keyword, 'gi');
-        const res = this.label.replace(re, '<b>$&</b>');
+    }
+    /**
+     * Applies ECL checkbox styling class to the option.
+     */
+    get cssClasses() {
+        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
+    }
+    /**
+     * Toggles the selected state and emits the optionClick event.
+     */
+    onOptionClick() {
+        this.isChecked.set(!this.isChecked());
+        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));
+    }
+    /**
+     * Emits the optionKeydown event when a key is pressed.
+     */
+    onOptionKeydown(evt) {
+        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
     }
     createId() {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: ["disabled", "disabled", booleanAttribute], isChecked: "isChecked" }, outputs: { optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class.ecl-checkbox--disabled": "this.disabled", "attr.disabled": "this.disabled", "style.display": "this.display", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked\"\n    [disabled]=\"disabled\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isChecked: "isCheckedChange", optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-checkbox--disabled": "disabled()", "attr.disabled": "disabled() || null", "style.display": "display()" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclMultiselectOption]', imports: [BoldTextPipe, ...EUI_ECL_CHECKBOX], hostDirectives: [EclCheckboxDirective], template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked\"\n    [disabled]=\"disabled\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label | boldText: keyword\"></span></label>\n" }]
-        }], propDecorators: { eclCheckboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.ecl-checkbox--disabled']
-            }, {
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], optionClick: [{ type: i0.Output, args: ["optionClick"] }], optionKeydown: [{ type: i0.Output, args: ["optionKeydown"] }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], isChecked: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'div[eclMultiselectOption]', imports: [BoldTextPipe, ...EUI_ECL_CHECKBOX], hostDirectives: [EclCheckboxDirective], host: {
+                        '[class]': 'cssClasses',
+                        '[class.ecl-checkbox--disabled]': 'disabled()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[style.display]': 'display()',
+                    }, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }, { type: i0.Output, args: ["isCheckedChange"] }], optionClick: [{ type: i0.Output, args: ["optionClick"] }], optionKeydown: [{ type: i0.Output, args: ["optionKeydown"] }], eclCheckboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }] } });
 
 /**
  * Component representing an option group (fieldset) in a multiselect component.
@@ -417,73 +399,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Used internally by the `EclMultiselectComponent`.
  */
 class EclMultiselectDropdownComponent extends ECLBaseDirective {
-    /**
-     * Marks the component as visually invalid.
-     */
-    get isInvalid() {
-        return this._isInvalid;
-    }
-    set isInvalid(value) {
-        this._isInvalid = value;
-    }
-    /**
-     * Adds the ECL base CSS class for multiselect dropdowns.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-select__multiple')].join(' ').trim();
-    }
-    /**
-     * Disables the component when true.
-     */
-    get disabled() {
-        return this._disabled || undefined;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
     constructor() {
         super();
-        this.searchInput = viewChild('searchInput', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
-        this.eclMultiselectInput = viewChild('eclMultiselectInput', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclMultiselectInput" }] : /* istanbul ignore next */ []));
-        this.selectAllCheckbox = viewChild('selectAllCheckbox', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectAllCheckbox" }] : /* istanbul ignore next */ []));
-        this.closeBtn = viewChild('closeBtn', { ...(ngDevMode ? { debugName: "closeBtn" } : /* istanbul ignore next */ {}), read: ElementRef });
-        this.clearAllBtn = viewChild('clearAllBtn', { ...(ngDevMode ? { debugName: "clearAllBtn" } : /* istanbul ignore next */ {}), read: ElementRef });
         /**
          * Emits the list of selected values whenever the selection changes.
          */
-        this.eclChange = new EventEmitter();
+        this.eclChange = output();
+        /**
+         * 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.
+         */
+        this.isInvalid = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         /**
          * Placeholder for the main multiselect input.
          */
-        this.mainInputPlaceholder = 'Select an item';
+        this.mainInputPlaceholder = signal('Select an item', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mainInputPlaceholder" }] : /* istanbul ignore next */ []));
         /**
          * Placeholder for the search field input.
          */
-        this.searchFieldPlaceholder = input('Enter filter keyword', /* @ts-ignore */
+        this.searchFieldPlaceholder = signal('Enter filter keyword', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchFieldPlaceholder" }] : /* istanbul ignore next */ []));
         /**
          * Size of the multiselect dropdown (e.g., 'm', 'l').
          */
-        this.eclSize = 'm';
+        this.eclSize = signal('m', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Disables the component when true.
+         * Set by the parent and by `ControlValueAccessor.setDisabledState`.
+         */
+        this.disabled = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * Optional ARIA description used for accessibility purposes.
          */
-        this.ariaDescribedby = undefined;
+        this.ariaDescribedby = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
         /**
          * Label displayed for the toggle button to assist screen readers.
          */
-        this.toggleLabel = undefined;
+        this.toggleLabel = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
         /**
          * Enables the search box in the dropdown interface.
          */
-        this.hasSearchBox = true;
+        this.hasSearchBox = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSearchBox" }] : /* istanbul ignore next */ []));
         /**
          * Displays the "Select all" checkbox above the list of options.
          */
-        this.hasSelectAll = true;
+        this.hasSelectAll = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelectAll" }] : /* istanbul ignore next */ []));
         /**
          * When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
          */
@@ -492,11 +461,39 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         /**
          * Label for the selections counter, read by screen readers.
          */
-        this.counterLabel = 'ecl.multiselect.SELECTED';
+        this.counterLabel = signal('ecl.multiselect.SELECTED', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "counterLabel" }] : /* istanbul ignore next */ []));
         /**
          * Optional identifier used for the dropdown element.
          */
-        this.id = '';
+        this.id = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * List of option directives currently rendered in the dropdown.
+         */
+        this.multiOptionDirectives = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiOptionDirectives" }] : /* istanbul ignore next */ []));
+        this.searchInput = viewChild('searchInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+        this.eclMultiselectInput = viewChild('eclMultiselectInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclMultiselectInput" }] : /* istanbul ignore next */ []));
+        this.selectAllCheckbox = viewChild('selectAllCheckbox', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectAllCheckbox" }] : /* istanbul ignore next */ []));
+        this.closeBtn = viewChild('closeBtn', { ...(ngDevMode ? { debugName: "closeBtn" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.clearAllBtn = viewChild('clearAllBtn', { ...(ngDevMode ? { debugName: "clearAllBtn" } : /* istanbul ignore next */ {}), read: ElementRef });
+        this.multiOptionComponents = viewChildren(EclMultiselectOptionComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiOptionComponents" }] : /* istanbul ignore next */ []));
+        /**
+         * Gets labels of currently selected options.
+         */
+        this.selectedItemsLabels = computed(() => this._selectedItems().map((item) => item.label()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItemsLabels" }] : /* istanbul ignore next */ []));
+        /**
+         * Controls the visibility of the multiselect toolbar.
+         * Always visible when isSubmitOnApply is true so the user can submit the form.
+         */
+        this.isShowToolbar = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isShowToolbar" }] : /* istanbul ignore next */ []));
         /**
          * Indicates that the "no results found" message should be displayed.
          */
@@ -505,11 +502,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
          * Controls the visibility of the multiselect dropdown.
          */
         this.isShowMultiselectDropdown = false;
-        /**
-         * List of option directives currently rendered in the dropdown.
-         */
-        this.multiOptionDirectives = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "multiOptionDirectives" }] : /* istanbul ignore next */ []));
         /**
          * Total number of options available in the dropdown list.
          */
@@ -518,8 +510,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.isSelectAllDisabled = null;
         this.selectAllId = '';
         this.toggleId = '';
-        this._disabled = false;
-        this._isInvalid = false;
         this._selectedItems = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
         this.destroy$ = new Subject();
@@ -527,22 +517,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.values = [];
         this.elRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        /**
-         * Gets labels of currently selected options.
-         */
-        this.selectedItems = computed(() => this._selectedItems().map((item) => item.label), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
-        /**
-         * Indicates if any options are currently selected.
-         */
-        this.isItemsSelected = computed(() => this._selectedItems().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isItemsSelected" }] : /* istanbul ignore next */ []));
-        /**
-         * Controls the visibility of the multiselect toolbar.
-         * Always visible when isSubmitOnApply is true so the user can submit the form.
-         */
-        this.isShowToolbar = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isShowToolbar" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.propagateChange = (_) => {
             /* empty */
@@ -550,6 +524,19 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.propagateTouched = () => {
             /* empty */
         };
+        // Re-apply the selection state whenever the rendered set of option components
+        // changes. This replaces the previous QueryList.changes subscription: the option
+        // components arrive asynchronously (the parent publishes the option directives via
+        // a setTimeout, then the @for renders them), and their arrival does not always emit
+        // a change event. Only the identity of the option list is tracked here; the option
+        // state reads/writes inside applyOptionState run untracked so toggling an option
+        // does not re-trigger this effect.
+        effect(() => {
+            const options = this.multiOptionComponents();
+            if (options.length > 0) {
+                untracked(() => this.applyOptionState());
+            }
+        });
     }
     ngDoCheck() {
         this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;
@@ -562,27 +549,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.modifyParentLabelForAttribute();
         });
     }
-    ngAfterViewInit() {
-        // Apply the current option state once, in case the option components are already
-        // present when this hook runs (their arrival does not always emit a changes event).
-        if (this.multiOptionComponents.length > 0) {
-            this.applyOptionState();
-        }
-        this.multiOptionComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.applyOptionState();
-        });
-    }
-    applyOptionState() {
-        if (this.isWriteValueCalled) {
-            this.resetComponent();
-            this.writeValues(this.values);
-            this.isWriteValueCalled = false;
-        }
-        else {
-            this.initSelectedOptions();
-        }
-        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;
-    }
     ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
@@ -593,7 +559,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     writeValue(values) {
-        if (this.multiOptionComponents && this.multiOptionComponents.length > 0) {
+        if (this.multiOptionComponents() && this.multiOptionComponents().length > 0) {
             this.resetComponent();
             this.writeValues(values);
         }
@@ -623,7 +589,13 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
      * Required by ControlValueAccessor.
      */
     setDisabledState(isDisabled) {
-        this._disabled = isDisabled;
+        this.disabled.set(isDisabled);
+    }
+    /**
+     * Adds the ECL base CSS class for multiselect dropdowns.
+     */
+    get cssClasses() {
+        return [super.getCssClasses('ecl-select__multiple')].join(' ').trim();
     }
     onEscapeKey() {
         this.hideMultiselectDropdown();
@@ -634,15 +606,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.hideMultiselectDropdown();
         }
     }
-    initSelectedOptions() {
-        const items = [];
-        this.multiOptionComponents
-            .filter((elem) => elem.isChecked)
-            .forEach((item) => {
-            items.push(item);
-        });
-        this._selectedItems.set(items);
-    }
     onClickClearAll(evt) {
         evt.stopPropagation();
         this.unselectAllActiveOptions();
@@ -695,7 +658,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     onArrowDownSearch(evt) {
         evt.preventDefault();
         const currentOptions = this.getActiveOptions();
-        if (this.hasSelectAll) {
+        if (this.hasSelectAll()) {
             this.renderer.selectRootElement(this.selectAllCheckbox()?.nativeElement, true).focus();
         }
         else {
@@ -710,7 +673,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     onKeydownMainInput(evt) {
         evt.preventDefault();
         this.showMultiselectDropdown();
-        if (this.hasSearchBox) {
+        if (this.hasSearchBox()) {
             setTimeout(() => this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus());
         }
         else {
@@ -730,7 +693,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     onArrowUpSelectAll(evt) {
         evt.preventDefault();
-        if (this.hasSearchBox) {
+        if (this.hasSearchBox()) {
             this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();
         }
         else {
@@ -750,14 +713,14 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         if (keyword === '') {
             this.enableSelectAll();
             isMatchFound = true;
-            this.multiOptionComponents.forEach((item) => {
+            this.multiOptionComponents().forEach((item) => {
                 item.highlightSearchText('');
                 item.show();
             });
         }
         else {
-            this.multiOptionComponents.forEach((item) => {
-                if (item.label.toLowerCase().indexOf(keyword.toLowerCase()) < 0) {
+            this.multiOptionComponents().forEach((item) => {
+                if (item.label().toLowerCase().indexOf(keyword.toLowerCase()) < 0) {
                     item.hide();
                 }
                 else {
@@ -786,8 +749,8 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.unselectAllActiveOptions();
         }
         this.propagateTouched();
-        this.eclChange.emit(this._selectedItems().map((item) => item.value));
-        this.propagateChange(this._selectedItems().map((item) => item.value));
+        this.eclChange.emit(this._selectedItems().map((item) => item.value()));
+        this.propagateChange(this._selectedItems().map((item) => item.value()));
     }
     /**
      * Handles keyboard interaction on option items.
@@ -828,21 +791,41 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);
         }
         const currOption = evt.multiselectOption;
-        if (currOption.isChecked) {
+        if (currOption.isChecked()) {
             this._selectedItems.update((items) => [...items, currOption]);
         }
         else {
             this._selectedItems.update((items) => items.filter((item) => item !== currOption));
         }
-        this.propagateChange(this._selectedItems().map((item) => item.value));
+        this.propagateChange(this._selectedItems().map((item) => item.value()));
         this.propagateTouched();
-        this.eclChange.emit(this._selectedItems().map((item) => item.value));
+        this.eclChange.emit(this._selectedItems().map((item) => item.value()));
+    }
+    applyOptionState() {
+        if (this.isWriteValueCalled) {
+            this.resetComponent();
+            this.writeValues(this.values);
+            this.isWriteValueCalled = false;
+        }
+        else {
+            this.initSelectedOptions();
+        }
+        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;
+    }
+    initSelectedOptions() {
+        const items = [];
+        this.multiOptionComponents()
+            .filter((elem) => elem.isChecked())
+            .forEach((item) => {
+            items.push(item);
+        });
+        this._selectedItems.set(items);
     }
     selectAllActiveOptions() {
         const newItems = [...this._selectedItems()];
         this.getActiveOptions().forEach((item) => {
-            if (!item.isChecked) {
-                item.isChecked = true;
+            if (!item.isChecked()) {
+                item.isChecked.set(true);
                 newItems.push(item);
             }
         });
@@ -855,7 +838,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
         this._selectedItems.set([]);
         this.getAvailableOptions().forEach((item) => {
-            item.isChecked = false;
+            item.isChecked.set(false);
         });
     }
     showMultiselectDropdown() {
@@ -877,8 +860,8 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.isShowNoResultsFound = false;
     }
     resetComponent() {
-        this.multiOptionComponents.forEach((item) => {
-            item.isChecked = false;
+        this.multiOptionComponents().forEach((item) => {
+            item.isChecked.set(false);
         });
         const selectAllCheckbox = this.selectAllCheckbox();
         if (selectAllCheckbox) {
@@ -889,11 +872,11 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     writeValues(values) {
         if (values) {
             const newItems = [...this._selectedItems()];
-            if (this.multiOptionComponents && this.multiOptionComponents.length > 0) {
-                this.multiOptionComponents
-                    .filter((item) => values.includes(item.value) && !item.disabled)
+            if (this.multiOptionComponents() && this.multiOptionComponents().length > 0) {
+                this.multiOptionComponents()
+                    .filter((item) => values.includes(item.value()) && !item.disabled())
                     .forEach((el) => {
-                    el.isChecked = true;
+                    el.isChecked.set(true);
                     newItems.push(el);
                 });
             }
@@ -924,8 +907,8 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
             const prevSiblingCheckbox = this.getActiveOptions()[index - 1];
             prevSiblingCheckbox.onFocus();
         }
-        else if (!this.hasSelectAll || selectAllCheckbox.nativeElement.disabled) {
-            if (this.hasSearchBox) {
+        else if (!this.hasSelectAll() || selectAllCheckbox.nativeElement.disabled) {
+            if (this.hasSearchBox()) {
                 this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();
             }
             else {
@@ -937,10 +920,10 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
     }
     getActiveOptions() {
-        return this.multiOptionComponents ? this.multiOptionComponents.filter((item) => item.isActive) : [];
+        return this.multiOptionComponents() ? this.multiOptionComponents().filter((item) => item.isActive) : [];
     }
     getAvailableOptions() {
-        return this.multiOptionComponents ? this.multiOptionComponents.filter((item) => !item.disabled) : [];
+        return this.multiOptionComponents() ? this.multiOptionComponents().filter((item) => !item.disabled()) : [];
     }
     getOptionIndexByIdFromActiveOptions(id) {
         return this.getActiveOptions().findIndex((option) => option.id === id);
@@ -949,10 +932,10 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         return crypto.randomUUID();
     }
     getDropdownId() {
-        return this.id !== '' ? `${this.id}-dropdown` : crypto.randomUUID();
+        return this.id() !== '' ? `${this.id()}-dropdown` : crypto.randomUUID();
     }
     getToggleId() {
-        return this.id !== '' ? `${this.id}-toggle` : crypto.randomUUID();
+        return this.id() !== '' ? `${this.id()}-toggle` : crypto.randomUUID();
     }
     modifyParentLabelForAttribute() {
         const form = this.renderer.parentNode(this.elRef.nativeElement);
@@ -962,13 +945,13 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclMultiselectDropdownComponent, isStandalone: true, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mainInputPlaceholder: { classPropertyName: "mainInputPlaceholder", publicName: "mainInputPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldPlaceholder: { classPropertyName: "searchFieldPlaceholder", publicName: "searchFieldPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { eclChange: "eclChange" }, host: { listeners: { "keyup.escape": "onEscapeKey()", "document:click": "onKeyUp($event)" }, properties: { "attr.disabled": "disabled || undefined", "class": "this.cssClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclMultiselectDropdownComponent, isStandalone: true, selector: "div[eclMultiselectDropdown]", outputs: { eclChange: "eclChange" }, host: { listeners: { "keyup.escape": "onEscapeKey()", "document:click": "onKeyUp($event)" }, properties: { "class": "cssClasses", "attr.disabled": "disabled() || undefined" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder\" [selectedItems]=\"selectedItems()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled\"\n    [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled\"\n                                [isChecked]=\"elem.selected\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled\"\n                        [isChecked]=\"item.selected\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["isCheckedChange", "optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItemsLabels", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -982,29 +965,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             multi: true,
                         },
                     ], host: {
+                        '[class]': 'cssClasses',
                         '(keyup.escape)': 'onEscapeKey()',
                         '(document:click)': 'onKeyUp($event)',
-                        '[attr.disabled]': 'disabled || undefined',
-                    }, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder\" [selectedItems]=\"selectedItems()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled\"\n    [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled\"\n                                [isChecked]=\"elem.selected\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled\"\n                        [isChecked]=\"item.selected\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], eclMultiselectInput: [{ type: i0.ViewChild, args: ['eclMultiselectInput', { isSignal: true }] }], selectAllCheckbox: [{ type: i0.ViewChild, args: ['selectAllCheckbox', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { ...{ read: ElementRef }, isSignal: true }] }], clearAllBtn: [{ type: i0.ViewChild, args: ['clearAllBtn', { ...{ read: ElementRef }, isSignal: true }] }], multiOptionComponents: [{
-                type: ViewChildren,
-                args: [EclMultiselectOptionComponent]
-            }], eclChange: [{
-                type: Output
-            }], isInvalid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], mainInputPlaceholder: [{
-                type: Input
-            }], searchFieldPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFieldPlaceholder", required: false }] }], eclSize: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                        '[attr.disabled]': 'disabled() || undefined',
+                    }, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { eclChange: [{ type: i0.Output, args: ["eclChange"] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], eclMultiselectInput: [{ type: i0.ViewChild, args: ['eclMultiselectInput', { isSignal: true }] }], selectAllCheckbox: [{ type: i0.ViewChild, args: ['selectAllCheckbox', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { ...{ read: ElementRef }, isSignal: true }] }], clearAllBtn: [{ type: i0.ViewChild, args: ['clearAllBtn', { ...{ read: ElementRef }, isSignal: true }] }], multiOptionComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => EclMultiselectOptionComponent), { isSignal: true }] }] } });
 
 /**
  * Directive used to decorate <option> and <optgroup> elements within a multiselect.
@@ -1029,31 +995,15 @@ class EclMultiselectOptionDirective extends ECLBaseDirective {
         this.label = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
-         * Emits whenever the option's state changes (used internally).
+         * Indicates that the option is disabled.
          */
-        this.changes = new Subject();
-        this._disabled = false;
-        this._selected = false;
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Indicates that the option is selected.
+         */
+        this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.elRef = inject(ElementRef);
     }
-    /**
-     * Indicates that the option is disabled.
-     */
-    get disabled() {
-        return this._disabled || null;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-    }
-    /**
-     * Indicates that the option is selected.
-     */
-    get selected() {
-        return this._selected || null;
-    }
-    set selected(value) {
-        this._selected = coerceBooleanProperty(value);
-    }
     /**
      * Applies ECL checkbox styling class to the option.
      */
@@ -1067,27 +1017,19 @@ class EclMultiselectOptionDirective extends ECLBaseDirective {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionDirective, isStandalone: true, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: i0.forwardRef(() => EclMultiselectOptionDirective), isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionDirective, isStandalone: true, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disabled() || null", "attr.selected": "selected() || null", "class": "cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: i0.forwardRef(() => EclMultiselectOptionDirective), isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',
+                    host: {
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.selected]': 'selected() || null',
+                        '[class]': 'cssClasses',
+                    },
                 }]
-        }], propDecorators: { eclOptionItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMultiselectOptionDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], selected: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.selected']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { eclOptionItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMultiselectOptionDirective), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
 
 /**
  * Component representing a custom multiselect input using the ECL design system.
@@ -1096,88 +1038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  * Replaces the original element with a custom dropdown rendered dynamically.
  */
 class EclMultiselectComponent extends ECLBaseDirective {
-    /**
-     * Marks the multiselect as invalid.
-     */
-    get isInvalid() {
-        return this._isInvalid;
-    }
-    set isInvalid(value) {
-        this._isInvalid = value;
-        if (this.multiselectComponent) {
-            this.multiselectComponent.isInvalid = value;
-        }
-    }
-    /**
-     * Disables the multiselect component when set to true.
-     */
-    set disabled(value) {
-        if (this.multiselectComponent) {
-            this.multiselectComponent.disabled = coerceBooleanProperty(value);
-        }
-        this._disabled = coerceBooleanProperty(value);
-    }
-    get disabled() {
-        return this._disabled || undefined;
-    }
-    /**
-     * CSS classes applied to the host element.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-select')].join(' ').trim();
-    }
-    /**
-     * Enables the search box within the dropdown.
-     */
-    set hasSearchBox(value) {
-        if (this.multiselectComponent) {
-            this.multiselectComponent.hasSearchBox = coerceBooleanProperty(value);
-        }
-        this._hasSearchBox = coerceBooleanProperty(value);
-    }
-    /**
-     * Displays the "Select all" option in the dropdown.
-     */
-    set hasSelectAll(value) {
-        if (this.multiselectComponent) {
-            this.multiselectComponent.hasSelectAll = coerceBooleanProperty(value);
-        }
-        this._hasSelectAll = coerceBooleanProperty(value);
-    }
-    /**
-     * When true, the Apply button in the dropdown acts as a submit button (type="submit").
-     */
-    set isSubmitOnApply(value) {
-        if (this.multiselectComponent) {
-            this.multiselectComponent.isSubmitOnApply.set(coerceBooleanProperty(value));
-        }
-        this._isSubmitOnApply = coerceBooleanProperty(value);
-    }
-    /**
-     * Placeholder text to show in the multiselect input field when no options are selected.
-     */
-    set eclPlaceholder(value) {
-        this._eclPlaceholder = value;
-        if (this.multiselectComponent) {
-            this.multiselectComponent.mainInputPlaceholder = value;
-        }
-    }
-    get eclPlaceholder() {
-        return this._eclPlaceholder;
-    }
-    /**
-     * Label for the selections counter, read by screen readers.
-     * Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
-     */
-    set counterLabel(value) {
-        this._counterLabel = value;
-        if (this.multiselectComponent) {
-            this.multiselectComponent.counterLabel = value;
-        }
-    }
     constructor() {
         super();
-        this.injector = inject(Injector);
         /**
          * List of option directives projected into the component.
          */
@@ -1198,31 +1060,73 @@ class EclMultiselectComponent extends ECLBaseDirective {
          */
         this.toggleLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "toggleLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Marks the multiselect as invalid.
+         */
+        this.isInvalid = input(false, { ...(ngDevMode ? { debugName: "isInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Disables the multiselect component when set to true.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Emits an array of selected option values when the selection changes.
          */
         this.eclChange = output();
+        /**
+         * Enables the search box within the dropdown.
+         */
+        this.hasSearchBox = input(true, { ...(ngDevMode ? { debugName: "hasSearchBox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Displays the "Select all" option in the dropdown.
+         */
+        this.hasSelectAll = input(true, { ...(ngDevMode ? { debugName: "hasSelectAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * When true, the Apply button in the dropdown acts as a submit button (type="submit").
+         */
+        this.isSubmitOnApply = input(false, { ...(ngDevMode ? { debugName: "isSubmitOnApply" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Placeholder text to show in the multiselect input field when no options are selected.
+         */
+        this.eclPlaceholder = input('Select item', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclPlaceholder" }] : /* istanbul ignore next */ []));
         /**
          * Multiselect size: 's' | 'm' | 'l'. Default is 'm'.
          */
         this.eclSize = input('m', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "eclSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Label for the selections counter, read by screen readers.
+         * Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.
+         */
+        this.counterLabel = input('ecl.multiselect.SELECTED', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "counterLabel" }] : /* istanbul ignore next */ []));
         this.SELECT_CONTAINER_CLASS = 'ecl-select__container';
         this.SELECT_CONTAINER_HIDDEN_CLASS = 'ecl-select__container--hidden';
-        this._disabled = false;
-        this._hasSelectAll = true;
-        this._hasSearchBox = true;
-        this._isSubmitOnApply = false;
-        this._counterLabel = 'ecl.multiselect.SELECTED';
-        this._isInvalid = false;
-        this._eclPlaceholder = 'Select item';
-        this.destroy$ = new Subject();
+        this.injector = inject(Injector);
         this.el = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.differs = inject(IterableDiffers);
         this.renderer = inject(Renderer2);
         this.platformId = inject(PLATFORM_ID);
+        this.destroy$ = new Subject();
         this.differ = this.differs.find([]).create();
+        // Keep the dynamically created dropdown in sync with this component's inputs.
+        // The dropdown is created lazily in ngOnInit, so the sync is guarded on its
+        // instance; once created, this effect re-applies whenever any of the inputs change.
+        effect(() => {
+            const dropdown = this.multiselectComponent;
+            if (!dropdown) {
+                return;
+            }
+            dropdown.mainInputPlaceholder.set(this.eclPlaceholder());
+            dropdown.eclSize.set(this.eclSize());
+            dropdown.disabled.set(this.disabled());
+            dropdown.isInvalid.set(this.isInvalid());
+            dropdown.hasSearchBox.set(this.hasSearchBox());
+            dropdown.hasSelectAll.set(this.hasSelectAll());
+            dropdown.isSubmitOnApply.set(this.isSubmitOnApply());
+            dropdown.counterLabel.set(this.counterLabel());
+        });
         afterNextRender(() => {
             this.attachOptions();
             if (this.hostParentEl != null) {
@@ -1252,6 +1156,12 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * CSS classes applied to the host element.
+     */
+    get cssClasses() {
+        return [super.getCssClasses('ecl-select')].join(' ').trim();
+    }
     hideOriginalSelectComponent() {
         this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);
         this.hostWrapperEl.appendChild(this.hostEl);
@@ -1274,33 +1184,34 @@ class EclMultiselectComponent extends ECLBaseDirective {
     createMultiselectComponent() {
         const ngControl = this.injector.get(NgControl, undefined, { optional: true });
         const multiselect = this.viewContainerRef.createComponent(EclMultiselectDropdownComponent);
-        this.multiselectComponent = multiselect.instance;
-        this.multiselectComponent.eclChange.pipe(takeUntil(this.destroy$)).subscribe((evt) => {
+        const dropdown = multiselect.instance;
+        this.multiselectComponent = dropdown;
+        dropdown.eclChange.subscribe((evt) => {
             this.eclChange.emit(evt);
         });
-        this.multiselectComponent.mainInputPlaceholder = this.eclPlaceholder;
+        dropdown.mainInputPlaceholder.set(this.eclPlaceholder());
         const ariaDescribedby = this.ariaDescribedby();
         if (ariaDescribedby !== undefined) {
-            this.multiselectComponent.ariaDescribedby = ariaDescribedby;
+            dropdown.ariaDescribedby.set(ariaDescribedby);
         }
         const toggleLabel = this.toggleLabel();
         if (toggleLabel !== undefined) {
-            this.multiselectComponent.toggleLabel = toggleLabel;
+            dropdown.toggleLabel.set(toggleLabel);
         }
         const id = this.id();
         if (id !== undefined) {
-            this.multiselectComponent.id = id;
+            dropdown.id.set(id);
         }
-        this.multiselectComponent.eclSize = this.eclSize();
+        dropdown.eclSize.set(this.eclSize());
         if (ngControl) {
-            ngControl.valueAccessor = this.multiselectComponent;
+            ngControl.valueAccessor = dropdown;
         }
-        multiselect.instance.disabled = this.disabled;
-        multiselect.instance.isInvalid = this.isInvalid;
-        multiselect.instance.hasSearchBox = this._hasSearchBox;
-        multiselect.instance.hasSelectAll = this._hasSelectAll;
-        multiselect.instance.isSubmitOnApply.set(this._isSubmitOnApply);
-        multiselect.instance.counterLabel = this._counterLabel;
+        dropdown.disabled.set(this.disabled());
+        dropdown.isInvalid.set(this.isInvalid());
+        dropdown.hasSearchBox.set(this.hasSearchBox());
+        dropdown.hasSelectAll.set(this.hasSelectAll());
+        dropdown.isSubmitOnApply.set(this.isSubmitOnApply());
+        dropdown.counterLabel.set(this.counterLabel());
         return multiselect.location.nativeElement;
     }
     setAriaLabelledBy() {
@@ -1328,7 +1239,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectComponent, isStandalone: true, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, hasSearchBox: { classPropertyName: "hasSearchBox", publicName: "hasSearchBox", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, hasSelectAll: { classPropertyName: "hasSelectAll", publicName: "hasSelectAll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isSubmitOnApply: { classPropertyName: "isSubmitOnApply", publicName: "isSubmitOnApply", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, eclPlaceholder: { classPropertyName: "eclPlaceholder", publicName: "eclPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectComponent, isStandalone: true, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, toggleLabel: { classPropertyName: "toggleLabel", publicName: "toggleLabel", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasSearchBox: { classPropertyName: "hasSearchBox", publicName: "hasSearchBox", isSignal: true, isRequired: false, transformFunction: null }, hasSelectAll: { classPropertyName: "hasSelectAll", publicName: "hasSelectAll", isSignal: true, isRequired: false, transformFunction: null }, isSubmitOnApply: { classPropertyName: "isSubmitOnApply", publicName: "isSubmitOnApply", isSignal: true, isRequired: false, transformFunction: null }, eclPlaceholder: { classPropertyName: "eclPlaceholder", publicName: "eclPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: true, isRequired: false, transformFunction: null }, counterLabel: { classPropertyName: "counterLabel", publicName: "counterLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eclChange: "eclChange" }, host: { properties: { "class": "cssClasses", "attr.disabled": "disabled() || null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EclMultiselectComponent),
@@ -1344,32 +1255,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             useExisting: forwardRef(() => EclMultiselectComponent),
                             multi: true,
                         },
-                    ], template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { eclOptionItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMultiselectOptionDirective), { isSignal: true }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], isInvalid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], eclChange: [{ type: i0.Output, args: ["eclChange"] }], hasSearchBox: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], hasSelectAll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], isSubmitOnApply: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], eclPlaceholder: [{
-                type: Input
-            }], eclSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclSize", required: false }] }], counterLabel: [{
-                type: Input
-            }] } });
+                    ], host: {
+                        '[class]': 'cssClasses',
+                        '[attr.disabled]': 'disabled() || null',
+                    }, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [], propDecorators: { eclOptionItems: [{ type: i0.ContentChildren, args: [forwardRef(() => EclMultiselectOptionDirective), { isSignal: true }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], toggleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleLabel", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], eclChange: [{ type: i0.Output, args: ["eclChange"] }], hasSearchBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearchBox", required: false }] }], hasSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSelectAll", required: false }] }], isSubmitOnApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitOnApply", required: false }] }], eclPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclPlaceholder", required: false }] }], eclSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclSize", required: false }] }], counterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterLabel", required: false }] }] } });
 
 const EUI_ECL_MULTISELECT = [
     EclMultiselectComponent,