@eui/ecl 22.0.0-alpha.23 → 22.0.0-alpha.24

package/docs/json/documentation.json

@@ -29853,12 +29853,12 @@
         },
         {
             "name": "EclPopoverContentDirective",
-            "id": "directive-EclPopoverContentDirective-3cdbc1d4254e769969145a4f4587faf1e4ff9d712aef3995ee8b80395eebd6605a09d6e7fb0a2964cb6839af8d4660024def0038fe8b45ecb79b567dc1882c52",
+            "id": "directive-EclPopoverContentDirective-b8699a8bc3b35b54eab845cb018247c20c19bdf4241f71d55c2aa5554df6fda93bb7314776c01aa64ec719a917d6f9c8b976312c75d8aee944a481b62a9eee03",
             "file": "packages/ecl/components/ecl-popover/ecl-popover-content.directive.ts",
             "type": "directive",
             "description": "<p>Directive applied to the content section of an <code>ecl-popover</code> component.</p>\n<p>Responsible for applying the appropriate CSS class to the popover content container.</p>\n",
             "rawdescription": "\n\nDirective applied to the content section of an `ecl-popover` component.\n\nResponsible for applying the appropriate CSS class to the popover content container.\n",
-            "sourceCode": "import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to the content section of an `ecl-popover` component.\n *\n * Responsible for applying the appropriate CSS class to the popover content container.\n */\n@Directive({\n    selector: '[eclPopoverContent]',\n})\nexport class EclPopoverContentDirective extends ECLBaseDirective {\n    /**\n     * Host binding that applies the CSS class to style the popover content.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-popover__content')].join(' ').trim();\n    }\n}\n",
+            "sourceCode": "import { Directive } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to the content section of an `ecl-popover` component.\n *\n * Responsible for applying the appropriate CSS class to the popover content container.\n */\n@Directive({\n    selector: '[eclPopoverContent]',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclPopoverContentDirective extends ECLBaseDirective {\n    /**\n     * Host binding that applies the CSS class to style the popover content.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-popover__content')].join(' ').trim();\n    }\n}\n",
             "selector": "[eclPopoverContent]",
             "providers": [],
             "hostDirectives": [],
@@ -29911,20 +29911,7 @@
             "outputsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHost binding that applies the CSS class to style the popover content.\n",
-                    "description": "<p>Host binding that applies the CSS class to style the popover content.</p>\n",
-                    "line": 17,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
+            "hostBindings": [],
             "hostListeners": [],
             "propertiesClass": [],
             "methodsClass": [
@@ -29970,8 +29957,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 107,
-                    "end": 280,
+                    "pos": 94,
+                    "end": 267,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -29990,7 +29977,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 17,
+                        "line": 19,
                         "rawdescription": "\n\nHost binding that applies the CSS class to style the popover content.\n",
                         "description": "<p>Host binding that applies the CSS class to style the popover content.</p>\n"
                     }
@@ -30008,12 +29995,12 @@
         },
         {
             "name": "EclPopoverToggleDirective",
-            "id": "directive-EclPopoverToggleDirective-02bd17a313e4b1b3c9d67a3623eb82c1f3cf98e884407d1c5a00bd3178f4c3a74de986f22e899e625434caf81f8198f76255f289687baf54421077b1a48e89c2",
+            "id": "directive-EclPopoverToggleDirective-c844b5e056189367d8b48640ab7ef44c1d849d58d8b6b9ac80a3374b519d216947d034f0a563f4bf38755df5c1a3833084de5bac8ea9d6c1a93b4998e0246ad8",
             "file": "packages/ecl/components/ecl-popover/ecl-popover-toggle.directive.ts",
             "type": "directive",
             "description": "<p>Directive used to toggle the visibility of an <code>ecl-popover</code> component.</p>\n<p>This directive emits a custom click event and manages accessibility attributes.</p>\n",
             "rawdescription": "\n\nDirective used to toggle the visibility of an `ecl-popover` component.\n\nThis directive emits a custom click event and manages accessibility attributes.\n",
-            "sourceCode": "import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Output, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to toggle the visibility of an `ecl-popover` component.\n *\n * This directive emits a custom click event and manages accessibility attributes.\n */\n@Directive({\n    selector: '[eclPopoverToggle]',\n})\nexport class EclPopoverToggleDirective extends ECLBaseDirective {\n    hostElementRef = inject(ElementRef);\n\n    /**\n     * Sets the `aria-expanded` attribute to reflect the popover's open state.\n     * This should be updated by the parent popover component.\n     */\n    @HostBinding('attr.aria-expanded') isExpanded = false;\n\n    /**\n     * Event emitted when the toggle element is clicked with the left mouse button.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() click = new EventEmitter();\n\n    /**\n     * Host binding that applies the appropriate CSS class to the toggle element.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-popover__toggle')].join(' ').trim();\n    }\n\n    /**\n     * Emits the `click` event only for left mouse button clicks.\n     * Used by the popover component to toggle visibility.\n     */\n    @HostListener('mouseup', ['$event'])\n    onClick(evt: MouseEvent): void {\n        const LEFT_BUTTON = 0;\n\n        if (evt.button === LEFT_BUTTON) {\n            this.click.next(null);\n        }\n    }\n\n    /**\n     * Triggers the click event on Enter or Space keydown and prevents default behavior.\n     */\n    @HostListener('keydown.enter', ['$event'])\n    @HostListener('keydown.space', ['$event'])\n    onKeyboardActivate(evt: Event): void {\n        evt.preventDefault();\n        this.click.next(null);\n    }\n\n    /**\n     * Returns the native HTML element of the directive.\n     * Used internally by the popover to query attributes.\n     */\n    public getHostElement(): HTMLElement {\n        return this.hostElementRef.nativeElement;\n    }\n}\n",
+            "sourceCode": "import { Directive, ElementRef, inject, output, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive used to toggle the visibility of an `ecl-popover` component.\n *\n * This directive emits a custom click event and manages accessibility attributes.\n */\n@Directive({\n    selector: '[eclPopoverToggle]',\n    host: {\n        '[attr.aria-expanded]': 'isExpanded()',\n        '[class]': 'cssClasses',\n        '(mouseup)': 'onClick($event)',\n        '(keydown.enter)': 'onKeyboardActivate($event)',\n        '(keydown.space)': 'onKeyboardActivate($event)',\n    },\n})\nexport class EclPopoverToggleDirective extends ECLBaseDirective {\n    hostElementRef = inject(ElementRef);\n\n    /**\n     * Sets the `aria-expanded` attribute to reflect the popover's open state.\n     * This should be updated by the parent popover component.\n     */\n    readonly isExpanded = signal(false);\n\n    /**\n     * Event emitted when the toggle element is clicked with the left mouse button.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    readonly click = output();\n\n    /**\n     * Host binding that applies the appropriate CSS class to the toggle element.\n     */\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-popover__toggle')].join(' ').trim();\n    }\n\n    /**\n     * Emits the `click` event only for left mouse button clicks.\n     * Used by the popover component to toggle visibility.\n     */\n    onClick(evt: MouseEvent): void {\n        const LEFT_BUTTON = 0;\n\n        if (evt.button === LEFT_BUTTON) {\n            this.click.emit();\n        }\n    }\n\n    /**\n     * Triggers the click event on Enter or Space keydown and prevents default behavior.\n     */\n    onKeyboardActivate(evt: Event): void {\n        evt.preventDefault();\n        this.click.emit();\n    }\n\n    /**\n     * Returns the native HTML element of the directive.\n     * Used internally by the popover to query attributes.\n     */\n    public getHostElement(): HTMLElement {\n        return this.hostElementRef.nativeElement;\n    }\n}\n",
             "selector": "[eclPopoverToggle]",
             "providers": [],
             "hostDirectives": [],
@@ -30067,112 +30054,23 @@
                 {
                     "name": "click",
                     "coverageIgnore": false,
-                    "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nEvent emitted when the toggle element is clicked with the left mouse button.\n",
+                    "indexKey": "",
+                    "optional": false,
                     "description": "<p>Event emitted when the toggle element is clicked with the left mouse button.</p>\n",
-                    "line": 25,
-                    "type": "EventEmitter"
+                    "line": 32,
+                    "rawdescription": "\n\nEvent emitted when the toggle element is clicked with the left mouse button.\n",
+                    "modifierKind": [
+                        148
+                    ],
+                    "required": false
                 }
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "attr.aria-expanded",
-                    "actualName": "isExpanded",
-                    "defaultValue": "false",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSets the `aria-expanded` attribute to reflect the popover's open state.\nThis should be updated by the parent popover component.\n",
-                    "description": "<p>Sets the <code>aria-expanded</code> attribute to reflect the popover&#39;s open state.\nThis should be updated by the parent popover component.</p>\n",
-                    "line": 19,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHost binding that applies the appropriate CSS class to the toggle element.\n",
-                    "description": "<p>Host binding that applies the appropriate CSS class to the toggle element.</p>\n",
-                    "line": 31,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "keydown.enter",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nTriggers the click event on Enter or Space keydown and prevents default behavior.\n",
-                    "description": "<p>Triggers the click event on Enter or Space keydown and prevents default behavior.</p>\n",
-                    "line": 53
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "keydown.space",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "Event",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nTriggers the click event on Enter or Space keydown and prevents default behavior.\n",
-                    "description": "<p>Triggers the click event on Enter or Space keydown and prevents default behavior.</p>\n",
-                    "line": 53
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "mouseup",
-                    "args": [
-                        {
-                            "name": "evt",
-                            "type": "MouseEvent",
-                            "optional": false,
-                            "dotDotDotToken": false,
-                            "deprecated": false,
-                            "deprecationMessage": ""
-                        }
-                    ],
-                    "argsDecorator": [
-                        "$event"
-                    ],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nEmits the `click` event only for left mouse button clicks.\nUsed by the popover component to toggle visibility.\n",
-                    "description": "<p>Emits the <code>click</code> event only for left mouse button clicks.\nUsed by the popover component to toggle visibility.</p>\n",
-                    "line": 40
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "propertiesClass": [
                 {
                     "name": "hostElementRef",
@@ -30184,29 +30082,23 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 13,
+                    "line": 20,
                     "rawdescription": "\n"
                 },
                 {
                     "name": "isExpanded",
                     "coverageIgnore": false,
-                    "defaultValue": "false",
+                    "defaultValue": "signal(false)",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "unknown",
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Sets the <code>aria-expanded</code> attribute to reflect the popover&#39;s open state.\nThis should be updated by the parent popover component.</p>\n",
-                    "line": 19,
+                    "line": 26,
                     "rawdescription": "\n\nSets the `aria-expanded` attribute to reflect the popover's open state.\nThis should be updated by the parent popover component.\n",
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.aria-expanded'"
-                        }
-                    ],
                     "modifierKind": [
-                        171
+                        148
                     ]
                 }
             ],
@@ -30218,7 +30110,7 @@
                     "optional": false,
                     "returnType": "HTMLElement",
                     "typeParameters": [],
-                    "line": 62,
+                    "line": 65,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the native HTML element of the directive.\nUsed internally by the popover to query attributes.\n",
@@ -30243,20 +30135,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 40,
+                    "line": 45,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits the `click` event only for left mouse button clicks.\nUsed by the popover component to toggle visibility.\n",
                     "description": "<p>Emits the <code>click</code> event only for left mouse button clicks.\nUsed by the popover component to toggle visibility.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'mouseup', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -30287,25 +30170,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 53,
+                    "line": 56,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggers the click event on Enter or Space keydown and prevents default behavior.\n",
                     "description": "<p>Triggers the click event on Enter or Space keydown and prevents default behavior.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'keydown.enter', ['$event']"
-                        },
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'keydown.space', ['$event']"
-                        }
-                    ],
-                    "modifierKind": [
-                        171,
-                        171
-                    ],
                     "jsdoctags": [
                         {
                             "name": "evt",
@@ -30362,8 +30231,8 @@
             "coverageIgnore": false,
             "jsdoctags": [
                 {
-                    "pos": 163,
-                    "end": 330,
+                    "pos": 130,
+                    "end": 297,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -30382,7 +30251,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 31,
+                        "line": 37,
                         "rawdescription": "\n\nHost binding that applies the appropriate CSS class to the toggle element.\n",
                         "description": "<p>Host binding that applies the appropriate CSS class to the toggle element.</p>\n"
                     }
@@ -73948,10 +73817,11 @@
         },
         {
             "name": "EclPopoverComponent",
-            "id": "component-EclPopoverComponent-94889b974be58dee9fd2d45b76aef05cf5f2c361f8d9ac0f6a2ab030d53f3e06434161d73d0de96088341393e5755af75c3ae4e6cac51bf7f86b28d399e7d284",
+            "id": "component-EclPopoverComponent-69f74ba25ed820bb35976f69f73156f370ce60196a5e09af6885eba78cfef67ac293775c262d77c47511ca1fbc6061d4d3b296e0d26b7ebb8770ca5e8a851ffe",
             "file": "packages/ecl/components/ecl-popover/ecl-popover.component.ts",
             "encapsulation": [],
             "entryComponents": [],
+            "host": {},
             "inputs": [],
             "outputs": [],
             "providers": [],
@@ -74026,7 +73896,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 47,
+                    "line": 54,
                     "rawdescription": "\n",
                     "required": false
                 },
@@ -74038,7 +73908,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 46,
+                    "line": 53,
                     "rawdescription": "\n",
                     "required": false
                 }
@@ -74054,7 +73924,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the popover container element.</p>\n",
-                    "line": 34,
+                    "line": 41,
                     "rawdescription": "\n\nReference to the popover container element.\n",
                     "modifierKind": [
                         148
@@ -74070,7 +73940,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the scrollable content element inside the popover.</p>\n",
-                    "line": 39,
+                    "line": 46,
                     "rawdescription": "\n\nReference to the scrollable content element inside the popover.\n",
                     "modifierKind": [
                         148
@@ -74086,7 +73956,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Reference to the toggle element used to open/close the popover.</p>\n",
-                    "line": 44,
+                    "line": 51,
                     "rawdescription": "\n\nReference to the toggle element used to open/close the popover.\n",
                     "modifierKind": [
                         148
@@ -74102,7 +73972,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Controls visibility of the popover. <code>true</code> means hidden.</p>\n",
-                    "line": 52,
+                    "line": 59,
                     "rawdescription": "\n\nControls visibility of the popover. `true` means hidden.\n",
                     "modifierKind": [
                         124
@@ -74117,7 +73987,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 159,
+                    "line": 167,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nProtected method used to close the popover and reset related styles.\n",
@@ -74142,7 +74012,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 338,
+                    "line": 348,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCheck whether the popover is going out of its scrollable container and apply the needed repositioning.\n\n",
@@ -74150,8 +74020,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 12343,
-                                "end": 12352,
+                                "pos": 12812,
+                                "end": 12821,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -74164,8 +74034,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 12328,
-                                "end": 12333,
+                                "pos": 12797,
+                                "end": 12802,
                                 "kind": 80,
                                 "id": 0,
                                 "flags": 16842752,
@@ -74174,16 +74044,16 @@
                             },
                             "comment": "",
                             "typeExpression": {
-                                "pos": 12334,
-                                "end": 12342,
+                                "pos": 12803,
+                                "end": 12811,
                                 "kind": 310,
                                 "id": 0,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
                                 "type": {
-                                    "pos": 12335,
-                                    "end": 12341,
+                                    "pos": 12804,
+                                    "end": 12810,
                                     "kind": 154,
                                     "id": 0,
                                     "flags": 16777216,
@@ -74200,7 +74070,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 99,
+                    "line": 106,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nInitializes event subscriptions for toggle button.\n",
@@ -74213,7 +74083,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 84,
+                    "line": 91,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRecalculates popover position when the window is resized.\n",
@@ -74226,7 +74096,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 116,
+                    "line": 127,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLifecycle hook that cleans up subscriptions on destroy.\n",
@@ -74239,20 +74109,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 134,
+                    "line": 144,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandler triggered when a click outside the popover is detected.\nCloses the popover if it is open.\n",
-                    "description": "<p>Handler triggered when a click outside the popover is detected.\nCloses the popover if it is open.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'eclClickOutside'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Handler triggered when a click outside the popover is detected.\nCloses the popover if it is open.</p>\n"
                 },
                 {
                     "name": "onDocumentScroll",
@@ -74261,20 +74122,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 152,
+                    "line": 160,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRecalculates popover position when the document is scrolled.\n",
-                    "description": "<p>Recalculates popover position when the document is scrolled.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'document:scroll'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Recalculates popover position when the document is scrolled.</p>\n"
                 },
                 {
                     "name": "onEscapeKeydownHandler",
@@ -74283,20 +74135,11 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 144,
+                    "line": 153,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCloses the popover when the Escape key is pressed.\n",
-                    "description": "<p>Closes the popover when the Escape key is pressed.</p>\n",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'document:keydown.escape'"
-                        }
-                    ],
-                    "modifierKind": [
-                        171
-                    ]
+                    "description": "<p>Closes the popover when the Escape key is pressed.</p>\n"
                 },
                 {
                     "name": "getCssClasses",
@@ -74340,55 +74183,8 @@
             "coverageIgnore": false,
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [
-                {
-                    "coverageIgnore": false,
-                    "name": "class",
-                    "actualName": "cssClasses",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n",
-                    "description": "",
-                    "line": 73,
-                    "type": "string",
-                    "decorators": []
-                }
-            ],
-            "hostListeners": [
-                {
-                    "coverageIgnore": false,
-                    "name": "document:keydown.escape",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nCloses the popover when the Escape key is pressed.\n",
-                    "description": "<p>Closes the popover when the Escape key is pressed.</p>\n",
-                    "line": 144
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "document:scroll",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nRecalculates popover position when the document is scrolled.\n",
-                    "description": "<p>Recalculates popover position when the document is scrolled.</p>\n",
-                    "line": 152
-                },
-                {
-                    "coverageIgnore": false,
-                    "name": "eclClickOutside",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nHandler triggered when a click outside the popover is detected.\nCloses the popover if it is open.\n",
-                    "description": "<p>Handler triggered when a click outside the popover is detected.\nCloses the popover if it is open.</p>\n",
-                    "line": 134
-                }
-            ],
+            "hostBindings": [],
+            "hostListeners": [],
             "standalone": false,
             "imports": [
                 {
@@ -74401,14 +74197,14 @@
             "description": "<p>Component representing an ECL Popover.</p>\n<p>It handles toggling visibility, positioning, and closing behavior of the popover.</p>\n",
             "rawdescription": "\n\nComponent representing an ECL Popover.\n\nIt handles toggling visibility, positioning, and closing behavior of the popover.\n",
             "type": "component",
-            "sourceCode": "import { AfterContentInit, AfterViewInit, Component, DOCUMENT, ElementRef, HostBinding, HostListener, OnDestroy, PLATFORM_ID, Renderer2, inject, output, viewChild, contentChild } from '@angular/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclPopoverToggleDirective } from './ecl-popover-toggle.directive';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { isPlatformBrowser } from '@angular/common';\n\n/**\n * Component representing an ECL Popover.\n *\n * It handles toggling visibility, positioning, and closing behavior of the popover.\n */\n@Component({\n    selector: 'ecl-popover',\n    templateUrl: './ecl-popover.component.html',\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    imports: [\n        ...EUI_ECL_BUTTON,\n        ...EUI_ECL_ICON,\n    ],\n})\nexport class EclPopoverComponent extends ECLBaseDirective implements AfterViewInit, AfterContentInit, OnDestroy {\n    /**\n     * Reference to the popover container element.\n     */\n    readonly eclPopoverContainerElement = viewChild<ElementRef>('container');\n\n    /**\n     * Reference to the scrollable content element inside the popover.\n     */\n    readonly eclPopoverScrollableElement = viewChild<ElementRef>('scrollable');\n\n    /**\n     * Reference to the toggle element used to open/close the popover.\n     */\n    readonly eclPopoverToggle = contentChild(EclPopoverToggleDirective);\n\n    openEvent = output();\n    closeEvent = output();\n\n    /**\n     * Controls visibility of the popover. `true` means hidden.\n     */\n    protected isHidden = true;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    private readonly topClass = 'ecl-popover--top';\n    private readonly bottomClass = 'ecl-popover--bottom';\n    private readonly leftClass = 'ecl-popover--left';\n    private readonly rightClass = 'ecl-popover--right';\n    private readonly pushTopClass = 'ecl-popover--push-top';\n    private readonly pushBottomClass = 'ecl-popover--push-bottom';\n    private readonly pushLeftClass = 'ecl-popover--push-left';\n    private readonly pushRightClass = 'ecl-popover--push-right';\n    private toggleRect = null;\n    private scrollableParent = null;\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n    private platformId = inject(PLATFORM_ID);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-popover'),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Recalculates popover position when the window is resized.\n     */\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                this.checkPosition();\n            });\n        }\n    }\n\n    /**\n     * Initializes event subscriptions for toggle button.\n     */\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        this.eclPopoverToggle()?.click.pipe(takeUntil(this.destroy$)).subscribe(() => {\n            if (this.isHidden) {\n                this.doOpen();\n            } else {\n                this.doClose();\n            }\n            this.checkPosition(); // TODO: wrap on a platformBrowser check as it calls window and document\n        });\n\n        this.scrollableParent = this.getClosestScrollableParent(this.eclPopoverToggle()?.hostElementRef.nativeElement);\n    }\n\n    /**\n     * Lifecycle hook that cleans up subscriptions on destroy.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Returns the value of the `aria-controls` attribute from the toggle element,\n     * if available. Used for accessibility linking.\n     */\n    get popoverToggleAriaControls(): string | null {\n        return this.eclPopoverToggle()?.hostElementRef.nativeElement.getAttribute('aria-controls');\n    }\n\n    /**\n     * Handler triggered when a click outside the popover is detected.\n     * Closes the popover if it is open.\n     */\n    @HostListener('eclClickOutside')\n    onClickOutsidePopover(): void {\n        if (!this.isHidden) {\n            this.doClose();\n        }\n    }\n\n    /**\n     * Closes the popover when the Escape key is pressed.\n     */\n    @HostListener('document:keydown.escape')\n    onEscapeKeydownHandler(): void {\n        this.doClose();\n    }\n\n    /**\n     * Recalculates popover position when the document is scrolled.\n     */\n    @HostListener('document:scroll')\n    onDocumentScroll(): void {\n        this.checkPosition();\n    }\n\n    /**\n     * Protected method used to close the popover and reset related styles.\n     */\n    protected doClose(): void {\n        this.isHidden = true;\n        this.resetStyles();\n        this.closeEvent.emit();\n    }\n\n    private doOpen(): void {\n        this.isHidden = false;\n        this.openEvent.emit();\n    }\n\n    private getClosestScrollableParent(element: HTMLElement): HTMLElement {\n        let parent = element.parentElement;\n\n        while (parent) {\n            const { overflowY, overflowX } = getComputedStyle(parent);\n            const isScrollableY =\n                (overflowY === 'auto' || overflowY === 'scroll') &&\n                parent.scrollHeight > parent.clientHeight;\n            const isScrollableX =\n                (overflowX === 'auto' || overflowX === 'scroll') &&\n                parent.scrollWidth > parent.clientWidth;\n\n            if (isScrollableY || isScrollableX) {\n                return parent; // Found the closest scrollable parent\n            }\n\n            parent = parent.parentElement;\n        }\n\n        return this.document.body;\n    }\n\n    private calculateAvailableSpace(toggleElement, scrollableParent = null) {\n        // Get the bounding rect for the toggle element\n        this.toggleRect = toggleElement.getBoundingClientRect();\n\n        // If no scrollable parent is provided, use the viewport\n        const containerRect = scrollableParent\n            ? scrollableParent.getBoundingClientRect()\n            : {\n                top: 0,\n                left: 0,\n                right: this.window.innerWidth,\n                bottom: this.window.innerHeight,\n            };\n        const containerWidth = containerRect.right - containerRect.left;\n        const containerHeight = containerRect.bottom - containerRect.top;\n        // Calculate the space available in the four directions\n        const containerBottom = Math.max(\n            0,\n            this.window.innerHeight - containerRect.bottom,\n        );\n        const toggleBottom = Math.max(\n            0,\n            this.window.innerHeight - this.toggleRect.bottom,\n        );\n        const spaceBottom = Math.max(0, toggleBottom - containerBottom);\n\n        // Top Space (from toggle's top to container's top)\n        const containerTop = Math.max(0, containerRect.top);\n        const toggleTop = Math.max(0, this.toggleRect.top);\n        const spaceTop = Math.max(0, toggleTop - containerTop);\n\n        // Right Space (from toggle's right to container's right)\n        const containerRight = Math.max(0, this.window.innerWidth - containerRect.right);\n        const toggleRight = Math.max(0, this.window.innerWidth - this.toggleRect.right);\n        const spaceRight = Math.max(0, toggleRight - containerRight);\n\n        // Left Space (from toggle's left to container's left)\n        const containerLeft = Math.max(0, containerRect.left);\n        const toggleLeft = Math.max(0, this.toggleRect.left);\n        const spaceLeft = Math.max(0, toggleLeft - containerLeft);\n\n        return {\n            containerWidth,\n            containerHeight,\n            spaceTop,\n            spaceBottom,\n            spaceLeft,\n            spaceRight,\n        };\n    }\n\n    private checkPosition(): void {\n        setTimeout(() => {\n            if (!this.isHidden) {\n                this.positionPopover();\n            }\n        });\n    }\n\n    private positionPopover(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        this.resetStyles();\n\n        const { containerWidth, spaceTop, spaceBottom, spaceLeft, spaceRight } =\n            this.calculateAvailableSpace(this.eclPopoverToggle().getHostElement(), this.scrollableParent);\n\n        // Find the direction with the most available space\n        const positioningClass = 'ecl-popover--';\n        let direction = '';\n\n        if (\n            spaceTop > spaceBottom &&\n            spaceTop > spaceLeft &&\n            spaceTop > spaceRight\n        ) {\n            direction = 'top';\n        } else if (spaceBottom > spaceLeft && spaceBottom > spaceRight) {\n            direction = 'bottom';\n        } else if (spaceLeft > spaceRight) {\n            direction = 'left';\n        } else {\n            direction = 'right';\n        }\n\n        this.renderer.addClass(this.el.nativeElement, `${positioningClass}${direction}`);\n\n        // Try to use as much of the available width, respecting the max-width set.\n        const styles = this.window.getComputedStyle(this.eclPopoverScrollableElement().nativeElement);\n        const maxWidth = parseInt(styles.getPropertyValue('max-width'), 10);\n        const minWidth = parseInt(styles.getPropertyValue('min-width'), 10);\n        const padding = parseInt(styles.getPropertyValue('padding-left'), 10) * 2;\n\n        // We consider 90% of the biggest space available\n        const horizontalSpace = Math.max(spaceLeft, spaceRight) * 0.9;\n        let targetWidth;\n\n        // If the available space is larger than maxWidth (plus padding), set to maxWidth\n        if (\n            maxWidth + padding < horizontalSpace ||\n            (direction !== 'left' &&\n                direction !== 'right' &&\n                containerWidth > maxWidth)\n        ) {\n            targetWidth = maxWidth;\n        }\n        // If the available space is smaller than minWidth (plus padding), set to minWidth\n        else if (horizontalSpace < minWidth + padding) {\n            targetWidth = minWidth;\n        }\n        // Otherwise, set the width to the available space minus the padding\n        else if (direction === 'left' || direction === 'right') {\n            targetWidth = horizontalSpace - padding;\n        } else {\n            targetWidth = (horizontalSpace - padding) * 2;\n        }\n\n        // Ensure the width does not exceed available space\n        this.renderer.setStyle(this.eclPopoverScrollableElement().nativeElement, 'width', `${targetWidth}px`);\n\n        this.handlePushClass(direction);\n    }\n\n    private resetStyles(): void {\n        const popoverContainer = this.eclPopoverContainerElement().nativeElement;\n        this.renderer.removeClass(this.el.nativeElement, this.topClass);\n        this.renderer.removeClass(this.el.nativeElement, this.bottomClass);\n        this.renderer.removeClass(this.el.nativeElement, this.leftClass);\n        this.renderer.removeClass(this.el.nativeElement, this.rightClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushTopClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushBottomClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushLeftClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushRightClass);\n        this.renderer.removeStyle(popoverContainer, '--ecl-popover-position');\n        this.renderer.removeStyle(popoverContainer, 'top');\n        this.renderer.removeStyle(popoverContainer, 'right');\n        this.renderer.removeStyle(popoverContainer, 'left');\n        this.renderer.removeStyle(popoverContainer, 'bottom');\n        this.renderer.removeStyle(popoverContainer, 'transform');\n        this.renderer.removeStyle(this.eclPopoverScrollableElement().nativeElement, 'width');\n    }\n\n    /**\n   * Check whether the popover is going out of its scrollable container and apply the needed repositioning.\n   *\n   * @param {string} direction\n   */\n    handlePushClass(direction: string): void {\n        requestAnimationFrame(() => {\n            const popoverRect = this.eclPopoverContainerElement().nativeElement.getBoundingClientRect();\n            const scrollableRect = this.scrollableParent.getBoundingClientRect();\n            const containerBottom =\n                scrollableRect.bottom > this.window.innerHeight ? 0 : this.window.innerHeight - scrollableRect.bottom;\n            const containerTop =\n                scrollableRect.top > this.window.innerHeight ? 0 : scrollableRect.top;\n            const leftOverflow = scrollableRect.left > popoverRect.left;\n            const rightOverflow = scrollableRect.right < popoverRect.right;\n            const topOverflow = popoverRect.top < containerTop;\n            const bottomOverflow =\n                containerBottom > this.window.innerHeight - popoverRect.bottom;\n\n            if (direction === 'left' || direction === 'right') {\n                const eclPopoverContainerElement = this.eclPopoverContainerElement();\n                if (topOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushTopClass);\n                    // Push the popover to the top edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'top', `-${Math.round(this.toggleRect.top)}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'bottom', '');\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'transform', '');\n                }\n                if (bottomOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushBottomClass);\n                    // Push the popover to the bottom edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'bottom', `-${this.window.innerHeight - this.toggleRect.bottom - containerBottom}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'top', '');\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'transform', '');\n                }\n            } else {\n                const eclPopoverContainerElement = this.eclPopoverContainerElement();\n                if (leftOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushLeftClass);\n                    // Push the popover 8px to the left edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'left', `-${this.toggleRect.left - scrollableRect.left - 8}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'right', 'auto');\n                }\n                if (rightOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushRightClass);\n                    // Push the popover 8px to the right edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'right', `-${scrollableRect.right - this.toggleRect.right - 8}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'left', 'auto');\n                }\n            }\n\n            this.handleArrowPosition(direction);\n        });\n    }\n\n    private handleArrowPosition(direction: string): void {\n        const popoverRect = this.eclPopoverContainerElement().nativeElement.getBoundingClientRect();\n\n        if (direction === 'left' || direction === 'right') {\n            if (this.el.nativeElement.classList.contains(this.pushBottomClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(this.toggleRect.top - popoverRect.top + this.toggleRect.height / 2)}px`);\n            } else if (this.el.nativeElement.classList.contains(this.pushTopClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(popoverRect.top + this.toggleRect.top + this.toggleRect.height / 2)}px`);\n            }\n        } else {\n\n            if (this.el.nativeElement.classList.contains(this.pushRightClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(popoverRect.right - (this.toggleRect.right - this.toggleRect.width / 2))}px`);\n            } else if (this.el.nativeElement.classList.contains(this.pushLeftClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(this.toggleRect.left - popoverRect.left + this.toggleRect.width / 2)}px`);\n            }\n        }\n    }\n}\n",
+            "sourceCode": "import { AfterContentInit, AfterViewInit, Component, DOCUMENT, ElementRef, Injector, OnDestroy, PLATFORM_ID, Renderer2, inject, output, runInInjectionContext, viewChild, contentChild } from '@angular/core';\nimport { auditTime, fromEvent, Subject, takeUntil } from 'rxjs';\nimport { ECLClickOutsideDirective } from '@eui/ecl/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclPopoverToggleDirective } from './ecl-popover-toggle.directive';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { isPlatformBrowser } from '@angular/common';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\n\n/**\n * Component representing an ECL Popover.\n *\n * It handles toggling visibility, positioning, and closing behavior of the popover.\n */\n@Component({\n    selector: 'ecl-popover',\n    templateUrl: './ecl-popover.component.html',\n    host: {\n        '[class]': 'cssClasses',\n        '(eclClickOutside)': 'onClickOutsidePopover()',\n        '(document:keydown.escape)': 'onEscapeKeydownHandler()',\n        '(document:scroll)': 'onDocumentScroll()',\n    },\n    hostDirectives: [\n        {\n            directive: ECLClickOutsideDirective,\n\n            outputs: ['eclClickOutside'],\n        },\n    ],\n    imports: [\n        ...EUI_ECL_BUTTON,\n        ...EUI_ECL_ICON,\n    ],\n})\nexport class EclPopoverComponent extends ECLBaseDirective implements AfterViewInit, AfterContentInit, OnDestroy {\n    /**\n     * Reference to the popover container element.\n     */\n    readonly eclPopoverContainerElement = viewChild<ElementRef>('container');\n\n    /**\n     * Reference to the scrollable content element inside the popover.\n     */\n    readonly eclPopoverScrollableElement = viewChild<ElementRef>('scrollable');\n\n    /**\n     * Reference to the toggle element used to open/close the popover.\n     */\n    readonly eclPopoverToggle = contentChild(EclPopoverToggleDirective);\n\n    openEvent = output();\n    closeEvent = output();\n\n    /**\n     * Controls visibility of the popover. `true` means hidden.\n     */\n    protected isHidden = true;\n\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n\n    private readonly topClass = 'ecl-popover--top';\n    private readonly bottomClass = 'ecl-popover--bottom';\n    private readonly leftClass = 'ecl-popover--left';\n    private readonly rightClass = 'ecl-popover--right';\n    private readonly pushTopClass = 'ecl-popover--push-top';\n    private readonly pushBottomClass = 'ecl-popover--push-bottom';\n    private readonly pushLeftClass = 'ecl-popover--push-left';\n    private readonly pushRightClass = 'ecl-popover--push-right';\n    private toggleRect = null;\n    private scrollableParent = null;\n    private el = inject(ElementRef);\n    private renderer = inject(Renderer2);\n    private readonly injector = inject(Injector);\n    private readonly document = inject<Document>(DOCUMENT);\n    private readonly window = this.document.defaultView; // Window | null\n    private platformId = inject(PLATFORM_ID);\n\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-popover'),\n        ]\n            .join(' ')\n            .trim();\n    }\n\n    /**\n     * Recalculates popover position when the window is resized.\n     */\n    ngAfterViewInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n\n        if (this.window) {\n            fromEvent(this.window, 'resize').pipe(\n                auditTime(50),\n                takeUntil(this.destroy$)).subscribe(() => {\n                this.checkPosition();\n            });\n        }\n    }\n\n    /**\n     * Initializes event subscriptions for toggle button.\n     */\n    ngAfterContentInit(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        const toggle = this.eclPopoverToggle();\n        if (toggle) {\n            runInInjectionContext(this.injector, () => outputToObservable(toggle.click))\n                .pipe(takeUntil(this.destroy$)).subscribe(() => {\n                if (this.isHidden) {\n                    this.doOpen();\n                } else {\n                    this.doClose();\n                }\n                this.checkPosition(); // TODO: wrap on a platformBrowser check as it calls window and document\n            });\n        }\n\n        this.scrollableParent = this.getClosestScrollableParent(toggle?.hostElementRef.nativeElement);\n    }\n\n    /**\n     * Lifecycle hook that cleans up subscriptions on destroy.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    /**\n     * Returns the value of the `aria-controls` attribute from the toggle element,\n     * if available. Used for accessibility linking.\n     */\n    get popoverToggleAriaControls(): string | null {\n        return this.eclPopoverToggle()?.hostElementRef.nativeElement.getAttribute('aria-controls');\n    }\n\n    /**\n     * Handler triggered when a click outside the popover is detected.\n     * Closes the popover if it is open.\n     */\n    onClickOutsidePopover(): void {\n        if (!this.isHidden) {\n            this.doClose();\n        }\n    }\n\n    /**\n     * Closes the popover when the Escape key is pressed.\n     */\n    onEscapeKeydownHandler(): void {\n        this.doClose();\n    }\n\n    /**\n     * Recalculates popover position when the document is scrolled.\n     */\n    onDocumentScroll(): void {\n        this.checkPosition();\n    }\n\n    /**\n     * Protected method used to close the popover and reset related styles.\n     */\n    protected doClose(): void {\n        this.isHidden = true;\n        this.eclPopoverToggle()?.isExpanded.set(false);\n        this.resetStyles();\n        this.closeEvent.emit();\n    }\n\n    private doOpen(): void {\n        this.isHidden = false;\n        this.eclPopoverToggle()?.isExpanded.set(true);\n        this.openEvent.emit();\n    }\n\n    private getClosestScrollableParent(element: HTMLElement): HTMLElement {\n        let parent = element.parentElement;\n\n        while (parent) {\n            const { overflowY, overflowX } = getComputedStyle(parent);\n            const isScrollableY =\n                (overflowY === 'auto' || overflowY === 'scroll') &&\n                parent.scrollHeight > parent.clientHeight;\n            const isScrollableX =\n                (overflowX === 'auto' || overflowX === 'scroll') &&\n                parent.scrollWidth > parent.clientWidth;\n\n            if (isScrollableY || isScrollableX) {\n                return parent; // Found the closest scrollable parent\n            }\n\n            parent = parent.parentElement;\n        }\n\n        return this.document.body;\n    }\n\n    private calculateAvailableSpace(toggleElement, scrollableParent = null) {\n        // Get the bounding rect for the toggle element\n        this.toggleRect = toggleElement.getBoundingClientRect();\n\n        // If no scrollable parent is provided, use the viewport\n        const containerRect = scrollableParent\n            ? scrollableParent.getBoundingClientRect()\n            : {\n                top: 0,\n                left: 0,\n                right: this.window.innerWidth,\n                bottom: this.window.innerHeight,\n            };\n        const containerWidth = containerRect.right - containerRect.left;\n        const containerHeight = containerRect.bottom - containerRect.top;\n        // Calculate the space available in the four directions\n        const containerBottom = Math.max(\n            0,\n            this.window.innerHeight - containerRect.bottom,\n        );\n        const toggleBottom = Math.max(\n            0,\n            this.window.innerHeight - this.toggleRect.bottom,\n        );\n        const spaceBottom = Math.max(0, toggleBottom - containerBottom);\n\n        // Top Space (from toggle's top to container's top)\n        const containerTop = Math.max(0, containerRect.top);\n        const toggleTop = Math.max(0, this.toggleRect.top);\n        const spaceTop = Math.max(0, toggleTop - containerTop);\n\n        // Right Space (from toggle's right to container's right)\n        const containerRight = Math.max(0, this.window.innerWidth - containerRect.right);\n        const toggleRight = Math.max(0, this.window.innerWidth - this.toggleRect.right);\n        const spaceRight = Math.max(0, toggleRight - containerRight);\n\n        // Left Space (from toggle's left to container's left)\n        const containerLeft = Math.max(0, containerRect.left);\n        const toggleLeft = Math.max(0, this.toggleRect.left);\n        const spaceLeft = Math.max(0, toggleLeft - containerLeft);\n\n        return {\n            containerWidth,\n            containerHeight,\n            spaceTop,\n            spaceBottom,\n            spaceLeft,\n            spaceRight,\n        };\n    }\n\n    private checkPosition(): void {\n        setTimeout(() => {\n            if (!this.isHidden) {\n                this.positionPopover();\n            }\n        });\n    }\n\n    private positionPopover(): void {\n        if (!isPlatformBrowser(this.platformId)) return;\n        this.resetStyles();\n\n        const { containerWidth, spaceTop, spaceBottom, spaceLeft, spaceRight } =\n            this.calculateAvailableSpace(this.eclPopoverToggle().getHostElement(), this.scrollableParent);\n\n        // Find the direction with the most available space\n        const positioningClass = 'ecl-popover--';\n        let direction = '';\n\n        if (\n            spaceTop > spaceBottom &&\n            spaceTop > spaceLeft &&\n            spaceTop > spaceRight\n        ) {\n            direction = 'top';\n        } else if (spaceBottom > spaceLeft && spaceBottom > spaceRight) {\n            direction = 'bottom';\n        } else if (spaceLeft > spaceRight) {\n            direction = 'left';\n        } else {\n            direction = 'right';\n        }\n\n        this.renderer.addClass(this.el.nativeElement, `${positioningClass}${direction}`);\n\n        // Try to use as much of the available width, respecting the max-width set.\n        const styles = this.window.getComputedStyle(this.eclPopoverScrollableElement().nativeElement);\n        const maxWidth = parseInt(styles.getPropertyValue('max-width'), 10);\n        const minWidth = parseInt(styles.getPropertyValue('min-width'), 10);\n        const padding = parseInt(styles.getPropertyValue('padding-left'), 10) * 2;\n\n        // We consider 90% of the biggest space available\n        const horizontalSpace = Math.max(spaceLeft, spaceRight) * 0.9;\n        let targetWidth;\n\n        // If the available space is larger than maxWidth (plus padding), set to maxWidth\n        if (\n            maxWidth + padding < horizontalSpace ||\n            (direction !== 'left' &&\n                direction !== 'right' &&\n                containerWidth > maxWidth)\n        ) {\n            targetWidth = maxWidth;\n        }\n        // If the available space is smaller than minWidth (plus padding), set to minWidth\n        else if (horizontalSpace < minWidth + padding) {\n            targetWidth = minWidth;\n        }\n        // Otherwise, set the width to the available space minus the padding\n        else if (direction === 'left' || direction === 'right') {\n            targetWidth = horizontalSpace - padding;\n        } else {\n            targetWidth = (horizontalSpace - padding) * 2;\n        }\n\n        // Ensure the width does not exceed available space\n        this.renderer.setStyle(this.eclPopoverScrollableElement().nativeElement, 'width', `${targetWidth}px`);\n\n        this.handlePushClass(direction);\n    }\n\n    private resetStyles(): void {\n        const popoverContainer = this.eclPopoverContainerElement().nativeElement;\n        this.renderer.removeClass(this.el.nativeElement, this.topClass);\n        this.renderer.removeClass(this.el.nativeElement, this.bottomClass);\n        this.renderer.removeClass(this.el.nativeElement, this.leftClass);\n        this.renderer.removeClass(this.el.nativeElement, this.rightClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushTopClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushBottomClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushLeftClass);\n        this.renderer.removeClass(this.el.nativeElement, this.pushRightClass);\n        this.renderer.removeStyle(popoverContainer, '--ecl-popover-position');\n        this.renderer.removeStyle(popoverContainer, 'top');\n        this.renderer.removeStyle(popoverContainer, 'right');\n        this.renderer.removeStyle(popoverContainer, 'left');\n        this.renderer.removeStyle(popoverContainer, 'bottom');\n        this.renderer.removeStyle(popoverContainer, 'transform');\n        this.renderer.removeStyle(this.eclPopoverScrollableElement().nativeElement, 'width');\n    }\n\n    /**\n   * Check whether the popover is going out of its scrollable container and apply the needed repositioning.\n   *\n   * @param {string} direction\n   */\n    handlePushClass(direction: string): void {\n        requestAnimationFrame(() => {\n            const popoverRect = this.eclPopoverContainerElement().nativeElement.getBoundingClientRect();\n            const scrollableRect = this.scrollableParent.getBoundingClientRect();\n            const containerBottom =\n                scrollableRect.bottom > this.window.innerHeight ? 0 : this.window.innerHeight - scrollableRect.bottom;\n            const containerTop =\n                scrollableRect.top > this.window.innerHeight ? 0 : scrollableRect.top;\n            const leftOverflow = scrollableRect.left > popoverRect.left;\n            const rightOverflow = scrollableRect.right < popoverRect.right;\n            const topOverflow = popoverRect.top < containerTop;\n            const bottomOverflow =\n                containerBottom > this.window.innerHeight - popoverRect.bottom;\n\n            if (direction === 'left' || direction === 'right') {\n                const eclPopoverContainerElement = this.eclPopoverContainerElement();\n                if (topOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushTopClass);\n                    // Push the popover to the top edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'top', `-${Math.round(this.toggleRect.top)}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'bottom', '');\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'transform', '');\n                }\n                if (bottomOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushBottomClass);\n                    // Push the popover to the bottom edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'bottom', `-${this.window.innerHeight - this.toggleRect.bottom - containerBottom}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'top', '');\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'transform', '');\n                }\n            } else {\n                const eclPopoverContainerElement = this.eclPopoverContainerElement();\n                if (leftOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushLeftClass);\n                    // Push the popover 8px to the left edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'left', `-${this.toggleRect.left - scrollableRect.left - 8}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'right', 'auto');\n                }\n                if (rightOverflow) {\n                    this.renderer.addClass(this.el.nativeElement, this.pushRightClass);\n                    // Push the popover 8px to the right edge of the container\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'right', `-${scrollableRect.right - this.toggleRect.right - 8}px`);\n                    this.renderer.setStyle(eclPopoverContainerElement.nativeElement, 'left', 'auto');\n                }\n            }\n\n            this.handleArrowPosition(direction);\n        });\n    }\n\n    private handleArrowPosition(direction: string): void {\n        const popoverRect = this.eclPopoverContainerElement().nativeElement.getBoundingClientRect();\n\n        if (direction === 'left' || direction === 'right') {\n            if (this.el.nativeElement.classList.contains(this.pushBottomClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(this.toggleRect.top - popoverRect.top + this.toggleRect.height / 2)}px`);\n            } else if (this.el.nativeElement.classList.contains(this.pushTopClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(popoverRect.top + this.toggleRect.top + this.toggleRect.height / 2)}px`);\n            }\n        } else {\n\n            if (this.el.nativeElement.classList.contains(this.pushRightClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(popoverRect.right - (this.toggleRect.right - this.toggleRect.width / 2))}px`);\n            } else if (this.el.nativeElement.classList.contains(this.pushLeftClass)) {\n                this.renderer.setStyle(this.eclPopoverContainerElement().nativeElement, '--ecl-popover-position',\n                    `${Math.round(this.toggleRect.left - popoverRect.left + this.toggleRect.width / 2)}px`);\n            }\n        }\n    }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "jsdoctags": [
                 {
-                    "pos": 630,
-                    "end": 767,
+                    "pos": 701,
+                    "end": 838,
                     "kind": 321,
                     "id": 0,
                     "flags": 16777216,
@@ -74432,7 +74228,7 @@
                         "name": "cssClasses",
                         "type": "string",
                         "returnType": "string",
-                        "line": 73,
+                        "line": 80,
                         "rawdescription": "\n",
                         "description": ""
                     }
@@ -74443,7 +74239,7 @@
                         "name": "popoverToggleAriaControls",
                         "type": "unknown",
                         "returnType": "string | null",
-                        "line": 125,
+                        "line": 136,
                         "rawdescription": "\n\nReturns the value of the `aria-controls` attribute from the toggle element,\nif available. Used for accessibility linking.\n",
                         "description": "<p>Returns the value of the <code>aria-controls</code> attribute from the toggle element,\nif available. Used for accessibility linking.</p>\n"
                     }