@eui/ecl 22.0.0-alpha.20 → 22.0.0-alpha.22

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-24T09:50:22.467Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-25T12:13:20.628Z, llm-md export.
 
 ## Modules
 
@@ -1766,7 +1766,7 @@ Properties:
 - `isShowToolbar: unknown = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0)` — Controls the visibility of the multiselect toolbar. Always visible when isSubmitOnApply is true so the user can submit the form.
 - `isSubmitOnApply: unknown = signal(false)` — When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
 - `multiOptionComponents: QueryList<EclMultiselectOptionComponent>`
-- `multiOptionDirectives: EclMultiselectOptionDirective[] = []` — List of option directives currently rendered in the dropdown.
+- `multiOptionDirectives: unknown = signal<EclMultiselectOptionDirective[]>([])` — List of option directives currently rendered in the dropdown.
 - `optionsCount: number = 0` — Total number of options available in the dropdown list.
 - `searchInput: unknown = viewChild<ElementRef>('searchInput')`
 - `selectAllCheckbox: unknown = viewChild<ElementRef>('selectAllCheckbox')`
@@ -1910,9 +1910,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `listItems: unknown = contentChildren(forwardRef(() => EclNavigationListItemComponent))` — The list of navigation list items.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -1931,7 +1928,7 @@ Inputs:
 
 Properties:
 - `eclContentBlock: unknown = contentChild(forwardRef(() => EclContentBlockComponent))`
-- `hasBorder: unknown = true`
+- `hasBorder: unknown = computed(() => this.parent?.hasBorders() ?? true)` — Whether this item renders a border. Derived from the parent navigation list's 'hasBorders' input; defaults to 'true' when the item is used without a parent.
 - `role: string = 'article'` — The role of the underlying HTML element is 'article', should not be changed.
 
 Methods:
@@ -2114,9 +2111,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__section-description'` — CSS classes applied to the host.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -2130,16 +2124,13 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__section-info ecl-container'` — CSS classes applied to the host.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
 ### EclPageSummaryComponent
 
 File: `packages/ecl/components/ecl-page-summary/ecl-page-summary.component.ts`
-Selector: `ecl-page-summary, section[eclPageSummary]`
+Selector: `section[eclPageSummary]`
 Deprecated: (deprecated: The ` ` element selector is deprecated. Use ` ` instead to align with ECL's semantic HTML structure.)
 
 Description: ECL Page Summary component. Displays a page summary section with an optional icon and title. Example : \<section eclPageSummary eclTitle="Page title"\> \<p\>Summary description content.\</p\> \</section\> Use \<section eclPageSummary\> instead to align with ECL's semantic HTML structure.
@@ -2173,10 +2164,8 @@ Outputs:
 - `page: EclPaginationEvent` — Emits a pagination event each time the page changes.
 
 Properties:
-- `cmpClass: unknown = true` — Adds the ecl-pagination class to the host element.
 - `eclPaginationList: unknown = contentChild(EclPaginationListDirective)` — Reference to the pagination list directive inside the component's content.
 - `model: unknown = EuiPagination.create()` — Internal pagination model storing pagination data and logic.
-- `role: string = 'navigation'` — Sets the ARIA role to indicate navigation.
 
 Methods:
 - `isModeAuto(): boolean` — Checks if the component is in automatic mode.
@@ -2191,17 +2180,17 @@ File: `packages/ecl/components/ecl-pagination/ecl-pagination-item.component.ts`
 Selector: `li[eclPaginationItem]`
 
 Inputs:
-- `isTruncated: boolean = false` — Adds the ecl-pagination\_\_item--truncation class when true.
-- `pagesCount: string` — Total number of pages displayed by the pagination component.
-- `routerLink: string | any[] = null` — Router navigation link for Angular routing.
 - `ariaLabel: string = undefined` — Value for the aria-label attribute used for accessibility.
 - `href: string = null` — Href link for navigation.
 - `isCurrent: boolean = undefined` — Adds the ecl-pagination\_\_item--current class when true.
 - `isNext: boolean = undefined` — Adds the ecl-pagination\_\_item--next class when true.
 - `isPrevious: boolean = undefined` — Adds the ecl-pagination\_\_item--previous class when true.
+- `isTruncated: boolean = false` — Adds the ecl-pagination\_\_item--truncation class when true.
 - `label: string = undefined` — Text content of the pagination item.
+- `pagesCount: string` — Total number of pages displayed by the pagination component.
 - `queryParams: Params | null = null` — Query parameters for the router link.
 - `queryParamsHandling: QueryParamsHandling = null` — Determines how query parameters are handled during navigation.
+- `routerLink: string | any[] | null = null` — Router navigation link for Angular routing.
 - `class: string`
 - `e2eAttr: any`
 - `tabindex: number`
@@ -2211,7 +2200,6 @@ Outputs:
 
 Properties:
 - `el: unknown = inject(ElementRef)`
-- `role: string = 'listitem'` — Sets the role attribute for accessibility.
 
 Methods:
 - `geti18nPageAriaLabelKey(): string` — Returns the i18n translation key for the ARIA label.
@@ -3779,9 +3767,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-container'` — Applies 'ecl-container' class to the host. 'ecl-container'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5189,9 +5174,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasClass: unknown = true` — Adds the ecl-news-ticker\_\_icon class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5279,9 +5261,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__background'` — Applies 'ecl-page-header\_\_background' class to the host. 'ecl-page-header\_\_background'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5297,9 +5276,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-picture ecl-page-header__picture-background'` — Applies 'ecl-picture ecl-page-header\_\_picture-background' classes to the host. 'ecl-picture ecl-page-header\_\_picture-background'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5313,9 +5289,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__container'` — Applies 'ecl-page-header\_\_container' class to the host. 'ecl-page-header\_\_container'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5331,9 +5304,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__description'` — Applies 'ecl-page-header\_\_description' class to the host. 'ecl-page-header\_\_description'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5349,9 +5319,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-picture ecl-page-header__picture-thumbnail'` — Applies 'ecl-picture ecl-page-header\_\_picture-thumbnail' classes to the host. 'ecl-picture ecl-page-header\_\_picture-thumbnail'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5367,9 +5334,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__description-thumbnail'` — Applies 'ecl-page-header\_\_description-thumbnail' class to the host. 'ecl-page-header\_\_description-thumbnail'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5400,9 +5364,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__info'` — Applies 'ecl-page-header\_\_info' class to the host. 'ecl-page-header\_\_info'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5418,9 +5379,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `className: string = 'ecl-page-header__meta'` — Applies 'ecl-page-header\_\_meta' class to the host. 'ecl-page-header\_\_meta'
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 
@@ -5437,7 +5395,6 @@ Inputs:
 - `tabindex: number`
 
 Properties:
-- `className: string = 'ecl-page-header__meta-item'` — Applies 'ecl-page-header\_\_meta-item' class to the host. 'ecl-page-header\_\_meta-item'
 - `eclIcon: unknown = contentChild(EclIconComponent)`
 
 Methods:
@@ -5476,9 +5433,6 @@ Inputs:
 - `e2eAttr: any`
 - `tabindex: number`
 
-Properties:
-- `hasClass: unknown = true` — Adds the ecl-pagination\_\_list class to the host element.
-
 Methods:
 - `getCssClasses(rootClass: string): string`
 

package/docs/properties.html

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

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

@@ -267,7 +267,8 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
         this.optionKeydown = output();
         this.display = 'flex';
         this._id = '';
-        this._checked = false;
+        this._checked = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
         this._value = '';
         this.renderer = inject(Renderer2);
     }
@@ -284,10 +285,10 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
      * Indicates whether the option is selected.
      */
     get isChecked() {
-        return this._checked;
+        return this._checked();
     }
     set isChecked(value) {
-        this._checked = value;
+        this._checked.set(value);
     }
     /**
      * Returns the unique identifier for the option.
@@ -507,7 +508,8 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         /**
          * List of option directives currently rendered in the dropdown.
          */
-        this.multiOptionDirectives = [];
+        this.multiOptionDirectives = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiOptionDirectives" }] : /* istanbul ignore next */ []));
         /**
          * Total number of options available in the dropdown list.
          */
@@ -561,18 +563,26 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         });
     }
     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(() => {
-            if (this.isWriteValueCalled) {
-                this.resetComponent();
-                this.writeValues(this.values);
-                this.isWriteValueCalled = false;
-            }
-            else {
-                this.initSelectedOptions();
-            }
-            this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;
+            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();
@@ -958,7 +968,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
                 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 }], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -975,7 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '(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" }]
+                    }, 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]
@@ -1226,7 +1236,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         const diff = this.differ.diff(this.eclOptionItems());
         if (diff) {
             if (this.multiselectComponent) {
-                this.multiselectComponent.multiOptionDirectives = Array.from(this.eclOptionItems());
+                this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));
             }
         }
     }
@@ -1314,7 +1324,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
     }
     attachOptions() {
         setTimeout(() => {
-            this.multiselectComponent.multiOptionDirectives = Array.from(this.eclOptionItems());
+            this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }