@eui/ecl 19.3.3-snapshot-1754582255784 → 19.3.3-snapshot-1754655052849

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

@@ -1,32 +1,19 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, booleanAttribute, Input, HostBinding, Output, ViewChild, Component, ElementRef, forwardRef, HostListener, ViewChildren, ContentChildren, Directive, afterNextRender, PLATFORM_ID, Inject, ViewEncapsulation, NgModule } from '@angular/core';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i2 from '@eui/ecl/components/ecl-icon';
-import { EclIconModule } from '@eui/ecl/components/ecl-icon';
-import * as i1 from '@eui/ecl/components/ecl-checkbox';
-import { EclCheckboxDirective, EclCheckboxModule } from '@eui/ecl/components/ecl-checkbox';
-import { EclTextInputModule } from '@eui/ecl/components/ecl-text-input';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Pipe, EventEmitter, booleanAttribute, Output, ViewChild, Input, HostBinding, Component, ElementRef, forwardRef, HostListener, ViewChildren, ContentChildren, Directive, afterNextRender, PLATFORM_ID, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Subject, takeUntil } from 'rxjs';
-import * as i1$1 from '@eui/ecl/core';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, KeyCode } from '@eui/ecl/core';
 import * as i3 from '@eui/ecl/components/ecl-button';
 import { EclButtonModule } from '@eui/ecl/components/ecl-button';
-import * as i4 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-class EclMultiselectOptionClickEvent {
-    constructor(multiselectOption) {
-        this.multiselectOption = multiselectOption;
-    }
-}
-class EclMultiselectOptionKeydownEvent {
-    constructor(multiselectOption, keyboardEvent) {
-        this.multiselectOption = multiselectOption;
-        this.keyboardEvent = keyboardEvent;
-    }
-}
+import * as i4 from '@eui/ecl/components/ecl-icon';
+import { EclIconModule } from '@eui/ecl/components/ecl-icon';
+import * as i1$1 from '@eui/ecl/components/ecl-checkbox';
+import { EclCheckboxModule, EclCheckboxDirective } from '@eui/ecl/components/ecl-checkbox';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
 
 class BoldTextPipe {
     constructor() {
@@ -53,165 +40,33 @@ class BoldTextPipe {
         return str.replace(/<[/]?b>/g, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BoldTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: BoldTextPipe, isStandalone: false, name: "boldText" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: BoldTextPipe, isStandalone: true, name: "boldText" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BoldTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'boldText',
-                    standalone: false,
                 }]
         }] });
 
-/**
- * Component representing a single selectable option in the multiselect dropdown.
- */
-class EclMultiselectOptionComponent extends ECLBaseDirective {
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    get cssClasses() {
-        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
-    }
-    /**
-     * Indicates whether the option is selected.
-     */
-    get isChecked() {
-        return this._checked;
-    }
-    set isChecked(value) {
-        this._checked = value;
-    }
-    constructor(renderer) {
-        super();
-        this.renderer = renderer;
-        this.keyword = '';
-        this.changes = new Subject();
-        /**
-         * Disables the option when true.
-         */
-        this.disabled = false;
-        /**
-         * Emits when the option is clicked.
-         */
-        this.optionClick = new EventEmitter();
-        /**
-         * Emits when a key is pressed while focused on the option.
-         */
-        this.optionKeydown = new EventEmitter();
-        this.display = 'flex';
-        this._id = '';
-        this._checked = false;
-        this._value = '';
-    }
-    /**
-     * Returns the unique identifier for the option.
-     */
-    get id() {
-        return this._id;
-    }
-    /**
-     * Indicates whether the option is active (visible and not disabled).
-     */
-    get isActive() {
-        return this.display === 'flex' && !this.disabled;
-    }
-    ngOnChanges() {
-        this.changes.next(this.label);
-    }
-    ngOnInit() {
-        this._id = this.createId();
-    }
-    ngOnDestroy() {
-        this.changes.complete();
-    }
-    /**
-     * Toggles the selected state and emits the optionClick event.
-     */
-    onOptionClick() {
-        this.isChecked = !this.isChecked;
-        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));
-    }
-    /**
-     * Emits the optionKeydown event when a key is pressed.
-     */
-    onOptionKeydown(evt) {
-        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
-    }
-    /**
-     * Focuses the checkbox input.
-     */
-    onFocus() {
-        this.renderer.selectRootElement(this.eclCheckboxInput.nativeElement, true).focus();
-    }
-    /**
-     * Makes the option visible.
-     */
-    show() {
-        this.display = 'flex';
-    }
-    /**
-     * Hides the option from view.
-     */
-    hide() {
-        this.display = 'none';
-    }
-    /**
-     * Sets the keyword for search highlighting.
-     */
-    highlightSearchText(keyword) {
-        this.keyword = keyword;
-        const re = new RegExp(keyword, 'gi');
-        const res = this.label.replace(re, '<b>$&</b>');
-    }
-    createId() {
-        return crypto.randomUUID();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: EclMultiselectOptionComponent, isStandalone: false, 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.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.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'div[eclMultiselectOption]', standalone: false, 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" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { eclCheckboxInput: [{
-                type: ViewChild,
-                args: ['checkboxInput']
-            }], value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.ecl-checkbox--disabled']
-            }, {
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], optionClick: [{
-                type: Output
-            }], optionKeydown: [{
-                type: Output
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], isChecked: [{
-                type: Input
-            }] } });
-
 class EclMultiselectMainInputClickEvent {
     constructor(event) {
         this.event = event;
     }
 }
 
+class EclMultiselectOptionClickEvent {
+    constructor(multiselectOption) {
+        this.multiselectOption = multiselectOption;
+    }
+}
+class EclMultiselectOptionKeydownEvent {
+    constructor(multiselectOption, keyboardEvent) {
+        this.multiselectOption = multiselectOption;
+        this.keyboardEvent = keyboardEvent;
+    }
+}
+
 /**
  * Component representing the main input of a multiselect component.
  * Handles displaying selected items, opening the dropdown, and managing accessibility.
@@ -342,13 +197,13 @@ class EclMultiselectInputComponent extends ECLBaseDirective {
     onFocus() {
         this.renderer.selectRootElement(this.inputMultiselect.nativeElement, true).focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectInputComponent, deps: [{ token: i1$1.EclThemeService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: EclMultiselectInputComponent, isStandalone: false, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", toggleLabel: "toggleLabel", isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isInvalid: ["isInvalid", "isInvalid", booleanAttribute], inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.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\" class=\"ecl-select-multiple-selections-counter\">\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-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"ghost\" 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: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectInputComponent, deps: [{ token: i1.EclThemeService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: EclMultiselectInputComponent, isStandalone: true, selector: "div[eclMultiselectInput]", inputs: { eclSize: "eclSize", toggleId: "toggleId", toggleLabel: "toggleLabel", isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isInvalid: ["isInvalid", "isInvalid", booleanAttribute], inputPlaceholder: "inputPlaceholder", selectedItems: "selectedItems", isDropdownExpanded: "isDropdownExpanded", ariaControls: "ariaControls", ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby" }, outputs: { mainInputClick: "mainInputClick", mainInputKeydown: "mainInputKeydown" }, host: { properties: { "class.ecl-select__container--disabled": "this.isDisabled", "class.ecl-select__container--invalid": "this.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\" class=\"ecl-select-multiple-selections-counter\">\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-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"ghost\" 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "ngmodule", type: EclIconModule }, { kind: "component", type: i4.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclMultiselectInput]', standalone: false, template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\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-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"ghost\" 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" }]
-        }], ctorParameters: () => [{ type: i1$1.EclThemeService }, { type: i0.Renderer2 }], propDecorators: { eclSize: [{
+            args: [{ selector: 'div[eclMultiselectInput]', imports: [TranslateModule, EclButtonModule, EclIconModule], template: "<div [class.ecl-select-multiple-selections-counter--visible]=\"isShowCounter\" class=\"ecl-select-multiple-selections-counter\">\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-labelledby]=\"ariaLabeledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"onClick($event)\"> {{ buttonText }}\n</button>\n<div class=\"ecl-select__icon\">\n    <button eclButton isIconOnly variant=\"ghost\" 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" }]
+        }], ctorParameters: () => [{ type: i1.EclThemeService }, { type: i0.Renderer2 }], propDecorators: { eclSize: [{
                 type: Input
             }], toggleId: [{
                 type: Input
@@ -390,6 +245,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Component representing a single selectable option in the multiselect dropdown.
+ */
+class EclMultiselectOptionComponent extends ECLBaseDirective {
+    set value(value) {
+        this._value = value;
+    }
+    get value() {
+        return this._value;
+    }
+    get cssClasses() {
+        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();
+    }
+    /**
+     * Indicates whether the option is selected.
+     */
+    get isChecked() {
+        return this._checked;
+    }
+    set isChecked(value) {
+        this._checked = value;
+    }
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.keyword = '';
+        this.changes = new Subject();
+        /**
+         * Disables the option when true.
+         */
+        this.disabled = false;
+        /**
+         * Emits when the option is clicked.
+         */
+        this.optionClick = new EventEmitter();
+        /**
+         * Emits when a key is pressed while focused on the option.
+         */
+        this.optionKeydown = new EventEmitter();
+        this.display = 'flex';
+        this._id = '';
+        this._checked = false;
+        this._value = '';
+    }
+    /**
+     * Returns the unique identifier for the option.
+     */
+    get id() {
+        return this._id;
+    }
+    /**
+     * Indicates whether the option is active (visible and not disabled).
+     */
+    get isActive() {
+        return this.display === 'flex' && !this.disabled;
+    }
+    ngOnChanges() {
+        this.changes.next(this.label);
+    }
+    ngOnInit() {
+        this._id = this.createId();
+    }
+    ngOnDestroy() {
+        this.changes.complete();
+    }
+    /**
+     * Toggles the selected state and emits the optionClick event.
+     */
+    onOptionClick() {
+        this.isChecked = !this.isChecked;
+        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));
+    }
+    /**
+     * Emits the optionKeydown event when a key is pressed.
+     */
+    onOptionKeydown(evt) {
+        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));
+    }
+    /**
+     * Focuses the checkbox input.
+     */
+    onFocus() {
+        this.renderer.selectRootElement(this.eclCheckboxInput.nativeElement, true).focus();
+    }
+    /**
+     * Makes the option visible.
+     */
+    show() {
+        this.display = 'flex';
+    }
+    /**
+     * Hides the option from view.
+     */
+    hide() {
+        this.display = 'none';
+    }
+    /**
+     * Sets the keyword for search highlighting.
+     */
+    highlightSearchText(keyword) {
+        this.keyword = keyword;
+        const re = new RegExp(keyword, 'gi');
+        const res = this.label.replace(re, '<b>$&</b>');
+    }
+    createId() {
+        return crypto.randomUUID();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", 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: "pipe", type: BoldTextPipe, name: "boldText" }, { kind: "ngmodule", type: EclCheckboxModule }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[eclMultiselectOption]', imports: [BoldTextPipe, EclCheckboxModule], 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" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { eclCheckboxInput: [{
+                type: ViewChild,
+                args: ['checkboxInput']
+            }], value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.ecl-checkbox--disabled']
+            }, {
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], optionClick: [{
+                type: Output
+            }], optionKeydown: [{
+                type: Output
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], isChecked: [{
+                type: Input
+            }] } });
+
 /**
  * Component representing an option group (fieldset) in a multiselect component.
  * Used to group related options under a common label.
@@ -402,11 +400,11 @@ class EclMultiselectOptgroupComponent extends ECLBaseDirective {
         return [super.getCssClasses('ecl-select__multiple-group')].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptgroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclMultiselectOptgroupComponent, isStandalone: false, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: EclMultiselectOptgroupComponent, isStandalone: true, selector: "fieldset[eclMultiselectOptgroup]", inputs: { label: "label" }, host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptgroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fieldset[eclMultiselectOptgroup]', standalone: false, template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }]
+            args: [{ selector: 'fieldset[eclMultiselectOptgroup]', template: "<legend class=\"ecl-select__multiple-group__title\">{{ label }}</legend>\n<ng-content></ng-content>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], cssClasses: [{
@@ -936,17 +934,20 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMultiselectDropdownComponent, isStandalone: false, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: EclMultiselectDropdownComponent, isStandalone: true, selector: "div[eclMultiselectDropdown]", inputs: { isInvalid: ["isInvalid", "isInvalid", booleanAttribute], mainInputPlaceholder: "mainInputPlaceholder", searchFieldPlaceholder: "searchFieldPlaceholder", eclSize: "eclSize", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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    [ariaLabeledby]=\"ariaLabeledby\" [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\"></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)\"\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                (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=\"ghost\"\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: "directive", type: i1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "component", type: i1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+        ], 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    [ariaLabeledby]=\"ariaLabeledby\" [ariaDescribedby]=\"ariaDescribedby\" [toggleLabel]=\"toggleLabel\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize\" [toggleId]=\"toggleId\"></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)\"\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                (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=\"ghost\"\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: "ngmodule", type: EclButtonModule }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "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", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItems", "isDropdownExpanded", "ariaControls", "ariaDescribedby", "ariaLabeledby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "ngmodule", type: EclCheckboxModule }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclMultiselectDropdown]', standalone: false, providers: [
+            args: [{ selector: 'div[eclMultiselectDropdown]', imports: [
+                        EclButtonModule, EclMultiselectOptionComponent, EclMultiselectOptgroupComponent,
+                        EclMultiselectInputComponent, EclCheckboxModule, TranslateModule,
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EclMultiselectDropdownComponent),
@@ -1045,13 +1046,12 @@ class EclMultiselectOptionDirective extends ECLBaseDirective {
         return this.elRef.nativeElement.nodeName === 'OPTGROUP';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclMultiselectOptionDirective, isStandalone: false, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: EclMultiselectOptionDirective, isStandalone: true, selector: "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]", inputs: { value: "value", label: "label", disabled: "disabled", selected: "selected" }, host: { properties: { "attr.disabled": "this.disabled", "attr.selected": "this.selected", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { eclOptionItems: [{
                 type: ContentChildren,
@@ -1264,7 +1264,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }, { token: i0.Renderer2 }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: EclMultiselectComponent, isStandalone: false, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute], disabled: "disabled", hasSearchBox: ["hasSearchBox", "hasSearchBox", booleanAttribute], hasSelectAll: ["hasSelectAll", "hasSelectAll", booleanAttribute], eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: EclMultiselectComponent, isStandalone: true, selector: "select[eclMultiselect]", inputs: { ariaDescribedby: "ariaDescribedby", ariaLabeledby: "ariaLabeledby", id: "id", toggleLabel: "toggleLabel", isInvalid: ["isInvalid", "isInvalid", booleanAttribute], disabled: "disabled", hasSearchBox: ["hasSearchBox", "hasSearchBox", booleanAttribute], hasSelectAll: ["hasSelectAll", "hasSelectAll", booleanAttribute], eclPlaceholder: "eclPlaceholder", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EclMultiselectComponent),
@@ -1274,7 +1274,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'select[eclMultiselect]', standalone: false, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'select[eclMultiselect]', encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EclMultiselectComponent),
@@ -1320,55 +1320,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const COMPONENTS = [EclMultiselectComponent, EclMultiselectOptionDirective];
+const COMPONENTS = [
+    EclMultiselectComponent,
+    EclMultiselectOptionDirective,
+    EclMultiselectOptionComponent,
+    EclMultiselectInputComponent,
+    EclMultiselectDropdownComponent,
+    EclMultiselectOptgroupComponent,
+    BoldTextPipe,
+];
+/**
+ * Module that provides the EclMultiselect component and it's dependencies.
+ *
+ * @deprecated Use {@link EUI_ECL_MULTISELECT} instead.
+ */
 class EclMultiselectModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, declarations: [EclMultiselectComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, imports: [EclMultiselectComponent,
+            EclMultiselectOptionDirective,
+            EclMultiselectOptionComponent,
+            EclMultiselectInputComponent,
+            EclMultiselectDropdownComponent,
+            EclMultiselectOptgroupComponent,
+            BoldTextPipe], exports: [EclMultiselectComponent,
             EclMultiselectOptionDirective,
             EclMultiselectOptionComponent,
             EclMultiselectInputComponent,
             EclMultiselectDropdownComponent,
             EclMultiselectOptgroupComponent,
-            BoldTextPipe], imports: [CommonModule,
-            TranslateModule,
-            EclIconModule,
-            EclCheckboxModule,
-            EclTextInputModule,
-            EclButtonModule], exports: [EclMultiselectComponent, EclMultiselectOptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, imports: [CommonModule,
-            TranslateModule,
-            EclIconModule,
-            EclCheckboxModule,
-            EclTextInputModule,
-            EclButtonModule] }); }
+            BoldTextPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, imports: [EclMultiselectOptionComponent,
+            EclMultiselectInputComponent,
+            EclMultiselectDropdownComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EclMultiselectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule,
-                        EclIconModule,
-                        EclCheckboxModule,
-                        EclTextInputModule,
-                        EclButtonModule,
-                    ],
-                    exports: [EclMultiselectComponent, EclMultiselectOptionDirective],
-                    declarations: [
-                        EclMultiselectComponent,
-                        EclMultiselectOptionDirective,
-                        EclMultiselectOptionComponent,
-                        EclMultiselectInputComponent,
-                        EclMultiselectDropdownComponent,
-                        EclMultiselectOptgroupComponent,
-                        BoldTextPipe,
-                    ],
+                    imports: [...COMPONENTS],
+                    exports: [...COMPONENTS],
                 }]
         }] });
 
+const EUI_ECL_MULTISELECT = [
+    EclMultiselectComponent,
+    EclMultiselectOptionDirective,
+    EclMultiselectOptionComponent,
+    EclMultiselectInputComponent,
+    EclMultiselectDropdownComponent,
+    EclMultiselectOptgroupComponent,
+    BoldTextPipe,
+];
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BoldTextPipe, EclMultiselectComponent, EclMultiselectDropdownComponent, EclMultiselectInputComponent, EclMultiselectMainInputClickEvent, EclMultiselectModule, EclMultiselectOptgroupComponent, EclMultiselectOptionClickEvent, EclMultiselectOptionComponent, EclMultiselectOptionDirective, EclMultiselectOptionKeydownEvent };
+export { BoldTextPipe, EUI_ECL_MULTISELECT, EclMultiselectComponent, EclMultiselectDropdownComponent, EclMultiselectInputComponent, EclMultiselectMainInputClickEvent, EclMultiselectModule, EclMultiselectOptgroupComponent, EclMultiselectOptionClickEvent, EclMultiselectOptionComponent, EclMultiselectOptionDirective, EclMultiselectOptionKeydownEvent };
 //# sourceMappingURL=eui-ecl-components-ecl-multiselect.mjs.map