@eui/ecl 22.0.0-alpha.16 → 22.0.0-alpha.17

package/docs/json/documentation.json

@@ -66045,7 +66045,7 @@
         },
         {
             "name": "EclModalComponent",
-            "id": "component-EclModalComponent-783254263040fcbc11e6e1d00661df3b11df436189c8e048dc51d0b889a87d8cd597f2f56892a435b7166c0b4f1f7bd1ee86e4045ae00c9379c3d0e060c349ff",
+            "id": "component-EclModalComponent-1cf92a1dab40108fd3f9998ebb4665501233c834f3b5c448baa91d4789f231a54150d0c01e74aa4ad1fd2d1def62eec79cd7b91f1f74dd26f9786b292f588177",
             "file": "packages/ecl/components/ecl-modal/ecl-modal.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66246,7 +66246,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 192,
+                    "line": 193,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCloses the modal and emits a `modalClose` event with optional result data.\nIf the event is not prevented, the modal will be hidden.\n",
@@ -66285,7 +66285,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 153,
+                    "line": 154,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles ESC key press to close the modal with `cancel` role.\n",
@@ -66298,7 +66298,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 162,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOpens the modal and emits a `modalOpen` event.\nIf the event is not prevented, the modal will be displayed.\n",
@@ -66358,7 +66358,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n    AfterContentInit,\n    Component,\n    contentChild,\n    contentChildren,\n    forwardRef,\n    input,\n    output,\n    signal,\n    inject,\n    DOCUMENT,\n    PLATFORM_ID,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseDirective } from './ecl-modal-close.directive';\nimport { EclModalHeaderComponent } from './ecl-modal-header.component';\nimport { EclModalResult } from './models/ecl-modal-result.model';\nimport { EclModalCloseEvent } from './events';\nimport { EclModalOpenEvent } from './events';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { uniqueId } from '@eui/core';\nimport { EclModalBodyComponent } from './ecl-modal-body.component';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'dialog[eclModal]',\n    templateUrl: './ecl-modal.component.html',\n    imports: [A11yModule],\n    host: {\n        '[attr.open]': 'isModalOpened',\n        '[attr.aria-describedby]': 'hostAriaDescribedBy',\n        '[class]': 'cssClasses',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n    },\n})\n \nexport class EclModalComponent<T = any> extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Defines the visual variant of the modal.\n     * Possible values: 'information', 'success', 'warning', 'error', or a custom string.\n     */\n    variant = input<'information' | 'success' | 'warning' | 'error' | string>();\n    \n    /**\n     * Defines the size of the modal.\n     * Possible values: 's', 'm', 'l' (default), 'full'.\n     */\n    size = input<'s' | 'm' | 'l' | 'full' | string>('l');\n    \n    /**\n     * Unique ID for the modal body.\n     * Used for accessibility (`aria-describedby` on the modal container).\n     */\n    eclModalBodyId = `ecl-modal-body-${uniqueId()}`;\n    \n    /**\n     * Controls whether the modal is open.\n     */\n    isOpen = signal(false);\n    \n    /**\n     * Emits when the modal is closed.\n     * Carries an instance of `EclModalCloseEvent`.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Emits when the modal is opened.\n     * Carries an instance of `EclModalOpenEvent`.\n     */\n    modalOpen = output<EclModalOpenEvent>();\n    \n    /**\n     * Header component projected into the modal.\n     */\n    eclModalHeader = contentChild(forwardRef(() => EclModalHeaderComponent));\n    \n    /**\n     * All close directives projected inside the modal.\n     */\n    eclModalCloseComponents = contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true });\n    \n    /**\n     * Body component projected into the modal.\n     */\n    eclModalBody = contentChild(EclModalBodyComponent);\n\n    private previousOverflow = '';\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Wires the projected header and close directives, and passes the body id to\n     * the projected body, once content is initialized. The projected content is\n     * static for the modal's lifetime, so a one-time setup is sufficient.\n     */\n    ngAfterContentInit(): void {\n        const header = this.eclModalHeader();\n        if (header) {\n            header.variant.set(this.variant());\n            header.modalClose.subscribe(() => {\n                this.closeModal({ eclModalRole: 'cancel' });\n            });\n        }\n\n        // Wire every projected close directive to close the modal with its\n        // configured role and result. `modalClose` is an `output()`, so its\n        // subscription is cleaned up automatically when this component is destroyed.\n        this.eclModalCloseComponents().forEach((closeCmp) => {\n            closeCmp.modalClose.subscribe(() => {\n                this.closeModal({\n                    eclModalData: closeCmp.eclModalResult(),\n                    eclModalRole: closeCmp.eclModalRole(),\n                });\n            });\n        });\n\n        // Pass the modal body id to the projected body for aria-describedby wiring.\n        this.eclModalBody()?.eclModalBodyId.set(this.eclModalBodyId);\n    }\n\n    /**\n     * Binds the `open` attribute to the modal element.\n     * Used by the native `<dialog>` element.\n     */\n    get isModalOpened(): boolean | null {\n        return this.isOpen() || null;\n    }\n\n    /**\n     * Binds the `aria-describedby` attribute to the modal element.\n     * Connects the dialog with the modal body via its unique ID for accessibility.\n     */\n    get hostAriaDescribedBy(): string {\n        return this.eclModalBodyId;\n    }\n\n    /**\n     * Applies base and variant CSS classes to the modal element.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal'),\n            this.variant() ? `ecl-modal--${this.variant()}` : '',\n            `ecl-modal--${this.size()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles ESC key press to close the modal with `cancel` role.\n     */\n    onEscapeKeydownHandler(): void {\n        this.closeModal({ eclModalRole: 'cancel' });\n    }\n\n    /**\n     * Opens the modal and emits a `modalOpen` event.\n     * If the event is not prevented, the modal will be displayed.\n     */\n    openModal(): void {\n        // Ignore repeated open calls so the saved overflow value is not overwritten\n        // with the already-hidden value while the modal is open.\n        if (this.isOpen()) {\n            return;\n        }\n\n        const event = new EclModalOpenEvent();\n        this.modalOpen.emit(event);\n\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        this.isOpen.set(true);\n\n        const header = this.eclModalHeader();\n        if (header) {\n            setTimeout(() => header.closeButton().el.nativeElement.focus(), 100);\n        }\n        // To prevent scrolling in main document\n        if (isPlatformBrowser(this.platformId)) {\n            this.previousOverflow = this.document.body.style.overflow;\n            this.document.body.style.overflow = 'hidden';\n        }\n    }\n\n    /**\n     * Closes the modal and emits a `modalClose` event with optional result data.\n     * If the event is not prevented, the modal will be hidden.\n     */\n    closeModal(result?: EclModalResult<T>): void {\n        if (this.isOpen()) {\n            const event = new EclModalCloseEvent({\n                eclModalData: result?.eclModalData,\n                eclModalRole: result?.eclModalRole,\n            });\n            this.modalClose.emit(event);\n\n            if (!event.defaultPrevented) {\n                this.isOpen.set(false);\n            }\n\n            if (isPlatformBrowser(this.platformId)) {\n                this.document.body.style.overflow = this.previousOverflow;\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import {\n    AfterContentInit,\n    Component,\n    contentChild,\n    contentChildren,\n    forwardRef,\n    input,\n    output,\n    signal,\n    inject,\n    DOCUMENT,\n    PLATFORM_ID,\n} from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseDirective } from './ecl-modal-close.directive';\nimport { EclModalHeaderComponent } from './ecl-modal-header.component';\nimport { EclModalResult } from './models/ecl-modal-result.model';\nimport { EclModalCloseEvent } from './events';\nimport { EclModalOpenEvent } from './events';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { uniqueId } from '@eui/core';\nimport { EclModalBodyComponent } from './ecl-modal-body.component';\nimport { isPlatformBrowser } from '@angular/common';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'dialog[eclModal]',\n    templateUrl: './ecl-modal.component.html',\n    imports: [A11yModule],\n    host: {\n        '[attr.open]': 'isModalOpened',\n        '[attr.aria-describedby]': 'hostAriaDescribedBy',\n        '[class]': 'cssClasses',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n    },\n})\n \nexport class EclModalComponent<T = any> extends ECLBaseDirective implements AfterContentInit {\n    /**\n     * Defines the visual variant of the modal.\n     * Possible values: 'information', 'success', 'warning', 'error', or a custom string.\n     */\n    variant = input<'information' | 'success' | 'warning' | 'error' | string>();\n    \n    /**\n     * Defines the size of the modal.\n     * Possible values: 's', 'm', 'l' (default), 'full'.\n     */\n    size = input<'s' | 'm' | 'l' | 'full' | string>('l');\n    \n    /**\n     * Unique ID for the modal body.\n     * Used for accessibility (`aria-describedby` on the modal container).\n     */\n    eclModalBodyId = `ecl-modal-body-${uniqueId()}`;\n    \n    /**\n     * Controls whether the modal is open.\n     */\n    isOpen = signal(false);\n    \n    /**\n     * Emits when the modal is closed.\n     * Carries an instance of `EclModalCloseEvent`.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Emits when the modal is opened.\n     * Carries an instance of `EclModalOpenEvent`.\n     */\n    modalOpen = output<EclModalOpenEvent>();\n    \n    /**\n     * Header component projected into the modal.\n     */\n    eclModalHeader = contentChild(forwardRef(() => EclModalHeaderComponent));\n    \n    /**\n     * All close directives projected inside the modal.\n     */\n    eclModalCloseComponents = contentChildren(forwardRef(() => EclModalCloseDirective), { descendants: true });\n    \n    /**\n     * Body component projected into the modal.\n     */\n    eclModalBody = contentChild(EclModalBodyComponent);\n\n    private previousOverflow = '';\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly platformId = inject(PLATFORM_ID);\n\n    /**\n     * Wires the projected header and close directives, and passes the body id to\n     * the projected body, once content is initialized. The projected content is\n     * static for the modal's lifetime, so a one-time setup is sufficient.\n     */\n    ngAfterContentInit(): void {\n        // The header derives its own `variant` reactively from this modal, so no\n        // manual sync is needed here. We only wire the close event.\n        const header = this.eclModalHeader();\n        if (header) {\n            header.modalClose.subscribe(() => {\n                this.closeModal({ eclModalRole: 'cancel' });\n            });\n        }\n\n        // Wire every projected close directive to close the modal with its\n        // configured role and result. `modalClose` is an `output()`, so its\n        // subscription is cleaned up automatically when this component is destroyed.\n        this.eclModalCloseComponents().forEach((closeCmp) => {\n            closeCmp.modalClose.subscribe(() => {\n                this.closeModal({\n                    eclModalData: closeCmp.eclModalResult(),\n                    eclModalRole: closeCmp.eclModalRole(),\n                });\n            });\n        });\n\n        // Pass the modal body id to the projected body for aria-describedby wiring.\n        this.eclModalBody()?.eclModalBodyId.set(this.eclModalBodyId);\n    }\n\n    /**\n     * Binds the `open` attribute to the modal element.\n     * Used by the native `<dialog>` element.\n     */\n    get isModalOpened(): boolean | null {\n        return this.isOpen() || null;\n    }\n\n    /**\n     * Binds the `aria-describedby` attribute to the modal element.\n     * Connects the dialog with the modal body via its unique ID for accessibility.\n     */\n    get hostAriaDescribedBy(): string {\n        return this.eclModalBodyId;\n    }\n\n    /**\n     * Applies base and variant CSS classes to the modal element.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal'),\n            this.variant() ? `ecl-modal--${this.variant()}` : '',\n            `ecl-modal--${this.size()}`,\n        ].join(' ').trim();\n    }\n\n    /**\n     * Handles ESC key press to close the modal with `cancel` role.\n     */\n    onEscapeKeydownHandler(): void {\n        this.closeModal({ eclModalRole: 'cancel' });\n    }\n\n    /**\n     * Opens the modal and emits a `modalOpen` event.\n     * If the event is not prevented, the modal will be displayed.\n     */\n    openModal(): void {\n        // Ignore repeated open calls so the saved overflow value is not overwritten\n        // with the already-hidden value while the modal is open.\n        if (this.isOpen()) {\n            return;\n        }\n\n        const event = new EclModalOpenEvent();\n        this.modalOpen.emit(event);\n\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        this.isOpen.set(true);\n\n        const header = this.eclModalHeader();\n        if (header) {\n            setTimeout(() => header.closeButton().el.nativeElement.focus(), 100);\n        }\n        // To prevent scrolling in main document\n        if (isPlatformBrowser(this.platformId)) {\n            this.previousOverflow = this.document.body.style.overflow;\n            this.document.body.style.overflow = 'hidden';\n        }\n    }\n\n    /**\n     * Closes the modal and emits a `modalClose` event with optional result data.\n     * If the event is not prevented, the modal will be hidden.\n     */\n    closeModal(result?: EclModalResult<T>): void {\n        if (this.isOpen()) {\n            const event = new EclModalCloseEvent({\n                eclModalData: result?.eclModalData,\n                eclModalRole: result?.eclModalRole,\n            });\n            this.modalClose.emit(event);\n\n            if (!event.defaultPrevented) {\n                this.isOpen.set(false);\n            }\n\n            if (isPlatformBrowser(this.platformId)) {\n                this.document.body.style.overflow = this.previousOverflow;\n            }\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -66375,7 +66375,7 @@
                         "name": "isModalOpened",
                         "type": "unknown",
                         "returnType": "boolean | null",
-                        "line": 128,
+                        "line": 129,
                         "rawdescription": "\n\nBinds the `open` attribute to the modal element.\nUsed by the native `<dialog>` element.\n",
                         "description": "<p>Binds the <code>open</code> attribute to the modal element.\nUsed by the native <code>&lt;dialog&gt;</code> element.</p>\n"
                     }
@@ -66386,7 +66386,7 @@
                         "name": "hostAriaDescribedBy",
                         "type": "string",
                         "returnType": "string",
-                        "line": 136,
+                        "line": 137,
                         "rawdescription": "\n\nBinds the `aria-describedby` attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.\n",
                         "description": "<p>Binds the <code>aria-describedby</code> attribute to the modal element.\nConnects the dialog with the modal body via its unique ID for accessibility.</p>\n"
                     }
@@ -66397,7 +66397,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 143,
+                        "line": 144,
                         "rawdescription": "\n\nApplies base and variant CSS classes to the modal element.\n",
                         "description": "<p>Applies base and variant CSS classes to the modal element.</p>\n"
                     }
@@ -66617,7 +66617,7 @@
         },
         {
             "name": "EclModalHeaderComponent",
-            "id": "component-EclModalHeaderComponent-9d18fdce4971234e6815aa2f930d1e35a9238034a1b6f53925b9d7f0c3b5a3b8b53586bb78b92b6c33fc3b897277aed9f777c9fde40c41393ec785c35477097d",
+            "id": "component-EclModalHeaderComponent-6d03b2a86fe5e8353c5a09a0395b1f922e73d023edb7f1ad63b3631ba463fcd16d0680902bed575e92f9378a94c142e7cf987abcc11f2837847cc9ab5bc5f5cb",
             "file": "packages/ecl/components/ecl-modal/ecl-modal-header.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -66689,7 +66689,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Event emitted when the close button is clicked.\nEmits an <code>EclModalCloseEvent</code> object.</p>\n",
-                    "line": 41,
+                    "line": 55,
                     "rawdescription": "\n\nEvent emitted when the close button is clicked.\nEmits an `EclModalCloseEvent` object.\n",
                     "required": false
                 }
@@ -66705,21 +66705,21 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the close button component.</p>\n",
-                    "line": 46,
+                    "line": 60,
                     "rawdescription": "\n\nReference to the close button component.\n"
                 },
                 {
                     "name": "variant",
                     "coverageIgnore": false,
-                    "defaultValue": "signal<'information' | 'success' | 'warning' | 'error' | string | undefined>(undefined)",
+                    "defaultValue": "computed<'information' | 'success' | 'warning' | 'error' | string | undefined>(\n        () => this.modal.variant(),\n    )",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
-                    "description": "<p>Defines the visual variant of the modal.\nDetermines which icon is shown in the header.\nPossible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or any custom string.</p>\n",
-                    "line": 35,
-                    "rawdescription": "\n\nDefines the visual variant of the modal.\nDetermines which icon is shown in the header.\nPossible values: 'information', 'success', 'warning', 'error', or any custom string.\n"
+                    "description": "<p>Defines the visual variant of the modal.\nDetermines which icon is shown in the header.\nDerived reactively from the parent modal&#39;s <code>variant</code> input, so the header\nicon updates automatically when the parent variant changes at runtime.\nPossible values: &#39;information&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;error&#39;, or any custom string.</p>\n",
+                    "line": 47,
+                    "rawdescription": "\n\nDefines the visual variant of the modal.\nDetermines which icon is shown in the header.\nDerived reactively from the parent modal's `variant` input, so the header\nicon updates automatically when the parent variant changes at runtime.\nPossible values: 'information', 'success', 'warning', 'error', or any custom string.\n"
                 }
             ],
             "methodsClass": [
@@ -66730,7 +66730,7 @@
                     "optional": false,
                     "returnType": "\"information\" | \"check-filled\" | \"warning\" | \"error\" | null",
                     "typeParameters": [],
-                    "line": 67,
+                    "line": 81,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the name of the icon associated with the current variant.\n",
@@ -66738,8 +66738,8 @@
                     "jsdoctags": [
                         {
                             "tagName": {
-                                "pos": 2171,
-                                "end": 2178,
+                                "pos": 2877,
+                                "end": 2884,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -66757,7 +66757,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 59,
+                    "line": 73,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the click event on the close button.\nEmits a `modalClose` event with no payload.\n",
@@ -66823,14 +66823,14 @@
             "description": "<p>Header component used within the ECL Modal.</p>\n<p>Displays an icon depending on the modal variant, user-defined content,\nand a close button that emits a close event.</p>\n",
             "rawdescription": "\n\nHeader component used within the ECL Modal.\n\nDisplays an icon depending on the modal variant, user-defined content,\nand a close button that emits a close event.\n",
             "type": "component",
-            "sourceCode": "import { Component, output, viewChild, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseEvent } from './events';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n/**\n * Header component used within the ECL Modal.\n *\n * Displays an icon depending on the modal variant, user-defined content,\n * and a close button that emits a close event.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalHeader]',\n    templateUrl: './ecl-modal-header.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalHeaderComponent<T = any> extends ECLBaseDirective {\n    /**\n     * Defines the visual variant of the modal.\n     * Determines which icon is shown in the header.\n     * Possible values: 'information', 'success', 'warning', 'error', or any custom string.\n     */\n    variant = signal<'information' | 'success' | 'warning' | 'error' | string | undefined>(undefined);\n    \n    /**\n     * Event emitted when the close button is clicked.\n     * Emits an `EclModalCloseEvent` object.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Reference to the close button component.\n     */\n    closeButton = viewChild.required<EclButtonComponent>('closeButton');\n    \n    /**\n     * Applies the ECL CSS class for modal header container.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__header')].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `modalClose` event with no payload.\n     */\n    onCloseClick(): void {\n        this.modalClose.emit(new EclModalCloseEvent());\n    }\n\n    /**\n     * Returns the name of the icon associated with the current variant.\n     * @returns The icon name, or `null` if no matching variant exists.\n     */\n    getIcon(): 'information' | 'check-filled' | 'warning' | 'error' | null {\n        const v = this.variant();\n        if (v === 'information') {\n            return 'information';\n        } else if (v === 'success') {\n            return 'check-filled';\n        } else if (v === 'warning') {\n            return 'warning';\n        } else if (v === 'error') {\n            return 'error';\n        } else {\n            return null;\n        }\n    }\n}\n",
+            "sourceCode": "import { Component, output, viewChild, computed, inject, forwardRef } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclModalCloseEvent } from './events';\nimport { EclButtonComponent } from '@eui/ecl/components/ecl-button';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclModalComponent } from './ecl-modal.component';\n\n/**\n * Header component used within the ECL Modal.\n *\n * Displays an icon depending on the modal variant, user-defined content,\n * and a close button that emits a close event.\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: '[eclModalHeader]',\n    templateUrl: './ecl-modal-header.component.html',\n    imports: [\n        ...EUI_ECL_ICON,\n        TranslatePipe,\n        ...EUI_ECL_BUTTON,\n    ],\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class EclModalHeaderComponent<T = any> extends ECLBaseDirective {\n    /**\n     * Reference to the parent modal the header is projected into.\n     * Injected with `forwardRef` to avoid a circular module-import issue.\n     * A header is only valid inside an `EclModalComponent`, so this is a\n     * required injection: using the header outside a modal throws at\n     * construction, surfacing the misuse immediately.\n     */\n    private readonly modal = inject(forwardRef(() => EclModalComponent));\n\n    /**\n     * Defines the visual variant of the modal.\n     * Determines which icon is shown in the header.\n     * Derived reactively from the parent modal's `variant` input, so the header\n     * icon updates automatically when the parent variant changes at runtime.\n     * Possible values: 'information', 'success', 'warning', 'error', or any custom string.\n     */\n    variant = computed<'information' | 'success' | 'warning' | 'error' | string | undefined>(\n        () => this.modal.variant(),\n    );\n    \n    /**\n     * Event emitted when the close button is clicked.\n     * Emits an `EclModalCloseEvent` object.\n     */\n    modalClose = output<EclModalCloseEvent<T>>();\n    \n    /**\n     * Reference to the close button component.\n     */\n    closeButton = viewChild.required<EclButtonComponent>('closeButton');\n    \n    /**\n     * Applies the ECL CSS class for modal header container.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-modal__header')].join(' ').trim();\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `modalClose` event with no payload.\n     */\n    onCloseClick(): void {\n        this.modalClose.emit(new EclModalCloseEvent());\n    }\n\n    /**\n     * Returns the name of the icon associated with the current variant.\n     * @returns The icon name, or `null` if no matching variant exists.\n     */\n    getIcon(): 'information' | 'check-filled' | 'warning' | 'error' | null {\n        const v = this.variant();\n        if (v === 'information') {\n            return 'information';\n        } else if (v === 'success') {\n            return 'check-filled';\n        } else if (v === 'warning') {\n            return 'warning';\n        } else if (v === 'error') {\n            return 'error';\n        } else {\n            return null;\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 416,
-                    "end": 595,
+                    "pos": 497,
+                    "end": 676,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -66849,7 +66849,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 51,
+                        "line": 65,
                         "rawdescription": "\n\nApplies the ECL CSS class for modal header container.\n",
                         "description": "<p>Applies the ECL CSS class for modal header container.</p>\n"
                     }
@@ -93885,7 +93885,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -93898,7 +93898,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -93911,7 +93911,7 @@
                 "name": "ARROW_SIZE",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                "file": "packages/ecl/components/ecl-site-header/search/ecl-site-header-search.component.ts",
                 "coverageIgnore": false,
                 "deprecated": false,
                 "deprecationMessage": "",
@@ -95355,6 +95355,21 @@
             }
         ],
         "groupedVariables": {
+            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
+                {
+                    "name": "ARROW_SIZE",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
+                    "coverageIgnore": false,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "defaultValue": "'0.5rem'",
+                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
+                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
+                }
+            ],
             "packages/ecl/components/ecl-site-header/login/ecl-site-header-login.component.ts": [
                 {
                     "name": "ARROW_SIZE",
@@ -95433,21 +95448,6 @@
                     "description": "<p>Debounce for the resize recomputation, matching ECL&#39;s <code>handleResize</code>.</p>\n"
                 }
             ],
-            "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts": [
-                {
-                    "name": "ARROW_SIZE",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "packages/ecl/components/ecl-site-header/language/ecl-site-header-language.component.ts",
-                    "coverageIgnore": false,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "string",
-                    "defaultValue": "'0.5rem'",
-                    "rawdescription": "Half the arrow's own width, matching ECL's `arrowSize`.",
-                    "description": "<p>Half the arrow&#39;s own width, matching ECL&#39;s <code>arrowSize</code>.</p>\n"
-                }
-            ],
             "packages/ecl/core/utils/constants/constants.ts": [
                 {
                     "name": "AVAILABLE_NON_EU_LOGO_COUNTRY_CODES",

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eui documentation
 
-> Generated by compodoc 2.0.0 at 2026-09-23T08:37:30.056Z, llm-md export.
+> Generated by compodoc 2.0.0 at 2026-09-23T15:12:15.510Z, llm-md export.
 
 ## Modules
 
@@ -1690,7 +1690,7 @@ Outputs:
 
 Properties:
 - `closeButton: unknown = viewChild.required<EclButtonComponent>('closeButton')` — Reference to the close button component.
-- `variant: unknown = signal<'information' | 'success' | 'warning' | 'error' | string | undefined>(undefined)` — Defines the visual variant of the modal. Determines which icon is shown in the header. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
+- `variant: unknown = computed<'information' | 'success' | 'warning' | 'error' | string | undefined>( () => this.modal.variant(), )` — Defines the visual variant of the modal. Determines which icon is shown in the header. Derived reactively from the parent modal's variant input, so the header icon updates automatically when the parent variant changes at runtime. Possible values: 'information', 'success', 'warning', 'error', or any custom string.
 
 Methods:
 - `getIcon(): "information" | "check-filled" | "warning" | "error" | null` — Returns the name of the icon associated with the current variant.
@@ -7564,10 +7564,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.16</li>
+            <b>Version</b> : 22.0.0-alpha.17</li>
     </ul>
 
 

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, Directive, signal, viewChild, Component, contentChild, forwardRef, contentChildren, inject, DOCUMENT, PLATFORM_ID } from '@angular/core';
+import { input, output, Directive, inject, forwardRef, computed, viewChild, Component, signal, contentChild, contentChildren, DOCUMENT, PLATFORM_ID } from '@angular/core';
 import { ECLBaseDirective, EclBaseEvent } from '@eui/ecl/core';
 import { TranslatePipe } from '@ngx-translate/core';
 import * as i2 from '@eui/ecl/components/ecl-button';
@@ -73,12 +73,22 @@ class EclModalCloseEvent extends EclBaseEvent {
 class EclModalHeaderComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        /**
+         * Reference to the parent modal the header is projected into.
+         * Injected with `forwardRef` to avoid a circular module-import issue.
+         * A header is only valid inside an `EclModalComponent`, so this is a
+         * required injection: using the header outside a modal throws at
+         * construction, surfacing the misuse immediately.
+         */
+        this.modal = inject(forwardRef(() => EclModalComponent));
         /**
          * Defines the visual variant of the modal.
          * Determines which icon is shown in the header.
+         * Derived reactively from the parent modal's `variant` input, so the header
+         * icon updates automatically when the parent variant changes at runtime.
          * Possible values: 'information', 'success', 'warning', 'error', or any custom string.
          */
-        this.variant = signal(undefined, /* @ts-ignore */
+        this.variant = computed(() => this.modal.variant(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         /**
          * Event emitted when the close button is clicked.
@@ -234,9 +244,10 @@ class EclModalComponent extends ECLBaseDirective {
      * static for the modal's lifetime, so a one-time setup is sufficient.
      */
     ngAfterContentInit() {
+        // The header derives its own `variant` reactively from this modal, so no
+        // manual sync is needed here. We only wire the close event.
         const header = this.eclModalHeader();
         if (header) {
-            header.variant.set(this.variant());
             header.modalClose.subscribe(() => {
                 this.closeModal({ eclModalRole: 'cancel' });
             });