@eui/ecl 23.0.0-alpha.6 → 23.0.0-alpha.8

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, signal, booleanAttribute, computed, output, inject, Renderer2, ViewChild, HostBinding, Component, Input, EventEmitter, ElementRef, forwardRef, HostListener, Output, ViewChildren, ContentChildren, Directive, Injector, ViewContainerRef, IterableDiffers, PLATFORM_ID, afterNextRender, ViewEncapsulation } from '@angular/core';
+import { Pipe, input, signal, booleanAttribute, computed, viewChild, output, inject, Renderer2, HostBinding, Component, Input, ElementRef, EventEmitter, forwardRef, HostListener, Output, ViewChildren, 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 { TranslatePipe } from '@ngx-translate/core';
@@ -138,6 +138,11 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
             return [describedby, counter].filter(Boolean).join(' ') || undefined;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaDescribedbyFull" }] : /* 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.
          */
@@ -222,10 +227,10 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
      * Focuses the multiselect input element.
      */
     onFocus() {
-        this.renderer.selectRootElement(this.inputMultiselect.nativeElement, true).focus();
+        this.renderer.selectRootElement(this.inputMultiselect().nativeElement, true).focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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 }], 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.0.5", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
             type: Component,
@@ -236,10 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], 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: ViewChild,
-                args: ['inputMultiselect']
-            }], mainInputClick: [{ type: i0.Output, args: ["mainInputClick"] }], mainInputKeydown: [{ type: i0.Output, args: ["mainInputKeydown"] }] } });
+            }], 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"] }] } });
 
 /**
  * Component representing a single selectable option in the multiselect dropdown.
@@ -247,6 +249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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();
         /**
@@ -323,7 +327,7 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
      * Focuses the checkbox input.
      */
     onFocus() {
-        this.renderer.selectRootElement(this.eclCheckboxInput.nativeElement, true).focus();
+        this.renderer.selectRootElement(this.eclCheckboxInput().nativeElement, true).focus();
     }
     /**
      * Makes the option visible.
@@ -349,15 +353,12 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", 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 }], 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.0.5", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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: ViewChild,
-                args: ['checkboxInput']
-            }], value: [{
+        }], propDecorators: { eclCheckboxInput: [{ type: i0.ViewChild, args: ['checkboxInput', { isSignal: true }] }], value: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -441,6 +442,14 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     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.
          */
@@ -629,7 +638,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     onEnterClear(evt) {
         this.onClickClearAll(evt);
-        this.eclMultiselectInput.onFocus();
+        this.eclMultiselectInput().onFocus();
     }
     onClickClose(evt) {
         evt.preventDefault();
@@ -648,27 +657,27 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     onArrowDownClose(evt) {
         evt.preventDefault();
-        this.renderer.selectRootElement(this.clearAllBtn.nativeElement, true).focus();
+        this.renderer.selectRootElement(this.clearAllBtn().nativeElement, true).focus();
     }
     onTabClose(evt) {
         if (!evt.shiftKey) {
             evt.preventDefault();
-            this.renderer.selectRootElement(this.clearAllBtn.nativeElement, true).focus();
+            this.renderer.selectRootElement(this.clearAllBtn().nativeElement, true).focus();
         }
     }
     onArrowUpClear(evt) {
         evt.preventDefault();
-        this.renderer.selectRootElement(this.closeBtn.nativeElement, true).focus();
+        this.renderer.selectRootElement(this.closeBtn().nativeElement, true).focus();
     }
     onArrowDownClear(evt) {
         evt.preventDefault();
-        this.eclMultiselectInput.onFocus();
+        this.eclMultiselectInput().onFocus();
     }
     onTabClear(evt) {
         if (!evt.shiftKey) {
             evt.preventDefault();
             this.hideMultiselectDropdown();
-            this.eclMultiselectInput.onFocus();
+            this.eclMultiselectInput().onFocus();
         }
     }
     onEnterSearch(evt) {
@@ -678,7 +687,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         evt.preventDefault();
         const currentOptions = this.getActiveOptions();
         if (this.hasSelectAll) {
-            this.renderer.selectRootElement(this.selectAllCheckbox.nativeElement, true).focus();
+            this.renderer.selectRootElement(this.selectAllCheckbox().nativeElement, true).focus();
         }
         else {
             currentOptions[0].onFocus();
@@ -687,13 +696,13 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     onArrowUpSearch(evt) {
         evt.preventDefault();
         this.hideMultiselectDropdown();
-        this.eclMultiselectInput.onFocus();
+        this.eclMultiselectInput().onFocus();
     }
     onKeydownMainInput(evt) {
         evt.preventDefault();
         this.showMultiselectDropdown();
         if (this.hasSearchBox) {
-            setTimeout(() => this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus());
+            setTimeout(() => this.renderer.selectRootElement(this.searchInput().nativeElement, true).focus());
         }
         else {
             this.onArrowDownSearch(evt);
@@ -713,7 +722,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     onArrowUpSelectAll(evt) {
         evt.preventDefault();
         if (this.hasSearchBox) {
-            this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus();
+            this.renderer.selectRootElement(this.searchInput().nativeElement, true).focus();
         }
         else {
             this.onArrowUpSearch(evt);
@@ -761,7 +770,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
      * Toggles all visible options based on the "Select All" checkbox.
      */
     onSelectAll() {
-        if (this.selectAllCheckbox.nativeElement.checked) {
+        if (this.selectAllCheckbox().nativeElement.checked) {
             this.selectAllActiveOptions();
         }
         else {
@@ -809,8 +818,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
      * Updates selected items, emits changes.
      */
     onOptionSelected(evt) {
-        if (this.selectAllCheckbox && this.selectAllCheckbox.nativeElement.checked) {
-            this.renderer.setProperty(this.selectAllCheckbox.nativeElement, 'checked', false);
+        const selectAllCheckbox = this.selectAllCheckbox();
+        if (selectAllCheckbox && selectAllCheckbox.nativeElement.checked) {
+            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);
         }
         const currOption = evt.multiselectOption;
         if (currOption.isChecked) {
@@ -834,8 +844,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this._selectedItems.set(newItems);
     }
     unselectAllActiveOptions() {
-        if (this.selectAllCheckbox) {
-            this.renderer.setProperty(this.selectAllCheckbox.nativeElement, 'checked', false);
+        const selectAllCheckbox = this.selectAllCheckbox();
+        if (selectAllCheckbox) {
+            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);
         }
         this._selectedItems.set([]);
         this.getAvailableOptions().forEach((item) => {
@@ -864,8 +875,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         this.multiOptionComponents.forEach((item) => {
             item.isChecked = false;
         });
-        if (this.selectAllCheckbox) {
-            this.renderer.setProperty(this.selectAllCheckbox.nativeElement, 'checked', false);
+        const selectAllCheckbox = this.selectAllCheckbox();
+        if (selectAllCheckbox) {
+            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);
         }
         this._selectedItems.set([]);
     }
@@ -890,31 +902,33 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         evt.preventDefault();
         const index = this.getOptionIndexByIdFromActiveOptions(option.id);
         const currentOptions = this.getActiveOptions();
+        const closeBtn = this.closeBtn();
         if (index !== currentOptions.length - 1) {
             const nextSiblingCheckbox = currentOptions[index + 1];
             nextSiblingCheckbox.onFocus();
         }
-        else if (this.closeBtn) {
-            this.renderer.selectRootElement(this.closeBtn.nativeElement, true).focus();
+        else if (closeBtn) {
+            this.renderer.selectRootElement(closeBtn.nativeElement, true).focus();
         }
     }
     onArrowUpOption(evt, option) {
         evt.preventDefault();
         const index = this.getOptionIndexByIdFromActiveOptions(option.id);
+        const selectAllCheckbox = this.selectAllCheckbox();
         if (index !== 0) {
             const prevSiblingCheckbox = this.getActiveOptions()[index - 1];
             prevSiblingCheckbox.onFocus();
         }
-        else if (!this.hasSelectAll || this.selectAllCheckbox.nativeElement.disabled) {
+        else if (!this.hasSelectAll || selectAllCheckbox.nativeElement.disabled) {
             if (this.hasSearchBox) {
-                this.renderer.selectRootElement(this.searchInput.nativeElement, true).focus();
+                this.renderer.selectRootElement(this.searchInput().nativeElement, true).focus();
             }
             else {
                 this.onArrowUpSearch(evt);
             }
         }
         else {
-            this.renderer.selectRootElement(this.selectAllCheckbox.nativeElement, true).focus();
+            this.renderer.selectRootElement(selectAllCheckbox.nativeElement, true).focus();
         }
     }
     getActiveOptions() {
@@ -949,7 +963,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
                 useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef }, { 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=\"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 }], 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=\"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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -962,23 +976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                             multi: true,
                         },
-                    ], 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=\"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: ViewChild,
-                args: ['searchInput']
-            }], eclMultiselectInput: [{
-                type: ViewChild,
-                args: ['eclMultiselectInput']
-            }], selectAllCheckbox: [{
-                type: ViewChild,
-                args: ['selectAllCheckbox']
-            }], closeBtn: [{
-                type: ViewChild,
-                args: ['closeBtn', { read: ElementRef }]
-            }], clearAllBtn: [{
-                type: ViewChild,
-                args: ['clearAllBtn', { read: ElementRef }]
-            }], multiOptionComponents: [{
+                    ], 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=\"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: [{
@@ -1014,6 +1013,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 class EclMultiselectOptionDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Nested option directives (used for optgroups).
+         */
+        this.eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclOptionItems" }] : /* istanbul ignore next */ []));
         /**
          * Value assigned to the option.
          */
@@ -1063,17 +1067,14 @@ class EclMultiselectOptionDirective extends ECLBaseDirective {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectOptionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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) }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',
                 }]
-        }], propDecorators: { eclOptionItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMultiselectOptionDirective)]
-            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{
+        }], 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,
@@ -1177,6 +1178,11 @@ class EclMultiselectComponent extends ECLBaseDirective {
     constructor() {
         super();
         this.injector = inject(Injector);
+        /**
+         * List of option directives projected into the component.
+         */
+        this.eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclOptionItems" }] : /* istanbul ignore next */ []));
         /**
          * Defines the `aria-describedby` attribute for accessibility.
          */
@@ -1227,10 +1233,10 @@ class EclMultiselectComponent extends ECLBaseDirective {
         });
     }
     ngDoCheck() {
-        const diff = this.differ.diff(this.eclOptionItems);
+        const diff = this.differ.diff(this.eclOptionItems());
         if (diff) {
             if (this.multiselectComponent) {
-                this.multiselectComponent.multiOptionDirectives = this.eclOptionItems.toArray();
+                this.multiselectComponent.multiOptionDirectives = Array.from(this.eclOptionItems());
             }
         }
     }
@@ -1318,17 +1324,17 @@ class EclMultiselectComponent extends ECLBaseDirective {
     }
     attachOptions() {
         setTimeout(() => {
-            this.multiselectComponent.multiOptionDirectives = this.eclOptionItems.toArray();
+            this.multiselectComponent.multiOptionDirectives = Array.from(this.eclOptionItems());
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", 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.0.5", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EclMultiselectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "eclOptionItems", predicate: i0.forwardRef(() => EclMultiselectOptionDirective) }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "eclOptionItems", predicate: i0.forwardRef(() => EclMultiselectOptionDirective), isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectComponent, decorators: [{
             type: Component,
@@ -1339,10 +1345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             multi: true,
                         },
                     ], template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { eclOptionItems: [{
-                type: ContentChildren,
-                args: [forwardRef(() => EclMultiselectOptionDirective)]
-            }], 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: [{
+        }], 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: [{