@eui/ecl 23.0.0-alpha.10 → 23.0.0-alpha.11

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

@@ -1,5 +1,5 @@
 import * as i0 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 { Pipe, input, signal, booleanAttribute, computed, viewChild, output, inject, Renderer2, HostBinding, Component, Input, ElementRef, EventEmitter, forwardRef, Output, ViewChildren, contentChildren, Directive, Injector, ViewContainerRef, IterableDiffers, PLATFORM_ID, afterNextRender, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Subject, takeUntil } from 'rxjs';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -486,7 +486,8 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         /**
          * When true, the Apply button acts as a submit button (type="submit") instead of a regular button.
          */
-        this.isSubmitOnApply = false;
+        this.isSubmitOnApply = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSubmitOnApply" }] : /* istanbul ignore next */ []));
         /**
          * Label for the selections counter, read by screen readers.
          */
@@ -536,8 +537,9 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "isItemsSelected" }] : /* istanbul ignore next */ []));
         /**
          * Controls the visibility of the multiselect toolbar.
+         * Always visible when isSubmitOnApply is true so the user can submit the form.
          */
-        this.isShowToolbar = computed(() => this._selectedItems().length > 0, /* @ts-ignore */
+        this.isShowToolbar = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowToolbar" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.propagateChange = (_) => {
@@ -615,6 +617,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     onEscapeKey() {
         this.hideMultiselectDropdown();
+        this.eclMultiselectInput()?.onFocus();
     }
     onKeyUp(event) {
         if (!this.elRef.nativeElement.contains(event.target)) {
@@ -638,17 +641,13 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     }
     onEnterClear(evt) {
         this.onClickClearAll(evt);
-        this.eclMultiselectInput().onFocus();
+        this.eclMultiselectInput()?.onFocus();
     }
     onClickClose(evt) {
-        evt.preventDefault();
-        this.hideMultiselectDropdown();
-        if (this.isSubmitOnApply) {
-            const form = this.elRef.nativeElement.closest('form');
-            if (form) {
-                form.requestSubmit();
-            }
+        if (!this.isSubmitOnApply()) {
+            evt.preventDefault();
         }
+        this.hideMultiselectDropdown();
     }
     onArrowUpClose(evt) {
         evt.preventDefault();
@@ -662,12 +661,12 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
     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();
@@ -687,7 +686,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();
@@ -702,7 +701,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         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);
@@ -722,7 +721,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);
@@ -770,7 +769,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 {
@@ -794,10 +793,6 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
                 this.onArrowUpOption(evt.keyboardEvent, evt.multiselectOption);
                 break;
             }
-            case KeyCode.ESCAPE: {
-                this.hideMultiselectDropdown();
-                break;
-            }
             case KeyCode.ENTER: {
                 evt.keyboardEvent.target.click();
                 break;
@@ -921,7 +916,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
         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);
@@ -957,13 +952,13 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMultiselectDropdownComponent, isStandalone: true, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mainInputPlaceholder: { classPropertyName: "mainInputPlaceholder", publicName: "mainInputPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldPlaceholder: { classPropertyName: "searchFieldPlaceholder", publicName: "searchFieldPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey()", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclMultiselectDropdownComponent, isStandalone: true, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, mainInputPlaceholder: { classPropertyName: "mainInputPlaceholder", publicName: "mainInputPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, searchFieldPlaceholder: { classPropertyName: "searchFieldPlaceholder", publicName: "searchFieldPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, eclSize: { classPropertyName: "eclSize", publicName: "eclSize", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { eclChange: "eclChange" }, host: { listeners: { "keyup.escape": "onEscapeKey()", "document:click": "onKeyUp($event)" }, properties: { "attr.disabled": "disabled || undefined", "class": "this.cssClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder\" [selectedItems]=\"selectedItems()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled\"\n    [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives; track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled\"\n                                [isChecked]=\"elem.selected\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled\"\n                        [isChecked]=\"item.selected\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                type=\"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.0.5", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -976,7 +971,11 @@ 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" }]
+                    ], host: {
+                        '(keyup.escape)': 'onEscapeKey()',
+                        '(document:click)': 'onKeyUp($event)',
+                        '[attr.disabled]': 'disabled || undefined',
+                    }, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder\" [selectedItems]=\"selectedItems()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled\"\n    [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives; track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled\"\n                                [isChecked]=\"elem.selected\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled\"\n                        [isChecked]=\"item.selected\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], eclMultiselectInput: [{ type: i0.ViewChild, args: ['eclMultiselectInput', { isSignal: true }] }], selectAllCheckbox: [{ type: i0.ViewChild, args: ['selectAllCheckbox', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { ...{ read: ElementRef }, isSignal: true }] }], clearAllBtn: [{ type: i0.ViewChild, args: ['clearAllBtn', { ...{ read: ElementRef }, isSignal: true }] }], multiOptionComponents: [{
                 type: ViewChildren,
                 args: [EclMultiselectOptionComponent]
@@ -995,15 +994,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], onEscapeKey: [{
-                type: HostListener,
-                args: ['document:keyup.escape']
-            }], onKeyUp: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 /**
@@ -1149,7 +1139,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
      */
     set isSubmitOnApply(value) {
         if (this.multiselectComponent) {
-            this.multiselectComponent.isSubmitOnApply = coerceBooleanProperty(value);
+            this.multiselectComponent.isSubmitOnApply.set(coerceBooleanProperty(value));
         }
         this._isSubmitOnApply = coerceBooleanProperty(value);
     }
@@ -1299,7 +1289,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         multiselect.instance.isInvalid = this.isInvalid;
         multiselect.instance.hasSearchBox = this._hasSearchBox;
         multiselect.instance.hasSelectAll = this._hasSelectAll;
-        multiselect.instance.isSubmitOnApply = this._isSubmitOnApply;
+        multiselect.instance.isSubmitOnApply.set(this._isSubmitOnApply);
         multiselect.instance.counterLabel = this._counterLabel;
         return multiselect.location.nativeElement;
     }