@eui/ecl 22.0.0-alpha.31 → 22.0.0-alpha.33

package/docs/json/documentation.json

@@ -31160,12 +31160,12 @@
         },
         {
             "name": "EclSelectDirective",
-            "id": "directive-EclSelectDirective-36ef5f7007c4762cef597fe798ac40154fd44ca5a8830e72bdd1d9973187dcecbc79f63e0d964a15702689da84f2171b162e1fe243c26247df26b842c10d4723",
+            "id": "directive-EclSelectDirective-295863edc7c93bb82eb11114b171204469ad3c18ecb9782ed1eade871e3ba5a6fe8550d90f548da49ec399e2a55521e129202400aea1ff540902fbf6f7f674b6",
             "file": "packages/ecl/components/ecl-select/ecl-select.directive.ts",
             "type": "directive",
             "description": "<p>Directive that enhances a native <select> element with ECL styling\nby wrapping it inside an {@link EclSelectContainerComponent}.</p>\n",
             "rawdescription": "\n\nDirective that enhances a native <select> element with ECL styling\nby wrapping it inside an {@link EclSelectContainerComponent}.\n",
-            "sourceCode": "import {\n    AfterContentInit,\n    ComponentRef,\n    Directive,\n    DoCheck,\n    ElementRef,\n    HostBinding,\n    Injector,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    ViewContainerRef,\n    afterNextRender,\n    booleanAttribute,\n    inject,\n    runInInjectionContext,\n    input,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\nimport { NgControl } from '@angular/forms';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * Directive that enhances a native <select> element with ECL styling\n * by wrapping it inside an {@link EclSelectContainerComponent}.\n */\n@Directive({ selector: 'select[eclSelect]' })\nexport class EclSelectDirective extends ECLBaseDirective\n    implements OnInit, DoCheck, AfterContentInit, OnDestroy {\n\n    /** Disables the select element. */\n    @HostBinding('attr.disabled')\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /** Marks the select element as invalid. */\n    readonly isInvalid = input(false, { transform: booleanAttribute });\n\n    /** Accessible label for the toggle button. */\n    readonly toggleLabel = input<string>(undefined);\n\n    /** Size of the select component. */\n    readonly eclSize = input<'s' | 'm' | 'l'>('m');\n\n    private ngControl = inject(NgControl, { optional: true, self: true });\n    private el = inject(ElementRef<HTMLElement>);\n    private injector = inject(Injector);\n    private vcr = inject(ViewContainerRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n    private isBrowser = isPlatformBrowser(this.platformId);\n    private containerRef!: ComponentRef<EclSelectContainerComponent>;\n    private readonly OPTGROUP_TAG_NAME = 'OPTGROUP';\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-select')].join(' ').trim();\n    }\n\n    @HostBinding('attr.disabled')\n    get isDisabled(): boolean {\n        return this.ngControl ? (this.ngControl.disabled || null) : (this.disabled() || null);\n    }\n\n    @HostBinding('class.ecl-select--invalid')\n    get isInvalidState(): boolean {\n        return this.ngControl\n            ? (this.ngControl.status === 'INVALID' && this.ngControl.touched)\n            : this.isInvalid();\n    }\n\n    /**\n     * Initializes the directive.\n     * - Creates the {@link EclSelectContainerComponent} wrapper.\n     * - Synchronizes initial input values.\n     * - Moves the <select> element inside the wrapper.\n     *\n     * Skipped on the server to avoid SSR hydration mismatch (NG0500).\n     */\n    ngOnInit(): void {\n        if (!this.isBrowser) return;\n\n        this.containerRef = this.vcr.createComponent(EclSelectContainerComponent);\n        this.syncContainerInputs();\n\n        const containerEl = this.containerRef.location.nativeElement as any;\n        const selectEl = this.el.nativeElement as any;\n\n        if (selectEl.parentNode !== containerEl) {\n            runInInjectionContext(this.injector, () => {\n                afterNextRender(() => {\n                    if (selectEl.parentNode === containerEl) return;\n                    const firstChild = containerEl.firstChild ?? null;\n                    this.renderer.insertBefore(containerEl, selectEl, firstChild, true);\n                });\n            });\n        }\n    }\n\n    /**\n     * Processes any <optgroup> elements inside the <select> and\n     * enhances them with appropriate accessibility attributes.\n     */\n    ngAfterContentInit(): void {\n        const childrenElements: Element[] =\n            Array.from(this.el.nativeElement.children);\n\n        this.handleOptgroup(childrenElements);\n    }\n\n    /**\n     * Keeps the wrapper component synchronized with the directive’s\n     * current inputs and form control state.\n     *\n     * This is used to reflect runtime changes such as:\n     * - Disabled state\n     * - Validation status\n     * - Size changes\n     */\n    ngDoCheck(): void {\n        this.syncContainerInputs();\n    }\n\n    /**\n     * Destroys the dynamically created wrapper component to prevent\n     * memory leaks when the directive is removed.\n     */\n    ngOnDestroy(): void {\n        this.containerRef?.destroy();\n    }\n\n    /**\n     * Synchronizes directive inputs and control state\n     * with the wrapper component instance.\n     */\n    private syncContainerInputs(): void {\n        const c = this.containerRef?.instance;\n        if (!c) return;\n\n        c.eclSize.set(this.eclSize());\n        c.disabled.set(this.isDisabled);\n        c.toggleLabel.set(this.toggleLabel());\n        c.isInvalid.set(this.isInvalidState);\n    }\n\n    /**\n     * Enhances <optgroup> and <option> elements with\n     * accessible aria-label attributes.\n     *\n     * - Applies the optgroup label to the group container.\n     * - Combines option and group labels for child options.\n     *\n     * This improves screen reader support for grouped options.\n     *\n     * @param childrenElements List of direct children of the <select> element.\n     */\n    private handleOptgroup(childrenElements: Element[]): void {\n        childrenElements\n            .filter(el =>\n                el.tagName === this.OPTGROUP_TAG_NAME &&\n                el.getAttribute('label') !== null\n            )\n            .forEach(optGroup => {\n                const optGroupLabel = optGroup.getAttribute('label');\n\n                this.renderer.setAttribute(\n                    optGroup,\n                    'aria-label',\n                    optGroupLabel\n                );\n\n                Array.from(optGroup.children).forEach(option => {\n                    const optionLabel =\n                        option.getAttribute('label') || option.textContent;\n\n                    if (optionLabel) {\n                        this.renderer.setAttribute(\n                            option,\n                            'aria-label',\n                            `${optionLabel} - ${optGroupLabel}`\n                        );\n                    }\n                });\n            });\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    ComponentRef,\n    Directive,\n    DoCheck,\n    ElementRef,\n    Injector,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    ViewContainerRef,\n    afterNextRender,\n    booleanAttribute,\n    inject,\n    runInInjectionContext,\n    input,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclSelectContainerComponent } from './ecl-select-container.component';\nimport { NgControl } from '@angular/forms';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * Directive that enhances a native <select> element with ECL styling\n * by wrapping it inside an {@link EclSelectContainerComponent}.\n */\n@Directive({\n    selector: 'select[eclSelect]',\n    host: {\n        '[class]': 'cssClasses',\n        '[attr.disabled]': 'isDisabled',\n        '[class.ecl-select--invalid]': 'isInvalidState',\n    },\n})\nexport class EclSelectDirective extends ECLBaseDirective\n    implements OnInit, DoCheck, AfterContentInit, OnDestroy {\n\n    /** Disables the select element. */\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /** Marks the select element as invalid. */\n    readonly isInvalid = input(false, { transform: booleanAttribute });\n\n    /** Accessible label for the toggle button. */\n    readonly toggleLabel = input<string>(undefined);\n\n    /** Size of the select component. */\n    readonly eclSize = input<'s' | 'm' | 'l'>('m');\n\n    private ngControl = inject(NgControl, { optional: true, self: true });\n    private el = inject(ElementRef<HTMLElement>);\n    private injector = inject(Injector);\n    private vcr = inject(ViewContainerRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n    private isBrowser = isPlatformBrowser(this.platformId);\n    private containerRef!: ComponentRef<EclSelectContainerComponent>;\n    private readonly OPTGROUP_TAG_NAME = 'OPTGROUP';\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-select')].join(' ').trim();\n    }\n\n    get isDisabled(): boolean {\n        return this.ngControl ? (this.ngControl.disabled || null) : (this.disabled() || null);\n    }\n\n    get isInvalidState(): boolean {\n        return this.ngControl\n            ? (this.ngControl.status === 'INVALID' && this.ngControl.touched)\n            : this.isInvalid();\n    }\n\n    /**\n     * Initializes the directive.\n     * - Creates the {@link EclSelectContainerComponent} wrapper.\n     * - Synchronizes initial input values.\n     * - Moves the <select> element inside the wrapper.\n     *\n     * Skipped on the server to avoid SSR hydration mismatch (NG0500).\n     */\n    ngOnInit(): void {\n        if (!this.isBrowser) return;\n\n        this.containerRef = this.vcr.createComponent(EclSelectContainerComponent);\n        this.syncContainerInputs();\n\n        const containerEl = this.containerRef.location.nativeElement as any;\n        const selectEl = this.el.nativeElement as any;\n\n        if (selectEl.parentNode !== containerEl) {\n            runInInjectionContext(this.injector, () => {\n                afterNextRender(() => {\n                    if (selectEl.parentNode === containerEl) return;\n                    const firstChild = containerEl.firstChild ?? null;\n                    this.renderer.insertBefore(containerEl, selectEl, firstChild, true);\n                });\n            });\n        }\n    }\n\n    /**\n     * Processes any <optgroup> elements inside the <select> and\n     * enhances them with appropriate accessibility attributes.\n     */\n    ngAfterContentInit(): void {\n        const childrenElements: Element[] =\n            Array.from(this.el.nativeElement.children);\n\n        this.handleOptgroup(childrenElements);\n    }\n\n    /**\n     * Keeps the wrapper component synchronized with the directive’s\n     * current inputs and form control state.\n     *\n     * This is used to reflect runtime changes such as:\n     * - Disabled state\n     * - Validation status\n     * - Size changes\n     */\n    ngDoCheck(): void {\n        this.syncContainerInputs();\n    }\n\n    /**\n     * Destroys the dynamically created wrapper component to prevent\n     * memory leaks when the directive is removed.\n     */\n    ngOnDestroy(): void {\n        this.containerRef?.destroy();\n    }\n\n    /**\n     * Synchronizes directive inputs and control state\n     * with the wrapper component instance.\n     */\n    private syncContainerInputs(): void {\n        const c = this.containerRef?.instance;\n        if (!c) return;\n\n        c.eclSize.set(this.eclSize());\n        c.disabled.set(this.isDisabled);\n        c.toggleLabel.set(this.toggleLabel());\n        c.isInvalid.set(this.isInvalidState);\n    }\n\n    /**\n     * Enhances <optgroup> and <option> elements with\n     * accessible aria-label attributes.\n     *\n     * - Applies the optgroup label to the group container.\n     * - Combines option and group labels for child options.\n     *\n     * This improves screen reader support for grouped options.\n     *\n     * @param childrenElements List of direct children of the <select> element.\n     */\n    private handleOptgroup(childrenElements: Element[]): void {\n        childrenElements\n            .filter(el =>\n                el.tagName === this.OPTGROUP_TAG_NAME &&\n                el.getAttribute('label') !== null\n            )\n            .forEach(optGroup => {\n                const optGroupLabel = optGroup.getAttribute('label');\n\n                this.renderer.setAttribute(\n                    optGroup,\n                    'aria-label',\n                    optGroupLabel\n                );\n\n                Array.from(optGroup.children).forEach(option => {\n                    const optionLabel =\n                        option.getAttribute('label') || option.textContent;\n\n                    if (optionLabel) {\n                        this.renderer.setAttribute(\n                            option,\n                            'aria-label',\n                            `${optionLabel} - ${optGroupLabel}`\n                        );\n                    }\n                });\n            });\n    }\n}\n",
             "selector": "select[eclSelect]",
             "providers": [],
             "hostDirectives": [],
@@ -31181,16 +31181,9 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Disables the select element.</p>\n",
-                    "line": 35,
+                    "line": 40,
                     "rawdescription": "\nDisables the select element.",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.disabled'"
-                        }
-                    ],
                     "modifierKind": [
-                        171,
                         148
                     ],
                     "required": false
@@ -31205,7 +31198,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size of the select component.</p>\n",
-                    "line": 44,
+                    "line": 49,
                     "rawdescription": "\nSize of the select component.",
                     "modifierKind": [
                         148
@@ -31222,7 +31215,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Marks the select element as invalid.</p>\n",
-                    "line": 38,
+                    "line": 43,
                     "rawdescription": "\nMarks the select element as invalid.",
                     "modifierKind": [
                         148
@@ -31239,7 +31232,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Accessible label for the toggle button.</p>\n",
-                    "line": 41,
+                    "line": 46,
                     "rawdescription": "\nAccessible label for the toggle button.",
                     "modifierKind": [
                         148
@@ -31293,57 +31286,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.disabled",
-                    "actualName": "disabled",
-                    "defaultValue": "input(false, { transform: booleanAttribute })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\nDisables the select element.",
-                    "description": "<p>Disables the select element.</p>\n",
-                    "line": 35,
-                    "type": "any",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.disabled",
-                    "actualName": "isDisabled",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 62,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 57,
-                    "type": "string",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class.ecl-select--invalid",
-                    "actualName": "isInvalidState",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 67,
-                    "type": "boolean",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -31354,7 +31297,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 105,
+                    "line": 107,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nProcesses any <optgroup> elements inside the <select> and\nenhances them with appropriate accessibility attributes.\n",
@@ -31367,7 +31310,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 121,
+                    "line": 123,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nKeeps the wrapper component synchronized with the directive’s\ncurrent inputs and form control state.\n\nThis is used to reflect runtime changes such as:\n- Disabled state\n- Validation status\n- Size changes\n",
@@ -31380,7 +31323,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 129,
+                    "line": 131,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDestroys the dynamically created wrapper component to prevent\nmemory leaks when the directive is removed.\n",
@@ -31393,7 +31336,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 81,
+                    "line": 83,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nInitializes the directive.\n- Creates the {@link EclSelectContainerComponent} wrapper.\n- Synchronizes initial input values.\n- Moves the <select> element inside the wrapper.\n\nSkipped on the server to avoid SSR hydration mismatch (NG0500).\n",
@@ -31441,8 +31384,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 550,
-                    "end": 692,
+                    "pos": 533,
+                    "end": 675,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -31450,8 +31393,8 @@
                     "transformFlags": 0,
                     "comment": [
                         {
-                            "pos": 550,
-                            "end": 652,
+                            "pos": 533,
+                            "end": 635,
                             "kind": 322,
                             "id": 0,
                             "flags": 16777216,
@@ -31460,16 +31403,16 @@
                             "text": "Directive that enhances a native <select> element with ECL styling\nby wrapping it inside an "
                         },
                         {
-                            "pos": 652,
-                            "end": 687,
+                            "pos": 635,
+                            "end": 670,
                             "kind": 325,
                             "id": 0,
                             "flags": 16777216,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "name": {
-                                "pos": 659,
-                                "end": 686,
+                                "pos": 642,
+                                "end": 669,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16777216,
@@ -31479,8 +31422,8 @@
                             "text": ""
                         },
                         {
-                            "pos": 687,
-                            "end": 690,
+                            "pos": 670,
+                            "end": 673,
                             "kind": 322,
                             "id": 0,
                             "flags": 16777216,
@@ -31507,7 +31450,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 57,
+                        "line": 61,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -31518,7 +31461,7 @@
                         "name": "isDisabled",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 62,
+                        "line": 65,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -31529,7 +31472,7 @@
                         "name": "isInvalidState",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 67,
+                        "line": 69,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -77406,10 +77349,11 @@
         },
         {
             "name": "EclSelectContainerComponent",
-            "id": "component-EclSelectContainerComponent-717d9f42d461ab00e1cac54e44b58f308ededdfef9a60f1268cd1ac27e83508eff0d5a096b5d99d5756ba2736206e08b8b8d7f07b908868e570702ecf6ba7246",
+            "id": "component-EclSelectContainerComponent-52fb6b5010017a285bbdac362014ca29500c77306054d6d5ed50dd99107eeabb4c6a59fc47e6e6b049e248c8db2587de9643f57b7d3df17fbc2e231cb5913707",
             "file": "packages/ecl/components/ecl-select/ecl-select-container.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -77433,7 +77377,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26,
+                    "line": 29,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77450,7 +77394,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size/length of the field and the dropdown, can be &#39;s&#39;, &#39;m&#39; or &#39;l&#39;. Default is &#39;m&#39;.\nSame as the size of the main host element.</p>\n",
-                    "line": 25,
+                    "line": 28,
                     "rawdescription": "\n\nSize/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\nSame as the size of the main host element.\n",
                     "modifierKind": [
                         148
@@ -77467,7 +77411,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 27,
+                    "line": 30,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77484,7 +77428,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Custom label for the arrow-down button. Set from the main host element.</p>\n",
-                    "line": 31,
+                    "line": 34,
                     "rawdescription": "\n\nCustom label for the arrow-down button. Set from the main host element.\n",
                     "modifierKind": [
                         148
@@ -77546,7 +77490,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 26,
+                    "line": 29,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77563,7 +77507,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Size/length of the field and the dropdown, can be &#39;s&#39;, &#39;m&#39; or &#39;l&#39;. Default is &#39;m&#39;.\nSame as the size of the main host element.</p>\n",
-                    "line": 25,
+                    "line": 28,
                     "rawdescription": "\n\nSize/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\nSame as the size of the main host element.\n",
                     "modifierKind": [
                         148
@@ -77580,7 +77524,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 27,
+                    "line": 30,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -77597,7 +77541,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Custom label for the arrow-down button. Set from the main host element.</p>\n",
-                    "line": 31,
+                    "line": 34,
                     "rawdescription": "\n\nCustom label for the arrow-down button. Set from the main host element.\n",
                     "modifierKind": [
                         148
@@ -77649,20 +77593,7 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nAdds specific classes for the container.\n",
-                    "description": "<p>Adds specific classes for the container.</p>\n",
-                    "line": 37,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "standalone": false,
             "imports": [
@@ -77680,14 +77611,14 @@
             "description": "<p>Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.</p>\n",
             "rawdescription": "\n\nContainer component, which wraps the <select> component. Ataches custom select button with dropdown arrow.\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding, inject, model } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n/**\n * Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.\n */\n@Component({\n    selector: 'ecl-select-container',\n    templateUrl: './ecl-select-container.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n})\nexport class EclSelectContainerComponent extends ECLBaseDirective {\n    /**\n     * Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n     * Same as the size of the main host element.\n     */\n    readonly eclSize = model('m');\n    readonly disabled = model<boolean>(undefined);\n    readonly isInvalid = model<boolean>(undefined);\n    /**\n     * Custom label for the arrow-down button. Set from the main host element.\n     */\n    readonly toggleLabel = model<string | undefined>(undefined);\n\n    /**\n     * Adds specific classes for the container.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const eclSize = this.eclSize();\n        return [\n            super.getCssClasses('ecl-select__container'),\n            eclSize ? `ecl-select__container--${eclSize}` : '',\n            this.disabled() ? 'ecl-select__container--disabled' : '',\n            this.isInvalid() ? 'ecl-select__container--invalid' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    private ICON_SIZE_EC = 'xs';\n    private ICON_SIZE_EU = 's'\n    private eclThemeService = inject(EclThemeService);\n\n    /**\n     * Returns different icon sizes, depending if it's EU (s) or EC (xs) theme.\n     */\n    get iconSize(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC;\n        } else {\n            return this.ICON_SIZE_EU;\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, inject, model } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n/**\n * Container component, which wraps the <select> component. Ataches custom select button with dropdown arrow.\n */\n@Component({\n    selector: 'ecl-select-container',\n    templateUrl: './ecl-select-container.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSelectContainerComponent extends ECLBaseDirective {\n    /**\n     * Size/length of the field and the dropdown, can be 's', 'm' or 'l'. Default is 'm'.\n     * Same as the size of the main host element.\n     */\n    readonly eclSize = model('m');\n    readonly disabled = model<boolean>(undefined);\n    readonly isInvalid = model<boolean>(undefined);\n    /**\n     * Custom label for the arrow-down button. Set from the main host element.\n     */\n    readonly toggleLabel = model<string | undefined>(undefined);\n\n    /**\n     * Adds specific classes for the container.\n     */\n    get cssClasses(): string {\n        const eclSize = this.eclSize();\n        return [\n            super.getCssClasses('ecl-select__container'),\n            eclSize ? `ecl-select__container--${eclSize}` : '',\n            this.disabled() ? 'ecl-select__container--disabled' : '',\n            this.isInvalid() ? 'ecl-select__container--invalid' : '',\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    private ICON_SIZE_EC = 'xs';\n    private ICON_SIZE_EU = 's'\n    private eclThemeService = inject(EclThemeService);\n\n    /**\n     * Returns different icon sizes, depending if it's EU (s) or EC (xs) theme.\n     */\n    protected get iconSize(): string {\n        if (this.eclThemeService.isECTheme()) {\n            return this.ICON_SIZE_EC;\n        } else {\n            return this.ICON_SIZE_EU;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 350,
-                    "end": 467,
+                    "pos": 337,
+                    "end": 454,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -77706,7 +77637,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 37,
+                        "line": 39,
                         "rawdescription": "\n\nAdds specific classes for the container.\n",
                         "description": "<p>Adds specific classes for the container.</p>\n"
                     }
@@ -77717,7 +77648,7 @@
                         "name": "iconSize",
                         "type": "string",
                         "returnType": "string",
-                        "line": 56,
+                        "line": 58,
                         "rawdescription": "\n\nReturns different icon sizes, depending if it's EU (s) or EC (xs) theme.\n",
                         "description": "<p>Returns different icon sizes, depending if it&#39;s EU (s) or EC (xs) theme.</p>\n"
                     }

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-29T14:38:17.262Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-30T11:26:41.222Z, llm-md export.
 
 ## Modules
 
@@ -7469,10 +7469,10 @@ Properties:
 
 ## Public variables
 
-- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
-  Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts`
+- `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
+  Defined in `packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts`
 - `ARROW_SIZE: string = '0.5rem'` — Half the arrow's own width, matching ECL's arrowSize .
   Defined in `packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts`
 - `AVAILABLE_NON_EU_LOGO_COUNTRY_CODES: string[] = ['ar', 'ca', 'is', 'jp', 'lb', 'no', 'ru', 'sw', 'tr', 'uk', 'zh'] as const`

package/docs/miscellaneous/variables.html

@@ -138,10 +138,10 @@
                 <td class="col-md-4">
                     <ul class="index-list">
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
                         </li>
                         <li>
-                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-login.component.ts)</span></a>
+                            <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-language.component.ts)</span></a>
                         </li>
                         <li>
                             <a href="#ARROW_SIZE" title="packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts" class="reference-link "><span class="reference-badge reference-badge--variable" aria-hidden="true">V</span><span class="reference-link-label"><b>ARROW_SIZE</b>&nbsp;&nbsp;&nbsp;(packages/.../ecl-site-header-search.component.ts)</span></a>
@@ -411,7 +411,7 @@
     </table>
 </section>
 
-    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
+    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
     <section data-compodoc="block-properties">
     <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
@@ -445,67 +445,67 @@
 
         </tbody>
     </table>
-</section>
-    <h3>packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts</h3>
-    <section data-compodoc="block-properties">
-    <h3></h3>    <table class="table table-sm table-bordered">
+    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="ARROW_SIZE"></a>
+                    <a name="RESIZE_DEBOUNCE"></a>
                     <span class="name">
-                        <span ><b>ARROW_SIZE</b></span>
-                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>RESIZE_DEBOUNCE</b></span>
+                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
+                        <i>Default value : </i><code>200</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
+                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
 </div>
                 </td>
             </tr>
 
         </tbody>
     </table>
-    <table class="table table-sm table-bordered">
+</section>
+    <h3>packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts</h3>
+    <section data-compodoc="block-properties">
+    <h3></h3>    <table class="table table-sm table-bordered">
         <tbody>
             <tr>
                 <td class="col-md-4">
-                    <a name="RESIZE_DEBOUNCE"></a>
+                    <a name="ARROW_SIZE"></a>
                     <span class="name">
-                        <span ><b>RESIZE_DEBOUNCE</b></span>
-                        <a href="#RESIZE_DEBOUNCE"><span class="icon ion-ios-link"></span></a>
+                        <span ><b>ARROW_SIZE</b></span>
+                        <a href="#ARROW_SIZE"><span class="icon ion-ios-link"></span></a>
                     </span>
                 </td>
             </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/number" target="_blank" >number</a></code>
+                        <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
 
                     </td>
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <i>Default value : </i><code>200</code>
+                        <i>Default value : </i><code>&#x27;0.5rem&#x27;</code>
                     </td>
                 </tr>
 
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>
+                    <div class="io-description"><p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>
 </div>
                 </td>
             </tr>

package/docs/properties.html

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