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

package/docs/json/documentation.json

@@ -1143,12 +1143,12 @@
         },
         {
             "name": "EclMultiselectOption",
-            "id": "interface-EclMultiselectOption-115fbadeae769a42c78a13540193aa94dc4770f87a690c07353109c23a8fc17e975322528c15a412b23338da2e8e01e355a4616608a07a48ad298cdc21fba9aa",
+            "id": "interface-EclMultiselectOption-823cca2f0773a2a83719a57a2a22c21133966e29e23d3b7e6b4b0dc145c50ef30ec4154754cb8cfff1d6bcbe3561a0f3b0d3eaa2e5c3731ccebdeb36b61ddcd2",
             "file": "packages/ecl/components/ecl-multiselect/models/ecl-multiselect-option.model.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "export interface EclMultiselectOption {\n    id?: string;\n    label?: string;\n    value?: string;\n    isActive: boolean;\n    isChecked: boolean;\n}\n",
+            "sourceCode": "import { InputSignal, ModelSignal } from '@angular/core';\n\nexport interface EclMultiselectOption {\n    id?: string;\n    label?: InputSignal<string>;\n    value?: InputSignal<string>;\n    isActive: boolean;\n    isChecked: ModelSignal<boolean>;\n}\n",
             "displayName": "EclMultiselectOption",
             "properties": [
                 {
@@ -1160,7 +1160,7 @@
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 2,
+                    "line": 4,
                     "rawdescription": "\n"
                 },
                 {
@@ -1172,7 +1172,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 5,
+                    "line": 7,
                     "rawdescription": "\n"
                 },
                 {
@@ -1180,11 +1180,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "boolean",
+                    "type": "ModelSignal<boolean>",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 6,
+                    "line": 8,
                     "rawdescription": "\n"
                 },
                 {
@@ -1192,11 +1192,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "InputSignal<string>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 3,
+                    "line": 5,
                     "rawdescription": "\n"
                 },
                 {
@@ -1204,11 +1204,11 @@
                     "coverageIgnore": false,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "InputSignal<string>",
                     "indexKey": "",
                     "optional": true,
                     "description": "",
-                    "line": 4,
+                    "line": 6,
                     "rawdescription": "\n"
                 }
             ],
@@ -26801,38 +26801,33 @@
         },
         {
             "name": "EclMultiselectOptionDirective",
-            "id": "directive-EclMultiselectOptionDirective-8b66d7a79b47c8f710330e652c6acb40b41163f328b678f7613360b2b3a080a0008fd0e86a49a1d33ed6ea2b28a182cc4b0be121ea98d11d1a4c72119d95a210",
+            "id": "directive-EclMultiselectOptionDirective-0039fce5ceed212a856e0b9398a316963228a76be8e4eb6e8d0cf3b33cb0c5d6e461beff3a3c8994e00085efc6d3a2a7b5e11d7de3b419ffe53bb10b7f10f1af",
             "file": "packages/ecl/components/ecl-multiselect/ecl-multiselect-option.directive.ts",
             "type": "directive",
             "description": "<p>Directive used to decorate <option> and <optgroup> elements within a multiselect.\nAdds support for value, label, disabled, selected states and styling.</p>\n",
             "rawdescription": "\n\nDirective used to decorate <option> and <optgroup> elements within a multiselect.\nAdds support for value, label, disabled, selected states and styling.\n",
-            "sourceCode": "import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, ElementRef, HostBinding, Input, forwardRef, inject, input, contentChildren } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to decorate <option> and <optgroup> elements within a multiselect.\n * Adds support for value, label, disabled, selected states and styling.\n */\n@Directive({\n    selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',\n})\nexport class EclMultiselectOptionDirective extends ECLBaseDirective {\n\n    /**\n     * Nested option directives (used for optgroups).\n     */\n    readonly eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective));\n\n    /**\n     * Value assigned to the option.\n     */\n    readonly value = input<string>(undefined);\n\n    /**\n     * Label displayed for the option.\n     */\n    readonly label = input<string>(undefined);\n\n    /**\n     * Emits whenever the option's state changes (used internally).\n     */\n    changes = new Subject();\n\n    /**\n     * Indicates that the option is disabled.\n     */\n    @Input()\n    @HostBinding('attr.disabled')\n    get disabled(): boolean {\n        return this._disabled || null;\n    }\n    set disabled(value: BooleanInput) {\n        this._disabled = coerceBooleanProperty(value);\n    }\n    private _disabled = false;\n\n    /**\n     * Indicates that the option is selected.\n     */\n    @Input()\n    @HostBinding('attr.selected')\n    get selected(): boolean {\n        return this._selected || null;\n    }\n    set selected(value) {\n        this._selected = coerceBooleanProperty(value);\n    }\n    private _selected = false;\n    private elRef = inject(ElementRef);\n\n    /**\n     * Applies ECL checkbox styling class to the option.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();\n    }\n\n    /**\n     * Returns true if this directive is applied to an <optgroup> element.\n     */\n    isOptGroup(): boolean {\n        return this.elRef.nativeElement.nodeName === 'OPTGROUP';\n    }\n}\n",
+            "sourceCode": "import { Directive, ElementRef, booleanAttribute, forwardRef, inject, input, contentChildren } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to decorate <option> and <optgroup> elements within a multiselect.\n * Adds support for value, label, disabled, selected states and styling.\n */\n@Directive({\n    selector: 'optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]',\n    host: {\n        '[attr.disabled]': 'disabled() || null',\n        '[attr.selected]': 'selected() || null',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclMultiselectOptionDirective extends ECLBaseDirective {\n\n    /**\n     * Nested option directives (used for optgroups).\n     */\n    readonly eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective));\n\n    /**\n     * Value assigned to the option.\n     */\n    readonly value = input<string>(undefined);\n\n    /**\n     * Label displayed for the option.\n     */\n    readonly label = input<string>(undefined);\n\n    /**\n     * Indicates that the option is disabled.\n     */\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Indicates that the option is selected.\n     */\n    readonly selected = input(false, { transform: booleanAttribute });\n\n    /**\n     * Applies ECL checkbox styling class to the option.\n     */\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();\n    }\n\n    private readonly elRef = inject(ElementRef);\n\n    /**\n     * Returns true if this directive is applied to an <optgroup> element.\n     */\n    isOptGroup(): boolean {\n        return this.elRef.nativeElement.nodeName === 'OPTGROUP';\n    }\n}\n",
             "selector": "optgroup[eclMultiselectOptgroup], option[eclMultiselectOption]",
             "providers": [],
             "hostDirectives": [],
             "standalone": false,
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
                     "name": "disabled",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates that the option is disabled.\n",
-                    "description": "<p>Indicates that the option is disabled.</p>\n",
-                    "line": 40,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
                     "coverageIgnore": false,
-                    "name": "selected",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates that the option is selected.\n",
-                    "description": "<p>Indicates that the option is selected.</p>\n",
-                    "line": 53,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates that the option is disabled.</p>\n",
+                    "line": 36,
+                    "rawdescription": "\n\nIndicates that the option is disabled.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "name": "label",
@@ -26844,7 +26839,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label displayed for the option.</p>\n",
-                    "line": 28,
+                    "line": 31,
                     "rawdescription": "\n\nLabel displayed for the option.\n",
                     "modifierKind": [
                         148
@@ -26852,308 +26847,211 @@
                     "required": false
                 },
                 {
-                    "name": "value",
+                    "name": "selected",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "boolean",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Value assigned to the option.</p>\n",
-                    "line": 23,
-                    "rawdescription": "\n\nValue assigned to the option.\n",
+                    "description": "<p>Indicates that the option is selected.</p>\n",
+                    "line": 41,
+                    "rawdescription": "\n\nIndicates that the option is selected.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
                 {
+                    "name": "value",
                     "coverageIgnore": false,
-                    "name": "class",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 8,
-                    "type": "string",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "e2eAttr",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 10,
-                    "type": "any",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                },
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "tabindex",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 13,
-                    "type": "number",
-                    "decorators": [],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                }
-            ],
-            "outputsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies ECL checkbox styling class to the option.\n",
-                    "description": "<p>Applies ECL checkbox styling class to the option.</p>\n",
-                    "line": 66,
                     "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [],
-            "propertiesClass": [
-                {
-                    "name": "changes",
-                    "coverageIgnore": false,
-                    "defaultValue": "new Subject()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Emits whenever the option&#39;s state changes (used internally).</p>\n",
-                    "line": 33,
-                    "rawdescription": "\n\nEmits whenever the option's state changes (used internally).\n"
-                },
-                {
-                    "name": "eclOptionItems",
-                    "coverageIgnore": false,
-                    "defaultValue": "contentChildren(forwardRef(() => EclMultiselectOptionDirective))",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Nested option directives (used for optgroups).</p>\n",
-                    "line": 18,
-                    "rawdescription": "\n\nNested option directives (used for optgroups).\n",
+                    "description": "<p>Value assigned to the option.</p>\n",
+                    "line": 26,
+                    "rawdescription": "\n\nValue assigned to the option.\n",
                     "modifierKind": [
                         148
-                    ]
-                }
-            ],
-            "methodsClass": [
-                {
-                    "name": "isOptGroup",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "boolean",
-                    "typeParameters": [],
-                    "line": 73,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nReturns true if this directive is applied to an <optgroup> element.\n",
-                    "description": "<p>Returns true if this directive is applied to an <optgroup> element.</p>\n"
-                },
-                {
-                    "name": "getCssClasses",
-                    "coverageIgnore": false,
-                    "args": [
-                        {
-                            "name": "rootClass",
-                            "type": "string",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
                     ],
-                    "optional": false,
-                    "returnType": "string",
-                    "typeParameters": [],
-                    "line": 15,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "jsdoctags": [
-                        {
-                            "name": "rootClass",
-                            "type": "string",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": "",
-                            "tagName": {
-                                "text": "param"
-                            }
-                        }
-                    ],
-                    "inheritance": {
-                        "file": "ECLBaseDirective"
-                    }
-                }
-            ],
-            "coverageIgnore": false,
-            "jsdoctags": [
-                {
-                    "pos": 279,
-                    "end": 444,
-                    "kind": 321,
-                    "id": 0,
-                    "flags": 16777216,
-                    "modifierFlagsCache": 0,
-                    "transformFlags": 0,
-                    "comment": "Directive used to decorate <option> and <optgroup> elements within a multiselect.\nAdds support for value, label, disabled, selected states and styling."
-                }
-            ],
-            "extends": [
-                "ECLBaseDirective"
-            ],
-            "accessors": {
-                "disabled": {
-                    "name": "disabled",
-                    "setSignature": {
-                        "name": "disabled",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "BooleanInput",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 43,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "BooleanInput",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "disabled",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 40,
-                        "rawdescription": "\n\nIndicates that the option is disabled.\n",
-                        "description": "<p>Indicates that the option is disabled.</p>\n"
-                    }
-                },
-                "selected": {
-                    "name": "selected",
-                    "setSignature": {
-                        "name": "selected",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "unknown",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 56,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "unknown",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "selected",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 53,
-                        "rawdescription": "\n\nIndicates that the option is selected.\n",
-                        "description": "<p>Indicates that the option is selected.</p>\n"
-                    }
+                    "required": false
                 },
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 66,
-                        "rawdescription": "\n\nApplies ECL checkbox styling class to the option.\n",
-                        "description": "<p>Applies ECL checkbox styling class to the option.</p>\n"
-                    }
-                }
-            },
-            "relationships": {
-                "incoming": [],
-                "outgoing": [
-                    {
-                        "name": "ECLBaseDirective",
-                        "type": "directive"
-                    }
-                ]
-            }
-        },
-        {
-            "name": "EclNavigationListImageDirective",
-            "id": "directive-EclNavigationListImageDirective-9cb3681323fae8e533ce375b3729896913f79a0a618674c55b8206cd78a12259138517e880b3cc808951adad470cb5e9c9531fbdfb4363027da6fc89d9bde452",
-            "file": "packages/ecl/components/ecl-navigation-list/ecl-navigation-list-picture.directive.ts",
-            "type": "directive",
-            "description": "<p>This directive adds specific class to the image element, used in &#39;ecl-navigation-list-item&#39;.</p>\n",
-            "rawdescription": "\n\nThis directive adds specific class to the image element, used in 'ecl-navigation-list-item'.\n",
-            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive adds specific class to the picture element, used in 'ecl-navigation-list-item'.\n */\n@Directive({\n    selector: 'picture[eclNavigationListPicture]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclNavigationListPictureDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-navigation-list__picture')].join(' ').trim();\n    }\n}\n\n/**\n * This directive adds specific class to the image element, used in 'ecl-navigation-list-item'.\n */\n@Directive({\n    selector: 'img[eclNavigationListImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclNavigationListImageDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-navigation-list__image')].join(' ').trim();\n    }\n}\n",
-            "selector": "img[eclNavigationListImage]",
-            "providers": [],
-            "hostDirectives": [],
-            "standalone": false,
-            "inputsClass": [
+                {
+                    "coverageIgnore": false,
+                    "name": "class",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "line": 8,
+                    "type": "string",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "coverageIgnore": false,
+                    "name": "e2eAttr",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "line": 10,
+                    "type": "any",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                },
+                {
+                    "coverageIgnore": false,
+                    "required": false,
+                    "name": "tabindex",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "line": 13,
+                    "type": "number",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "eclOptionItems",
+                    "coverageIgnore": false,
+                    "defaultValue": "contentChildren(forwardRef(() => EclMultiselectOptionDirective))",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Nested option directives (used for optgroups).</p>\n",
+                    "line": 21,
+                    "rawdescription": "\n\nNested option directives (used for optgroups).\n",
+                    "modifierKind": [
+                        148
+                    ]
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "isOptGroup",
+                    "coverageIgnore": false,
+                    "args": [],
+                    "optional": false,
+                    "returnType": "boolean",
+                    "typeParameters": [],
+                    "line": 55,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nReturns true if this directive is applied to an <optgroup> element.\n",
+                    "description": "<p>Returns true if this directive is applied to an <optgroup> element.</p>\n"
+                },
+                {
+                    "name": "getCssClasses",
+                    "coverageIgnore": false,
+                    "args": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "string",
+                    "typeParameters": [],
+                    "line": 15,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n",
+                    "description": "",
+                    "jsdoctags": [
+                        {
+                            "name": "rootClass",
+                            "type": "string",
+                            "optional": false,
+                            "dotDotDotToken": false,
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "ECLBaseDirective"
+                    }
+                }
+            ],
+            "coverageIgnore": false,
+            "jsdoctags": [
+                {
+                    "pos": 168,
+                    "end": 333,
+                    "kind": 321,
+                    "id": 0,
+                    "flags": 16777216,
+                    "modifierFlagsCache": 0,
+                    "transformFlags": 0,
+                    "comment": "Directive used to decorate <option> and <optgroup> elements within a multiselect.\nAdds support for value, label, disabled, selected states and styling."
+                }
+            ],
+            "extends": [
+                "ECLBaseDirective"
+            ],
+            "accessors": {
+                "cssClasses": {
+                    "name": "cssClasses",
+                    "getSignature": {
+                        "name": "cssClasses",
+                        "type": "string",
+                        "returnType": "string",
+                        "line": 46,
+                        "rawdescription": "\n\nApplies ECL checkbox styling class to the option.\n",
+                        "description": "<p>Applies ECL checkbox styling class to the option.</p>\n"
+                    }
+                }
+            },
+            "relationships": {
+                "incoming": [],
+                "outgoing": [
+                    {
+                        "name": "ECLBaseDirective",
+                        "type": "directive"
+                    }
+                ]
+            }
+        },
+        {
+            "name": "EclNavigationListImageDirective",
+            "id": "directive-EclNavigationListImageDirective-9cb3681323fae8e533ce375b3729896913f79a0a618674c55b8206cd78a12259138517e880b3cc808951adad470cb5e9c9531fbdfb4363027da6fc89d9bde452",
+            "file": "packages/ecl/components/ecl-navigation-list/ecl-navigation-list-picture.directive.ts",
+            "type": "directive",
+            "description": "<p>This directive adds specific class to the image element, used in &#39;ecl-navigation-list-item&#39;.</p>\n",
+            "rawdescription": "\n\nThis directive adds specific class to the image element, used in 'ecl-navigation-list-item'.\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * This directive adds specific class to the picture element, used in 'ecl-navigation-list-item'.\n */\n@Directive({\n    selector: 'picture[eclNavigationListPicture]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclNavigationListPictureDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-picture ecl-navigation-list__picture')].join(' ').trim();\n    }\n}\n\n/**\n * This directive adds specific class to the image element, used in 'ecl-navigation-list-item'.\n */\n@Directive({\n    selector: 'img[eclNavigationListImage]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclNavigationListImageDirective extends ECLBaseDirective {\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-navigation-list__image')].join(' ').trim();\n    }\n}\n",
+            "selector": "img[eclNavigationListImage]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [
                 {
                     "coverageIgnore": false,
                     "name": "class",
@@ -65811,12 +65709,13 @@
         },
         {
             "name": "EclMultiselectComponent",
-            "id": "component-EclMultiselectComponent-84ee2ba58e6be588ac6285fe9dacced7fd5818c9efa739c676e2d2060b967f68577540432304bbb7c9ee4c10273565a0be4414b11d2dbce84a74152e92380830",
+            "id": "component-EclMultiselectComponent-9f13ff28d7eec9996acc2bef9dab276820f8a649482f8ba00072c1c1996e5fb5809989fd7252ca4e565a1fd47a595fa9ee68fcaf270b7d53960f7ab549d15b7f",
             "file": "packages/ecl/components/ecl-multiselect/ecl-multiselect.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
             ],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [
@@ -65835,88 +65734,126 @@
             "hostDirectives": [],
             "inputsClass": [
                 {
+                    "name": "ariaDescribedby",
                     "coverageIgnore": false,
-                    "name": "counterLabel",
+                    "defaultValue": "undefined",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.\n",
-                    "description": "<p>Label for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: &#39;ecl.multiselect.SELECTED&#39;.</p>\n",
-                    "line": 151,
-                    "type": "string",
-                    "decorators": []
+                    "type": "string | undefined",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Defines the <code>aria-describedby</code> attribute for accessibility.</p>\n",
+                    "line": 42,
+                    "rawdescription": "\n\nDefines the `aria-describedby` attribute for accessibility.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "counterLabel",
                     "coverageIgnore": false,
-                    "name": "disabled",
+                    "defaultValue": "'ecl.multiselect.SELECTED'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nDisables the multiselect component when set to true.\n",
-                    "description": "<p>Disables the multiselect component when set to true.</p>\n",
-                    "line": 71,
-                    "type": "BooleanInput",
-                    "decorators": []
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Label for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: &#39;ecl.multiselect.SELECTED&#39;.</p>\n",
+                    "line": 98,
+                    "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "disabled",
                     "coverageIgnore": false,
-                    "name": "eclPlaceholder",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nPlaceholder text to show in the multiselect input field when no options are selected.\n",
-                    "description": "<p>Placeholder text to show in the multiselect input field when no options are selected.</p>\n",
-                    "line": 131,
-                    "type": "string",
-                    "decorators": []
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Disables the multiselect component when set to true.</p>\n",
+                    "line": 62,
+                    "rawdescription": "\n\nDisables the multiselect component when set to true.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "eclPlaceholder",
                     "coverageIgnore": false,
-                    "required": false,
-                    "name": "hasSearchBox",
+                    "defaultValue": "'Select item'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEnables the search box within the dropdown.\n",
-                    "description": "<p>Enables the search box within the dropdown.</p>\n",
-                    "line": 98,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Placeholder text to show in the multiselect input field when no options are selected.</p>\n",
+                    "line": 87,
+                    "rawdescription": "\n\nPlaceholder text to show in the multiselect input field when no options are selected.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "eclSize",
                     "coverageIgnore": false,
-                    "required": false,
-                    "name": "hasSelectAll",
+                    "defaultValue": "'m'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nDisplays the \"Select all\" option in the dropdown.\n",
-                    "description": "<p>Displays the &quot;Select all&quot; option in the dropdown.</p>\n",
-                    "line": 109,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Multiselect size: &#39;s&#39; | &#39;m&#39; | &#39;l&#39;. Default is &#39;m&#39;.</p>\n",
+                    "line": 92,
+                    "rawdescription": "\n\nMultiselect size: 's' | 'm' | 'l'. Default is 'm'.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "hasSearchBox",
                     "coverageIgnore": false,
-                    "required": false,
-                    "name": "isInvalid",
+                    "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nMarks the multiselect as invalid.\n",
-                    "description": "<p>Marks the multiselect as invalid.</p>\n",
-                    "line": 56,
-                    "type": "boolean | undefined",
-                    "decorators": []
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Enables the search box within the dropdown.</p>\n",
+                    "line": 72,
+                    "rawdescription": "\n\nEnables the search box within the dropdown.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
+                    "name": "hasSelectAll",
                     "coverageIgnore": false,
-                    "required": false,
-                    "name": "isSubmitOnApply",
+                    "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nWhen true, the Apply button in the dropdown acts as a submit button (type=\"submit\").\n",
-                    "description": "<p>When true, the Apply button in the dropdown acts as a submit button (type=&quot;submit&quot;).</p>\n",
-                    "line": 120,
-                    "type": "string",
-                    "decorators": []
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Displays the &quot;Select all&quot; option in the dropdown.</p>\n",
+                    "line": 77,
+                    "rawdescription": "\n\nDisplays the \"Select all\" option in the dropdown.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "name": "ariaDescribedby",
+                    "name": "id",
                     "coverageIgnore": false,
                     "defaultValue": "undefined",
                     "deprecated": false,
@@ -65924,43 +65861,43 @@
                     "type": "string | undefined",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Defines the <code>aria-describedby</code> attribute for accessibility.</p>\n",
-                    "line": 40,
-                    "rawdescription": "\n\nDefines the `aria-describedby` attribute for accessibility.\n",
+                    "description": "<p>Sets the <code>id</code> attribute of the multiselect component.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nSets the `id` attribute of the multiselect component.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
                 {
-                    "name": "eclSize",
+                    "name": "isInvalid",
                     "coverageIgnore": false,
-                    "defaultValue": "'m'",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "boolean",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Multiselect size: &#39;s&#39; | &#39;m&#39; | &#39;l&#39;. Default is &#39;m&#39;.</p>\n",
-                    "line": 144,
-                    "rawdescription": "\n\nMultiselect size: 's' | 'm' | 'l'. Default is 'm'.\n",
+                    "description": "<p>Marks the multiselect as invalid.</p>\n",
+                    "line": 57,
+                    "rawdescription": "\n\nMarks the multiselect as invalid.\n",
                     "modifierKind": [
                         148
                     ],
                     "required": false
                 },
                 {
-                    "name": "id",
+                    "name": "isSubmitOnApply",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string | undefined",
+                    "type": "boolean",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Sets the <code>id</code> attribute of the multiselect component.</p>\n",
-                    "line": 45,
-                    "rawdescription": "\n\nSets the `id` attribute of the multiselect component.\n",
+                    "description": "<p>When true, the Apply button in the dropdown acts as a submit button (type=&quot;submit&quot;).</p>\n",
+                    "line": 82,
+                    "rawdescription": "\n\nWhen true, the Apply button in the dropdown acts as a submit button (type=\"submit\").\n",
                     "modifierKind": [
                         148
                     ],
@@ -65976,7 +65913,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label used for the toggle button that expands or collapses the dropdown.</p>\n",
-                    "line": 50,
+                    "line": 52,
                     "rawdescription": "\n\nLabel used for the toggle button that expands or collapses the dropdown.\n",
                     "modifierKind": [
                         148
@@ -66037,7 +65974,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits an array of selected option values when the selection changes.</p>\n",
-                    "line": 92,
+                    "line": 67,
                     "rawdescription": "\n\nEmits an array of selected option values when the selection changes.\n",
                     "modifierKind": [
                         148
@@ -66056,24 +65993,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>List of option directives projected into the component.</p>\n",
-                    "line": 35,
+                    "line": 37,
                     "rawdescription": "\n\nList of option directives projected into the component.\n",
                     "modifierKind": [
                         148
                     ]
-                },
-                {
-                    "name": "injector",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(Injector)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 30,
-                    "rawdescription": "\n"
                 }
             ],
             "methodsClass": [
@@ -66084,7 +66008,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 193,
+                    "line": 146,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -66097,7 +66021,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 212,
+                    "line": 165,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -66110,7 +66034,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 203,
+                    "line": 156,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -66158,34 +66082,21 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nCSS classes applied to the host element.\n",
-                    "description": "<p>CSS classes applied to the host element.</p>\n",
-                    "line": 85,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "description": "<p>Component representing a custom multiselect input using the ECL design system.</p>\n<p>Should be used on a native <select> element to enhance it with ECL multiselect behavior.\nReplaces the original element with a custom dropdown rendered dynamically.</p>\n",
             "rawdescription": "\n\nComponent representing a custom multiselect input using the ECL design system.\n\nShould be used on a native <select> element to enhance it with ECL multiselect behavior.\nReplaces the original element with a custom dropdown rendered dynamically.\n",
             "type": "component",
-            "sourceCode": "import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport { Component, DoCheck, ElementRef, HostBinding, Injector, Input, IterableDiffer, IterableDiffers, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewContainerRef, ViewEncapsulation, afterNextRender, booleanAttribute, forwardRef, inject, output, input, contentChildren } from '@angular/core';\nimport { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMultiselectDropdownComponent } from './ecl-multiselect-dropdown/ecl-multiselect-dropdown.component';\nimport { EclMultiselectOptionDirective } from './ecl-multiselect-option.directive';\n\n/**\n * Component representing a custom multiselect input using the ECL design system.\n *\n * Should be used on a native <select> element to enhance it with ECL multiselect behavior.\n * Replaces the original element with a custom dropdown rendered dynamically.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'select[eclMultiselect]',\n    templateUrl: 'ecl-multiselect.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => EclMultiselectComponent),\n            multi: true,\n        },\n    ],\n})\nexport class EclMultiselectComponent extends ECLBaseDirective implements DoCheck, OnInit, OnDestroy {\n    injector = inject(Injector);\n\n    /**\n     * List of option directives projected into the component.\n     */\n    readonly eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective));\n\n    /**\n     * Defines the `aria-describedby` attribute for accessibility.\n     */\n    readonly ariaDescribedby = input<string | undefined>(undefined);\n\n    /**\n     * Sets the `id` attribute of the multiselect component.\n     */\n    readonly id = input<string | undefined>(undefined);\n\n    /**\n     * Label used for the toggle button that expands or collapses the dropdown.\n     */\n    readonly toggleLabel = input<string | undefined>(undefined);\n\n    /**\n     * Marks the multiselect as invalid.\n     */\n    @Input({ transform: booleanAttribute })\n    get isInvalid(): boolean | undefined {\n        return this._isInvalid;\n    }\n    set isInvalid(value: boolean | undefined) {\n        this._isInvalid = value;\n        if (this.multiselectComponent) {\n            this.multiselectComponent.isInvalid = value;\n        }\n    }\n\n    /**\n     * Disables the multiselect component when set to true.\n     */\n    @Input()\n    @HostBinding('attr.disabled')\n    set disabled(value: BooleanInput) {\n        if (this.multiselectComponent) {\n            this.multiselectComponent.disabled = coerceBooleanProperty(value);\n        }\n        this._disabled = coerceBooleanProperty(value);\n    }\n    get disabled(): boolean | undefined {\n        return this._disabled || undefined;\n    }\n\n    /**\n     * CSS classes applied to the host element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-select')].join(' ').trim();\n    }\n\n    /**\n     * Emits an array of selected option values when the selection changes.\n     */\n    readonly eclChange = output<string[]>();\n\n    /**\n     * Enables the search box within the dropdown.\n     */\n    @Input({ transform: booleanAttribute })\n    set hasSearchBox(value: string) {\n        if (this.multiselectComponent) {\n            this.multiselectComponent.hasSearchBox = coerceBooleanProperty(value);\n        }\n        this._hasSearchBox = coerceBooleanProperty(value);\n    }\n\n    /**\n     * Displays the \"Select all\" option in the dropdown.\n     */\n    @Input({ transform: booleanAttribute })\n    set hasSelectAll(value: string) {\n        if (this.multiselectComponent) {\n            this.multiselectComponent.hasSelectAll = coerceBooleanProperty(value);\n        }\n        this._hasSelectAll = coerceBooleanProperty(value);\n    }\n\n    /**\n     * When true, the Apply button in the dropdown acts as a submit button (type=\"submit\").\n     */\n    @Input({ transform: booleanAttribute })\n    set isSubmitOnApply(value: string) {\n        if (this.multiselectComponent) {\n            this.multiselectComponent.isSubmitOnApply.set(coerceBooleanProperty(value));\n        }\n        this._isSubmitOnApply = coerceBooleanProperty(value);\n    }\n\n    /**\n     * Placeholder text to show in the multiselect input field when no options are selected.\n     */\n    @Input()\n    set eclPlaceholder(value: string) {\n        this._eclPlaceholder = value;\n        if (this.multiselectComponent) {\n            this.multiselectComponent.mainInputPlaceholder = value;\n        }\n    }\n    get eclPlaceholder(): string {\n        return this._eclPlaceholder;\n    }\n\n    /**\n     * Multiselect size: 's' | 'm' | 'l'. Default is 'm'.\n     */\n    readonly eclSize = input('m');\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     * Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.\n     */\n    @Input()\n    set counterLabel(value: string) {\n        this._counterLabel = value;\n        if (this.multiselectComponent) {\n            this.multiselectComponent.counterLabel = value;\n        }\n    }\n\n    private readonly SELECT_CONTAINER_CLASS = 'ecl-select__container';\n    private readonly SELECT_CONTAINER_HIDDEN_CLASS = 'ecl-select__container--hidden';\n    private _disabled = false;\n    private _hasSelectAll = true;\n    private _hasSearchBox = true;\n    private _isSubmitOnApply = false;\n    private _counterLabel = 'ecl.multiselect.SELECTED';\n    private _isInvalid = false;\n    private _eclPlaceholder = 'Select item';\n    private differ: IterableDiffer<EclMultiselectOptionDirective>;\n    private multiselectComponent: EclMultiselectDropdownComponent;\n    private hostEl: HTMLSelectElement;\n    private hostParentEl: HTMLElement;\n    private hostWrapperEl: HTMLElement;\n    private multiselectComponentHtml: HTMLDivElement;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private el = inject(ElementRef);\n    private viewContainerRef = inject(ViewContainerRef);\n    private differs = inject(IterableDiffers);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        afterNextRender(() => {\n            this.attachOptions();\n            if (this.hostParentEl != null) {\n                this.hideOriginalSelectComponent();\n                this.renderer.insertBefore(this.hostParentEl, this.multiselectComponentHtml, this.hostWrapperEl);\n                this.setAriaLabelledBy();\n            }\n        });\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclOptionItems());\n\n        if (diff) {\n            if (this.multiselectComponent) {\n                this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.hostEl = this.getHostElement();\n            this.hostParentEl = this.getHostParentElement(this.hostEl);\n            this.hostWrapperEl = this.createHostWrapperContainer();\n            this.multiselectComponentHtml = this.createMultiselectComponent();\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private hideOriginalSelectComponent(): void {\n        this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);\n        this.hostWrapperEl.appendChild(this.hostEl);\n        this.renderer.addClass(this.hostWrapperEl, this.SELECT_CONTAINER_HIDDEN_CLASS);\n        this.renderer.setAttribute(this.hostWrapperEl, 'tabindex', '-1');\n        this.renderer.setAttribute(this.hostEl, 'tabindex', '-1');\n    }\n\n    private createHostWrapperContainer(): HTMLElement {\n        const wrapperContainer = this.renderer.createElement('div');\n        this.renderer.addClass(wrapperContainer, this.SELECT_CONTAINER_CLASS);\n        this.renderer.addClass(wrapperContainer, `${this.SELECT_CONTAINER_CLASS}--${this.eclSize()}`);\n        return wrapperContainer;\n    }\n\n    private getHostElement(): HTMLSelectElement {\n        return this.el.nativeElement;\n    }\n\n    private getHostParentElement(hostEl: HTMLSelectElement): HTMLElement {\n        return hostEl.parentElement;\n    }\n\n    private createMultiselectComponent(): HTMLDivElement {\n        const ngControl = this.injector.get(NgControl, undefined, { optional: true });\n        const multiselect = this.viewContainerRef.createComponent(EclMultiselectDropdownComponent);\n        this.multiselectComponent = multiselect.instance;\n        this.multiselectComponent.eclChange.pipe(takeUntil(this.destroy$)).subscribe((evt) => {\n            this.eclChange.emit(evt);\n        });\n        this.multiselectComponent.mainInputPlaceholder = this.eclPlaceholder;\n\n        const ariaDescribedby = this.ariaDescribedby();\n        if (ariaDescribedby !== undefined) {\n            this.multiselectComponent.ariaDescribedby = ariaDescribedby;\n        }\n        const toggleLabel = this.toggleLabel();\n        if (toggleLabel !== undefined) {\n            this.multiselectComponent.toggleLabel = toggleLabel;\n        }\n        const id = this.id();\n        if (id !== undefined) {\n            this.multiselectComponent.id = id;\n        }\n        this.multiselectComponent.eclSize = this.eclSize();\n        if (ngControl) {\n            ngControl.valueAccessor = this.multiselectComponent;\n        }\n        multiselect.instance.disabled = this.disabled;\n        multiselect.instance.isInvalid = this.isInvalid;\n        multiselect.instance.hasSearchBox = this._hasSearchBox;\n        multiselect.instance.hasSelectAll = this._hasSelectAll;\n        multiselect.instance.isSubmitOnApply.set(this._isSubmitOnApply);\n        multiselect.instance.counterLabel = this._counterLabel;\n        return (multiselect.location as ElementRef<HTMLDivElement>).nativeElement;\n    }\n\n    private setAriaLabelledBy(): void {\n        const hostSelect: HTMLElement = this.el.nativeElement;\n        const formGroup = hostSelect.closest('.ecl-form-group') as HTMLElement | null;\n        if (!formGroup) return;\n\n        const label = formGroup.querySelector('.ecl-form-label') as HTMLElement | null;\n        if (!label) return;\n\n        if (!label.id) {\n            const newLabelId = `ecl-select-label-${crypto.randomUUID()}`;\n            this.renderer.setAttribute(label, 'id', newLabelId);\n        }\n\n        if (!hostSelect.id) {\n            const newSelectId = `ecl-select-input-${crypto.randomUUID()}`;\n            this.renderer.setAttribute(hostSelect, 'id', newSelectId);\n        }\n\n        const labelledBy = `${label.id} ${hostSelect.id}`.trim();\n        this.renderer.setAttribute(hostSelect, 'aria-labelledby', labelledBy);\n    }\n\n    private attachOptions(): void {\n        setTimeout(() => {\n            this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));\n        });\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser } from '@angular/common';\nimport { Component, DoCheck, effect, ElementRef, Injector, IterableDiffer, IterableDiffers, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewContainerRef, ViewEncapsulation, afterNextRender, booleanAttribute, forwardRef, inject, output, input, contentChildren } from '@angular/core';\nimport { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMultiselectDropdownComponent } from './ecl-multiselect-dropdown/ecl-multiselect-dropdown.component';\nimport { EclMultiselectOptionDirective } from './ecl-multiselect-option.directive';\n\n/**\n * Component representing a custom multiselect input using the ECL design system.\n *\n * Should be used on a native <select> element to enhance it with ECL multiselect behavior.\n * Replaces the original element with a custom dropdown rendered dynamically.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'select[eclMultiselect]',\n    templateUrl: 'ecl-multiselect.component.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => EclMultiselectComponent),\n            multi: true,\n        },\n    ],\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.disabled]': 'disabled() || null',\n    },\n})\nexport class EclMultiselectComponent extends ECLBaseDirective implements DoCheck, OnInit, OnDestroy {\n\n    /**\n     * List of option directives projected into the component.\n     */\n    readonly eclOptionItems = contentChildren(forwardRef(() => EclMultiselectOptionDirective));\n\n    /**\n     * Defines the `aria-describedby` attribute for accessibility.\n     */\n    readonly ariaDescribedby = input<string | undefined>(undefined);\n\n    /**\n     * Sets the `id` attribute of the multiselect component.\n     */\n    readonly id = input<string | undefined>(undefined);\n\n    /**\n     * Label used for the toggle button that expands or collapses the dropdown.\n     */\n    readonly toggleLabel = input<string | undefined>(undefined);\n\n    /**\n     * Marks the multiselect as invalid.\n     */\n    readonly isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Disables the multiselect component when set to true.\n     */\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Emits an array of selected option values when the selection changes.\n     */\n    readonly eclChange = output<string[]>();\n\n    /**\n     * Enables the search box within the dropdown.\n     */\n    readonly hasSearchBox = input(true, { transform: booleanAttribute });\n\n    /**\n     * Displays the \"Select all\" option in the dropdown.\n     */\n    readonly hasSelectAll = input(true, { transform: booleanAttribute });\n\n    /**\n     * When true, the Apply button in the dropdown acts as a submit button (type=\"submit\").\n     */\n    readonly isSubmitOnApply = input(false, { transform: booleanAttribute });\n\n    /**\n     * Placeholder text to show in the multiselect input field when no options are selected.\n     */\n    readonly eclPlaceholder = input('Select item');\n\n    /**\n     * Multiselect size: 's' | 'm' | 'l'. Default is 'm'.\n     */\n    readonly eclSize = input('m');\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     * Accepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.\n     */\n    readonly counterLabel = input('ecl.multiselect.SELECTED');\n\n    private readonly SELECT_CONTAINER_CLASS = 'ecl-select__container';\n    private readonly SELECT_CONTAINER_HIDDEN_CLASS = 'ecl-select__container--hidden';\n    private readonly injector = inject(Injector);\n    private readonly el = inject(ElementRef);\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly differs = inject(IterableDiffers);\n    private readonly renderer = inject(Renderer2);\n    private readonly platformId = inject(PLATFORM_ID);\n    private differ: IterableDiffer<EclMultiselectOptionDirective>;\n    private multiselectComponent: EclMultiselectDropdownComponent;\n    private hostEl: HTMLSelectElement;\n    private hostParentEl: HTMLElement;\n    private hostWrapperEl: HTMLElement;\n    private multiselectComponentHtml: HTMLDivElement;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    constructor() {\n        super();\n        this.differ = this.differs.find([]).create();\n        // Keep the dynamically created dropdown in sync with this component's inputs.\n        // The dropdown is created lazily in ngOnInit, so the sync is guarded on its\n        // instance; once created, this effect re-applies whenever any of the inputs change.\n        effect(() => {\n            const dropdown = this.multiselectComponent;\n            if (!dropdown) {\n                return;\n            }\n            dropdown.mainInputPlaceholder.set(this.eclPlaceholder());\n            dropdown.eclSize.set(this.eclSize());\n            dropdown.disabled.set(this.disabled());\n            dropdown.isInvalid.set(this.isInvalid());\n            dropdown.hasSearchBox.set(this.hasSearchBox());\n            dropdown.hasSelectAll.set(this.hasSelectAll());\n            dropdown.isSubmitOnApply.set(this.isSubmitOnApply());\n            dropdown.counterLabel.set(this.counterLabel());\n        });\n        afterNextRender(() => {\n            this.attachOptions();\n            if (this.hostParentEl != null) {\n                this.hideOriginalSelectComponent();\n                this.renderer.insertBefore(this.hostParentEl, this.multiselectComponentHtml, this.hostWrapperEl);\n                this.setAriaLabelledBy();\n            }\n        });\n    }\n\n    ngDoCheck(): void {\n        const diff = this.differ.diff(this.eclOptionItems());\n\n        if (diff) {\n            if (this.multiselectComponent) {\n                this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));\n            }\n        }\n    }\n\n    ngOnInit(): void {\n        if (isPlatformBrowser(this.platformId)) {\n            this.hostEl = this.getHostElement();\n            this.hostParentEl = this.getHostParentElement(this.hostEl);\n            this.hostWrapperEl = this.createHostWrapperContainer();\n            this.multiselectComponentHtml = this.createMultiselectComponent();\n        }\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * CSS classes applied to the host element.\n     */\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-select')].join(' ').trim();\n    }\n\n    private hideOriginalSelectComponent(): void {\n        this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);\n        this.hostWrapperEl.appendChild(this.hostEl);\n        this.renderer.addClass(this.hostWrapperEl, this.SELECT_CONTAINER_HIDDEN_CLASS);\n        this.renderer.setAttribute(this.hostWrapperEl, 'tabindex', '-1');\n        this.renderer.setAttribute(this.hostEl, 'tabindex', '-1');\n    }\n\n    private createHostWrapperContainer(): HTMLElement {\n        const wrapperContainer = this.renderer.createElement('div');\n        this.renderer.addClass(wrapperContainer, this.SELECT_CONTAINER_CLASS);\n        this.renderer.addClass(wrapperContainer, `${this.SELECT_CONTAINER_CLASS}--${this.eclSize()}`);\n        return wrapperContainer;\n    }\n\n    private getHostElement(): HTMLSelectElement {\n        return this.el.nativeElement;\n    }\n\n    private getHostParentElement(hostEl: HTMLSelectElement): HTMLElement {\n        return hostEl.parentElement;\n    }\n\n    private createMultiselectComponent(): HTMLDivElement {\n        const ngControl = this.injector.get(NgControl, undefined, { optional: true });\n        const multiselect = this.viewContainerRef.createComponent(EclMultiselectDropdownComponent);\n        const dropdown = multiselect.instance;\n        this.multiselectComponent = dropdown;\n        dropdown.eclChange.subscribe((evt) => {\n            this.eclChange.emit(evt);\n        });\n        dropdown.mainInputPlaceholder.set(this.eclPlaceholder());\n\n        const ariaDescribedby = this.ariaDescribedby();\n        if (ariaDescribedby !== undefined) {\n            dropdown.ariaDescribedby.set(ariaDescribedby);\n        }\n        const toggleLabel = this.toggleLabel();\n        if (toggleLabel !== undefined) {\n            dropdown.toggleLabel.set(toggleLabel);\n        }\n        const id = this.id();\n        if (id !== undefined) {\n            dropdown.id.set(id);\n        }\n        dropdown.eclSize.set(this.eclSize());\n        if (ngControl) {\n            ngControl.valueAccessor = dropdown;\n        }\n        dropdown.disabled.set(this.disabled());\n        dropdown.isInvalid.set(this.isInvalid());\n        dropdown.hasSearchBox.set(this.hasSearchBox());\n        dropdown.hasSelectAll.set(this.hasSelectAll());\n        dropdown.isSubmitOnApply.set(this.isSubmitOnApply());\n        dropdown.counterLabel.set(this.counterLabel());\n        return (multiselect.location as ElementRef<HTMLDivElement>).nativeElement;\n    }\n\n    private setAriaLabelledBy(): void {\n        const hostSelect: HTMLElement = this.el.nativeElement;\n        const formGroup = hostSelect.closest('.ecl-form-group') as HTMLElement | null;\n        if (!formGroup) return;\n\n        const label = formGroup.querySelector('.ecl-form-label') as HTMLElement | null;\n        if (!label) return;\n\n        if (!label.id) {\n            const newLabelId = `ecl-select-label-${crypto.randomUUID()}`;\n            this.renderer.setAttribute(label, 'id', newLabelId);\n        }\n\n        if (!hostSelect.id) {\n            const newSelectId = `ecl-select-input-${crypto.randomUUID()}`;\n            this.renderer.setAttribute(hostSelect, 'id', newSelectId);\n        }\n\n        const labelledBy = `${label.id} ${hostSelect.id}`.trim();\n        this.renderer.setAttribute(hostSelect, 'aria-labelledby', labelledBy);\n    }\n\n    private attachOptions(): void {\n        setTimeout(() => {\n            this.multiselectComponent.multiOptionDirectives.set(Array.from(this.eclOptionItems()));\n        });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 778,
-                    "end": 1040,
+                    "pos": 678,
+                    "end": 940,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -66200,7 +66111,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 178,
+                "line": 114,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -66212,292 +66123,16 @@
                 "OnDestroy"
             ],
             "accessors": {
-                "isInvalid": {
-                    "name": "isInvalid",
-                    "setSignature": {
-                        "name": "isInvalid",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 59,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "isInvalid",
-                        "type": "unknown",
-                        "returnType": "boolean | undefined",
-                        "line": 56,
-                        "rawdescription": "\n\nMarks the multiselect as invalid.\n",
-                        "description": "<p>Marks the multiselect as invalid.</p>\n"
-                    }
-                },
-                "disabled": {
-                    "name": "disabled",
-                    "setSignature": {
-                        "name": "disabled",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "BooleanInput",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 71,
-                        "rawdescription": "\n\nDisables the multiselect component when set to true.\n",
-                        "description": "<p>Disables the multiselect component when set to true.</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "BooleanInput",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "disabled",
-                        "type": "unknown",
-                        "returnType": "boolean | undefined",
-                        "line": 77,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
                 "cssClasses": {
                     "name": "cssClasses",
                     "getSignature": {
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 85,
+                        "line": 173,
                         "rawdescription": "\n\nCSS classes applied to the host element.\n",
                         "description": "<p>CSS classes applied to the host element.</p>\n"
                     }
-                },
-                "hasSearchBox": {
-                    "name": "hasSearchBox",
-                    "setSignature": {
-                        "name": "hasSearchBox",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 98,
-                        "rawdescription": "\n\nEnables the search box within the dropdown.\n",
-                        "description": "<p>Enables the search box within the dropdown.</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "hasSelectAll": {
-                    "name": "hasSelectAll",
-                    "setSignature": {
-                        "name": "hasSelectAll",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 109,
-                        "rawdescription": "\n\nDisplays the \"Select all\" option in the dropdown.\n",
-                        "description": "<p>Displays the &quot;Select all&quot; option in the dropdown.</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "isSubmitOnApply": {
-                    "name": "isSubmitOnApply",
-                    "setSignature": {
-                        "name": "isSubmitOnApply",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 120,
-                        "rawdescription": "\n\nWhen true, the Apply button in the dropdown acts as a submit button (type=\"submit\").\n",
-                        "description": "<p>When true, the Apply button in the dropdown acts as a submit button (type=&quot;submit&quot;).</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    }
-                },
-                "eclPlaceholder": {
-                    "name": "eclPlaceholder",
-                    "setSignature": {
-                        "name": "eclPlaceholder",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 131,
-                        "rawdescription": "\n\nPlaceholder text to show in the multiselect input field when no options are selected.\n",
-                        "description": "<p>Placeholder text to show in the multiselect input field when no options are selected.</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "eclPlaceholder",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 137,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "counterLabel": {
-                    "name": "counterLabel",
-                    "setSignature": {
-                        "name": "counterLabel",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 151,
-                        "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: 'ecl.multiselect.SELECTED'.\n",
-                        "description": "<p>Label for the selections counter, read by screen readers.\nAccepts a translation key or plain text. Default: &#39;ecl.multiselect.SELECTED&#39;.</p>\n",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    }
                 }
             },
             "relationships": {
@@ -66529,7 +66164,7 @@
         },
         {
             "name": "EclMultiselectDropdownComponent",
-            "id": "component-EclMultiselectDropdownComponent-ebb4cea2fdaff5483ab9e634d29007a83f7048a32aac85a1b954a7f34f92ca45c4eff676fed34c21de9e7524314ae5fe9e14af8181b9678212efe5f01420c5e9",
+            "id": "component-EclMultiselectDropdownComponent-3383ad3b043b2cd3eefdacd09f498388a80b74f080eb8b44079f4de17c06429844f2b9bbe947a8c02b4a2128bf609c8c2738e8ebbc39822adcabe2aff9b1a9c8",
             "file": "packages/ecl/components/ecl-multiselect/ecl-multiselect-dropdown/ecl-multiselect-dropdown.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66551,71 +66186,6 @@
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "disabled",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nDisables the component when true.\n",
-                    "description": "<p>Disables the component when true.</p>\n",
-                    "line": 93,
-                    "type": "boolean | undefined",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "eclSize",
-                    "defaultValue": "'m'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSize of the multiselect dropdown (e.g., 'm', 'l').\n",
-                    "description": "<p>Size of the multiselect dropdown (e.g., &#39;m&#39;, &#39;l&#39;).</p>\n",
-                    "line": 87,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "required": false,
-                    "name": "isInvalid",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nMarks the component as visually invalid.\n",
-                    "description": "<p>Marks the component as visually invalid.</p>\n",
-                    "line": 59,
-                    "type": "boolean | undefined",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "mainInputPlaceholder",
-                    "defaultValue": "'Select an item'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nPlaceholder for the main multiselect input.\n",
-                    "description": "<p>Placeholder for the main multiselect input.</p>\n",
-                    "line": 77,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "name": "searchFieldPlaceholder",
-                    "coverageIgnore": false,
-                    "defaultValue": "'Enter filter keyword'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "<p>Placeholder for the search field input.</p>\n",
-                    "line": 82,
-                    "rawdescription": "\n\nPlaceholder for the search field input.\n",
-                    "modifierKind": [
-                        148
-                    ],
-                    "required": false
-                },
                 {
                     "coverageIgnore": false,
                     "name": "class",
@@ -66664,28 +66234,36 @@
                 {
                     "name": "eclChange",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter<string[]>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEmits the list of selected values whenever the selection changes.\n",
+                    "type": "string[]",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Emits the list of selected values whenever the selection changes.</p>\n",
-                    "line": 53,
-                    "type": "EventEmitter"
+                    "line": 47,
+                    "rawdescription": "\n\nEmits the list of selected values whenever the selection changes.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 }
             ],
             "propertiesClass": [
                 {
                     "name": "ariaDescribedby",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string | undefined",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional ARIA description used for accessibility purposes.</p>\n",
-                    "line": 103,
-                    "rawdescription": "\n\nOptional ARIA description used for accessibility purposes.\n"
+                    "line": 80,
+                    "rawdescription": "\n\nOptional ARIA description used for accessibility purposes.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "clearAllBtn",
@@ -66697,9 +66275,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 47,
+                    "line": 121,
                     "rawdescription": "\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -66713,24 +66292,44 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 46,
+                    "line": 120,
                     "rawdescription": "\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
                 {
                     "name": "counterLabel",
                     "coverageIgnore": false,
-                    "defaultValue": "'ecl.multiselect.SELECTED'",
+                    "defaultValue": "signal('ecl.multiselect.SELECTED')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label for the selections counter, read by screen readers.</p>\n",
-                    "line": 128,
-                    "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\n"
+                    "line": 105,
+                    "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "disabled",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal<boolean | undefined>(undefined)",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Disables the component when true.\nSet by the parent and by <code>ControlValueAccessor.setDisabledState</code>.</p>\n",
+                    "line": 75,
+                    "rawdescription": "\n\nDisables the component when true.\nSet by the parent and by `ControlValueAccessor.setDisabledState`.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "dropdownId",
@@ -66742,7 +66341,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 160,
+                    "line": 150,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -66758,75 +66357,92 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 118,
                     "rawdescription": "\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
                 {
-                    "name": "form",
+                    "name": "eclSize",
                     "coverageIgnore": false,
+                    "defaultValue": "signal('m')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "FormGroup",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Reactive form group managing internal form state.</p>\n",
-                    "line": 153,
-                    "rawdescription": "\n\nReactive form group managing internal form state.\n"
+                    "description": "<p>Size of the multiselect dropdown (e.g., &#39;m&#39;, &#39;l&#39;).</p>\n",
+                    "line": 69,
+                    "rawdescription": "\n\nSize of the multiselect dropdown (e.g., 'm', 'l').\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "hasSearchBox",
                     "coverageIgnore": false,
-                    "defaultValue": "true",
+                    "defaultValue": "signal(true)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Enables the search box in the dropdown interface.</p>\n",
-                    "line": 113,
-                    "rawdescription": "\n\nEnables the search box in the dropdown interface.\n"
+                    "line": 90,
+                    "rawdescription": "\n\nEnables the search box in the dropdown interface.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "hasSelectAll",
                     "coverageIgnore": false,
-                    "defaultValue": "true",
+                    "defaultValue": "signal(true)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Displays the &quot;Select all&quot; checkbox above the list of options.</p>\n",
-                    "line": 118,
-                    "rawdescription": "\n\nDisplays the \"Select all\" checkbox above the list of options.\n"
+                    "line": 95,
+                    "rawdescription": "\n\nDisplays the \"Select all\" checkbox above the list of options.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "id",
                     "coverageIgnore": false,
-                    "defaultValue": "''",
+                    "defaultValue": "signal('')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Optional identifier used for the dropdown element.</p>\n",
-                    "line": 133,
-                    "rawdescription": "\n\nOptional identifier used for the dropdown element.\n"
+                    "line": 110,
+                    "rawdescription": "\n\nOptional identifier used for the dropdown element.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
-                    "name": "isItemsSelected",
+                    "name": "isInvalid",
                     "coverageIgnore": false,
-                    "defaultValue": "computed(() => this._selectedItems().length > 0)",
+                    "defaultValue": "signal<boolean | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Indicates if any options are currently selected.</p>\n",
-                    "line": 277,
-                    "rawdescription": "\n\nIndicates if any options are currently selected.\n"
+                    "description": "<p>State configured imperatively by the parent <code>EclMultiselectComponent</code>.\nThis dropdown is created dynamically and is never bound in a template, so these\nare writable signals set through their <code>.set()</code> accessor rather than inputs.</p>\n",
+                    "line": 54,
+                    "rawdescription": "\n\nState configured imperatively by the parent `EclMultiselectComponent`.\nThis dropdown is created dynamically and is never bound in a template, so these\nare writable signals set through their `.set()` accessor rather than inputs.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "isSelectAllDisabled",
@@ -66838,7 +66454,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 161,
+                    "line": 151,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -66855,7 +66471,10 @@
                     "optional": false,
                     "description": "<p>Controls the visibility of the multiselect dropdown.</p>\n",
                     "line": 143,
-                    "rawdescription": "\n\nControls the visibility of the multiselect dropdown.\n"
+                    "rawdescription": "\n\nControls the visibility of the multiselect dropdown.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isShowNoResultsFound",
@@ -66868,7 +66487,10 @@
                     "optional": false,
                     "description": "<p>Indicates that the &quot;no results found&quot; message should be displayed.</p>\n",
                     "line": 138,
-                    "rawdescription": "\n\nIndicates that the \"no results found\" message should be displayed.\n"
+                    "rawdescription": "\n\nIndicates that the \"no results found\" message should be displayed.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isShowToolbar",
@@ -66880,8 +66502,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls the visibility of the multiselect toolbar.\nAlways visible when isSubmitOnApply is true so the user can submit the form.</p>\n",
-                    "line": 283,
-                    "rawdescription": "\n\nControls the visibility of the multiselect toolbar.\nAlways visible when isSubmitOnApply is true so the user can submit the form.\n"
+                    "line": 133,
+                    "rawdescription": "\n\nControls the visibility of the multiselect toolbar.\nAlways visible when isSubmitOnApply is true so the user can submit the form.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isSubmitOnApply",
@@ -66893,28 +66518,43 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>When true, the Apply button acts as a submit button (type=&quot;submit&quot;) instead of a regular button.</p>\n",
-                    "line": 123,
-                    "rawdescription": "\n\nWhen true, the Apply button acts as a submit button (type=\"submit\") instead of a regular button.\n"
+                    "line": 100,
+                    "rawdescription": "\n\nWhen true, the Apply button acts as a submit button (type=\"submit\") instead of a regular button.\n",
+                    "modifierKind": [
+                        148
+                    ]
+                },
+                {
+                    "name": "mainInputPlaceholder",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal('Select an item')",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Placeholder for the main multiselect input.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nPlaceholder for the main multiselect input.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "multiOptionComponents",
                     "coverageIgnore": false,
+                    "defaultValue": "viewChildren(EclMultiselectOptionComponent)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "QueryList<EclMultiselectOptionComponent>",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 48,
+                    "line": 122,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "ViewChildren",
-                            "stringifiedArguments": "EclMultiselectOptionComponent"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124,
+                        148
                     ]
                 },
                 {
@@ -66927,7 +66567,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>List of option directives currently rendered in the dropdown.</p>\n",
-                    "line": 148,
+                    "line": 115,
                     "rawdescription": "\n\nList of option directives currently rendered in the dropdown.\n"
                 },
                 {
@@ -66940,8 +66580,27 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Total number of options available in the dropdown list.</p>\n",
-                    "line": 158,
-                    "rawdescription": "\n\nTotal number of options available in the dropdown list.\n"
+                    "line": 148,
+                    "rawdescription": "\n\nTotal number of options available in the dropdown list.\n",
+                    "modifierKind": [
+                        124
+                    ]
+                },
+                {
+                    "name": "searchFieldPlaceholder",
+                    "coverageIgnore": false,
+                    "defaultValue": "signal('Enter filter keyword')",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Placeholder for the search field input.</p>\n",
+                    "line": 64,
+                    "rawdescription": "\n\nPlaceholder for the search field input.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 },
                 {
                     "name": "searchInput",
@@ -66953,9 +66612,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 43,
+                    "line": 117,
                     "rawdescription": "\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -66969,9 +66629,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 45,
+                    "line": 119,
                     "rawdescription": "\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -66985,24 +66646,27 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 162,
+                    "line": 152,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
                     ]
                 },
                 {
-                    "name": "selectedItems",
+                    "name": "selectedItemsLabels",
                     "coverageIgnore": false,
-                    "defaultValue": "computed(() => this._selectedItems().map((item) => item.label))",
+                    "defaultValue": "computed(() => this._selectedItems().map((item) => item.label()))",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Gets labels of currently selected options.</p>\n",
-                    "line": 272,
-                    "rawdescription": "\n\nGets labels of currently selected options.\n"
+                    "line": 127,
+                    "rawdescription": "\n\nGets labels of currently selected options.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "toggleId",
@@ -67014,7 +66678,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 163,
+                    "line": 153,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -67023,44 +66687,21 @@
                 {
                     "name": "toggleLabel",
                     "coverageIgnore": false,
-                    "defaultValue": "undefined",
+                    "defaultValue": "signal<string | undefined>(undefined)",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string | undefined",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label displayed for the toggle button to assist screen readers.</p>\n",
-                    "line": 108,
-                    "rawdescription": "\n\nLabel displayed for the toggle button to assist screen readers.\n"
+                    "line": 85,
+                    "rawdescription": "\n\nLabel displayed for the toggle button to assist screen readers.\n",
+                    "modifierKind": [
+                        148
+                    ]
                 }
             ],
             "methodsClass": [
-                {
-                    "name": "initSelectedOptions",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 285,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
-                {
-                    "name": "ngAfterViewInit",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 190,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "ngDoCheck",
                     "coverageIgnore": false,
@@ -67068,7 +66709,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 177,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67081,7 +66722,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 212,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67094,7 +66735,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 181,
+                    "line": 183,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -67116,11 +66757,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 337,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67151,11 +66795,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 320,
+                    "line": 281,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67186,11 +66833,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 354,
+                    "line": 315,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67221,11 +66871,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 385,
+                    "line": 346,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67256,11 +66909,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 332,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67291,11 +66947,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 314,
+                    "line": 275,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67326,11 +66985,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 364,
+                    "line": 325,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67361,11 +67023,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 393,
+                    "line": 354,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67396,11 +67061,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 295,
+                    "line": 256,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67431,11 +67099,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 307,
+                    "line": 268,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67466,11 +67137,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 380,
+                    "line": 341,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67501,11 +67175,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 302,
+                    "line": 263,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67536,11 +67213,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 350,
+                    "line": 311,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67571,11 +67251,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 402,
+                    "line": 363,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67597,11 +67280,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 245,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
-                    "description": ""
+                    "description": "",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "onKeydownMainInput",
@@ -67619,11 +67305,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 370,
+                    "line": 331,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67654,11 +67343,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 457,
+                    "line": 418,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keyboard interaction on option items.\nSupports arrow keys, tab, escape, and enter.\n",
                     "description": "<p>Handles keyboard interaction on option items.\nSupports arrow keys, tab, escape, and enter.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67689,11 +67381,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 263,
+                    "line": 250,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "event",
@@ -67724,11 +67419,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 487,
+                    "line": 448,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when a single option is clicked/selected.\nUpdates selected items, emits changes.\n",
                     "description": "<p>Triggered when a single option is clicked/selected.\nUpdates selected items, emits changes.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67759,11 +67457,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 410,
+                    "line": 371,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles search input, filters options, and updates their visibility.\n",
                     "description": "<p>Handles search input, filters options, and updates their visibility.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "input",
@@ -67785,11 +67486,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 442,
+                    "line": 403,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles all visible options based on the \"Select All\" checkbox.\n",
-                    "description": "<p>Toggles all visible options based on the &quot;Select All&quot; checkbox.</p>\n"
+                    "description": "<p>Toggles all visible options based on the &quot;Select All&quot; checkbox.</p>\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "onTabClear",
@@ -67807,11 +67511,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 342,
+                    "line": 303,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67842,11 +67549,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 325,
+                    "line": 286,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -67877,14 +67587,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 237,
+                    "line": 217,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback function to be called when the value changes.\nRequired by ControlValueAccessor.\n",
                     "description": "<p>Registers a callback function to be called when the value changes.\nRequired by ControlValueAccessor.</p>\n",
-                    "modifierKind": [
-                        125
-                    ],
                     "jsdoctags": [
                         {
                             "name": "fn",
@@ -67915,14 +67622,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 246,
+                    "line": 226,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback function to be called when the component is touched.\nRequired by ControlValueAccessor.\n",
                     "description": "<p>Registers a callback function to be called when the component is touched.\nRequired by ControlValueAccessor.</p>\n",
-                    "modifierKind": [
-                        125
-                    ],
                     "jsdoctags": [
                         {
                             "name": "fn",
@@ -67953,14 +67657,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 234,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEnables or disables the component.\nRequired by ControlValueAccessor.\n",
                     "description": "<p>Enables or disables the component.\nRequired by ControlValueAccessor.</p>\n",
-                    "modifierKind": [
-                        125
-                    ],
                     "jsdoctags": [
                         {
                             "name": "isDisabled",
@@ -67991,14 +67692,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 222,
+                    "line": 202,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a new value to the component from the outside (e.g., form model).\nRequired by ControlValueAccessor.\n",
                     "description": "<p>Writes a new value to the component from the outside (e.g., form model).\nRequired by ControlValueAccessor.</p>\n",
-                    "modifierKind": [
-                        125
-                    ],
                     "jsdoctags": [
                         {
                             "name": "values",
@@ -68055,20 +67753,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAdds the ECL base CSS class for multiselect dropdowns.\n",
-                    "description": "<p>Adds the ECL base CSS class for multiselect dropdowns.</p>\n",
-                    "line": 70,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -68098,14 +67783,14 @@
             "description": "<p>Component that renders a dropdown-style multiselect UI element.\nUsed internally by the <code>EclMultiselectComponent</code>.</p>\n",
             "rawdescription": "\n\nComponent that renders a dropdown-style multiselect UI element.\nUsed internally by the `EclMultiselectComponent`.\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, computed, DoCheck, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, QueryList, Renderer2, signal, ViewChild, ViewChildren, AfterViewInit, inject, input, viewChild } from '@angular/core';\nimport { ControlValueAccessor, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subject, takeUntil } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMultiselectInputComponent } from '../ecl-multiselect-input/ecl-multiselect-input.component';\nimport { EclMultiselectOptionDirective } from '../ecl-multiselect-option.directive';\nimport { EclMultiselectOptionComponent } from '../ecl-multiselect-option/ecl-multiselect-option.component';\nimport { EclMultiselectOption } from '../models/ecl-multiselect-option.model';\nimport { EclMultiselectMainInputClickEvent, EclMultiselectOptionClickEvent, EclMultiselectOptionKeydownEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EclMultiselectOptgroupComponent } from '../ecl-multiselect-optgroup/ecl-multiselect-optgroup.component';\nimport { EUI_ECL_CHECKBOX } from '@eui/ecl/components/ecl-checkbox';\n\n/**\n * Component that renders a dropdown-style multiselect UI element.\n * Used internally by the `EclMultiselectComponent`.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectDropdown]',\n    templateUrl: 'ecl-multiselect-dropdown.component.html',\n    imports: [\n        ...EUI_ECL_BUTTON, EclMultiselectOptionComponent, EclMultiselectOptgroupComponent,\n        EclMultiselectInputComponent, ...EUI_ECL_CHECKBOX, TranslatePipe,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => EclMultiselectDropdownComponent),\n            multi: true,\n        },\n    ],\n    host: {\n        '(keyup.escape)': 'onEscapeKey()',\n        '(document:click)': 'onKeyUp($event)',\n        '[attr.disabled]': 'disabled || undefined',\n    },\n})\nexport class EclMultiselectDropdownComponent extends ECLBaseDirective implements OnInit, ControlValueAccessor, DoCheck, OnDestroy, AfterViewInit {\n\n    readonly searchInput = viewChild<ElementRef>('searchInput');\n    readonly eclMultiselectInput = viewChild<EclMultiselectInputComponent>('eclMultiselectInput');\n    readonly selectAllCheckbox = viewChild<ElementRef>('selectAllCheckbox');\n    readonly closeBtn = viewChild('closeBtn', { read: ElementRef });\n    readonly clearAllBtn = viewChild('clearAllBtn', { read: ElementRef });\n    @ViewChildren(EclMultiselectOptionComponent) multiOptionComponents: QueryList<EclMultiselectOptionComponent>;\n\n    /**\n     * Emits the list of selected values whenever the selection changes.\n     */\n    @Output() eclChange = new EventEmitter<string[]>();\n\n    /**\n     * Marks the component as visually invalid.\n     */\n    @Input({ transform: booleanAttribute })\n    get isInvalid(): boolean | undefined {\n        return this._isInvalid;\n    }\n    set isInvalid(value: boolean | undefined) {\n        this._isInvalid = value;\n    }\n\n    /**\n     * Adds the ECL base CSS class for multiselect dropdowns.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-select__multiple')].join(' ').trim();\n    }\n\n    /**\n     * Placeholder for the main multiselect input.\n     */\n    @Input() mainInputPlaceholder = 'Select an item';\n\n    /**\n     * Placeholder for the search field input.\n     */\n    readonly searchFieldPlaceholder = input('Enter filter keyword');\n\n    /**\n     * Size of the multiselect dropdown (e.g., 'm', 'l').\n     */\n    @Input() eclSize = 'm';\n\n    /**\n     * Disables the component when true.\n     */\n    @Input({ transform: booleanAttribute })\n    get disabled(): boolean | undefined {\n        return this._disabled || undefined;\n    }\n    set disabled(value: boolean | undefined) {\n        this._disabled = value;\n    }\n\n    /**\n     * Optional ARIA description used for accessibility purposes.\n     */\n    ariaDescribedby: string | undefined = undefined;\n\n    /**\n     * Label displayed for the toggle button to assist screen readers.\n     */\n    toggleLabel: string | undefined = undefined;\n\n    /**\n     * Enables the search box in the dropdown interface.\n     */\n    hasSearchBox = true;\n\n    /**\n     * Displays the \"Select all\" checkbox above the list of options.\n     */\n    hasSelectAll = true;\n\n    /**\n     * When true, the Apply button acts as a submit button (type=\"submit\") instead of a regular button.\n     */\n    isSubmitOnApply = signal(false);\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     */\n    counterLabel = 'ecl.multiselect.SELECTED';\n\n    /**\n     * Optional identifier used for the dropdown element.\n     */\n    id = '';\n\n    /**\n     * Indicates that the \"no results found\" message should be displayed.\n     */\n    isShowNoResultsFound = false;\n\n    /**\n     * Controls the visibility of the multiselect dropdown.\n     */\n    isShowMultiselectDropdown = false;\n\n    /**\n     * List of option directives currently rendered in the dropdown.\n     */\n    multiOptionDirectives = signal<EclMultiselectOptionDirective[]>([]);\n\n    /**\n     * Reactive form group managing internal form state.\n     */\n    form: FormGroup;\n\n    /**\n     * Total number of options available in the dropdown list.\n     */\n    optionsCount = 0;\n\n    protected dropdownId = '';\n    protected isSelectAllDisabled: boolean | null = null;\n    protected selectAllId = '';\n    protected toggleId = '';\n    private _disabled = false;\n    private _isInvalid = false;\n    private _selectedItems = signal<EclMultiselectOption[]>([]);\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isWriteValueCalled = false;\n    private values = [];\n    private elRef = inject(ElementRef);\n    private renderer = inject(Renderer2);\n\n    constructor() {\n        super();\n    }\n\n    ngDoCheck(): void {\n        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;\n    }\n\n    ngOnInit(): void {\n        this.selectAllId = this.getSelectAllId();\n        this.dropdownId = this.getDropdownId();\n        this.toggleId = this.getToggleId();\n        setTimeout(() => {\n            this.modifyParentLabelForAttribute();\n        });\n    }\n\n    ngAfterViewInit(): void {\n        // Apply the current option state once, in case the option components are already\n        // present when this hook runs (their arrival does not always emit a changes event).\n        if (this.multiOptionComponents.length > 0) {\n            this.applyOptionState();\n        }\n        this.multiOptionComponents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            this.applyOptionState();\n        });\n    }\n\n    private applyOptionState(): void {\n        if (this.isWriteValueCalled) {\n            this.resetComponent();\n            this.writeValues(this.values);\n            this.isWriteValueCalled = false;\n        } else {\n            this.initSelectedOptions();\n        }\n        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Writes a new value to the component from the outside (e.g., form model).\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public writeValue(values: any): void {\n        if (this.multiOptionComponents && this.multiOptionComponents.length > 0) {\n            this.resetComponent();\n            this.writeValues(values);\n        } else {\n            this.values = values;\n            this.isWriteValueCalled = true;\n        }\n    }\n\n    /**\n     * Registers a callback function to be called when the value changes.\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public registerOnChange(fn: any): void {\n        this.propagateChange = fn;\n    }\n\n    /**\n     * Registers a callback function to be called when the component is touched.\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    public registerOnTouched(fn: any): void {\n        this.propagateTouched = fn;\n    }\n\n    /**\n     * Enables or disables the component.\n     * Required by ControlValueAccessor.\n     */\n    public setDisabledState(isDisabled: boolean): void {\n        this._disabled = isDisabled;\n    }\n\n    onEscapeKey(): void {\n        this.hideMultiselectDropdown();\n        this.eclMultiselectInput()?.onFocus();\n    }\n\n    onKeyUp(event: MouseEvent): void {\n        if (!this.elRef.nativeElement.contains(event.target)) {\n            this.hideMultiselectDropdown();\n        }\n    }\n\n    /**\n     * Gets labels of currently selected options.\n     */\n    selectedItems = computed(() => this._selectedItems().map((item) => item.label));\n\n    /**\n     * Indicates if any options are currently selected.\n     */\n    isItemsSelected = computed(() => this._selectedItems().length > 0);\n\n    /**\n     * Controls the visibility of the multiselect toolbar.\n     * Always visible when isSubmitOnApply is true so the user can submit the form.\n     */\n    isShowToolbar = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0);\n\n    initSelectedOptions(): void {\n        const items: EclMultiselectOption[] = [];\n        this.multiOptionComponents\n            .filter((elem) => elem.isChecked)\n            .forEach((item) => {\n                items.push(item);\n            });\n        this._selectedItems.set(items);\n    }\n\n    onClickClearAll(evt: Event): void {\n        evt.stopPropagation();\n        this.unselectAllActiveOptions();\n        this.eclChange.emit([]);\n        this.propagateChange([]);\n    }\n\n    onEnterClear(evt: Event): void {\n        this.onClickClearAll(evt);\n        this.eclMultiselectInput()?.onFocus();\n    }\n\n    onClickClose(evt: Event): void {\n        if (!this.isSubmitOnApply()) {\n            evt.preventDefault();\n        }\n        this.hideMultiselectDropdown();\n    }\n\n    onArrowUpClose(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        currentOptions[currentOptions.length - 1].onFocus();\n    }\n\n    onArrowDownClose(evt: Event): void {\n        evt.preventDefault();\n        this.renderer.selectRootElement(this.clearAllBtn().nativeElement, true).focus();\n    }\n\n    onTabClose(evt: Event): void {\n        if (!(evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.renderer.selectRootElement(this.clearAllBtn()?.nativeElement, true).focus();\n        }\n    }\n\n    onArrowUpClear(evt: Event): void {\n        evt.preventDefault();\n        this.renderer.selectRootElement(this.closeBtn()?.nativeElement, true).focus();\n    }\n\n    onArrowDownClear(evt: Event): void {\n        evt.preventDefault();\n        this.eclMultiselectInput().onFocus();\n    }\n\n    onTabClear(evt: Event): void {\n        if (!(evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.hideMultiselectDropdown();\n            this.eclMultiselectInput().onFocus();\n        }\n    }\n\n    onEnterSearch(evt: Event): void {\n        evt.preventDefault();\n    }\n\n    onArrowDownSearch(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        if (this.hasSelectAll) {\n            this.renderer.selectRootElement(this.selectAllCheckbox()?.nativeElement, true).focus();\n        } else {\n            currentOptions[0].onFocus();\n        }\n    }\n\n    onArrowUpSearch(evt: Event): void {\n        evt.preventDefault();\n        this.hideMultiselectDropdown();\n        this.eclMultiselectInput().onFocus();\n    }\n\n    onKeydownMainInput(evt: Event): void {\n        evt.preventDefault();\n        this.showMultiselectDropdown();\n        if (this.hasSearchBox) {\n            setTimeout(() => this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus());\n        } else  {\n            this.onArrowDownSearch(evt);\n        }\n    }\n\n    onClickMainInput(evt: EclMultiselectMainInputClickEvent): void {\n        evt.event.preventDefault();\n        this.toggleDropdown();\n    }\n\n    onArrowDownSelectAll(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        if (currentOptions.length > 0) {\n            currentOptions[0].onFocus();\n        }\n    }\n\n    onArrowUpSelectAll(evt: Event): void {\n        evt.preventDefault();\n        if (this.hasSearchBox) {\n            this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();\n        } else {\n            this.onArrowUpSearch(evt);\n        }\n    }\n\n    onEnterSelectAll(evt: Event): void {\n        evt.preventDefault();\n        (evt.target as HTMLInputElement).click();\n    }\n\n    /**\n     * Handles search input, filters options, and updates their visibility.\n     */\n    onSearch(input: EventTarget): void {\n        const keyword = (input as HTMLInputElement).value;\n        let isMatchFound = false;\n        if (keyword === '') {\n            this.enableSelectAll();\n            isMatchFound = true;\n            this.multiOptionComponents.forEach((item) => {\n                item.highlightSearchText('');\n                item.show();\n            });\n        } else {\n            this.multiOptionComponents.forEach((item) => {\n                if (item.label.toLowerCase().indexOf(keyword.toLowerCase()) < 0) {\n                    item.hide();\n                } else {\n                    isMatchFound = true;\n                    item.highlightSearchText(keyword.toLowerCase());\n                    item.show();\n                }\n            });\n            this.disableSelectAll();\n        }\n        if (!isMatchFound) {\n            this.showNoResultsFound();\n        } else {\n            this.hideNoResultsFound();\n        }\n    }\n\n    /**\n     * Toggles all visible options based on the \"Select All\" checkbox.\n     */\n    onSelectAll(): void {\n        if (this.selectAllCheckbox()?.nativeElement.checked) {\n            this.selectAllActiveOptions();\n        } else {\n            this.unselectAllActiveOptions();\n        }\n        this.propagateTouched();\n        this.eclChange.emit(this._selectedItems().map((item) => item.value));\n        this.propagateChange(this._selectedItems().map((item) => item.value));\n    }\n\n    /**\n     * Handles keyboard interaction on option items.\n     * Supports arrow keys, tab, escape, and enter.\n     */\n    onKeydownOption(evt: EclMultiselectOptionKeydownEvent): void {\n        switch (evt.keyboardEvent.key) {\n            case KeyCode.ARROW_DOWN: {\n                this.onArrowDownAndTabOption(evt.keyboardEvent, evt.multiselectOption);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                this.onArrowUpOption(evt.keyboardEvent, evt.multiselectOption);\n                break;\n            }\n            case KeyCode.ENTER: {\n                (evt.keyboardEvent.target as HTMLInputElement).click();\n                break;\n            }\n            case KeyCode.TAB: {\n                if (!evt.keyboardEvent.shiftKey) {\n                    this.onArrowDownAndTabOption(evt.keyboardEvent, evt.multiselectOption);\n                }\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Triggered when a single option is clicked/selected.\n     * Updates selected items, emits changes.\n     */\n    onOptionSelected(evt: EclMultiselectOptionClickEvent): void {\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox && selectAllCheckbox.nativeElement.checked) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        const currOption = evt.multiselectOption;\n        if (currOption.isChecked) {\n            this._selectedItems.update((items) => [...items, currOption]);\n        } else {\n            this._selectedItems.update((items) => items.filter((item) => item !== currOption));\n        }\n        this.propagateChange(this._selectedItems().map((item) => item.value));\n        this.propagateTouched();\n        this.eclChange.emit(this._selectedItems().map((item) => item.value));\n    }\n\n    private selectAllActiveOptions(): void {\n        const newItems: EclMultiselectOption[] = [...this._selectedItems()];\n        this.getActiveOptions().forEach((item) => {\n            if (!item.isChecked) {\n                item.isChecked = true;\n                newItems.push(item);\n            }\n        });\n        this._selectedItems.set(newItems);\n    }\n\n    private unselectAllActiveOptions(): void {\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        this._selectedItems.set([]);\n        this.getAvailableOptions().forEach((item) => {\n            item.isChecked = false;\n        });\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private propagateChange = (_: any): void => {\n        /* empty */\n    };\n\n    private propagateTouched = (): void => {\n        /* empty */\n    };\n\n    private showMultiselectDropdown(): void {\n        this.isShowMultiselectDropdown = true;\n    }\n\n    private hideMultiselectDropdown(): void {\n        this.isShowMultiselectDropdown = false;\n    }\n\n    private disableSelectAll(): void {\n        this.isSelectAllDisabled = true;\n    }\n\n    private enableSelectAll(): void {\n        this.isSelectAllDisabled = null;\n    }\n\n    private showNoResultsFound(): void {\n        this.isShowNoResultsFound = true;\n    }\n\n    private hideNoResultsFound(): void {\n        this.isShowNoResultsFound = false;\n    }\n\n    private resetComponent(): void {\n        this.multiOptionComponents.forEach((item) => {\n            item.isChecked = false;\n        });\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        this._selectedItems.set([]);\n    }\n\n    private writeValues(values: string[]): void {\n        if (values) {\n            const newItems: EclMultiselectOption[] = [...this._selectedItems()];\n            if (this.multiOptionComponents && this.multiOptionComponents.length > 0) {\n                this.multiOptionComponents\n                    .filter((item) => values.includes(item.value) && !item.disabled)\n                    .forEach((el) => {\n                        el.isChecked = true;\n                        newItems.push(el);\n                    });\n            }\n            this._selectedItems.set(newItems);\n        }\n    }\n\n    private toggleDropdown(): void {\n        this.isShowMultiselectDropdown = !this.isShowMultiselectDropdown;\n    }\n\n    private onArrowDownAndTabOption(evt: KeyboardEvent, option: EclMultiselectOption): void {\n        (evt as KeyboardEvent).preventDefault();\n        const index = this.getOptionIndexByIdFromActiveOptions(option.id);\n        const currentOptions = this.getActiveOptions();\n        const closeBtn = this.closeBtn();\n        if (index !== currentOptions.length - 1) {\n            const nextSiblingCheckbox = currentOptions[index + 1];\n            nextSiblingCheckbox.onFocus();\n        } else if (closeBtn) {\n            this.renderer.selectRootElement(closeBtn.nativeElement, true).focus();\n        }\n    }\n\n    private onArrowUpOption(evt: KeyboardEvent, option: EclMultiselectOption): void {\n        (evt as KeyboardEvent).preventDefault();\n        const index = this.getOptionIndexByIdFromActiveOptions(option.id);\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (index !== 0) {\n            const prevSiblingCheckbox = this.getActiveOptions()[index - 1];\n            prevSiblingCheckbox.onFocus();\n        } else if (!this.hasSelectAll || selectAllCheckbox.nativeElement.disabled) {\n            if (this.hasSearchBox) {\n                this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();\n            } else {\n                this.onArrowUpSearch(evt);\n            }\n        } else {\n            this.renderer.selectRootElement(selectAllCheckbox.nativeElement, true).focus();\n        }\n    }\n\n    private getActiveOptions(): EclMultiselectOptionComponent[] {\n        return this.multiOptionComponents ? this.multiOptionComponents.filter((item) => item.isActive) : [];\n    }\n\n    private getAvailableOptions(): EclMultiselectOptionComponent[] {\n        return this.multiOptionComponents ? this.multiOptionComponents.filter((item) => !item.disabled) : [];\n    }\n\n    private getOptionIndexByIdFromActiveOptions(id: string): number {\n        return this.getActiveOptions().findIndex((option) => option.id === id);\n    }\n\n    private getSelectAllId(): string {\n        return crypto.randomUUID();\n    }\n\n    private getDropdownId(): string {\n        return this.id !== '' ? `${this.id}-dropdown` : crypto.randomUUID();\n    }\n\n    private getToggleId(): string {\n        return this.id !== '' ? `${this.id}-toggle` : crypto.randomUUID();\n    }\n\n    private modifyParentLabelForAttribute(): void {\n        const form = this.renderer.parentNode(this.elRef.nativeElement);\n        const label = form?.querySelector('.ecl-form-label');\n        if (label) {\n            this.renderer.setAttribute(label, 'for', this.toggleId);\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, computed, DoCheck, effect, ElementRef, forwardRef, OnDestroy, OnInit, Renderer2, signal, untracked, inject, output, viewChild, viewChildren } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclMultiselectInputComponent } from '../ecl-multiselect-input/ecl-multiselect-input.component';\nimport { EclMultiselectOptionDirective } from '../ecl-multiselect-option.directive';\nimport { EclMultiselectOptionComponent } from '../ecl-multiselect-option/ecl-multiselect-option.component';\nimport { EclMultiselectOption } from '../models/ecl-multiselect-option.model';\nimport { EclMultiselectMainInputClickEvent, EclMultiselectOptionClickEvent, EclMultiselectOptionKeydownEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EclMultiselectOptgroupComponent } from '../ecl-multiselect-optgroup/ecl-multiselect-optgroup.component';\nimport { EUI_ECL_CHECKBOX } from '@eui/ecl/components/ecl-checkbox';\n\n/**\n * Component that renders a dropdown-style multiselect UI element.\n * Used internally by the `EclMultiselectComponent`.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectDropdown]',\n    templateUrl: 'ecl-multiselect-dropdown.component.html',\n    imports: [\n        ...EUI_ECL_BUTTON, EclMultiselectOptionComponent, EclMultiselectOptgroupComponent,\n        EclMultiselectInputComponent, ...EUI_ECL_CHECKBOX, TranslatePipe,\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => EclMultiselectDropdownComponent),\n            multi: true,\n        },\n    ],\n    host: {\n        '[class]': 'cssClasses',\n        '(keyup.escape)': 'onEscapeKey()',\n        '(document:click)': 'onKeyUp($event)',\n        '[attr.disabled]': 'disabled() || undefined',\n    },\n})\nexport class EclMultiselectDropdownComponent extends ECLBaseDirective implements OnInit, ControlValueAccessor, DoCheck, OnDestroy {\n\n    /**\n     * Emits the list of selected values whenever the selection changes.\n     */\n    readonly eclChange = output<string[]>();\n\n    /**\n     * State configured imperatively by the parent `EclMultiselectComponent`.\n     * This dropdown is created dynamically and is never bound in a template, so these\n     * are writable signals set through their `.set()` accessor rather than inputs.\n     */\n    readonly isInvalid = signal<boolean | undefined>(undefined);\n\n    /**\n     * Placeholder for the main multiselect input.\n     */\n    readonly mainInputPlaceholder = signal('Select an item');\n\n    /**\n     * Placeholder for the search field input.\n     */\n    readonly searchFieldPlaceholder = signal('Enter filter keyword');\n\n    /**\n     * Size of the multiselect dropdown (e.g., 'm', 'l').\n     */\n    readonly eclSize = signal('m');\n\n    /**\n     * Disables the component when true.\n     * Set by the parent and by `ControlValueAccessor.setDisabledState`.\n     */\n    readonly disabled = signal<boolean | undefined>(undefined);\n\n    /**\n     * Optional ARIA description used for accessibility purposes.\n     */\n    readonly ariaDescribedby = signal<string | undefined>(undefined);\n\n    /**\n     * Label displayed for the toggle button to assist screen readers.\n     */\n    readonly toggleLabel = signal<string | undefined>(undefined);\n\n    /**\n     * Enables the search box in the dropdown interface.\n     */\n    readonly hasSearchBox = signal(true);\n\n    /**\n     * Displays the \"Select all\" checkbox above the list of options.\n     */\n    readonly hasSelectAll = signal(true);\n\n    /**\n     * When true, the Apply button acts as a submit button (type=\"submit\") instead of a regular button.\n     */\n    readonly isSubmitOnApply = signal(false);\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     */\n    readonly counterLabel = signal('ecl.multiselect.SELECTED');\n\n    /**\n     * Optional identifier used for the dropdown element.\n     */\n    readonly id = signal('');\n\n    /**\n     * List of option directives currently rendered in the dropdown.\n     */\n    multiOptionDirectives = signal<EclMultiselectOptionDirective[]>([]);\n\n    protected readonly searchInput = viewChild<ElementRef>('searchInput');\n    protected readonly eclMultiselectInput = viewChild<EclMultiselectInputComponent>('eclMultiselectInput');\n    protected readonly selectAllCheckbox = viewChild<ElementRef>('selectAllCheckbox');\n    protected readonly closeBtn = viewChild('closeBtn', { read: ElementRef });\n    protected readonly clearAllBtn = viewChild('clearAllBtn', { read: ElementRef });\n    protected readonly multiOptionComponents = viewChildren(EclMultiselectOptionComponent);\n\n    /**\n     * Gets labels of currently selected options.\n     */\n    protected selectedItemsLabels = computed(() => this._selectedItems().map((item) => item.label()));\n\n    /**\n     * Controls the visibility of the multiselect toolbar.\n     * Always visible when isSubmitOnApply is true so the user can submit the form.\n     */\n    protected isShowToolbar = computed(() => this.isSubmitOnApply() || this._selectedItems().length > 0);\n\n    /**\n     * Indicates that the \"no results found\" message should be displayed.\n     */\n    protected isShowNoResultsFound = false;\n\n    /**\n     * Controls the visibility of the multiselect dropdown.\n     */\n    protected isShowMultiselectDropdown = false;\n\n    /**\n     * Total number of options available in the dropdown list.\n     */\n    protected optionsCount = 0;\n\n    protected dropdownId = '';\n    protected isSelectAllDisabled: boolean | null = null;\n    protected selectAllId = '';\n    protected toggleId = '';\n\n    private _selectedItems = signal<EclMultiselectOption[]>([]);\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private isWriteValueCalled = false;\n    private values = [];\n    private elRef = inject(ElementRef);\n    private renderer = inject(Renderer2);\n\n    constructor() {\n        super();\n        // Re-apply the selection state whenever the rendered set of option components\n        // changes. This replaces the previous QueryList.changes subscription: the option\n        // components arrive asynchronously (the parent publishes the option directives via\n        // a setTimeout, then the @for renders them), and their arrival does not always emit\n        // a change event. Only the identity of the option list is tracked here; the option\n        // state reads/writes inside applyOptionState run untracked so toggling an option\n        // does not re-trigger this effect.\n        effect(() => {\n            const options = this.multiOptionComponents();\n            if (options.length > 0) {\n                untracked(() => this.applyOptionState());\n            }\n        });\n    }\n\n    ngDoCheck(): void {\n        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;\n    }\n\n    ngOnInit(): void {\n        this.selectAllId = this.getSelectAllId();\n        this.dropdownId = this.getDropdownId();\n        this.toggleId = this.getToggleId();\n        setTimeout(() => {\n            this.modifyParentLabelForAttribute();\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Writes a new value to the component from the outside (e.g., form model).\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(values: any): void {\n        if (this.multiOptionComponents() && this.multiOptionComponents().length > 0) {\n            this.resetComponent();\n            this.writeValues(values);\n        } else {\n            this.values = values;\n            this.isWriteValueCalled = true;\n        }\n    }\n\n    /**\n     * Registers a callback function to be called when the value changes.\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: any): void {\n        this.propagateChange = fn;\n    }\n\n    /**\n     * Registers a callback function to be called when the component is touched.\n     * Required by ControlValueAccessor.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: any): void {\n        this.propagateTouched = fn;\n    }\n\n    /**\n     * Enables or disables the component.\n     * Required by ControlValueAccessor.\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled.set(isDisabled);\n    }\n\n    /**\n     * Adds the ECL base CSS class for multiselect dropdowns.\n     */\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-select__multiple')].join(' ').trim();\n    }\n\n    protected onEscapeKey(): void {\n        this.hideMultiselectDropdown();\n        this.eclMultiselectInput()?.onFocus();\n    }\n\n    protected onKeyUp(event: MouseEvent): void {\n        if (!this.elRef.nativeElement.contains(event.target)) {\n            this.hideMultiselectDropdown();\n        }\n    }\n\n    protected onClickClearAll(evt: Event): void {\n        evt.stopPropagation();\n        this.unselectAllActiveOptions();\n        this.eclChange.emit([]);\n        this.propagateChange([]);\n    }\n\n    protected onEnterClear(evt: Event): void {\n        this.onClickClearAll(evt);\n        this.eclMultiselectInput()?.onFocus();\n    }\n\n    protected onClickClose(evt: Event): void {\n        if (!this.isSubmitOnApply()) {\n            evt.preventDefault();\n        }\n        this.hideMultiselectDropdown();\n    }\n\n    protected onArrowUpClose(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        currentOptions[currentOptions.length - 1].onFocus();\n    }\n\n    protected onArrowDownClose(evt: Event): void {\n        evt.preventDefault();\n        this.renderer.selectRootElement(this.clearAllBtn().nativeElement, true).focus();\n    }\n\n    protected onTabClose(evt: Event): void {\n        if (!(evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.renderer.selectRootElement(this.clearAllBtn()?.nativeElement, true).focus();\n        }\n    }\n\n    protected onArrowUpClear(evt: Event): void {\n        evt.preventDefault();\n        this.renderer.selectRootElement(this.closeBtn()?.nativeElement, true).focus();\n    }\n\n    protected onArrowDownClear(evt: Event): void {\n        evt.preventDefault();\n        this.eclMultiselectInput().onFocus();\n    }\n\n    protected onTabClear(evt: Event): void {\n        if (!(evt as KeyboardEvent).shiftKey) {\n            evt.preventDefault();\n            this.hideMultiselectDropdown();\n            this.eclMultiselectInput().onFocus();\n        }\n    }\n\n    protected onEnterSearch(evt: Event): void {\n        evt.preventDefault();\n    }\n\n    protected onArrowDownSearch(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        if (this.hasSelectAll()) {\n            this.renderer.selectRootElement(this.selectAllCheckbox()?.nativeElement, true).focus();\n        } else {\n            currentOptions[0].onFocus();\n        }\n    }\n\n    protected onArrowUpSearch(evt: Event): void {\n        evt.preventDefault();\n        this.hideMultiselectDropdown();\n        this.eclMultiselectInput().onFocus();\n    }\n\n    protected onKeydownMainInput(evt: Event): void {\n        evt.preventDefault();\n        this.showMultiselectDropdown();\n        if (this.hasSearchBox()) {\n            setTimeout(() => this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus());\n        } else  {\n            this.onArrowDownSearch(evt);\n        }\n    }\n\n    protected onClickMainInput(evt: EclMultiselectMainInputClickEvent): void {\n        evt.event.preventDefault();\n        this.toggleDropdown();\n    }\n\n    protected onArrowDownSelectAll(evt: Event): void {\n        evt.preventDefault();\n        const currentOptions = this.getActiveOptions();\n        if (currentOptions.length > 0) {\n            currentOptions[0].onFocus();\n        }\n    }\n\n    protected onArrowUpSelectAll(evt: Event): void {\n        evt.preventDefault();\n        if (this.hasSearchBox()) {\n            this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();\n        } else {\n            this.onArrowUpSearch(evt);\n        }\n    }\n\n    protected onEnterSelectAll(evt: Event): void {\n        evt.preventDefault();\n        (evt.target as HTMLInputElement).click();\n    }\n\n    /**\n     * Handles search input, filters options, and updates their visibility.\n     */\n    protected onSearch(input: EventTarget): void {\n        const keyword = (input as HTMLInputElement).value;\n        let isMatchFound = false;\n        if (keyword === '') {\n            this.enableSelectAll();\n            isMatchFound = true;\n            this.multiOptionComponents().forEach((item) => {\n                item.highlightSearchText('');\n                item.show();\n            });\n        } else {\n            this.multiOptionComponents().forEach((item) => {\n                if (item.label().toLowerCase().indexOf(keyword.toLowerCase()) < 0) {\n                    item.hide();\n                } else {\n                    isMatchFound = true;\n                    item.highlightSearchText(keyword.toLowerCase());\n                    item.show();\n                }\n            });\n            this.disableSelectAll();\n        }\n        if (!isMatchFound) {\n            this.showNoResultsFound();\n        } else {\n            this.hideNoResultsFound();\n        }\n    }\n\n    /**\n     * Toggles all visible options based on the \"Select All\" checkbox.\n     */\n    protected onSelectAll(): void {\n        if (this.selectAllCheckbox()?.nativeElement.checked) {\n            this.selectAllActiveOptions();\n        } else {\n            this.unselectAllActiveOptions();\n        }\n        this.propagateTouched();\n        this.eclChange.emit(this._selectedItems().map((item) => item.value()));\n        this.propagateChange(this._selectedItems().map((item) => item.value()));\n    }\n\n    /**\n     * Handles keyboard interaction on option items.\n     * Supports arrow keys, tab, escape, and enter.\n     */\n    protected onKeydownOption(evt: EclMultiselectOptionKeydownEvent): void {\n        switch (evt.keyboardEvent.key) {\n            case KeyCode.ARROW_DOWN: {\n                this.onArrowDownAndTabOption(evt.keyboardEvent, evt.multiselectOption);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                this.onArrowUpOption(evt.keyboardEvent, evt.multiselectOption);\n                break;\n            }\n            case KeyCode.ENTER: {\n                (evt.keyboardEvent.target as HTMLInputElement).click();\n                break;\n            }\n            case KeyCode.TAB: {\n                if (!evt.keyboardEvent.shiftKey) {\n                    this.onArrowDownAndTabOption(evt.keyboardEvent, evt.multiselectOption);\n                }\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Triggered when a single option is clicked/selected.\n     * Updates selected items, emits changes.\n     */\n    protected onOptionSelected(evt: EclMultiselectOptionClickEvent): void {\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox && selectAllCheckbox.nativeElement.checked) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        const currOption = evt.multiselectOption;\n        if (currOption.isChecked()) {\n            this._selectedItems.update((items) => [...items, currOption]);\n        } else {\n            this._selectedItems.update((items) => items.filter((item) => item !== currOption));\n        }\n        this.propagateChange(this._selectedItems().map((item) => item.value()));\n        this.propagateTouched();\n        this.eclChange.emit(this._selectedItems().map((item) => item.value()));\n    }\n\n    private applyOptionState(): void {\n        if (this.isWriteValueCalled) {\n            this.resetComponent();\n            this.writeValues(this.values);\n            this.isWriteValueCalled = false;\n        } else {\n            this.initSelectedOptions();\n        }\n        this.optionsCount = this.getAvailableOptions() ? this.getAvailableOptions().length : 0;\n    }\n\n    private initSelectedOptions(): void {\n        const items: EclMultiselectOption[] = [];\n        this.multiOptionComponents()\n            .filter((elem) => elem.isChecked())\n            .forEach((item) => {\n                items.push(item);\n            });\n        this._selectedItems.set(items);\n    }\n\n    private selectAllActiveOptions(): void {\n        const newItems: EclMultiselectOption[] = [...this._selectedItems()];\n        this.getActiveOptions().forEach((item) => {\n            if (!item.isChecked()) {\n                item.isChecked.set(true);\n                newItems.push(item);\n            }\n        });\n        this._selectedItems.set(newItems);\n    }\n\n    private unselectAllActiveOptions(): void {\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        this._selectedItems.set([]);\n        this.getAvailableOptions().forEach((item) => {\n            item.isChecked.set(false);\n        });\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private propagateChange = (_: any): void => {\n        /* empty */\n    };\n\n    private propagateTouched = (): void => {\n        /* empty */\n    };\n\n    private showMultiselectDropdown(): void {\n        this.isShowMultiselectDropdown = true;\n    }\n\n    private hideMultiselectDropdown(): void {\n        this.isShowMultiselectDropdown = false;\n    }\n\n    private disableSelectAll(): void {\n        this.isSelectAllDisabled = true;\n    }\n\n    private enableSelectAll(): void {\n        this.isSelectAllDisabled = null;\n    }\n\n    private showNoResultsFound(): void {\n        this.isShowNoResultsFound = true;\n    }\n\n    private hideNoResultsFound(): void {\n        this.isShowNoResultsFound = false;\n    }\n\n    private resetComponent(): void {\n        this.multiOptionComponents().forEach((item) => {\n            item.isChecked.set(false);\n        });\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (selectAllCheckbox) {\n            this.renderer.setProperty(selectAllCheckbox.nativeElement, 'checked', false);\n        }\n        this._selectedItems.set([]);\n    }\n\n    private writeValues(values: string[]): void {\n        if (values) {\n            const newItems: EclMultiselectOption[] = [...this._selectedItems()];\n            if (this.multiOptionComponents() && this.multiOptionComponents().length > 0) {\n                this.multiOptionComponents()\n                    .filter((item) => values.includes(item.value()) && !item.disabled())\n                    .forEach((el) => {\n                        el.isChecked.set(true);\n                        newItems.push(el);\n                    });\n            }\n            this._selectedItems.set(newItems);\n        }\n    }\n\n    private toggleDropdown(): void {\n        this.isShowMultiselectDropdown = !this.isShowMultiselectDropdown;\n    }\n\n    private onArrowDownAndTabOption(evt: KeyboardEvent, option: EclMultiselectOption): void {\n        (evt as KeyboardEvent).preventDefault();\n        const index = this.getOptionIndexByIdFromActiveOptions(option.id);\n        const currentOptions = this.getActiveOptions();\n        const closeBtn = this.closeBtn();\n        if (index !== currentOptions.length - 1) {\n            const nextSiblingCheckbox = currentOptions[index + 1];\n            nextSiblingCheckbox.onFocus();\n        } else if (closeBtn) {\n            this.renderer.selectRootElement(closeBtn.nativeElement, true).focus();\n        }\n    }\n\n    private onArrowUpOption(evt: KeyboardEvent, option: EclMultiselectOption): void {\n        (evt as KeyboardEvent).preventDefault();\n        const index = this.getOptionIndexByIdFromActiveOptions(option.id);\n        const selectAllCheckbox = this.selectAllCheckbox();\n        if (index !== 0) {\n            const prevSiblingCheckbox = this.getActiveOptions()[index - 1];\n            prevSiblingCheckbox.onFocus();\n        } else if (!this.hasSelectAll() || selectAllCheckbox.nativeElement.disabled) {\n            if (this.hasSearchBox()) {\n                this.renderer.selectRootElement(this.searchInput()?.nativeElement, true).focus();\n            } else {\n                this.onArrowUpSearch(evt);\n            }\n        } else {\n            this.renderer.selectRootElement(selectAllCheckbox.nativeElement, true).focus();\n        }\n    }\n\n    private getActiveOptions(): EclMultiselectOptionComponent[] {\n        return this.multiOptionComponents() ? this.multiOptionComponents().filter((item) => item.isActive) : [];\n    }\n\n    private getAvailableOptions(): EclMultiselectOptionComponent[] {\n        return this.multiOptionComponents() ? this.multiOptionComponents().filter((item) => !item.disabled()) : [];\n    }\n\n    private getOptionIndexByIdFromActiveOptions(id: string): number {\n        return this.getActiveOptions().findIndex((option) => option.id === id);\n    }\n\n    private getSelectAllId(): string {\n        return crypto.randomUUID();\n    }\n\n    private getDropdownId(): string {\n        return this.id() !== '' ? `${this.id()}-dropdown` : crypto.randomUUID();\n    }\n\n    private getToggleId(): string {\n        return this.id() !== '' ? `${this.id()}-toggle` : crypto.randomUUID();\n    }\n\n    private modifyParentLabelForAttribute(): void {\n        const form = this.renderer.parentNode(this.elRef.nativeElement);\n        const label = form?.querySelector('.ecl-form-label');\n        if (label) {\n            this.renderer.setAttribute(label, 'for', this.toggleId);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 1288,
-                    "end": 1415,
+                    "pos": 1189,
+                    "end": 1316,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -68120,7 +67805,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 171,
+                "line": 160,
                 "rawdescription": "\n"
             },
             "extends": [
@@ -68130,108 +67815,19 @@
                 "OnInit",
                 "ControlValueAccessor",
                 "DoCheck",
-                "OnDestroy",
-                "AfterViewInit"
+                "OnDestroy"
             ],
             "accessors": {
-                "isInvalid": {
-                    "name": "isInvalid",
-                    "setSignature": {
-                        "name": "isInvalid",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 62,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "isInvalid",
-                        "type": "unknown",
-                        "returnType": "boolean | undefined",
-                        "line": 59,
-                        "rawdescription": "\n\nMarks the component as visually invalid.\n",
-                        "description": "<p>Marks the component as visually invalid.</p>\n"
-                    }
-                },
                 "cssClasses": {
                     "name": "cssClasses",
                     "getSignature": {
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 70,
+                        "line": 241,
                         "rawdescription": "\n\nAdds the ECL base CSS class for multiselect dropdowns.\n",
                         "description": "<p>Adds the ECL base CSS class for multiselect dropdowns.</p>\n"
                     }
-                },
-                "disabled": {
-                    "name": "disabled",
-                    "setSignature": {
-                        "name": "disabled",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 96,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean | undefined",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "disabled",
-                        "type": "unknown",
-                        "returnType": "boolean | undefined",
-                        "line": 93,
-                        "rawdescription": "\n\nDisables the component when true.\n",
-                        "description": "<p>Disables the component when true.</p>\n"
-                    }
                 }
             },
             "relationships": {
@@ -68287,18 +67883,14 @@
                     {
                         "name": "OnDestroy",
                         "type": "interface"
-                    },
-                    {
-                        "name": "AfterViewInit",
-                        "type": "interface"
                     }
                 ]
             },
-            "templateData": "<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"
+            "templateData": "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n"
         },
         {
             "name": "EclMultiselectInputComponent",
-            "id": "component-EclMultiselectInputComponent-b7f3429a0cdb2eb544c6e609077fc9422a0e5cbd9d25668e95ef82aaac6c39d83553b7e1db18b4db4ba50595a087145aa62a2e3078244e18459d907db0d209e9",
+            "id": "component-EclMultiselectInputComponent-2f973d47455461b5c3d53fbf54b66331657ecf900e01d29fa021ebaa5f93f3580b73247356f7f7d311fbb721eac4574b59d2c5f8ce169453e39fe46c632de314",
             "file": "packages/ecl/components/ecl-multiselect/ecl-multiselect-input/ecl-multiselect-input.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -68326,7 +67918,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ARIA controls attribute for accessibility.</p>\n",
-                    "line": 90,
+                    "line": 75,
                     "rawdescription": "\n\nARIA controls attribute for accessibility.\n",
                     "required": false
                 },
@@ -68340,7 +67932,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ARIA describedby attribute for accessibility.</p>\n",
-                    "line": 95,
+                    "line": 80,
                     "rawdescription": "\n\nARIA describedby attribute for accessibility.\n",
                     "required": false
                 },
@@ -68354,7 +67946,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label for the selections counter, read by screen readers.</p>\n",
-                    "line": 39,
+                    "line": 35,
                     "rawdescription": "\n\nLabel for the selections counter, read by screen readers.\n",
                     "required": false
                 },
@@ -68368,7 +67960,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size modifier for the multiselect input (e.g., &#39;s&#39;, &#39;m&#39;, &#39;l&#39;).</p>\n",
-                    "line": 29,
+                    "line": 30,
                     "rawdescription": "\n\nSize modifier for the multiselect input (e.g., 's', 'm', 'l').\n",
                     "required": false
                 },
@@ -68382,7 +67974,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Placeholder text for the input when no items are selected.</p>\n",
-                    "line": 75,
+                    "line": 60,
                     "rawdescription": "\n\nPlaceholder text for the input when no items are selected.\n",
                     "required": false
                 },
@@ -68396,7 +67988,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the component as disabled.</p>\n",
-                    "line": 54,
+                    "line": 50,
                     "rawdescription": "\n\nMarks the component as disabled.\n",
                     "required": false
                 },
@@ -68410,7 +68002,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates that the dropdown is currently expanded.</p>\n",
-                    "line": 85,
+                    "line": 70,
                     "rawdescription": "\n\nIndicates that the dropdown is currently expanded.\n",
                     "required": false
                 },
@@ -68424,12 +68016,12 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the component as being in an invalid state.</p>\n",
-                    "line": 59,
+                    "line": 55,
                     "rawdescription": "\n\nMarks the component as being in an invalid state.\n",
                     "required": false
                 },
                 {
-                    "name": "selectedItems",
+                    "name": "selectedItemsLabels",
                     "coverageIgnore": false,
                     "defaultValue": "[]",
                     "deprecated": false,
@@ -68438,7 +68030,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Array of currently selected item labels.</p>\n",
-                    "line": 80,
+                    "line": 65,
                     "rawdescription": "\n\nArray of currently selected item labels.\n",
                     "required": false
                 },
@@ -68452,7 +68044,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>ID of the toggle button element (used for accessibility).</p>\n",
-                    "line": 44,
+                    "line": 40,
                     "rawdescription": "\n\nID of the toggle button element (used for accessibility).\n",
                     "required": false
                 },
@@ -68466,7 +68058,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Label for the toggle button (optional).</p>\n",
-                    "line": 49,
+                    "line": 45,
                     "rawdescription": "\n\nLabel for the toggle button (optional).\n",
                     "required": false
                 },
@@ -68524,7 +68116,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when the input is clicked.</p>\n",
-                    "line": 114,
+                    "line": 85,
                     "rawdescription": "\n\nEvent emitted when the input is clicked.\n",
                     "modifierKind": [
                         148
@@ -68540,7 +68132,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when a key is pressed on the input.</p>\n",
-                    "line": 119,
+                    "line": 90,
                     "rawdescription": "\n\nEvent emitted when a key is pressed on the input.\n",
                     "modifierKind": [
                         148
@@ -68559,21 +68151,27 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Computed ARIA describedby combining the input value with the counter ID.</p>\n",
-                    "line": 100,
-                    "rawdescription": "\n\nComputed ARIA describedby combining the input value with the counter ID.\n"
+                    "line": 105,
+                    "rawdescription": "\n\nComputed ARIA describedby combining the input value with the counter ID.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "buttonText",
                     "coverageIgnore": false,
-                    "defaultValue": "computed(() => {\n        const items = this.selectedItems();\n        return items.length === 0 ? this.inputPlaceholder() : items.join(',');\n    })",
+                    "defaultValue": "computed(() => {\n        const items = this.selectedItemsLabels();\n        return items.length === 0 ? this.inputPlaceholder() : items.join(',');\n    })",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Returns the label text shown inside the button.</p>\n",
-                    "line": 129,
-                    "rawdescription": "\n\nReturns the label text shown inside the button.\n"
+                    "line": 114,
+                    "rawdescription": "\n\nReturns the label text shown inside the button.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "counterId",
@@ -68585,8 +68183,11 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Unique ID for the counter element.</p>\n",
-                    "line": 34,
-                    "rawdescription": "\n\nUnique ID for the counter element.\n"
+                    "line": 95,
+                    "rawdescription": "\n\nUnique ID for the counter element.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "inputMultiselect",
@@ -68598,9 +68199,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the internal input element.</p>\n",
-                    "line": 109,
+                    "line": 100,
                     "rawdescription": "\n\nReference to the internal input element.\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -68614,34 +68216,43 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Indicates that the dropdown is expanded (active).</p>\n",
-                    "line": 147,
-                    "rawdescription": "\n\nIndicates that the dropdown is expanded (active).\n"
+                    "line": 132,
+                    "rawdescription": "\n\nIndicates that the dropdown is expanded (active).\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "isShowCounter",
                     "coverageIgnore": false,
-                    "defaultValue": "computed(() => this.selectedItems().length > 0)",
+                    "defaultValue": "computed(() => this.selectedItemsLabels().length > 0)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Displays a count badge when items are selected.</p>\n",
-                    "line": 142,
-                    "rawdescription": "\n\nDisplays a count badge when items are selected.\n"
+                    "line": 127,
+                    "rawdescription": "\n\nDisplays a count badge when items are selected.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "selectedItemsCount",
                     "coverageIgnore": false,
-                    "defaultValue": "computed(() => this.selectedItems().length)",
+                    "defaultValue": "computed(() => this.selectedItemsLabels().length)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Returns the count of selected items.</p>\n",
-                    "line": 137,
-                    "rawdescription": "\n\nReturns the count of selected items.\n"
+                    "line": 122,
+                    "rawdescription": "\n\nReturns the count of selected items.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 }
             ],
             "methodsClass": [
@@ -68661,11 +68272,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 163,
+                    "line": 170,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click on the input container. Emits custom event with original DOM event.\n",
                     "description": "<p>Handles click on the input container. Emits custom event with original DOM event.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -68687,7 +68301,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 189,
+                    "line": 163,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFocuses the multiselect input element.\n",
@@ -68709,11 +68323,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 171,
+                    "line": 178,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keydown events on the input.\nOnly emits event on ArrowDown, Enter, or Space keys.\n",
                     "description": "<p>Handles keydown events on the input.\nOnly emits event on ArrowDown, Enter, or Space keys.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -68770,20 +68387,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nCSS classes for the component, including size and inherited classes.\n",
-                    "description": "<p>CSS classes for the component, including size and inherited classes.</p>\n",
-                    "line": 65,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -68801,14 +68405,14 @@
             "description": "<p>Component representing the main input of a multiselect component.\nHandles displaying selected items, opening the dropdown, and managing accessibility.</p>\n",
             "rawdescription": "\n\nComponent representing the main input of a multiselect component.\nHandles displaying selected items, opening the dropdown, and managing accessibility.\n",
             "type": "component",
-            "sourceCode": "import { Component, ElementRef, HostBinding, Renderer2, booleanAttribute, computed, inject, input, signal, output, viewChild } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclMultiselectMainInputClickEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Component representing the main input of a multiselect component.\n * Handles displaying selected items, opening the dropdown, and managing accessibility.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectInput]',\n    templateUrl: './ecl-multiselect-input.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    host: {\n        '[class.ecl-select__container--disabled]': 'isDisabled()',\n        '[class.ecl-select__container--invalid]': 'isInvalid()',\n    },\n})\nexport class EclMultiselectInputComponent extends ECLBaseDirective {\n\n    /**\n     * Size modifier for the multiselect input (e.g., 's', 'm', 'l').\n     */\n    eclSize = input('m');\n\n    /**\n     * Unique ID for the counter element.\n     */\n    counterId = signal(crypto.randomUUID());\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     */\n    counterLabel = input('ecl.multiselect.SELECTED');\n\n    /**\n     * ID of the toggle button element (used for accessibility).\n     */\n    toggleId = input<string>('');\n\n    /**\n     * Label for the toggle button (optional).\n     */\n    toggleLabel = input<string | undefined>(undefined);\n\n    /**\n     * Marks the component as disabled.\n     */\n    isDisabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Marks the component as being in an invalid state.\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * CSS classes for the component, including size and inherited classes.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-select__container'),\n            `ecl-select__container--${this.eclSize()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Placeholder text for the input when no items are selected.\n     */\n    inputPlaceholder = input('');\n\n    /**\n     * Array of currently selected item labels.\n     */\n    selectedItems = input<string[]>([]);\n\n    /**\n     * Indicates that the dropdown is currently expanded.\n     */\n    isDropdownExpanded = input(false, { transform: booleanAttribute });\n\n    /**\n     * ARIA controls attribute for accessibility.\n     */\n    ariaControls = input<string | undefined>(undefined);\n\n    /**\n     * ARIA describedby attribute for accessibility.\n     */\n    ariaDescribedby = input<string | undefined>(undefined);\n\n    /**\n     * Computed ARIA describedby combining the input value with the counter ID.\n     */\n    ariaDescribedbyFull = computed(() => {\n        const describedby = this.ariaDescribedby();\n        const counter = this.counterId();\n        return [describedby, counter].filter(Boolean).join(' ') || undefined;\n    });\n\n    /**\n     * Reference to the internal input element.\n     */\n    readonly inputMultiselect = viewChild<ElementRef>('inputMultiselect');\n\n    /**\n     * Event emitted when the input is clicked.\n     */\n    readonly mainInputClick = output<EclMultiselectMainInputClickEvent>();\n\n    /**\n     * Event emitted when a key is pressed on the input.\n     */\n    readonly mainInputKeydown = output<Event>();\n\n    private readonly ICON_SIZE_FOR_EC_THEME_ON = 'xs';\n    private readonly ICON_SIZE_FOR_EU_THEME_ON = 's';\n    private eclThemeService = inject(EclThemeService);\n    private renderer = inject(Renderer2);\n\n    /**\n     * Returns the label text shown inside the button.\n     */\n    buttonText = computed(() => {\n        const items = this.selectedItems();\n        return items.length === 0 ? this.inputPlaceholder() : items.join(',');\n    });\n\n    /**\n     * Returns the count of selected items.\n     */\n    selectedItemsCount = computed(() => this.selectedItems().length);\n\n    /**\n     * Displays a count badge when items are selected.\n     */\n    isShowCounter = computed(() => this.selectedItems().length > 0);\n\n    /**\n     * Indicates that the dropdown is expanded (active).\n     */\n    isActive = computed(() => this.isDropdownExpanded());\n\n    /**\n     * Returns icon size depending on the theme.\n     */\n    get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_FOR_EC_THEME_ON;\n        } else {\n            return this.ICON_SIZE_FOR_EU_THEME_ON;\n        }\n    }\n\n    /**\n     * Handles click on the input container. Emits custom event with original DOM event.\n     */\n    onClick(evt: Event): void {\n        this.mainInputClick.emit(new EclMultiselectMainInputClickEvent(evt));\n    }\n\n    /**\n     * Handles keydown events on the input.\n     * Only emits event on ArrowDown, Enter, or Space keys.\n     */\n    onKeydown(evt: KeyboardEvent): void {\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN:\n            case KeyCode.ENTER:\n            case KeyCode.SPACE:\n            {\n                this.mainInputKeydown.emit(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Focuses the multiselect input element.\n     */\n    onFocus(): void {\n        this.renderer.selectRootElement(this.inputMultiselect().nativeElement, true).focus();\n    }\n}\n",
+            "sourceCode": "import { Component, ElementRef, Renderer2, booleanAttribute, computed, inject, input, signal, output, viewChild } from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { KeyCode } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclMultiselectMainInputClickEvent } from '../events';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Component representing the main input of a multiselect component.\n * Handles displaying selected items, opening the dropdown, and managing accessibility.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectInput]',\n    templateUrl: './ecl-multiselect-input.component.html',\n    imports: [TranslatePipe, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON],\n    host: {\n        '[class]': 'cssClasses',\n        '[class.ecl-select__container--disabled]': 'isDisabled()',\n        '[class.ecl-select__container--invalid]': 'isInvalid()',\n    },\n})\nexport class EclMultiselectInputComponent extends ECLBaseDirective {\n\n    /**\n     * Size modifier for the multiselect input (e.g., 's', 'm', 'l').\n     */\n    eclSize = input('m');\n\n    /**\n     * Label for the selections counter, read by screen readers.\n     */\n    counterLabel = input('ecl.multiselect.SELECTED');\n\n    /**\n     * ID of the toggle button element (used for accessibility).\n     */\n    toggleId = input<string>('');\n\n    /**\n     * Label for the toggle button (optional).\n     */\n    toggleLabel = input<string | undefined>(undefined);\n\n    /**\n     * Marks the component as disabled.\n     */\n    isDisabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Marks the component as being in an invalid state.\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Placeholder text for the input when no items are selected.\n     */\n    inputPlaceholder = input('');\n\n    /**\n     * Array of currently selected item labels.\n     */\n    selectedItemsLabels = input<string[]>([]);\n\n    /**\n     * Indicates that the dropdown is currently expanded.\n     */\n    isDropdownExpanded = input(false, { transform: booleanAttribute });\n\n    /**\n     * ARIA controls attribute for accessibility.\n     */\n    ariaControls = input<string | undefined>(undefined);\n\n    /**\n     * ARIA describedby attribute for accessibility.\n     */\n    ariaDescribedby = input<string | undefined>(undefined);\n\n    /**\n     * Event emitted when the input is clicked.\n     */\n    readonly mainInputClick = output<EclMultiselectMainInputClickEvent>();\n\n    /**\n     * Event emitted when a key is pressed on the input.\n     */\n    readonly mainInputKeydown = output<Event>();\n\n    /**\n     * Unique ID for the counter element.\n     */\n    protected counterId = signal(crypto.randomUUID());\n\n    /**\n     * Reference to the internal input element.\n     */\n    protected readonly inputMultiselect = viewChild<ElementRef>('inputMultiselect');\n\n    /**\n     * Computed ARIA describedby combining the input value with the counter ID.\n     */\n    protected ariaDescribedbyFull = computed(() => {\n        const describedby = this.ariaDescribedby();\n        const counter = this.counterId();\n        return [describedby, counter].filter(Boolean).join(' ') || undefined;\n    });\n\n    /**\n     * Returns the label text shown inside the button.\n     */\n    protected buttonText = computed(() => {\n        const items = this.selectedItemsLabels();\n        return items.length === 0 ? this.inputPlaceholder() : items.join(',');\n    });\n\n    /**\n     * Returns the count of selected items.\n     */\n    protected selectedItemsCount = computed(() => this.selectedItemsLabels().length);\n\n    /**\n     * Displays a count badge when items are selected.\n     */\n    protected isShowCounter = computed(() => this.selectedItemsLabels().length > 0);\n\n    /**\n     * Indicates that the dropdown is expanded (active).\n     */\n    protected isActive = computed(() => this.isDropdownExpanded());\n\n    /**\n     * CSS classes for the component, including size and inherited classes.\n     */\n    protected get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-select__container'),\n            `ecl-select__container--${this.eclSize()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Returns icon size depending on the theme.\n     */\n    protected get sizeIcon(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_FOR_EC_THEME_ON;\n        } else {\n            return this.ICON_SIZE_FOR_EU_THEME_ON;\n        }\n    }\n\n    private readonly ICON_SIZE_FOR_EC_THEME_ON = 'xs';\n    private readonly ICON_SIZE_FOR_EU_THEME_ON = 's';\n    private eclThemeService = inject(EclThemeService);\n    private renderer = inject(Renderer2);\n\n    /**\n     * Focuses the multiselect input element.\n     */\n    onFocus(): void {\n        this.renderer.selectRootElement(this.inputMultiselect().nativeElement, true).focus();\n    }\n\n    /**\n     * Handles click on the input container. Emits custom event with original DOM event.\n     */\n    protected onClick(evt: Event): void {\n        this.mainInputClick.emit(new EclMultiselectMainInputClickEvent(evt));\n    }\n\n    /**\n     * Handles keydown events on the input.\n     * Only emits event on ArrowDown, Enter, or Space keys.\n     */\n    protected onKeydown(evt: KeyboardEvent): void {\n        switch (evt.key) {\n            case KeyCode.ARROW_DOWN:\n            case KeyCode.ENTER:\n            case KeyCode.SPACE:\n            {\n                this.mainInputKeydown.emit(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 532,
-                    "end": 696,
+                    "pos": 519,
+                    "end": 683,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -68827,7 +68431,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 65,
+                        "line": 137,
                         "rawdescription": "\n\nCSS classes for the component, including size and inherited classes.\n",
                         "description": "<p>CSS classes for the component, including size and inherited classes.</p>\n"
                     }
@@ -68838,7 +68442,7 @@
                         "name": "sizeIcon",
                         "type": "string",
                         "returnType": "string",
-                        "line": 152,
+                        "line": 147,
                         "rawdescription": "\n\nReturns icon size depending on the theme.\n",
                         "description": "<p>Returns icon size depending on the theme.</p>\n"
                     }
@@ -69069,10 +68673,11 @@
         },
         {
             "name": "EclMultiselectOptionComponent",
-            "id": "component-EclMultiselectOptionComponent-c1e3c02acade637b889ca2026c49b0f6ad3b482c6ab7ad7579c3e183584231ee63ba7042d72ec7beced8c527442ef79710118dadf1ff6e43cdbf5e76efb5dafa",
+            "id": "component-EclMultiselectOptionComponent-0e284c928514db24c4eb917a0cc45bf38c927cbb78e93147b88d2b365b98b844f73bcd6ac6818a5de6b97938a2bd4f9bcdf72ab9af89ccda8b557ff0cce8ed2a",
             "file": "packages/ecl/components/ecl-multiselect/ecl-multiselect-option/ecl-multiselect-option.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -69091,50 +68696,72 @@
             ],
             "inputsClass": [
                 {
-                    "coverageIgnore": false,
-                    "required": false,
                     "name": "disabled",
+                    "coverageIgnore": false,
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nDisables the option when true.\n",
-                    "description": "<p>Disables the option when true.</p>\n",
-                    "line": 64,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Disables the option when true.</p>\n",
+                    "line": 54,
+                    "rawdescription": "\n\nDisables the option when true.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
                     "name": "isChecked",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nIndicates whether the option is selected.\n",
-                    "description": "<p>Indicates whether the option is selected.</p>\n",
-                    "line": 87,
                     "type": "boolean",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the option is selected.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nIndicates whether the option is selected.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
                     "name": "label",
+                    "coverageIgnore": false,
+                    "defaultValue": "''",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nDisplay label for the option.\n",
-                    "description": "<p>Display label for the option.</p>\n",
-                    "line": 54,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Display label for the option.</p>\n",
+                    "line": 49,
+                    "rawdescription": "\n\nDisplay label for the option.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
-                    "coverageIgnore": false,
                     "name": "value",
+                    "coverageIgnore": false,
+                    "defaultValue": "''",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 43,
                     "type": "string",
-                    "decorators": []
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Value assigned to the option.</p>\n",
+                    "line": 44,
+                    "rawdescription": "\n\nValue assigned to the option.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 },
                 {
                     "coverageIgnore": false,
@@ -69181,6 +68808,23 @@
                 }
             ],
             "outputsClass": [
+                {
+                    "name": "isChecked",
+                    "coverageIgnore": false,
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "boolean",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Indicates whether the option is selected.</p>\n",
+                    "line": 59,
+                    "rawdescription": "\n\nIndicates whether the option is selected.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
+                },
                 {
                     "name": "optionClick",
                     "coverageIgnore": false,
@@ -69190,7 +68834,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits when the option is clicked.</p>\n",
-                    "line": 69,
+                    "line": 64,
                     "rawdescription": "\n\nEmits when the option is clicked.\n",
                     "modifierKind": [
                         148
@@ -69206,7 +68850,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Emits when a key is pressed while focused on the option.</p>\n",
-                    "line": 74,
+                    "line": 69,
                     "rawdescription": "\n\nEmits when a key is pressed while focused on the option.\n",
                     "modifierKind": [
                         148
@@ -69215,40 +68859,21 @@
                 }
             ],
             "propertiesClass": [
-                {
-                    "name": "changes",
-                    "coverageIgnore": false,
-                    "defaultValue": "new Subject()",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 56,
-                    "rawdescription": "\n"
-                },
                 {
                     "name": "display",
                     "coverageIgnore": false,
-                    "defaultValue": "'flex'",
+                    "defaultValue": "signal('flex')",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "string",
+                    "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 76,
-                    "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'style.display'"
-                        }
-                    ],
+                    "description": "<p>Controls the host element visibility (<code>display</code> style).</p>\n",
+                    "line": 84,
+                    "rawdescription": "\n\nControls the host element visibility (`display` style).\n",
                     "modifierKind": [
-                        171,
-                        124
+                        124,
+                        148
                     ]
                 },
                 {
@@ -69260,10 +68885,11 @@
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 38,
-                    "rawdescription": "\n",
+                    "description": "<p>Reference to the checkbox input element.</p>\n",
+                    "line": 74,
+                    "rawdescription": "\n\nReference to the checkbox input element.\n",
                     "modifierKind": [
+                        124,
                         148
                     ]
                 },
@@ -69276,9 +68902,12 @@
                     "type": "string",
                     "indexKey": "",
                     "optional": false,
-                    "description": "",
-                    "line": 40,
-                    "rawdescription": "\n"
+                    "description": "<p>Keyword used by the boldText pipe to highlight matching text.</p>\n",
+                    "line": 79,
+                    "rawdescription": "\n\nKeyword used by the boldText pipe to highlight matching text.\n",
+                    "modifierKind": [
+                        124
+                    ]
                 }
             ],
             "methodsClass": [
@@ -69289,7 +68918,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 158,
+                    "line": 124,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHides the option from view.\n",
@@ -69311,11 +68940,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 165,
+                    "line": 131,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nSets the keyword for search highlighting.\n",
-                    "description": "<p>Sets the keyword for search highlighting.</p>\n",
+                    "rawdescription": "\n\nSets the keyword used by the boldText pipe to highlight matching text.\n",
+                    "description": "<p>Sets the keyword used by the boldText pipe to highlight matching text.</p>\n",
                     "jsdoctags": [
                         {
                             "name": "keyword",
@@ -69330,32 +68959,6 @@
                         }
                     ]
                 },
-                {
-                    "name": "ngOnChanges",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 114,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
-                {
-                    "name": "ngOnDestroy",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 122,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "ngOnInit",
                     "coverageIgnore": false,
@@ -69363,7 +68966,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 118,
+                    "line": 103,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -69376,7 +68979,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 144,
+                    "line": 110,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFocuses the checkbox input.\n",
@@ -69389,11 +68992,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 129,
+                    "line": 145,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the selected state and emits the optionClick event.\n",
-                    "description": "<p>Toggles the selected state and emits the optionClick event.</p>\n"
+                    "description": "<p>Toggles the selected state and emits the optionClick event.</p>\n",
+                    "modifierKind": [
+                        124
+                    ]
                 },
                 {
                     "name": "onOptionKeydown",
@@ -69411,11 +69017,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 137,
+                    "line": 153,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits the optionKeydown event when a key is pressed.\n",
                     "description": "<p>Emits the optionKeydown event when a key is pressed.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -69437,7 +69046,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 151,
+                    "line": 117,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nMakes the option visible.\n",
@@ -69485,33 +69094,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 79,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "style.display",
-                    "actualName": "display",
-                    "defaultValue": "'flex'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 76,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -69526,14 +69109,14 @@
             "description": "<p>Component representing a single selectable option in the multiselect dropdown.</p>\n",
             "rawdescription": "\n\nComponent representing a single selectable option in the multiselect dropdown.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    booleanAttribute,\n    inject,\n    output,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { EclCheckboxDirective, EUI_ECL_CHECKBOX } from '@eui/ecl/components/ecl-checkbox';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { BoldTextPipe } from '../boldText.pipe';\nimport {\n    EclMultiselectOptionClickEvent,\n    EclMultiselectOptionKeydownEvent,\n} from '../events/ecl-multiselect-option.event';\nimport { EclMultiselectOption } from '../models/ecl-multiselect-option.model';\n\n/**\n * Component representing a single selectable option in the multiselect dropdown.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectOption]',\n    templateUrl: './ecl-multiselect-option.component.html',\n    imports: [BoldTextPipe, ...EUI_ECL_CHECKBOX],\n    hostDirectives: [EclCheckboxDirective],\n})\nexport class EclMultiselectOptionComponent extends ECLBaseDirective implements EclMultiselectOption, OnChanges, OnDestroy, OnInit {\n\n    readonly eclCheckboxInput = viewChild<ElementRef>('checkboxInput');\n\n    keyword = '';\n\n    @Input()\n    set value(value: string) {\n        this._value = value;\n    }\n\n    get value(): string {\n        return this._value;\n    }\n\n    /**\n     * Display label for the option.\n     */\n    @Input() label: string;\n\n    changes = new Subject();\n\n    /**\n     * Disables the option when true.\n     */\n    @Input({ transform: booleanAttribute })\n    @HostBinding('class.ecl-checkbox--disabled')\n    @HostBinding('attr.disabled')\n    disabled = false;\n\n    /**\n     * Emits when the option is clicked.\n     */\n    readonly optionClick = output<EclMultiselectOptionClickEvent>();\n\n    /**\n     * Emits when a key is pressed while focused on the option.\n     */\n    readonly optionKeydown = output<EclMultiselectOptionKeydownEvent>();\n\n    @HostBinding('style.display') protected display = 'flex';\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();\n    }\n\n    /**\n     * Indicates whether the option is selected.\n     */\n    @Input()\n    get isChecked(): boolean {\n        return this._checked();\n    }\n\n    set isChecked(value: boolean) {\n        this._checked.set(value);\n    }\n\n    private _id = '';\n    private _checked = signal(false);\n    private _value = '';\n    private renderer = inject(Renderer2);\n\n    /**\n     * Returns the unique identifier for the option.\n     */\n    get id(): string {\n        return this._id;\n    }\n\n    /**\n     * Indicates whether the option is active (visible and not disabled).\n     */\n    get isActive(): boolean {\n        return this.display === 'flex' && !this.disabled;\n    }\n\n    ngOnChanges(): void {\n        this.changes.next(this.label);\n    }\n\n    ngOnInit(): void {\n        this._id = this.createId();\n    }\n\n    ngOnDestroy(): void {\n        this.changes.complete();\n    }\n\n    /**\n     * Toggles the selected state and emits the optionClick event.\n     */\n    onOptionClick(): void {\n        this.isChecked = !this.isChecked;\n        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));\n    }\n\n    /**\n     * Emits the optionKeydown event when a key is pressed.\n     */\n    onOptionKeydown(evt: KeyboardEvent): void {\n        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));\n    }\n\n    /**\n     * Focuses the checkbox input.\n     */\n    onFocus(): void {\n        this.renderer.selectRootElement(this.eclCheckboxInput().nativeElement, true).focus();\n    }\n\n    /**\n     * Makes the option visible.\n     */\n    show(): void {\n        this.display = 'flex';\n    }\n\n    /**\n     * Hides the option from view.\n     */\n    hide(): void {\n        this.display = 'none';\n    }\n\n    /**\n     * Sets the keyword for search highlighting.\n     */\n    highlightSearchText(keyword: string): void {\n        this.keyword = keyword;\n        const re = new RegExp(keyword, 'gi');\n        const res = this.label.replace(re, '<b>$&</b>');\n    }\n\n    private createId(): string {\n        return crypto.randomUUID();\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    ElementRef,\n    OnInit,\n    Renderer2,\n    booleanAttribute,\n    inject,\n    input,\n    model,\n    output,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { EclCheckboxDirective, EUI_ECL_CHECKBOX } from '@eui/ecl/components/ecl-checkbox';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { BoldTextPipe } from '../boldText.pipe';\nimport {\n    EclMultiselectOptionClickEvent,\n    EclMultiselectOptionKeydownEvent,\n} from '../events/ecl-multiselect-option.event';\nimport { EclMultiselectOption } from '../models/ecl-multiselect-option.model';\n\n/**\n * Component representing a single selectable option in the multiselect dropdown.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclMultiselectOption]',\n    templateUrl: './ecl-multiselect-option.component.html',\n    imports: [BoldTextPipe, ...EUI_ECL_CHECKBOX],\n    hostDirectives: [EclCheckboxDirective],\n    host: {\n        '[class]': 'cssClasses',\n        '[class.ecl-checkbox--disabled]': 'disabled()',\n        '[attr.disabled]': 'disabled() || null',\n        '[style.display]': 'display()',\n    },\n})\nexport class EclMultiselectOptionComponent extends ECLBaseDirective implements EclMultiselectOption, OnInit {\n\n    /**\n     * Value assigned to the option.\n     */\n    readonly value = input<string>('');\n\n    /**\n     * Display label for the option.\n     */\n    readonly label = input<string>('');\n\n    /**\n     * Disables the option when true.\n     */\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /**\n     * Indicates whether the option is selected.\n     */\n    readonly isChecked = model(false);\n\n    /**\n     * Emits when the option is clicked.\n     */\n    readonly optionClick = output<EclMultiselectOptionClickEvent>();\n\n    /**\n     * Emits when a key is pressed while focused on the option.\n     */\n    readonly optionKeydown = output<EclMultiselectOptionKeydownEvent>();\n\n    /**\n     * Reference to the checkbox input element.\n     */\n    protected readonly eclCheckboxInput = viewChild<ElementRef>('checkboxInput');\n\n    /**\n     * Keyword used by the boldText pipe to highlight matching text.\n     */\n    protected keyword = '';\n\n    /**\n     * Controls the host element visibility (`display` style).\n     */\n    protected readonly display = signal('flex');\n\n    private readonly renderer = inject(Renderer2);\n    private _id = '';\n\n    /**\n     * Returns the unique identifier for the option.\n     */\n    get id(): string {\n        return this._id;\n    }\n\n    /**\n     * Indicates whether the option is active (visible and not disabled).\n     */\n    get isActive(): boolean {\n        return this.display() === 'flex' && !this.disabled();\n    }\n\n    ngOnInit(): void {\n        this._id = this.createId();\n    }\n\n    /**\n     * Focuses the checkbox input.\n     */\n    onFocus(): void {\n        this.renderer.selectRootElement(this.eclCheckboxInput().nativeElement, true).focus();\n    }\n\n    /**\n     * Makes the option visible.\n     */\n    show(): void {\n        this.display.set('flex');\n    }\n\n    /**\n     * Hides the option from view.\n     */\n    hide(): void {\n        this.display.set('none');\n    }\n\n    /**\n     * Sets the keyword used by the boldText pipe to highlight matching text.\n     */\n    highlightSearchText(keyword: string): void {\n        this.keyword = keyword;\n    }\n\n    /**\n     * Applies ECL checkbox styling class to the option.\n     */\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-checkbox')].join(' ').trim();\n    }\n\n    /**\n     * Toggles the selected state and emits the optionClick event.\n     */\n    protected onOptionClick(): void {\n        this.isChecked.set(!this.isChecked());\n        this.optionClick.emit(new EclMultiselectOptionClickEvent(this));\n    }\n\n    /**\n     * Emits the optionKeydown event when a key is pressed.\n     */\n    protected onOptionKeydown(evt: KeyboardEvent): void {\n        this.optionKeydown.emit(new EclMultiselectOptionKeydownEvent(this, evt));\n    }\n\n    private createId(): string {\n        return crypto.randomUUID();\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 656,
-                    "end": 745,
+                    "pos": 588,
+                    "end": 677,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -69547,117 +69130,16 @@
             ],
             "implements": [
                 "EclMultiselectOption",
-                "OnChanges",
-                "OnDestroy",
                 "OnInit"
             ],
             "accessors": {
-                "value": {
-                    "name": "value",
-                    "setSignature": {
-                        "name": "value",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 43,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "string",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "value",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 47,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "cssClasses": {
-                    "name": "cssClasses",
-                    "getSignature": {
-                        "name": "cssClasses",
-                        "type": "string",
-                        "returnType": "string",
-                        "line": 79,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
-                "isChecked": {
-                    "name": "isChecked",
-                    "setSignature": {
-                        "name": "isChecked",
-                        "type": "void",
-                        "deprecated": false,
-                        "deprecationMessage": "",
-                        "args": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": ""
-                            }
-                        ],
-                        "returnType": "void",
-                        "line": 91,
-                        "rawdescription": "\n",
-                        "description": "",
-                        "jsdoctags": [
-                            {
-                                "name": "value",
-                                "type": "boolean",
-                                "optional": false,
-                                "dotDotDotToken": false,
-                                "deprecated": false,
-                                "deprecationMessage": "",
-                                "tagName": {
-                                    "text": "param"
-                                }
-                            }
-                        ]
-                    },
-                    "getSignature": {
-                        "name": "isChecked",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 87,
-                        "rawdescription": "\n\nIndicates whether the option is selected.\n",
-                        "description": "<p>Indicates whether the option is selected.</p>\n"
-                    }
-                },
                 "id": {
                     "name": "id",
                     "getSignature": {
                         "name": "id",
                         "type": "string",
                         "returnType": "string",
-                        "line": 103,
+                        "line": 92,
                         "rawdescription": "\n\nReturns the unique identifier for the option.\n",
                         "description": "<p>Returns the unique identifier for the option.</p>\n"
                     }
@@ -69668,10 +69150,21 @@
                         "name": "isActive",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 110,
+                        "line": 99,
                         "rawdescription": "\n\nIndicates whether the option is active (visible and not disabled).\n",
                         "description": "<p>Indicates whether the option is active (visible and not disabled).</p>\n"
                     }
+                },
+                "cssClasses": {
+                    "name": "cssClasses",
+                    "getSignature": {
+                        "name": "cssClasses",
+                        "type": "string",
+                        "returnType": "string",
+                        "line": 138,
+                        "rawdescription": "\n\nApplies ECL checkbox styling class to the option.\n",
+                        "description": "<p>Applies ECL checkbox styling class to the option.</p>\n"
+                    }
                 }
             },
             "relationships": {
@@ -69704,21 +69197,13 @@
                         "name": "EclMultiselectOption",
                         "type": "interface"
                     },
-                    {
-                        "name": "OnChanges",
-                        "type": "interface"
-                    },
-                    {
-                        "name": "OnDestroy",
-                        "type": "interface"
-                    },
                     {
                         "name": "OnInit",
                         "type": "interface"
                     }
                 ]
             },
-            "templateData": "<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"
+            "templateData": "<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"
         },
         {
             "name": "EclNavigationListComponent",
@@ -76727,7 +76212,7 @@
         },
         {
             "name": "EclRatingFieldComponent",
-            "id": "component-EclRatingFieldComponent-5bff7b4c2f0571cc17754975648827be37a8b736aca9417c62e5e0417b5679d0da81dce5d14a5ea21652b54d6214ca05c543ac879ebe773767c1ee6a3c01c124",
+            "id": "component-EclRatingFieldComponent-25f427527d34e1b59c5cd7ab632bae64ae4cbfd1f3b26c427b3f7e9694008a36ed3cde1e1b54e93e02baa459d6f8def487eb3c24a82f8670b621829fcf4eaafb",
             "file": "packages/ecl/components/ecl-rating-field/ecl-rating-field.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -76759,7 +76244,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Can be used to set disabled status.</p>\n",
-                    "line": 56,
+                    "line": 57,
                     "rawdescription": "\n\nCan be used to set disabled status.\n",
                     "modifierKind": [
                         148
@@ -76776,7 +76261,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Name of the radio group. Also used for creating id for each radio button.</p>\n",
-                    "line": 34,
+                    "line": 35,
                     "rawdescription": "\n\nName of the radio group. Also used for creating id for each radio button.\n",
                     "modifierKind": [
                         148
@@ -76793,7 +76278,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>How many stars should the rating have.</p>\n",
-                    "line": 38,
+                    "line": 39,
                     "rawdescription": "\n\nHow many stars should the rating have.\n",
                     "modifierKind": [
                         148
@@ -76810,7 +76295,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The initial value, if any.</p>\n",
-                    "line": 42,
+                    "line": 43,
                     "rawdescription": "\n\nThe initial value, if any.\n",
                     "modifierKind": [
                         148
@@ -76872,7 +76357,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Can be used to set disabled status.</p>\n",
-                    "line": 56,
+                    "line": 57,
                     "rawdescription": "\n\nCan be used to set disabled status.\n",
                     "modifierKind": [
                         148
@@ -76888,7 +76373,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The event to be emitted when rating is changed.</p>\n",
-                    "line": 62,
+                    "line": 63,
                     "rawdescription": "\n\nThe event to be emitted when rating is changed.\n",
                     "modifierKind": [
                         148
@@ -76907,7 +76392,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Internal mutable rating value, falls back to the input</p>\n",
-                    "line": 45,
+                    "line": 46,
                     "rawdescription": "\nInternal mutable rating value, falls back to the input",
                     "modifierKind": [
                         148
@@ -76939,8 +76424,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 2948,
-                                "end": 2954,
+                                "pos": 2942,
+                                "end": 2948,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -76953,8 +76438,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 2942,
-                                "end": 2947,
+                                "pos": 2936,
+                                "end": 2941,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77059,8 +76544,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3534,
-                                "end": 3544,
+                                "pos": 3528,
+                                "end": 3538,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77073,8 +76558,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3528,
-                                "end": 3533,
+                                "pos": 3522,
+                                "end": 3527,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77109,8 +76594,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3381,
-                                "end": 3386,
+                                "pos": 3375,
+                                "end": 3380,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77123,8 +76608,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3375,
-                                "end": 3380,
+                                "pos": 3369,
+                                "end": 3374,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77177,20 +76662,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the base class `ecl-rating-field` to the host element. Applies 'ecl-rating-field--disabled' class on condition.\n",
-                    "description": "<p>Applies the base class <code>ecl-rating-field</code> to the host element. Applies &#39;ecl-rating-field--disabled&#39; class on condition.</p>\n",
-                    "line": 81,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -77201,14 +76673,14 @@
             "description": "<p>Component representing rating field, displayed with stars.\nTypically used when the user needs to evaluate something.</p>\n",
             "rawdescription": "\n\nComponent representing rating field, displayed with stars.\nTypically used when the user needs to evaluate something.\n",
             "type": "component",
-            "sourceCode": "import { Component, effect, forwardRef, HostBinding, numberAttribute, Provider, output, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRatingChangeEvent } from './events/ecl-rating-change.event';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\nexport const ECL_RATINGFIELD_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclRatingFieldComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty */\n};\n\n/**\n * Component representing rating field, displayed with stars.\n * Typically used when the user needs to evaluate something.\n */\n@Component({\n    selector: 'ecl-rating-field',\n    templateUrl: './ecl-rating-field.component.html',\n    imports: [...EUI_ECL_ICON],\n    providers: [ECL_RATINGFIELD_VALUE_ACCESSOR],\n    host: {\n        '[attr.disabled]': 'disabled()',\n    },\n})\nexport class EclRatingFieldComponent extends ECLBaseDirective implements ControlValueAccessor {\n    /**\n     * Name of the radio group. Also used for creating id for each radio button.\n     */\n    readonly name = input('rating');\n    /**\n     * How many stars should the rating have.\n     */\n    readonly numberOfStars = input(5, { transform: numberAttribute });\n    /**\n     * The initial value, if any.\n     */\n    readonly rating = input<number, unknown>(undefined, { transform: numberAttribute });\n\n    /** Internal mutable rating value, falls back to the input */\n    readonly currentRating = signal<number>(undefined);\n\n    private readonly _syncRating = effect(() => {\n        const inputRating = this.rating();\n        if (inputRating !== undefined) {\n            this.currentRating.set(inputRating);\n        }\n    });\n    /**\n     * Can be used to set disabled status.\n     */\n    readonly disabled = model<boolean>(undefined);\n\n    /**\n     * The event to be emitted when rating is changed.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly ratingChange = output<any>();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    private onTouched: () => void = noop;\n\n    /**\n     * Array of numbers, from 1 to 'numberOfStars'\n     */\n    get numbers(): number[] {\n        return Array(this.numberOfStars())\n            .fill(0)\n            .map((_, i) => this.numberOfStars() - i);\n    }\n\n    /**\n    * Applies the base class `ecl-rating-field` to the host element. Applies 'ecl-rating-field--disabled' class on condition.\n    */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-rating-field'), this.disabled() ? 'ecl-rating-field--disabled' : ''].join(' ').trim();\n    }\n\n    /**\n     * Method that sets the new rating and emit 'ratingChange' event, that includes the new rating number.\n     * @param rating - the new rating\n     */\n    onRadioClick(rating: number): void {\n        this.currentRating.set(rating);\n        this.onTouched();\n        this.onChange(this.currentRating());\n\n        const evt = new EclRatingChangeEvent(rating);\n        this.ratingChange.emit(evt);\n    }\n\n    /**\n     * Informs the component of any changes in the parent (ControlValueAccessor). Sets the new value for the 'rating' property.\n     * @param value\n     */\n    writeValue(value: number): void {\n        this.currentRating.set(value);\n    }\n\n    /**\n     * Disable/enable component.\n     * @param isDisabled\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled.set(isDisabled || null);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n}\n",
+            "sourceCode": "import { Component, effect, forwardRef, numberAttribute, Provider, output, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRatingChangeEvent } from './events/ecl-rating-change.event';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\nexport const ECL_RATINGFIELD_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclRatingFieldComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty */\n};\n\n/**\n * Component representing rating field, displayed with stars.\n * Typically used when the user needs to evaluate something.\n */\n@Component({\n    selector: 'ecl-rating-field',\n    templateUrl: './ecl-rating-field.component.html',\n    imports: [...EUI_ECL_ICON],\n    providers: [ECL_RATINGFIELD_VALUE_ACCESSOR],\n    host: {\n        '[attr.disabled]': 'disabled()',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclRatingFieldComponent extends ECLBaseDirective implements ControlValueAccessor {\n    /**\n     * Name of the radio group. Also used for creating id for each radio button.\n     */\n    readonly name = input('rating');\n    /**\n     * How many stars should the rating have.\n     */\n    readonly numberOfStars = input(5, { transform: numberAttribute });\n    /**\n     * The initial value, if any.\n     */\n    readonly rating = input<number, unknown>(undefined, { transform: numberAttribute });\n\n    /** Internal mutable rating value, falls back to the input */\n    readonly currentRating = signal<number>(undefined);\n\n    private readonly _syncRating = effect(() => {\n        const inputRating = this.rating();\n        if (inputRating !== undefined) {\n            this.currentRating.set(inputRating);\n        }\n    });\n    /**\n     * Can be used to set disabled status.\n     */\n    readonly disabled = model<boolean>(undefined);\n\n    /**\n     * The event to be emitted when rating is changed.\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly ratingChange = output<any>();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    private onTouched: () => void = noop;\n\n    /**\n     * Array of numbers, from 1 to 'numberOfStars'\n     */\n    get numbers(): number[] {\n        return Array(this.numberOfStars())\n            .fill(0)\n            .map((_, i) => this.numberOfStars() - i);\n    }\n\n    /**\n    * Applies the base class `ecl-rating-field` to the host element. Applies 'ecl-rating-field--disabled' class on condition.\n    */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-rating-field'), this.disabled() ? 'ecl-rating-field--disabled' : ''].join(' ').trim();\n    }\n\n    /**\n     * Method that sets the new rating and emit 'ratingChange' event, that includes the new rating number.\n     * @param rating - the new rating\n     */\n    onRadioClick(rating: number): void {\n        this.currentRating.set(rating);\n        this.onTouched();\n        this.onChange(this.currentRating());\n\n        const evt = new EclRatingChangeEvent(rating);\n        this.ratingChange.emit(evt);\n    }\n\n    /**\n     * Informs the component of any changes in the parent (ControlValueAccessor). Sets the new value for the 'rating' property.\n     * @param value\n     */\n    writeValue(value: number): void {\n        this.currentRating.set(value);\n    }\n\n    /**\n     * Disable/enable component.\n     * @param isDisabled\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled.set(isDisabled || null);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 611,
-                    "end": 741,
+                    "pos": 598,
+                    "end": 728,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -77230,7 +76702,7 @@
                         "name": "numbers",
                         "type": "[]",
                         "returnType": "number[]",
-                        "line": 71,
+                        "line": 72,
                         "rawdescription": "\n\nArray of numbers, from 1 to 'numberOfStars'\n",
                         "description": "<p>Array of numbers, from 1 to &#39;numberOfStars&#39;</p>\n"
                     }
@@ -77272,10 +76744,11 @@
         },
         {
             "name": "EclSearchFormComponent",
-            "id": "component-EclSearchFormComponent-910c2264ef355a929c966776966c0f0b888509720be9e40438355d350e2ce3b6db10a079d55795dc53e3cda88d4e5b3dcf9b6670a37c97ec7f499a90b855833e",
+            "id": "component-EclSearchFormComponent-46cef857d014a25d75640024aa26a1e3525a2d6296799d324f4dd23c9276e9a728ac32148af1c22e504acced5b1d742cfe39ce7577a9ca078dc0a794651a1c81",
             "file": "packages/ecl/components/ecl-search-form/ecl-search-form.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [
@@ -77303,7 +76776,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 51,
+                    "line": 52,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77320,7 +76793,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 52,
+                    "line": 53,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77337,7 +76810,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 48,
+                    "line": 49,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77354,7 +76827,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 50,
+                    "line": 51,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77371,7 +76844,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 49,
+                    "line": 50,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77388,7 +76861,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The current/default search text.</p>\n",
-                    "line": 47,
+                    "line": 48,
                     "rawdescription": "\n\nThe current/default search text.\n",
                     "modifierKind": [
                         148
@@ -77449,7 +76922,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>This event is emited, when user performs the search action. Includes the search text from the input field.</p>\n",
-                    "line": 67,
+                    "line": 58,
                     "rawdescription": "\n\nThis event is emited, when user performs the search action. Includes the search text from the input field.\n",
                     "modifierKind": [
                         148
@@ -77466,7 +76939,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The current/default search text.</p>\n",
-                    "line": 47,
+                    "line": 48,
                     "rawdescription": "\n\nThe current/default search text.\n",
                     "modifierKind": [
                         148
@@ -77485,7 +76958,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 75,
                     "rawdescription": "\n",
                     "modifierKind": [
                         124
@@ -77501,16 +76974,10 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 62,
+                    "line": 77,
                     "rawdescription": "\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.role'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124
                     ]
                 }
             ],
@@ -77531,19 +76998,13 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 86,
+                    "line": 97,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPerform search when user clicks Enter when on the input field. Emits the search event with the search text.\n",
                     "description": "<p>Perform search when user clicks Enter when on the input field. Emits the search event with the search text.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'keydown.enter', ['$event']"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        124
                     ],
                     "jsdoctags": [
                         {
@@ -77575,16 +77036,19 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 95,
+                    "line": 106,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAssigns the new input text value to the 'searchInputText' property, each time the input is changed.\n",
                     "description": "<p>Assigns the new input text value to the &#39;searchInputText&#39; property, each time the input is changed.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3307,
-                                "end": 3315,
+                                "pos": 3577,
+                                "end": 3585,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77597,8 +77061,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3301,
-                                "end": 3306,
+                                "pos": 3571,
+                                "end": 3576,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -77625,11 +77089,14 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 77,
+                    "line": 89,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nPerform search when user clicks the search button. Emits the search event with the search text.\n",
                     "description": "<p>Perform search when user clicks the search button. Emits the search event with the search text.</p>\n",
+                    "modifierKind": [
+                        124
+                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -77670,7 +77137,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 106,
+                    "line": 66,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -77725,7 +77192,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 111,
+                    "line": 71,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -77770,7 +77237,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 101,
+                    "line": 61,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n",
@@ -77831,57 +77298,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.role",
-                    "actualName": "role",
-                    "defaultValue": "'search'",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 62,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nApplies the base class `ecl-search-form` to the host element.\n",
-                    "description": "<p>Applies the base class <code>ecl-search-form</code> to the host element.</p>\n",
-                    "line": 58,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "keydown.enter",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nPerform search when user clicks Enter when on the input field. Emits the search event with the search text.\n",
-                    "description": "<p>Perform search when user clicks Enter when on the input field. Emits the search event with the search text.</p>\n",
-                    "line": 86
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -77908,14 +77326,14 @@
             "description": "<p>Component representing search field - input and button, in a responsive, styled layout.</p>\n",
             "rawdescription": "\n\nComponent representing search field - input and button, in a responsive, styled layout.\n",
             "type": "component",
-            "sourceCode": "import {\n    Component,\n    forwardRef,\n    HostBinding,\n    HostListener,\n    Provider,\n    inject,\n    output,\n    input,\n    model,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclSearchFormEvent } from './events/ecl-search-form.event';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_FORM_GROUP } from '@eui/ecl/components/ecl-form-group';\nimport { EUI_ECL_TEXT_INPUT } from '@eui/ecl/components/ecl-text-input';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\nexport const ECL_SEARCH_FORM_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSearchFormComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty*/\n};\n\n/**\n * Component representing search field - input and button, in a responsive, styled layout.\n */\n@Component({\n    selector: 'ecl-search-form',\n    templateUrl: 'ecl-search-form.component.html',\n    imports: [TranslatePipe, FormsModule, ...EUI_ECL_BUTTON, ...EUI_ECL_FORM_GROUP, ...EUI_ECL_TEXT_INPUT, ...EUI_ECL_ICON], // TODO: replace with new names EUI_ECL_...\n    providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR],\n})\nexport class EclSearchFormComponent extends ECLBaseDirective implements ControlValueAccessor {\n    protected eclThemeService = inject(EclThemeService);\n\n    /**\n    * The current/default search text.\n    */\n    readonly searchInputText = model<string>(undefined);\n    readonly placeholder = input<string>(undefined);\n    readonly searchButtonLabel = input<string>(undefined);\n    readonly searchButtonIcon = input('search');\n    readonly buttonExtraClassses = input('');\n    readonly inputExtraClassses = input('');\n\n    /**\n    * Applies the base class `ecl-search-form` to the host element.\n    */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-search-form')].join(' ').trim();\n    }\n\n    @HostBinding('attr.role') role = 'search';\n\n    /**\n    * This event is emited, when user performs the search action. Includes the search text from the input field.\n    */\n    readonly searchEvent = output<EclSearchFormEvent>();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onTouched: (_: any) => void = noop;\n\n    /**\n    * Perform search when user clicks the search button. Emits the search event with the search text.\n    */\n    onSearchClick(evt: Event): void {\n        this.searchEvent.emit(new EclSearchFormEvent(this.searchInputText()));\n        evt.preventDefault();\n    }\n\n    /**\n    * Perform search when user clicks Enter when on the input field. Emits the search event with the search text.\n    */\n    @HostListener('keydown.enter', ['$event'])\n    onEnterKeyDown(evt: Event): void {\n        this.searchEvent.emit(new EclSearchFormEvent(this.searchInputText()));\n        evt.preventDefault();\n    }\n\n    /**\n     * Assigns the new input text value to the 'searchInputText' property, each time the input is changed.\n     * @param newValue\n     */\n    onModelChange(newValue: string): void {\n        this.searchInputText.set(newValue);\n        this.onChange(newValue);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.searchInputText.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (_: any) => void): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: (_: any) => void): void {\n        this.onTouched = fn;\n    }\n}\n",
+            "sourceCode": "import {\n    Component,\n    forwardRef,\n    Provider,\n    inject,\n    output,\n    input,\n    model,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclSearchFormEvent } from './events/ecl-search-form.event';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_FORM_GROUP } from '@eui/ecl/components/ecl-form-group';\nimport { EUI_ECL_TEXT_INPUT } from '@eui/ecl/components/ecl-text-input';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\nexport const ECL_SEARCH_FORM_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclSearchFormComponent),\n    multi: true,\n};\n\nconst noop = (): void => {\n    /** empty*/\n};\n\n/**\n * Component representing search field - input and button, in a responsive, styled layout.\n */\n@Component({\n    selector: 'ecl-search-form',\n    templateUrl: 'ecl-search-form.component.html',\n    imports: [TranslatePipe, FormsModule, ...EUI_ECL_BUTTON, ...EUI_ECL_FORM_GROUP, ...EUI_ECL_TEXT_INPUT, ...EUI_ECL_ICON], // TODO: replace with new names EUI_ECL_...\n    providers: [ECL_SEARCH_FORM_VALUE_ACCESSOR],\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.role]': 'role',\n        '(keydown.enter)': 'onEnterKeyDown($event)',\n    },\n})\nexport class EclSearchFormComponent extends ECLBaseDirective implements ControlValueAccessor {\n    /**\n    * The current/default search text.\n    */\n    readonly searchInputText = model<string>(undefined);\n    readonly placeholder = input<string>(undefined);\n    readonly searchButtonLabel = input<string>(undefined);\n    readonly searchButtonIcon = input('search');\n    readonly buttonExtraClassses = input('');\n    readonly inputExtraClassses = input('');\n\n    /**\n    * This event is emited, when user performs the search action. Includes the search text from the input field.\n    */\n    readonly searchEvent = output<EclSearchFormEvent>();\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    writeValue(value: any): void {\n        this.searchInputText.set(value);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnChange(fn: (_: any) => void): void {\n        this.onChange = fn;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    registerOnTouched(fn: (_: any) => void): void {\n        this.onTouched = fn;\n    }\n\n    protected eclThemeService = inject(EclThemeService);\n\n    protected role = 'search';\n\n    /**\n    * Applies the base class `ecl-search-form` to the host element.\n    */\n    protected get cssClasses(): string {\n        return [super.getCssClasses('ecl-search-form')].join(' ').trim();\n    }\n\n    /**\n    * Perform search when user clicks the search button. Emits the search event with the search text.\n    */\n    protected onSearchClick(evt: Event): void {\n        this.searchEvent.emit(new EclSearchFormEvent(this.searchInputText()));\n        evt.preventDefault();\n    }\n\n    /**\n    * Perform search when user clicks Enter when on the input field. Emits the search event with the search text.\n    */\n    protected onEnterKeyDown(evt: Event): void {\n        this.searchEvent.emit(new EclSearchFormEvent(this.searchInputText()));\n        evt.preventDefault();\n    }\n\n    /**\n     * Assigns the new input text value to the 'searchInputText' property, each time the input is changed.\n     * @param newValue\n     */\n    protected onModelChange(newValue: string): void {\n        this.searchInputText.set(newValue);\n        this.onChange(newValue);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onChange: (_: any) => void = noop;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    private onTouched: (_: any) => void = noop;\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 957,
-                    "end": 1055,
+                    "pos": 922,
+                    "end": 1020,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -77937,7 +77355,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 58,
+                        "line": 82,
                         "rawdescription": "\n\nApplies the base class `ecl-search-form` to the host element.\n",
                         "description": "<p>Applies the base class <code>ecl-search-form</code> to the host element.</p>\n"
                     }