@eui/ecl 22.0.0-alpha.4 → 22.0.0-alpha.5

package/docs/json/documentation.json

@@ -8457,13 +8457,13 @@
         },
         {
             "name": "EclSocialMediaFollowItemClickEvent",
-            "id": "class-EclSocialMediaFollowItemClickEvent-a5a386ce91d38e0d4ebb07c2085b8c669354f1a816b2677b7dde9628c9a14908687d7a7d0f9f6e66e8172233d257ac2a1145254275a03f9216caa201b32c6018",
+            "id": "class-EclSocialMediaFollowItemClickEvent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        'role': 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "displayName": "EclSocialMediaFollowItemClickEvent",
             "inputsClass": [],
             "outputsClass": [],
@@ -22604,12 +22604,12 @@
         },
         {
             "name": "EclLinkDirective",
-            "id": "directive-EclLinkDirective-739a62b701c6c8fceceac1560ad0dbc240f3b0b4168c9009ce68f360a71af9549945dc5181e5e24dd52baf85cc6540f26d5614d44ffa294316e0d4d71e65874f",
+            "id": "directive-EclLinkDirective-fb6b45fe7d77a582abd56929a240d6a1418c1ca58d979b7d3c29ff7989887b38145c46f3cd3c8055fcab7abe78119fa333c24d646e16e636785744a886b96932",
             "file": "packages/ecl/components/ecl-link/ecl-link.directive.ts",
             "type": "directive",
             "description": "<p>&#39;eclLink&#39; directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.</p>\n",
             "rawdescription": "\n\n'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n",
-            "sourceCode": "import { AfterContentInit, booleanAttribute, ChangeDetectorRef, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective implements AfterContentInit {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n    cd = inject(ChangeDetectorRef);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    ngAfterContentInit(): void {\n        // Add additional class to the child icon, if any.\n        if (this.eclIconComponents()?.length > 0 ) {\n            setTimeout(() => {\n                this.eclIconComponents().forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n                this.cd.markForCheck();\n            });\n        }\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, contentChildren, Directive, ElementRef, HostBinding, inject, input, Renderer2, effect, computed, forwardRef } from '@angular/core';\nimport { EclIconComponent } from '@eui/ecl/components/ecl-icon';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * 'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.\n */\n@Directive({\n    selector: '[eclLink]',\n})\nexport class EclLinkDirective extends ECLBaseDirective {\n    el = inject(ElementRef);\n    renderer = inject(Renderer2);\n\n    /**\n     * Additional HTML attributes to be set on the link element.\n     * Used e.g. by social-media-follow for passing extra_attributes.\n     */\n    extraAttributes = input<{ name: string; value?: string | null }[] | undefined>();\n\n    /**\n     * Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n     */\n    isInverted = input(false, { transform: booleanAttribute });\n\n    /**\n     * Property to style the component if it consist only of an icon.\n     */\n    isIconOnly = input(false, { transform: booleanAttribute });\n\n    /** Adds class for hightlighted link (works only with 'primary' variant)\n     * @deprecated - to be removed in v23. Use variant='primary-highlight', as only primary variant can be highlighted.\n    */\n    isHighlight = input(false, { transform: booleanAttribute });\n\n    /**\n     * @deprecated - will be removed in v21. Deprecated on ECL side.\n     */\n    isNoVisited = input(false, { transform: booleanAttribute });\n\n    isBranded = input(false, { transform: booleanAttribute });\n\n    /**\n     * With 'variant' property user can add some more specific styling to the <a> component.\n     */\n    variant = input<'standalone' | 'primary' | 'secondary' | 'secondary-neutral' | 'primary-neutral' | 'primary-highlight'>();\n\n    eclIconComponents = contentChildren(forwardRef(() => EclIconComponent), { descendants: true });\n\n    constructor() {\n        super();\n        effect(() => {\n            const attrs = this.extraAttributes();\n            if (attrs && attrs.length) {\n                attrs.forEach((attr) => {\n                    if (attr?.name) {\n                        this.el.nativeElement.setAttribute(attr.name, attr.value ?? '');\n                    }\n                });\n            }\n        });\n\n        // Add 'ecl-link__icon' class to child icons reactively.\n        effect(() => {\n            const icons = this.eclIconComponents();\n            if (icons?.length > 0) {\n                icons.forEach((icn) => {\n                    icn.addExtraClass('ecl-link__icon');\n                });\n            }\n        });\n    }\n\n    @HostBinding('class.ecl-link--inverted')\n    get hostIsInverted(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isInverted();\n    }\n\n    @HostBinding('class.ecl-link--brand')\n    get hostIsBranded(): boolean {\n        return (!this.variant() || this.variant() === 'standalone') && this.isBranded();\n    }\n\n    @HostBinding('class.ecl-link--icon-only')\n    get hostIsIconOnly(): boolean {\n        return this.isIconOnly();\n    }\n\n    @HostBinding('class.ecl-link--icon')\n    get hasIcon(): boolean {\n        return this._hasIcon();\n    }\n\n    private _hasIcon = computed(() => {\n        return this.eclIconComponents()?.length > 0;\n    });\n\n    /**\n     * Adds speific ECL classes to the <a> component.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        const variantClass = this.variant()\n            ? (this.variant() === 'secondary' && this.isInverted()\n                ? 'ecl-link--secondary-inverted'\n                : `ecl-link--${this.variant()}`)\n            : '';\n\n        return [super.getCssClasses('ecl-link'),\n            variantClass,\n            (this.variant() === 'primary' && this.isHighlight()) ? 'ecl-link--primary-highlight' : '',\n        ].join(' ').trim();\n    }\n\n    /**\n     * Calls the native focus() method of the default HTML element.\n     */\n    onFocus(): void {\n        this.el.nativeElement.focus();\n    }\n\n    /**\n     * Calls the native click() method of the default HTML element.\n     */\n    onClick(): void {\n        this.el.nativeElement.click();\n    }\n\n    /**\n     * Calls the native blur() method of the default HTML element.\n     */\n    onBlur(): void {\n        this.el.nativeElement.blur();\n    }\n}\n",
             "selector": "[eclLink]",
             "providers": [],
             "hostDirectives": [],
@@ -22624,7 +22624,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Additional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.</p>\n",
-                    "line": 20,
+                    "line": 19,
                     "rawdescription": "\n\nAdditional HTML attributes to be set on the link element.\nUsed e.g. by social-media-follow for passing extra_attributes.\n",
                     "required": false
                 },
@@ -22638,7 +22638,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 41,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -22652,20 +22652,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Adds class for hightlighted link (works only with &#39;primary&#39; variant)</p>\n",
-                    "line": 35,
+                    "line": 34,
                     "rawdescription": "\nAdds class for hightlighted link (works only with 'primary' variant)\n",
                     "jsdoctags": [
                         {
-                            "pos": 1354,
-                            "end": 1471,
+                            "pos": 1253,
+                            "end": 1370,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1355,
-                                "end": 1365,
+                                "pos": 1254,
+                                "end": 1264,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22687,7 +22687,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component if it consist only of an icon.</p>\n",
-                    "line": 30,
+                    "line": 29,
                     "rawdescription": "\n\nProperty to style the component if it consist only of an icon.\n",
                     "required": false
                 },
@@ -22701,7 +22701,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Property to style the component as &#39;inverted&#39; (with dark background). Can be used alone or with &#39;standalone&#39; variant.</p>\n",
-                    "line": 25,
+                    "line": 24,
                     "rawdescription": "\n\nProperty to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.\n",
                     "required": false
                 },
@@ -22715,20 +22715,20 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
+                    "line": 39,
                     "rawdescription": "\n\n",
                     "jsdoctags": [
                         {
-                            "pos": 1555,
-                            "end": 1622,
+                            "pos": 1454,
+                            "end": 1521,
                             "kind": 332,
                             "id": 0,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "tagName": {
-                                "pos": 1556,
-                                "end": 1566,
+                                "pos": 1455,
+                                "end": 1465,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -22749,7 +22749,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>With &#39;variant&#39; property user can add some more specific styling to the <a> component.</p>\n",
-                    "line": 47,
+                    "line": 46,
                     "rawdescription": "\n\nWith 'variant' property user can add some more specific styling to the <a> component.\n",
                     "required": false
                 },
@@ -22809,7 +22809,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                     "description": "<p>Adds speific ECL classes to the <a> component.</p>\n",
-                    "line": 93,
+                    "line": 102,
                     "type": "string",
                     "decorators": []
                 },
@@ -22821,7 +22821,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 71,
+                    "line": 80,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22833,7 +22833,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 81,
+                    "line": 90,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22845,7 +22845,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 76,
+                    "line": 85,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -22857,26 +22857,13 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n",
                     "description": "",
-                    "line": 66,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
             "hostListeners": [],
             "propertiesClass": [
-                {
-                    "name": "cd",
-                    "coverageIgnore": false,
-                    "defaultValue": "inject(ChangeDetectorRef)",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 14,
-                    "rawdescription": "\n"
-                },
                 {
                     "name": "eclIconComponents",
                     "coverageIgnore": false,
@@ -22887,7 +22874,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 49,
+                    "line": 48,
                     "rawdescription": "\n"
                 },
                 {
@@ -22918,19 +22905,6 @@
                 }
             ],
             "methodsClass": [
-                {
-                    "name": "ngAfterContentInit",
-                    "coverageIgnore": false,
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 106,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": ""
-                },
                 {
                     "name": "onBlur",
                     "coverageIgnore": false,
@@ -22938,7 +22912,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 135,
+                    "line": 132,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native blur() method of the default HTML element.\n",
@@ -22951,7 +22925,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 128,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native click() method of the default HTML element.\n",
@@ -22964,7 +22938,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 121,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalls the native focus() method of the default HTML element.\n",
@@ -23012,8 +22986,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 312,
-                    "end": 446,
+                    "pos": 275,
+                    "end": 409,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -23025,16 +22999,13 @@
             "extends": [
                 "ECLBaseDirective"
             ],
-            "implements": [
-                "AfterContentInit"
-            ],
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 49,
+                "line": 48,
                 "rawdescription": "\n"
             },
             "accessors": {
@@ -23044,7 +23015,7 @@
                         "name": "hostIsInverted",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 66,
+                        "line": 75,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23055,7 +23026,7 @@
                         "name": "hostIsBranded",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 71,
+                        "line": 80,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23066,7 +23037,7 @@
                         "name": "hostIsIconOnly",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 76,
+                        "line": 85,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23077,7 +23048,7 @@
                         "name": "hasIcon",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 81,
+                        "line": 90,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -23088,7 +23059,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 93,
+                        "line": 102,
                         "rawdescription": "\n\nAdds speific ECL classes to the <a> component.\n",
                         "description": "<p>Adds speific ECL classes to the <a> component.</p>\n"
                     }
@@ -23100,10 +23071,6 @@
                     {
                         "name": "ECLBaseDirective",
                         "type": "directive"
-                    },
-                    {
-                        "name": "AfterContentInit",
-                        "type": "interface"
                     }
                 ]
             }
@@ -57095,7 +57062,7 @@
         },
         {
             "name": "EclIconComponent",
-            "id": "component-EclIconComponent-b815ca32f7e41bc74b5baa46b6d6a2147c83194ed861e5024ab8bf5cbf1aa0486c078ea66bdea8ad2cf93dd99889c8245886ada3238564160531c7978e632b73",
+            "id": "component-EclIconComponent-098102385dea8ae19585b13531343588c38d879186ee8a691fc0aeb0f6cef41ef570f2be629b561695d0c3f13ebb52e8869d91e74ca8d7e05471f478e7ad412b",
             "file": "packages/ecl/components/ecl-icon/ecl-icon.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57208,7 +57175,7 @@
                     "defaultValue": "'default'",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | string",
+                    "type": "'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |        'phosphor' | 'phosphor-fill' | string",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Defines the icon set to use.\nAvailable sets: <code>default</code>, <code>social</code>, <code>social-media</code>, <code>flag</code>, or a custom URL prefix.\nDefaults to <code>&#39;default&#39;</code>.</p>\n",
@@ -57628,7 +57595,7 @@
             "description": "<p>ECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.</p>\n",
             "rawdescription": "\n\nECL icon component – renders SVG icons from various sets depending on current theme.\nIntegrates with ECL theming and supports accessibility options.\n",
             "type": "component",
-            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
+            "sourceCode": "import { isPlatformBrowser, NgClass } from '@angular/common';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    HostBinding,\n    inject,\n    input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    PLATFORM_ID,\n    Renderer2,\n    signal,\n    SimpleChanges,\n    viewChild,\n} from '@angular/core';\nimport { ECLBaseDirective, EclThemeService } from '@eui/ecl/core';\n\n/**\n * ECL icon component – renders SVG icons from various sets depending on current theme.\n * Integrates with ECL theming and supports accessibility options.\n */\n@Component({\n    selector: 'ecl-icon',\n    templateUrl: './ecl-icon.component.html',\n    hostDirectives: [\n        {\n            directive: ECLBaseDirective,\n        },\n    ],\n    imports: [NgClass],\n    providers: [EclThemeService],\n    host: {\n        '[class.ecl-icon--flip-horizontal]': 'isFlipHorizontal()',\n    },\n})\nexport class EclIconComponent implements OnInit, OnChanges, OnDestroy {\n    /**\n     * Defines the icon set to use.\n     * Available sets: `default`, `social`, `social-media`, `flag`, or a custom URL prefix.\n     * Defaults to `'default'`.\n     */\n    iconSet = input<'default' | 'social' | 'social-media' | 'social-media-color' | 'flag' | 'flag-non-members' |\n        'phosphor' | 'phosphor-fill' | string>('default');\n\n    /**\n     * Name of the icon to render from the selected set.\n     */\n    icon = input<string>();\n\n    /**\n     * Size of the icon.\n     * Supported values: `'2xs'`, `'xs'`, `'s'`, `'m'`, `'l'`, `'xl'`, `'2xl'`, `'fluid'`.\n     * Defaults to `'xs'`.\n     */\n    size = input<'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | 'fluid' | string>('xs');\n\n    /**\n     * Applies color styling to the icon.\n     * Use `'inverted'` for icons on dark backgrounds, or `'primary'` for emphasis.\n     */\n    color = input<'inverted' | 'primary' | null>(null);\n\n    /**\n     * Adds a transformation modifier to the icon (e.g., rotation).\n     */\n    transform = input<string>();\n\n    /**\n     * ID reference for an external element that labels this icon for screen readers.\n     */\n    readonly ariaLabelledby = input<string>(undefined);\n\n    /**\n     * ARIA role of the icon. If a `title` is provided and no role is defined, defaults to `'img'`.\n     */\n    readonly role = input<string>(undefined);\n\n    /**\n     * Title used for accessibility. Also affects `aria-hidden` and `role`.\n     */\n    readonly title = input<string>(undefined);\n\n    /**\n     * Determines whether the icon should be hidden from assistive technologies.\n     * Defaults to `true` unless a title is provided.\n     */\n    readonly ariaHidden = input<boolean, unknown>(undefined, { transform: booleanAttribute });\n\n    /**\n     * Controls whether the icon is focusable via keyboard.\n     * Defaults to `false`.\n     */\n    readonly focusable = input(false, { transform: booleanAttribute });\n\n    /**\n     * Resolved role: uses the explicit `role` input if provided,\n     * otherwise defaults to `'img'` when a `title` is set.\n     */\n    readonly effectiveRole = computed<string | undefined>(() => {\n        const explicit = this.role();\n        if (explicit !== undefined) return explicit;\n        return this.title() !== undefined ? 'img' : undefined;\n    });\n\n    /**\n     * Resolved aria-hidden: uses the explicit `ariaHidden` input if provided,\n     * otherwise hides the icon unless a `title` is set.\n     */\n    readonly effectiveAriaHidden = computed<boolean>(() => {\n        const explicit = this.ariaHidden();\n        if (explicit !== undefined) return explicit;\n        return this.title() === undefined;\n    });\n\n    /**\n     * Flips the icon horizontally if set to `true`.\n     */\n    readonly isFlipHorizontal = input(false, { transform: booleanAttribute });\n\n    /**\n     * Adds a dark background utility class if the color is set to `'inverted'`.\n     */\n    @HostBinding('class.ecl-u-bg-grey')\n    get isColorInverted(): boolean {\n        return this.color() === 'inverted';\n    }\n\n    readonly svgEl = viewChild<ElementRef>('svg');\n\n    iconUrl = signal<string>('');\n    baseDirective = inject(ECLBaseDirective);\n    el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private platformId = inject(PLATFORM_ID);\n\n    /**\n     * Extra classes added programmatically by parent components\n     * (button, link, etc.)\n     */\n    readonly extraClasses = signal<string>('');\n\n    /**\n     * Real classes currently present on <ecl-icon>.\n     * To support [class.foo] / [ngClass].\n     */\n    readonly hostClasses = signal<string>('');\n\n    readonly svgClasses = computed<Record<string, boolean>>(() => {\n        return {\n            [this.baseDirective.getCssClasses('ecl-icon')]: true,\n            [`ecl-icon--${this.size()}`]: !!this.size(),\n            [`ecl-icon--${this.transform()}`]: !!this.transform(),\n            [`ecl-icon--${this.color()}`]: !!this.color(),\n            ...this.toClassRecord(this.hostClasses()),\n            ...this.toClassRecord(this.extraClasses()),\n        };\n    });\n\n    private classObserver?: MutationObserver;\n\n    constructor() {\n        afterNextRender(() => {\n            this.detachHostAndPromoteSvg();\n            this.syncHostClassesFromDom();\n            this.observeHostClassChanges();\n        });\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes['icon']) {\n            this.initiateIconUrl();\n        }\n    }\n\n    ngOnInit(): void {\n        this.initiateIconUrl();\n    }\n\n    ngOnDestroy(): void {\n        this.classObserver?.disconnect();\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        try {\n            const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n            const parent = svgNative?.parentElement;\n            if (svgNative && parent) parent.removeChild(svgNative);\n        } catch {\n            /* ignore */\n        }\n    }\n\n    addExtraClass(className: string): void {\n        const classes = new Set([\n            ...this.tokenize(this.extraClasses()),\n            ...this.tokenize(className),\n        ]);\n        this.extraClasses.set(Array.from(classes).join(' '));\n    }\n\n    removeExtraClass(className: string): void {\n        const classes = this.tokenize(this.extraClasses()).filter((c) => c !== className);\n        this.extraClasses.set(classes.join(' '));\n    }\n\n    setExtraClasses(classes: string): void {\n        this.extraClasses.set(classes ?? '');\n    }\n\n    private syncHostClassesFromDom(): void {\n        const host = this.el.nativeElement;\n        this.hostClasses.set(host.className || '');\n    }\n\n    private observeHostClassChanges(): void {\n        const host = this.el.nativeElement;\n\n        this.classObserver = new MutationObserver(() => {\n            this.hostClasses.set(host.className || '');\n        });\n\n        this.classObserver.observe(host, {\n            attributes: true,\n            attributeFilter: ['class'],\n        });\n    }\n\n    private toClassRecord(classes?: string | null): Record<string, boolean> {\n        return Object.fromEntries(\n            this.tokenize(classes).map(c => [c, true])\n        );\n    }\n\n    private tokenize(classes: string | null | undefined): string[] {\n        return (classes ?? '')\n            .split(/\\s+/)\n            .filter(Boolean);\n    }\n\n    private detachHostAndPromoteSvg(): void {\n        const hostEl = this.el.nativeElement as HTMLElement | null;\n        const svgNative = this.svgEl()?.nativeElement as SVGElement | null;\n        if (!hostEl || !svgNative) return;\n\n        const hostParentEl = hostEl.parentElement;\n        if (!hostParentEl) return;\n\n        // add the svg and remove the parent from the DOM\n        this.renderer.setStyle(hostEl, 'visibility', 'hidden');\n        hostEl.after(svgNative);\n        this.renderer.removeChild(hostParentEl, hostEl);\n    }\n\n    private initiateIconUrl(): void {\n        switch (this.iconSet()) {\n            case 'default':\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n                break;\n            case 'social': // TODO: Remove this in the next version.\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media':\n                this.iconUrl.set(`assets/images/ecl/networks/sprite.svg#${this.icon()}`);\n                break;\n            case 'social-media-color':\n                this.iconUrl.set(`assets/images/ecl/networks-color/sprite.svg#${this.icon()}`);\n                break;\n            case 'flag':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag.svg#${this.icon()}`);\n                break;\n            case 'flag-non-members':\n                this.iconUrl.set(`assets/images/ecl/icons-flag/sprites/icons-flag-non-members.svg#${this.icon()}`);\n                break;\n            case 'phosphor':\n                this.iconUrl.set(`assets/icons/sprites/regular.svg#${this.icon()}`);\n                break;\n            case 'phosphor-fill':\n                this.iconUrl.set(`assets/icons/sprites/fill.svg#${this.icon()}`);\n                break;\n            default:\n                this.iconUrl.set(`assets/images/ecl/icons/sprite.svg#${this.icon()}`);\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -64716,7 +64683,7 @@
         },
         {
             "name": "EclMenuItemComponent",
-            "id": "component-EclMenuItemComponent-34f452bf97feb65169901e0c06a1fb0de14d012edd6ec1567c23c2a3ff5f8da70e3e579ec2af4034ca2d8cca1fa411c32b4c899c2b8dfc1e89d67142e51d0cb8",
+            "id": "component-EclMenuItemComponent-2e828b9fa40b69437b34ee8534c8041d5f0329c62e7f0de43e9f6bb1b0fc888748f0edb953a4cbcde823fcc0192e5393d366ce1c2ad78727e2b78670410f86bc",
             "file": "packages/ecl/components/ecl-menu/ecl-menu/ecl-menu-item.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -65654,7 +65621,7 @@
             "description": "<p>This component represents a root menu item. Adds styling and functionality to menu item.</p>\n",
             "rawdescription": "\n\nThis component represents a root menu item. Adds styling and functionality to menu item.\n",
             "type": "component",
-            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    input,\n    contentChild,\n    viewChild,\n    booleanAttribute,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent);\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
+            "sourceCode": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n    AfterContentInit,\n    afterNextRender,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnDestroy,\n    Output,\n    Renderer2,\n    ViewEncapsulation,\n    DOCUMENT,\n    booleanAttribute,\n    input,\n    contentChild,\n    viewChild,\n} from '@angular/core';\nimport { Params, QueryParamsHandling, RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EuiAppShellService } from '@eui/core';\nimport { EclButtonComponent, EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { ECLBaseDirective, KeyCode } from '@eui/ecl/core';\nimport { Subject } from 'rxjs';\nimport { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';\nimport { EclMenuMegaComponent } from '../ecl-menu-mega';\nimport {\n    EclMenuItemCaretEvent,\n    EclMenuItemFocusEvent,\n    EclMenuItemHoverEvent,\n    EclMenuItemHoverOutEvent,\n    EclMenuItemKeydownEvent,\n    EclMenuItemParentFocusEvent,\n    EclMenuItemSelectEvent,\n} from '../events';\nimport { EclMenuItem } from '../models/ecl-menu-item.model';\n\nconst enum ColTrigger {\n    COL1_TRIGGER = 5,\n    COL2_TRIGGER = 9,\n    COL3_TRIGGER = 13,\n}\n\n/**\n * This component represents a root menu item. Adds styling and functionality to menu item.\n */\n@Component({\n    selector: 'ecl-menu-item',\n    templateUrl: './ecl-menu-item.component.html',\n    imports: [NgTemplateOutlet, RouterLink, RouterLinkWithHref, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, ...EUI_ECL_LINK],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n        '[class.ecl-menu__item--has-children]': 'hasEclChildrenDataAttribute',\n        '[attr.aria-haspopup]': 'hasEclChildrenDataAttribute',\n        '[attr.data-expanded]': 'isDataExpanded',\n        '(mouseenter)': 'onItemMouseEnter($event)',\n        '(mouseleave)': 'onItemMouseLeave($event)',\n    },\n})\nexport class EclMenuItemComponent extends ECLBaseDirective implements EclMenuItem, AfterContentInit, OnDestroy {\n    el = inject(ElementRef);\n\n    @Input() id: string;\n    @Input() label: string;\n    /**\n     * When in mobile view, use this property to set aria-label for the toggle items button (to expand item's children).\n     */\n    readonly toggleAriaLabel = input<string>(undefined);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    readonly routerLink = input<string | any[]>(null);\n    readonly queryParams = input<Params | null>(null);\n    readonly queryParamsHandling = input<QueryParamsHandling>(null);\n    @Input() href = '';\n    readonly target = input('');\n    @Input({ transform: booleanAttribute }) isCurrent = false;\n    /**\n     * Custom attributes, to be added to the <a> tag of the menu item.\n     */\n    readonly linkExtraAttributes = input<Record<string, string>>(undefined);\n\n    isExpanded: boolean;\n    /**\n     * Set to 'true', when item has more than 13 chidren and the overlay needs to use the full available space.\n     */\n    isFull = false;\n    isHovered = false;\n    isMobileBreakpoint = false;\n    /**\n     * Used when menu has overlay, to show if the item is currently displayed.\n     */\n    isVisible = true;\n\n    private readonly doc = inject(DOCUMENT);\n    private readonly window = this.doc.defaultView; // Window | null\n\n    /**\n     * The default role of the item is 'listitem' and should not be changed.\n     */\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-menu__item'),\n            this.isCurrent ? 'ecl-menu__item--current' : '',\n            this.isExpanded ? 'ecl-menu__item--expanded' : '',\n            this.getClassDependingChildrenCnt(),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    readonly submenu = contentChild(forwardRef(() => EclMenuMegaComponent));\n    /**\n     * The <a> element of the menu item, when there are no children.\n     */\n    readonly menuLink = viewChild<ElementRef<HTMLAnchorElement>>('menuLink');\n    /**\n     * The <button> element of the menu item, when item has children.\n     */\n    readonly menuButton = viewChild(EclButtonComponent);\n\n    @Output() menuItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemCaret = new EventEmitter<EclMenuItemCaretEvent>();\n    /**\n     * Event that is emited on clicking the caret button to expand item's children in mobile mode.\n     */\n    @Output() menuItemHover = new EventEmitter<EclMenuItemHoverEvent>();\n    @Output() menuItemHoverOut = new EventEmitter<EclMenuItemHoverOutEvent>();\n    @Output() menuMegaItemSelect = new EventEmitter<EclMenuItemSelectEvent>();\n    @Output() menuItemFocus = new EventEmitter<EclMenuItemFocusEvent>();\n    @Output() menuItemKeydown = new EventEmitter<EclMenuItemKeydownEvent>();\n    /**\n     * This event is emited when the keyboard nav reaches the last item in mobile view.\n     * Then the next focused element should be the 'close' btn.\n     */\n    @Output() menuMegaLastItemTab = new EventEmitter<void>();\n\n    get hasEclChildrenDataAttribute(): boolean {\n        return this.hasChildren || undefined;\n    }\n\n    get isDataExpanded(): boolean {\n        return this.hasChildren ? this.isHovered : null;\n    }\n\n    /**\n     * 'aria-current' is set to 'page' only when this item itself is the current page, and not when it is\n     * marked current merely because one of its children is the active item (in that case the child link\n     * carries 'aria-current=\"page\"'). Derived from live state so it stays correct whether 'isCurrent' is set\n     * at render time or updated on selection.\n     */\n    get ariaCurrent(): string | null {\n        return this.isCurrent && !this.hasCurrentChild ? 'page' : null;\n    }\n\n    /**\n     * Whether any child (sub-item) is the current item.\n     */\n    get hasCurrentChild(): boolean {\n        return this.children.some((child) => child.isCurrent);\n    }\n\n    get hasChildren(): boolean {\n        return !!this.submenu();\n    }\n\n    get children(): EclMenuItem[] {\n        return this.hasChildren ? this.submenu().eclMenuMegaItems.toArray() : [];\n    }\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private renderer = inject(Renderer2);\n    private appShell = inject(EuiAppShellService);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.observeBreakpointChanges();\n            this.setExtraAttributesForLink(this.menuLink()?.nativeElement, this.linkExtraAttributes());\n        });\n    }\n\n    onItemMouseEnter(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHover.next(new EclMenuItemHoverEvent(this, evt));\n    }\n\n    onItemMouseLeave(evt: MouseEvent): void {\n        if (this.isMobileBreakpoint) return;\n        this.menuItemHoverOut.next(new EclMenuItemHoverOutEvent(this, evt));\n    }\n\n    ngAfterContentInit(): void {\n        // Subscibe to submenu component events.\n        const submenu = this.submenu();\n        if (submenu) {\n            submenu.menuItemSelect.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemSelectEvent) => {\n                this.menuMegaItemSelect.next(new EclMenuItemSelectEvent(it.menuItem, it.domEvent));\n            });\n            submenu.menuMegaItemParentFocus.pipe(takeUntil(this.destroy$)).subscribe((it: EclMenuItemParentFocusEvent) => {\n                if (!this.isMobileBreakpoint) {\n                    this.onFocusFromSubmenu();\n                }\n            });\n            submenu.menuMegaLastItemTab.pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isMobileBreakpoint) {\n                    this.menuMegaLastItemTab.next();\n                }\n            });\n\n            if (this.hasSubmenuAnySelections()) {\n                this.isCurrent = true;\n            }\n        }\n\n        // this.tabindex = this.routerLink || this.href ? 0 : -1;\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    onItemFocus(evt: FocusEvent): void {\n        this.menuItemFocus.next(new EclMenuItemFocusEvent(this, evt));\n    }\n\n    onItemClick(evt: Event): void {\n        this.menuItemSelect.next(new EclMenuItemSelectEvent(this, evt));\n\n        if (!this.href) {\n            evt.stopPropagation();\n        }\n    }\n\n    /**\n     * When clicking the caret button, to expand item's children. Used in mobile view.\n     * @param evt\n     */\n    onItemCaretClick(evt: MouseEvent): void {\n        this.menuItemCaret.next(new EclMenuItemCaretEvent(this, evt));\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from the submenu.\n     */\n    onFocusFromSubmenu(): void {\n        this.onButtonFocus();\n        this.isHovered = false;\n        this.isExpanded = false;\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the next root menu item.\n     */\n    onFocusFromNext(): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.onLinkFocus();\n        }\n    }\n\n    /**\n     * Manages the state when the item is focused, when navigating with keyboard and the navigation is coming from\n     *  the previous root menu item.\n     */\n    onFocusFromPrev(): void {\n        this.onLinkFocus();\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the button of the menu item.\n     * @param evt\n     */\n    onButtonKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                if (this.isHovered) {\n                    this.selectFirstMegaMenuItem();\n                } else {\n                    this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                }\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.onLinkFocus();\n                break;\n            }\n            case KeyCode.TAB: {\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * Manages the keyboard navigation when the current element is the <a> tag of the menu item.\n     * @param evt\n     */\n    onLinkKeydown(evt: Event): void {\n        switch ((evt as KeyboardEvent).key) {\n            case KeyCode.ARROW_DOWN: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_UP: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ARROW_RIGHT: {\n                evt.preventDefault();\n                this.onLinkNextFocus(evt);\n                break;\n            }\n            case KeyCode.ARROW_LEFT: {\n                evt.preventDefault();\n                this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n                break;\n            }\n            case KeyCode.ENTER: {\n                this.onItemClick(evt);\n                break;\n            }\n            case KeyCode.ESCAPE: {\n                evt.preventDefault();\n                this.onLinkEscape(evt);\n                break;\n            }\n            default: {\n                break;\n            }\n        }\n    }\n\n    /**\n     * This method calculates height and width of an item, depending the maximum of lines(rows) allowed.\n     * Depends on the 'maxLines' property of the parent menu component.\n     * @param maxLines - property that sets the maximum possible lines in a menu item.\n     * @param isMobileBreakpoint\n     * @returns\n     */\n    checkMenuItem(maxLines: number, isMobileBreakpoint: boolean): void {\n        if (maxLines < 1) return;\n\n        const currentItem = this.el.nativeElement;\n        const currentLink = this.menuLink().nativeElement;\n        if (isMobileBreakpoint) {\n            this.renderer.setStyle(currentLink, 'width', '100%');\n            return;\n        }\n        this.renderer.setStyle(currentItem, 'alignItems', 'flex-start');\n        const linkStyle = this.window.getComputedStyle(currentLink);\n\n        const maxHeight = this.getMenuItemLinkMaxHeight(linkStyle, maxLines);\n\n        if (currentLink.offsetHeight > maxHeight) {\n            this.changeMenuItemLinkWidth(currentLink, maxLines, linkStyle);\n        }\n        this.renderer.removeStyle(currentItem, 'alignItems');\n    }\n\n    private onLinkEscape(evt: Event): void {\n        const menuButton = this.menuButton();\n        if (menuButton) {\n            menuButton.el.nativeElement.focus();\n            evt.stopPropagation();\n        } else {\n            this.menuLink().nativeElement.blur();\n        }\n    }\n\n    private selectFirstMegaMenuItem(): void {\n        this.submenu().selectFirstSubItem();\n    }\n\n    private onLinkFocus(): void {\n        this.menuLink().nativeElement.focus();\n    }\n\n    private onLinkNextFocus(evt: Event): void {\n        if (this.menuButton()) {\n            this.onButtonFocus();\n        } else {\n            this.menuItemKeydown.next(new EclMenuItemKeydownEvent(this, evt as KeyboardEvent));\n        }\n    }\n\n    private onButtonFocus(): void {\n        this.menuButton().el.nativeElement.focus();\n    }\n\n    private getMenuItemLinkMaxHeight(linkStyle: CSSStyleDeclaration, maxLines: number): number {\n        return parseInt(linkStyle.lineHeight, 10) * maxLines + parseInt(linkStyle.paddingTop, 10) + parseInt(linkStyle.paddingBottom, 10);\n    }\n\n    /**\n     * Calculates width of a menu item, depending on maximum lines of text allowed.\n     * @param currentLink\n     * @param maxLines\n     * @param linkStyle\n     * @returns\n     */\n    private changeMenuItemLinkWidth(currentLink: HTMLAnchorElement, maxLines: number, linkStyle: CSSStyleDeclaration): void {\n        this.renderer.setStyle(currentLink, 'white-space', 'nowrap');\n        const linkWidth = currentLink.offsetWidth;\n        if (maxLines === 1) {\n            this.renderer.setStyle(currentLink, 'width', `${linkWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n            this.renderer.removeStyle(currentLink, 'white-space');\n            return;\n        }\n        const textSize = currentLink.text.length;\n        const letterWidth = Math.ceil(linkWidth / textSize);\n        const wordsArray = currentLink.text.trim().split(' ');\n        const goalWidth = Math.ceil(linkWidth / maxLines);\n        const firstWord = wordsArray[0];\n        let cnt = 1;\n        let wordWidth = Math.ceil((firstWord.length + 1) * letterWidth);\n        while (wordWidth < goalWidth) {\n            wordWidth += Math.ceil((wordsArray[cnt].length + 1) * letterWidth);\n            cnt++;\n        }\n        this.renderer.setStyle(currentLink, 'width', `${wordWidth + parseInt(linkStyle.paddingLeft, 10) + parseInt(linkStyle.paddingRight, 10)}px`);\n        this.renderer.removeStyle(currentLink, 'white-space');\n    }\n\n    private getClassDependingChildrenCnt(): string {\n        if (this.hasChildren) {\n            if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL1_TRIGGER) {\n                return 'ecl-menu__item--col1';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL2_TRIGGER) {\n                return 'ecl-menu__item--col2';\n            } else if (this.submenu().eclMenuMegaItems.length < ColTrigger.COL3_TRIGGER) {\n                return 'ecl-menu__item--col3';\n            } else {\n                this.isFull = true;\n                return 'ecl-menu__item--full';\n            }\n        }\n        return '';\n    }\n\n    private hasSubmenuAnySelections(): boolean {\n        const submenu = this.submenu();\n        return submenu && !!submenu.eclMenuMegaItems.find((it) => it.isCurrent);\n    }\n\n    private setExtraAttributesForLink(link: HTMLElement, linkExtraAttributes: Record<string, string>): void {\n        if (linkExtraAttributes) {\n            Object.keys(linkExtraAttributes).forEach((key) => {\n                if (key !== 'href' && key !== 'routerLink') {\n                    this.renderer.setAttribute(link, key, linkExtraAttributes[key]);\n                }\n            });\n        }\n    }\n\n    private observeBreakpointChanges(): void {\n        this.appShell.getState<any>('breakpoints')\n            .pipe(\n                map(bp => !!(bp?.isMobile || bp?.isTablet || bp?.isLtLargeTablet)), // xs/sm/md/lg (< 1140px)\n                distinctUntilChanged(),\n                takeUntil(this.destroy$),\n            )\n            .subscribe((isMobile) => {\n                this.isMobileBreakpoint = isMobile;\n            });\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -82552,7 +82519,7 @@
                     }
                 ]
             },
-            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore()) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode()}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode()}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode()}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode()}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef() }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>"
+            "templateData": "<div class=\"ecl-site-footer__section ecl-site-footer__section--common\">\n    @if (!isCore()) {\n    <a href=\"https://commission.europa.eu/index_{{languageCode()}}\"\n        class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__logo-link\">\n        <picture class=\"ecl-picture ecl-site-footer__picture\"><img class=\"ecl-site-footer__logo-image\"\n                src=\"assets/images/ecl/logo/ec/negative/logo-ec--{{logoLanguageCode}}.svg\" alt=\"European Commission\">\n        </picture>\n    </a>\n    <div class=\"ecl-site-footer__extra-links-container\">\n        <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-EUROPEAN-COMMISSION' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n        </ecl-social-media-follow>\n        <ul eclSiteFooterList isInline>\n            <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/about-european-commission/contact_{{languageCode()}}\"\n                class=\"ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link\">{{ 'ecl.footer.CONTACT' | translate }}</a></li>\n        </ul>\n    </div>\n    } @else {\n    <ecl-social-media-follow isIconOnly description=\"{{'ecl.footer.FOLLOW-US' | translate}}\"\n            class=\"ecl-social-media-follow--description_inline ecl-site-footer__social-media\">\n            <ecl-social-media-follow-item icon=\"mastodon\" href=\"https://ec.social-network.europa.eu/@EUCommission\"\n                isInverted>Mastodon</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"linkedin\" href=\"https://www.linkedin.com/company/european-commission\"\n                isInverted>LinkedIn</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"bluesky\" href=\"https://bsky.app/profile/ec.europa.eu\"\n                isInverted>Bluesky</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"facebook\" href=\"https://www.facebook.com/EuropeanCommission\"\n                isInverted>Facebook</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"youtube\" href=\"https://www.youtube.com/user/eutube\"\n                isInverted>YouTube</ecl-social-media-follow-item>\n            <ecl-social-media-follow-item icon=\"chain\"\n                href=\"https://european-union.europa.eu/contact-eu/social-media-channels_{{languageCode()}}\"\n                isInverted>Other</ecl-social-media-follow-item>\n    </ecl-social-media-follow>\n    }\n    <ul eclSiteFooterList isInline>\n        <li eclSiteFooterListItem><a\n                href=\"https://commission.europa.eu/legal-notice/vulnerability-disclosure-policy_{{languageCode()}}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.REPORT-IT-VULNERABILITY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/languages-our-websites_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LANGUAGES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/cookies_{{languageCode()}}\" eclLink isInverted\n                variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.COOKIES' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/privacy-policy_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.PRIVACY-POLICY' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"https://commission.europa.eu/legal-notice_{{languageCode()}}\" eclLink\n                isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.LEGAL-NOTICE' | translate }}</a></li>\n        <li eclSiteFooterListItem><a href=\"{{ a11yStatementRef() }}\"\n                eclLink isInverted variant=\"standalone\" eclSiteFooterLink>{{ 'ecl.footer.ACCESSIBILITY' | translate }}</a></li>\n    </ul>\n</div>\n"
         },
         {
             "name": "EclSiteHeaderActionComponent",
@@ -87531,7 +87498,7 @@
         },
         {
             "name": "EclSocialMediaFollowItemComponent",
-            "id": "component-EclSocialMediaFollowItemComponent-a5a386ce91d38e0d4ebb07c2085b8c669354f1a816b2677b7dde9628c9a14908687d7a7d0f9f6e66e8172233d257ac2a1145254275a03f9216caa201b32c6018",
+            "id": "component-EclSocialMediaFollowItemComponent-be2bc74a52d7b183206e23fa9c6edd0706816decad401fed2ccd0e2788dead5b1d6dbb066556634b97683220c7111e50c45fd911c2cccbe1ec6738847a5e6fdf",
             "file": "packages/ecl/components/ecl-social-media-follow/ecl-social-media-follow-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -87732,7 +87699,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 38,
                     "rawdescription": "\n",
                     "modifierKind": [
                         148
@@ -87748,7 +87715,7 @@
                     "args": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -87766,7 +87733,7 @@
                     "jsdoctags": [
                         {
                             "name": "evt",
-                            "type": "unknown",
+                            "type": "Event",
                             "optional": false,
                             "dotDotDotToken": false,
                             "deprecated": false,
@@ -87842,7 +87809,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        'role': 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    onItemClick(evt): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
+            "sourceCode": "import { booleanAttribute, Component, inject, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclBaseEvent } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_LINK } from '@eui/ecl/components/ecl-link';\nimport { RouterLink, RouterLinkWithHref } from '@angular/router';\nimport { EclSocialMediaFollowComponent } from './ecl-social-media-follow.component';\n\nexport class EclSocialMediaFollowItemClickEvent extends EclBaseEvent {}\n\n@Component({\n    selector: 'ecl-social-media-follow-item',\n    templateUrl: './ecl-social-media-follow-item.component.html',\n    imports: [...EUI_ECL_ICON, ...EUI_ECL_LINK, NgTemplateOutlet, RouterLink, RouterLinkWithHref],\n    host: {\n        role: 'listitem',\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclSocialMediaFollowItemComponent extends ECLBaseDirective {\n    readonly isInverted = input<false, unknown>(undefined, { transform: (booleanAttribute) as any });\n    icon = input<string>();\n    iconSet = input<string>('social-media');\n    readonly href = input('');\n    readonly routerLink = input('');\n    readonly target = input<string>(undefined);\n    readonly size = input('m');\n    readonly extraAttributes = input<{\n        name: string;\n        value?: string | null;\n    }[]>(undefined);\n\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-social-media-follow__item')].join(' ').trim();\n    }\n\n    readonly itemClick = output<EclSocialMediaFollowItemClickEvent>();\n\n    private parent = inject(EclSocialMediaFollowComponent);\n\n    get isIconOnly(): boolean {\n        return this.parent?.isIconOnly() ?? false;\n    }\n\n    onItemClick(evt: Event): void {\n        this.itemClick.emit(new EclSocialMediaFollowItemClickEvent());\n        if (!this.href() && !this.routerLink()) {\n            evt.preventDefault();\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -87850,24 +87817,24 @@
                 "ECLBaseDirective"
             ],
             "accessors": {
-                "isIconOnly": {
-                    "name": "isIconOnly",
-                    "getSignature": {
-                        "name": "isIconOnly",
-                        "type": "boolean",
-                        "returnType": "boolean",
-                        "line": 36,
-                        "rawdescription": "\n",
-                        "description": ""
-                    }
-                },
                 "cssClasses": {
                     "name": "cssClasses",
                     "getSignature": {
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 40,
+                        "line": 34,
+                        "rawdescription": "\n",
+                        "description": ""
+                    }
+                },
+                "isIconOnly": {
+                    "name": "isIconOnly",
+                    "getSignature": {
+                        "name": "isIconOnly",
+                        "type": "boolean",
+                        "returnType": "boolean",
+                        "line": 42,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -90224,7 +90191,7 @@
                     }
                 ]
             },
-            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\" data-ecl-label=\"true\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
+            "templateData": "@if (eclTitle() || eclDescription()) {\n<div class=\"ecl-story-card__header\">\n    @if (eclTitle()) {\n    <div class=\"ecl-story-card__title\" [attr.id]=\"titleId()\">{{ eclTitle() }}</div>\n    }\n    @if (eclDescription()) {\n    <div class=\"ecl-story-card__description\">{{ eclDescription() }}</div>\n    }\n</div>\n}\n\n<!-- Mobile: Embla Carousel (auto-generated from items + details) -->\n<div class=\"ecl-story-card__carousel\">\n    <div class=\"ecl-story-card__carousel-viewport\"\n        role=\"region\"\n        [attr.aria-label]=\"'ecl.story-card.SLIDER-LABEL' | translate\"\n        emblaCarousel\n        [options]=\"emblaOptions\"\n        [subscribeToEvents]=\"subscribeToEvents\"\n        (emblaChange)=\"onEmblaChange($event)\">\n        <ul class=\"ecl-story-card__carousel-container\">\n            @for (item of items(); track i; let i = $index) {\n            <li class=\"ecl-story-card__carousel-slide\"\n                [attr.aria-hidden]=\"i !== activeSlideIndex() ? true : null\">\n                <article class=\"ecl-story-card__card\">\n                    <div class=\"ecl-story-card__image-wrapper\" #carouselImageWrapper>\n                    </div>\n                    <div class=\"ecl-story-card__content\" #carouselContentWrapper>\n                        @if (detailsPanels()[i]; as panel) {\n                            @if (panel.eclTitle()) {\n                            <div class=\"ecl-story-card__card-title\">{{ panel.eclTitle() }}</div>\n                            }\n                            @if (panel.description()) {\n                            <div class=\"ecl-story-card__card-description\">{{ panel.description() }}</div>\n                            }\n                        }\n                    </div>\n                </article>\n            </li>\n            }\n        </ul>\n    </div>\n\n    <!-- Carousel Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__pager\">\n        <button class=\"ecl-story-card__prev\"\n            [disabled]=\"prevDisabled()\"\n            (click)=\"onCarouselPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-PREV-SLIDE' | translate\">\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-270\"></ecl-icon>\n            <span class=\"ecl-story-card__prev-label\">\n                {{ 'ecl.story-card.PREVIOUS' | translate }}\n            </span>\n        </button>\n\n        <div class=\"ecl-story-card__dots\">\n            @for (dotIndex of getDotIndices(); track dotIndex) {\n            <button\n                #dotButton\n                class=\"ecl-story-card__dot\"\n                [class.ecl-story-card__dot--active]=\"dotIndex === activeSlideIndex()\"\n                [class.is-prev]=\"dotIndex === activeSlideIndex() - 1\"\n                [attr.aria-label]=\"'ecl.story-card.GO-TO-SLIDE' | translate: { current: dotIndex + 1, total: totalSlides() }\"\n                (click)=\"goToSlide(dotIndex)\">\n            </button>\n            }\n        </div>\n\n        <button class=\"ecl-story-card__next\"\n            [disabled]=\"nextDisabled()\"\n            (click)=\"onCarouselNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.SHOW-NEXT-SLIDE' | translate\">\n            <span class=\"ecl-story-card__next-label\">\n                {{ 'ecl.story-card.NEXT' | translate }}\n            </span>\n            <ecl-icon icon=\"corner-arrow\" size=\"s\" transform=\"rotate-90\"></ecl-icon>\n        </button>\n    </div>\n    }\n</div>\n\n<!-- Desktop: Grid with Accordion (user-authored content projected here) -->\n<div class=\"ecl-story-card__grid\">\n    <ng-content select=\"ul[eclStoryCardList]\"></ng-content>\n    <ng-content select=\"[eclStoryCardGridDetails]\"></ng-content>\n\n    <!-- Grid Controls -->\n    @if (totalSlides() > 1) {\n    <div class=\"ecl-story-card__grid-controls\">\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-prev ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridPrevClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PREVIOUS' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PREVIOUS' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-left\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-play ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'none' : 'flex'\"\n            (click)=\"onPlayClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PLAY' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PLAY' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"play\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--secondary ecl-button--neutral ecl-story-card__grid-pause ecl-button--icon-only\"\n            type=\"button\"\n            [style.display]=\"isAutoPlaying() ? 'flex' : 'none'\"\n            (click)=\"onPauseClick()\"\n            [attr.aria-label]=\"'ecl.story-card.PAUSE' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.PAUSE' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor-fill\" icon=\"pause\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n\n        <button class=\"ecl-button ecl-button--tertiary ecl-button--neutral ecl-story-card__grid-next ecl-button--icon-only\"\n            type=\"button\"\n            (click)=\"onGridNextClick()\"\n            [attr.aria-label]=\"'ecl.story-card.NEXT' | translate\">\n            <span class=\"ecl-button__container\">\n                <span class=\"ecl-button__label\">\n                    {{ 'ecl.story-card.NEXT' | translate }}\n                </span>\n                <ecl-icon iconSet=\"phosphor\" icon=\"caret-right\" size=\"l\"></ecl-icon>\n            </span>\n        </button>\n    </div>\n    }\n</div>\n"
         },
         {
             "name": "EclStoryCardGridDetailsComponent",