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

package/fesm2022/eui-ecl-components-ecl-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-notification.mjs","sources":["../../components/ecl-notification/events/ecl-notification-close.event.ts","../../components/ecl-notification/ecl-notification.component.ts","../../components/ecl-notification/ecl-notification.component.html","../../components/ecl-notification/ecl-notification-title.directive.ts","../../components/ecl-notification/ecl-notification.module.ts","../../components/ecl-notification/index.ts","../../components/ecl-notification/eui-ecl-components-ecl-notification.ts"],"sourcesContent":["import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted when the notification is closed.\n *\n * Can be used to prevent default close behavior by calling `event.preventDefault()`.\n */\nexport class EclNotificationCloseEvent extends EclBaseEvent {\n}\n","import { Component, Input, Output, EventEmitter, HostBinding, booleanAttribute, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclNotificationCloseEvent } from './events/ecl-notification-close.event';\nimport { AsyncPipe, TitleCasePipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n@Component({\n    selector: 'ecl-notification',\n    templateUrl: './ecl-notification.component.html',\n    imports: [\n        AsyncPipe,\n        TitleCasePipe,\n        ...EUI_ECL_ICON,\n        ...EUI_ECL_BUTTON,\n        TranslateModule,\n    ],\n})\nexport class EclNotificationComponent extends ECLBaseDirective {\n    eclThemeService = inject(EclThemeService);\n\n    /**\n     * The title of the notification. This is displayed inside the component.\n     */\n    @Input() notificationTitle: string;\n\n    /**\n     * Defines the visual style of the notification.\n     * Can be one of: 'info' | 'success' | 'warning' | 'error'.\n     * Default is 'info'.\n     */\n    @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n    /**\n     * Controls the visibility of the notification.\n     * When false, the component is hidden using CSS utility class.\n     */\n    @Input({ transform: booleanAttribute }) isVisible = true;\n\n    /**\n     * Indicates whether the close button is displayed.\n     */\n    @Input({ transform: booleanAttribute }) isCloseable = true;\n\n    /**\n     * Emits an event when the close button is clicked.\n     * Consumers can call `preventDefault()` on the emitted event to prevent the notification from closing.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() close = new EventEmitter<EclNotificationCloseEvent>();\n\n    /**\n     * The ARIA role for the component. Set to \"alert\" by default.\n     */\n    @HostBinding('attr.role')\n    role = 'alert';\n\n    private variantTitleIconMapping = new Map<string, { title: string, icon: string }>([\n        ['info', { title: 'information', icon: 'information' }],\n        ['success', { title: 'success', icon: 'check-filled' }],\n        ['warning', { title: 'warning', icon: 'warning' }],\n        ['error', { title: 'error', icon: 'error' }],\n    ]);\n\n    /**\n     * Applies the `ecl-u-d-none` utility class when the notification is not visible.\n     */\n    @HostBinding('class.ecl-u-d-none')\n    get isHidden(): boolean {\n        return !this.isVisible;\n    }\n\n    /**\n     * Computes the CSS classes applied to the host element, including the modifier for the current variant.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Returns the default title text based on the current variant.\n     */\n    get title(): string {\n        return this.titleAndIconBaseOnVariant.title;\n    }\n\n    /**\n     * Returns the icon name based on the current variant.\n     */\n    get icon(): string {\n        return this.titleAndIconBaseOnVariant.icon;\n    }\n\n    /**\n     * Returns a mapping of title and icon based on the current variant.\n     */\n    get titleAndIconBaseOnVariant(): { title: string, icon: string } {\n        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `close` event with an instance of `EclNotificationCloseEvent`.\n     * If the event is not prevented, the notification is hidden.\n     */\n    onCloseClick(evt: Event): void {\n        const event = new EclNotificationCloseEvent();\n        this.close.next(event);\n        if (!event.defaultPrevented) {\n            this.isVisible = false;\n        }\n    }\n}\n","@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to a notification title element.\n * Adds the appropriate ECL class for styling the notification title.\n */\n@Directive({\n    selector: '[eclNotificationTitle]',\n})\nexport class EclNotificationTitleDirective extends ECLBaseDirective {\n    /**\n     * Host binding for applying the ECL notification title CSS class.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\n/**\n * @description\n * Module that provides the EclNotification component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_NOTIFICATION} instead.\n */\n@NgModule({\n  imports: [EclNotificationComponent, EclNotificationTitleDirective],\n  exports: [EclNotificationComponent, EclNotificationTitleDirective],\n})\nexport class EclNotificationModule {}\n","import { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\nexport * from './ecl-notification.module';\nexport * from './ecl-notification.component';\nexport * from './ecl-notification-title.directive';\nexport * from './events/ecl-notification-close.event';\n\nexport const EUI_ECL_NOTIFICATION = [\n  EclNotificationComponent,\n  EclNotificationTitleDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-notification.mjs","sources":["../../components/ecl-notification/events/ecl-notification-close.event.ts","../../components/ecl-notification/ecl-notification.component.ts","../../components/ecl-notification/ecl-notification.component.html","../../components/ecl-notification/ecl-notification-title.directive.ts","../../components/ecl-notification/ecl-notification.module.ts","../../components/ecl-notification/index.ts","../../components/ecl-notification/eui-ecl-components-ecl-notification.ts"],"sourcesContent":["import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted when the notification is closed.\n *\n * Can be used to prevent default close behavior by calling `event.preventDefault()`.\n */\nexport class EclNotificationCloseEvent extends EclBaseEvent {\n}\n","import { Component, Input, Output, EventEmitter, HostBinding, booleanAttribute, inject } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclThemeService } from '@eui/ecl/core';\nimport { EclNotificationCloseEvent } from './events/ecl-notification-close.event';\nimport { AsyncPipe, TitleCasePipe } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\n\n@Component({\n    selector: 'ecl-notification',\n    templateUrl: './ecl-notification.component.html',\n    imports: [\n        AsyncPipe,\n        TitleCasePipe,\n        ...EUI_ECL_ICON,\n        ...EUI_ECL_BUTTON,\n        TranslateModule,\n    ],\n})\nexport class EclNotificationComponent extends ECLBaseDirective {\n    eclThemeService = inject(EclThemeService);\n\n    /**\n     * The title of the notification. This is displayed inside the component.\n     */\n    @Input() notificationTitle: string;\n\n    /**\n     * Defines the visual style of the notification.\n     * Can be one of: 'info' | 'success' | 'warning' | 'error'.\n     * Default is 'info'.\n     */\n    @Input() variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n    /**\n     * Controls the visibility of the notification.\n     * When false, the component is hidden using CSS utility class.\n     */\n    @Input({ transform: booleanAttribute }) isVisible = true;\n\n    /**\n     * Indicates whether the close button is displayed.\n     */\n    @Input({ transform: booleanAttribute }) isCloseable = true;\n\n    /**\n     * Emits an event when the close button is clicked.\n     * Consumers can call `preventDefault()` on the emitted event to prevent the notification from closing.\n     */\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() close = new EventEmitter<EclNotificationCloseEvent>();\n\n    /**\n     * The ARIA role for the component. Set to \"alert\" by default.\n     */\n    @HostBinding('attr.role')\n    role = 'alert';\n\n    private variantTitleIconMapping = new Map<string, { title: string, icon: string }>([\n        ['info', { title: 'information', icon: 'information' }],\n        ['success', { title: 'success', icon: 'check-filled' }],\n        ['warning', { title: 'warning', icon: 'warning' }],\n        ['error', { title: 'error', icon: 'error' }],\n    ]);\n\n    /**\n     * Applies the `ecl-u-d-none` utility class when the notification is not visible.\n     */\n    @HostBinding('class.ecl-u-d-none')\n    get isHidden(): boolean {\n        return !this.isVisible;\n    }\n\n    /**\n     * Computes the CSS classes applied to the host element, including the modifier for the current variant.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification'), this.variant ? `ecl-notification--${this.variant}` : ''].join(' ').trim();\n    }\n\n    /**\n     * Returns the default title text based on the current variant.\n     */\n    get title(): string {\n        return this.titleAndIconBaseOnVariant.title;\n    }\n\n    /**\n     * Returns the icon name based on the current variant.\n     */\n    get icon(): string {\n        return this.titleAndIconBaseOnVariant.icon;\n    }\n\n    /**\n     * Returns a mapping of title and icon based on the current variant.\n     */\n    get titleAndIconBaseOnVariant(): { title: string, icon: string } {\n        return this.variantTitleIconMapping.get(this.variant) || { title: 'information', icon: 'information' };\n    }\n\n    /**\n     * Handles the click event on the close button.\n     * Emits a `close` event with an instance of `EclNotificationCloseEvent`.\n     * If the event is not prevented, the notification is hidden.\n     */\n    onCloseClick(evt: Event): void {\n        const event = new EclNotificationCloseEvent();\n        this.close.next(event);\n        if (!event.defaultPrevented) {\n            this.isVisible = false;\n        }\n    }\n}\n","@if( eclThemeService.isEC$ | async ){\n    <ecl-icon size=\"l\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n} @else {\n    <ecl-icon size=\"m\" class=\"ecl-notification__icon\" [icon]=\"icon\" [title]=\"title | titlecase \"></ecl-icon>\n}\n\n<div class=\"ecl-notification__content\">\n    @if(isCloseable){\n        <button eclButton variant=\"tertiary\" class=\"ecl-notification__close ecl-button--neutral\" isIconOnly (click)=\"onCloseClick($event)\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.CLOSE' | translate }}\n            </span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n    }\n\n    <ng-content select=\"[eclNotificationTitle]\"></ng-content>\n    <div class=\"ecl-notification__description\"><ng-content></ng-content></div>\n</div>\n","import { Directive, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Directive applied to a notification title element.\n * Adds the appropriate ECL class for styling the notification title.\n */\n@Directive({\n    selector: '[eclNotificationTitle]',\n})\nexport class EclNotificationTitleDirective extends ECLBaseDirective {\n    /**\n     * Host binding for applying the ECL notification title CSS class.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-notification__title')].join(' ').trim();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\n/**\n * @description\n * Module that provides the EclNotification component and its dependencies.\n *\n * @deprecated Use {@link EUI_ECL_NOTIFICATION} instead.\n */\n@NgModule({\n  imports: [EclNotificationComponent, EclNotificationTitleDirective],\n  exports: [EclNotificationComponent, EclNotificationTitleDirective],\n})\nexport class EclNotificationModule {}\n","import { EclNotificationComponent } from './ecl-notification.component';\nimport { EclNotificationTitleDirective } from './ecl-notification-title.directive';\n\nexport * from './ecl-notification.module';\nexport * from './ecl-notification.component';\nexport * from './ecl-notification-title.directive';\nexport * from './events/ecl-notification-close.event';\n\nexport const EUI_ECL_NOTIFICATION = [\n  EclNotificationComponent,\n  EclNotificationTitleDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, EventEmitter, HostListener, HostBinding, Output, Directive, Renderer2, ContentChild, ViewChild, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, EventEmitter, HostListener, HostBinding, Output, Directive, output, Renderer2, ContentChild, ViewChild, Component, NgModule } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import * as i1 from '@eui/ecl/core';
 import { ECLBaseDirective, ECLClickOutsideDirective } from '@eui/ecl/core';
@@ -80,6 +80,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5",
 class EclPopoverComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
+        this.onOpen = output();
+        this.onClose = output();
         /**
          * Controls visibility of the popover. `true` means hidden.
          */
@@ -93,6 +95,8 @@ class EclPopoverComponent extends ECLBaseDirective {
         this.pushBottomClass = 'ecl-popover--push-bottom';
         this.pushLeftClass = 'ecl-popover--push-left';
         this.pushRightClass = 'ecl-popover--push-right';
+        this.toggleRect = null;
+        this.scrollableParent = null;
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
     }
@@ -108,9 +112,15 @@ class EclPopoverComponent extends ECLBaseDirective {
      */
     ngAfterContentInit() {
         this.eclPopoverToggle?.click.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.isHidden = !this.isHidden;
+            if (this.isHidden) {
+                this.doOpen();
+            }
+            else {
+                this.doClose();
+            }
             this.checkPosition(); // TODO: wrap on a platformBrowser check as it calls window and document
         });
+        this.scrollableParent = this.getClosestScrollableParent(this.eclPopoverToggle.hostElementRef.nativeElement);
     }
     /**
      * Lifecycle hook that cleans up subscriptions on destroy.
@@ -132,14 +142,14 @@ class EclPopoverComponent extends ECLBaseDirective {
      */
     onClickOutsidePopover() {
         if (!this.isHidden) {
-            this.onClose();
+            this.doClose();
         }
     }
     /**
      * Closes the popover when the Escape key is pressed.
      */
     onEscapeKeydownHandler() {
-        this.isHidden = true;
+        this.doClose();
     }
     /**
      * Recalculates popover position when the window is resized.
@@ -154,11 +164,70 @@ class EclPopoverComponent extends ECLBaseDirective {
         this.checkPosition();
     }
     /**
-     * Public method used to close the popover and reset related styles.
+     * Protected method used to close the popover and reset related styles.
      */
-    onClose() {
+    doClose() {
         this.isHidden = true;
-        this.resetStyless();
+        this.resetStyles();
+        this.onClose.emit();
+    }
+    doOpen() {
+        this.isHidden = false;
+        this.onOpen.emit();
+    }
+    getClosestScrollableParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            const { overflowY, overflowX } = getComputedStyle(parent);
+            const isScrollableY = (overflowY === 'auto' || overflowY === 'scroll') &&
+                parent.scrollHeight > parent.clientHeight;
+            const isScrollableX = (overflowX === 'auto' || overflowX === 'scroll') &&
+                parent.scrollWidth > parent.clientWidth;
+            if (isScrollableY || isScrollableX) {
+                return parent; // Found the closest scrollable parent
+            }
+            parent = parent.parentElement;
+        }
+        return document.body;
+    }
+    calculateAvailableSpace(toggleElement, scrollableParent = null) {
+        // Get the bounding rect for the toggle element
+        this.toggleRect = toggleElement.getBoundingClientRect();
+        // If no scrollable parent is provided, use the viewport
+        const containerRect = scrollableParent
+            ? scrollableParent.getBoundingClientRect()
+            : {
+                top: 0,
+                left: 0,
+                right: window.innerWidth,
+                bottom: window.innerHeight,
+            };
+        const containerWidth = containerRect.right - containerRect.left;
+        const containerHeight = containerRect.bottom - containerRect.top;
+        // Calculate the space available in the four directions
+        const containerBottom = Math.max(0, window.innerHeight - containerRect.bottom);
+        const toggleBottom = Math.max(0, window.innerHeight - this.toggleRect.bottom);
+        const spaceBottom = Math.max(0, toggleBottom - containerBottom);
+        // Top Space (from toggle's top to container's top)
+        const containerTop = Math.max(0, containerRect.top);
+        const toggleTop = Math.max(0, this.toggleRect.top);
+        const spaceTop = Math.max(0, toggleTop - containerTop);
+        // Right Space (from toggle's right to container's right)
+        const containerRight = Math.max(0, window.innerWidth - containerRect.right);
+        const toggleRight = Math.max(0, window.innerWidth - this.toggleRect.right);
+        const spaceRight = Math.max(0, toggleRight - containerRight);
+        // Left Space (from toggle's left to container's left)
+        const containerLeft = Math.max(0, containerRect.left);
+        const toggleLeft = Math.max(0, this.toggleRect.left);
+        const spaceLeft = Math.max(0, toggleLeft - containerLeft);
+        return {
+            containerWidth,
+            containerHeight,
+            spaceTop,
+            spaceBottom,
+            spaceLeft,
+            spaceRight,
+        };
     }
     checkPosition() {
         setTimeout(() => {
@@ -168,69 +237,58 @@ class EclPopoverComponent extends ECLBaseDirective {
         });
     }
     positionPopover() {
-        this.resetStyless();
-        const toggleElement = this.eclPopoverToggle.getHostElement();
-        const toggleRect = toggleElement.getBoundingClientRect();
-        const screenHeight = window.innerHeight;
-        const screenWidth = window.innerWidth;
-        // Calculate available space in each direction
-        const spaceTop = toggleRect.top;
-        const spaceBottom = screenHeight - toggleRect.bottom;
-        const spaceLeft = toggleRect.left;
-        const spaceRight = screenWidth - toggleRect.right;
+        this.resetStyles();
+        const { containerWidth, spaceTop, spaceBottom, spaceLeft, spaceRight } = this.calculateAvailableSpace(this.eclPopoverToggle.getHostElement(), this.scrollableParent);
         // Find the direction with the most available space
-        if ((spaceTop > spaceBottom) && (spaceTop > spaceLeft) && (spaceTop > spaceRight)) {
-            this.renderer.addClass(this.el.nativeElement, this.topClass);
+        const positioningClass = 'ecl-popover--';
+        let direction = '';
+        if (spaceTop > spaceBottom &&
+            spaceTop > spaceLeft &&
+            spaceTop > spaceRight) {
+            direction = 'top';
         }
-        else if ((spaceBottom > spaceLeft) && (spaceBottom > spaceRight)) {
-            this.renderer.addClass(this.el.nativeElement, this.bottomClass);
+        else if (spaceBottom > spaceLeft && spaceBottom > spaceRight) {
+            direction = 'bottom';
         }
         else if (spaceLeft > spaceRight) {
-            this.isLeft = true;
-            this.renderer.addClass(this.el.nativeElement, this.leftClass);
+            direction = 'left';
         }
         else {
-            this.isRight = true;
-            this.renderer.addClass(this.el.nativeElement, this.rightClass);
+            direction = 'right';
         }
-        this.handleScrollableWidth(spaceLeft, spaceRight, screenWidth);
-        this.handlePushClass(screenWidth, screenHeight);
-    }
-    handleScrollableWidth(spaceLeft, spaceRight, screenWidth) {
+        this.renderer.addClass(this.el.nativeElement, `${positioningClass}${direction}`);
         // Try to use as much of the available width, respecting the max-width set.
-        const scrollable = this.eclPopoverScrollableElement.nativeElement;
-        const styles = getComputedStyle(scrollable);
+        const styles = window.getComputedStyle(this.eclPopoverScrollableElement.nativeElement);
         const maxWidth = parseInt(styles.getPropertyValue('max-width'), 10);
         const minWidth = parseInt(styles.getPropertyValue('min-width'), 10);
         const padding = parseInt(styles.getPropertyValue('padding-left'), 10) * 2;
-        const toggleElement = this.eclPopoverToggle.getHostElement();
-        const toggleRect = toggleElement.getBoundingClientRect();
-        let availableSpace = 0;
-        if (this.isLeft || this.isRight) {
-            availableSpace = (this.isLeft ? spaceLeft : spaceRight) * 0.9;
-        }
-        else {
-            const centerPosition = (toggleRect.right - toggleRect.left) / 2;
-            availableSpace = (screenWidth - centerPosition + this.eclPopoverContainerElement.nativeElement.offsetWidth / 2) * 0.9;
+        // We consider 90% of the biggest space available
+        const horizontalSpace = Math.max(spaceLeft, spaceRight) * 0.9;
+        let targetWidth;
+        // If the available space is larger than maxWidth (plus padding), set to maxWidth
+        if (maxWidth + padding < horizontalSpace ||
+            (direction !== 'left' &&
+                direction !== 'right' &&
+                containerWidth > maxWidth)) {
+            targetWidth = maxWidth;
         }
-        if (maxWidth + padding < availableSpace) {
-            this.renderer.setStyle(scrollable, 'width', `${maxWidth}px`);
+        // If the available space is smaller than minWidth (plus padding), set to minWidth
+        else if (horizontalSpace < minWidth + padding) {
+            targetWidth = minWidth;
         }
-        else if (availableSpace < minWidth + padding) {
-            this.renderer.setStyle(scrollable, 'width', `${minWidth}px`);
+        // Otherwise, set the width to the available space minus the padding
+        else if (direction === 'left' || direction === 'right') {
+            targetWidth = horizontalSpace - padding;
         }
         else {
-            this.renderer.setStyle(scrollable, 'width', `${availableSpace - padding}px`);
+            targetWidth = (horizontalSpace - padding) * 2;
         }
+        // Ensure the width does not exceed available space
+        this.renderer.setStyle(this.eclPopoverScrollableElement.nativeElement, 'width', `${targetWidth}px`);
+        this.handlePushClass(direction);
     }
-    resetStyless() {
+    resetStyles() {
         const popoverContainer = this.eclPopoverContainerElement.nativeElement;
-        this.isPushLeft = false;
-        this.isPushRight = false;
-        this.isPushTop = false;
-        this.isPushBottom = false;
-        this.isLeft = false;
-        this.isRight = false;
         this.popoverPosition = null;
         this.renderer.removeClass(this.el.nativeElement, this.topClass);
         this.renderer.removeClass(this.el.nativeElement, this.bottomClass);
@@ -240,6 +298,7 @@ class EclPopoverComponent extends ECLBaseDirective {
         this.renderer.removeClass(this.el.nativeElement, this.pushBottomClass);
         this.renderer.removeClass(this.el.nativeElement, this.pushLeftClass);
         this.renderer.removeClass(this.el.nativeElement, this.pushRightClass);
+        this.renderer.removeStyle(popoverContainer, '--ecl-popover-position');
         this.renderer.removeStyle(popoverContainer, 'top');
         this.renderer.removeStyle(popoverContainer, 'right');
         this.renderer.removeStyle(popoverContainer, 'left');
@@ -247,64 +306,76 @@ class EclPopoverComponent extends ECLBaseDirective {
         this.renderer.removeStyle(popoverContainer, 'transform');
         this.renderer.removeStyle(this.eclPopoverScrollableElement.nativeElement, 'width');
     }
-    handlePushClass(screenWidth, screenHeight) {
-        const toggleElement = this.eclPopoverToggle.getHostElement();
-        const toggleRect = toggleElement.getBoundingClientRect();
-        const popoverRect = this.eclPopoverContainerElement.nativeElement.getBoundingClientRect();
-        const popoverContainer = this.eclPopoverContainerElement.nativeElement;
-        if (this.isLeft || this.isRight) {
-            if (popoverRect.top < 0) {
-                this.renderer.addClass(this.el.nativeElement, this.pushTopClass);
-                this.renderer.setStyle(popoverContainer, 'top', `-${Math.round(toggleRect.top)}px`);
-                this.isPushTop = true;
-            }
-            else if (popoverRect.bottom > screenHeight) {
-                this.renderer.addClass(this.el.nativeElement, this.pushBottomClass);
-                this.renderer.setStyle(popoverContainer, 'bottom', `-${Math.round(screenHeight - (toggleRect.bottom + 8))}px`);
-                this.isPushBottom = true;
-            }
-        }
-        else {
-            if (popoverRect.left < 0) {
-                this.renderer.addClass(this.el.nativeElement, this.pushLeftClass);
-                this.renderer.setStyle(popoverContainer, 'left', `-${toggleRect.left}px`);
-                this.renderer.setStyle(popoverContainer, 'right', 'auto');
-                this.renderer.setStyle(popoverContainer, 'transform', 'none');
-                this.isPushLeft = true;
+    /**
+   * Check whether the popover is going out of its scrollable container and apply the needed repositioning.
+   *
+   * @param {string} direction
+   */
+    handlePushClass(direction) {
+        requestAnimationFrame(() => {
+            const popoverRect = this.eclPopoverContainerElement.nativeElement.getBoundingClientRect();
+            const scrollableRect = this.scrollableParent.getBoundingClientRect();
+            const containerBottom = scrollableRect.bottom > window.innerHeight ? 0 : window.innerHeight - scrollableRect.bottom;
+            const containerTop = scrollableRect.top > window.innerHeight ? 0 : scrollableRect.top;
+            const leftOverflow = scrollableRect.left > popoverRect.left;
+            const rightOverflow = scrollableRect.right < popoverRect.right;
+            const topOverflow = popoverRect.top < containerTop;
+            const bottomOverflow = containerBottom > window.innerHeight - popoverRect.bottom;
+            if (direction === 'left' || direction === 'right') {
+                if (topOverflow) {
+                    this.renderer.addClass(this.el.nativeElement, this.pushTopClass);
+                    // Push the popover to the top edge of the container
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'top', `-${Math.round(this.toggleRect.top)}px`);
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'bottom', '');
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'transform', '');
+                }
+                if (bottomOverflow) {
+                    this.renderer.addClass(this.el.nativeElement, this.pushBottomClass);
+                    // Push the popover to the bottom edge of the container
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'bottom', `-${window.innerHeight - this.toggleRect.bottom - containerBottom}px`);
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'top', '');
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'transform', '');
+                }
             }
-            if (popoverRect.right > screenWidth) {
-                this.renderer.addClass(this.el.nativeElement, this.pushRightClass);
-                this.renderer.setStyle(popoverContainer, 'left', `-${screenWidth - toggleRect.right}px`);
-                this.renderer.setStyle(popoverContainer, 'right', 'auto');
-                this.renderer.setStyle(popoverContainer, 'transform', 'none');
-                this.isPushRight = true;
+            else {
+                if (leftOverflow) {
+                    this.renderer.addClass(this.el.nativeElement, this.pushLeftClass);
+                    // Push the popover 8px to the left edge of the container
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'left', `-${this.toggleRect.left - scrollableRect.left - 8}px`);
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'right', 'auto');
+                }
+                if (rightOverflow) {
+                    this.renderer.addClass(this.el.nativeElement, this.pushRightClass);
+                    // Push the popover 8px to the right edge of the container
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'right', `-${scrollableRect.right - this.toggleRect.right - 8}px`);
+                    this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, 'left', 'auto');
+                }
             }
-        }
-        this.handleArrowPosition();
+            this.handleArrowPosition(direction);
+        });
     }
-    handleArrowPosition() {
-        const toggleElement = this.eclPopoverToggle.getHostElement();
-        const toggleRect = toggleElement.getBoundingClientRect();
+    handleArrowPosition(direction) {
         const popoverRect = this.eclPopoverContainerElement.nativeElement.getBoundingClientRect();
-        if (this.isLeft || this.isRight) {
-            if (this.isPushBottom) {
-                this.popoverPosition = `${Math.round(toggleRect.top - popoverRect.top + toggleRect.height / 2)}px`;
+        if (direction === 'left' || direction === 'right') {
+            if (this.el.nativeElement.classList.contains(this.pushBottomClass)) {
+                this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, '--ecl-popover-position', `${Math.round(this.toggleRect.top - popoverRect.top + this.toggleRect.height / 2)}px`);
             }
-            else if (this.isPushTop) {
-                this.popoverPosition = `${Math.round(popoverRect.top + toggleRect.top + toggleRect.height / 2)}px`;
+            else if (this.el.nativeElement.classList.contains(this.pushTopClass)) {
+                this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, '--ecl-popover-position', `${Math.round(popoverRect.top + this.toggleRect.top + this.toggleRect.height / 2)}px`);
             }
         }
         else {
-            if (this.isPushRight) {
-                this.popoverPosition = `${Math.round(popoverRect.right - (toggleRect.right - toggleRect.width / 2))}px`;
+            // eslint-disable-next-line no-lonely-if
+            if (this.el.nativeElement.classList.contains(this.pushRightClass)) {
+                this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, '--ecl-popover-position', `${Math.round(popoverRect.right - (this.toggleRect.right - this.toggleRect.width / 2))}px`);
             }
-            else if (this.isPushLeft) {
-                this.popoverPosition = `${Math.round(popoverRect.left + toggleRect.left + toggleRect.width / 2)}px`;
+            else if (this.el.nativeElement.classList.contains(this.pushLeftClass)) {
+                this.renderer.setStyle(this.eclPopoverContainerElement.nativeElement, '--ecl-popover-position', `${Math.round(this.toggleRect.left - popoverRect.left + this.toggleRect.width / 2)}px`);
             }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclPopoverComponent, isStandalone: true, selector: "ecl-popover", host: { listeners: { "eclClickOutside": "onClickOutsidePopover()", "document:keydown.escape": "onEscapeKeydownHandler()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPopoverToggle", first: true, predicate: EclPopoverToggleDirective, descendants: true }], viewQueries: [{ propertyName: "eclPopoverContainerElement", first: true, predicate: ["container"], descendants: true }, { propertyName: "eclPopoverScrollableElement", first: true, predicate: ["scrollable"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclPopoverToggle]\"></ng-content>\n\n<div #container class=\"ecl-popover__container\" [style.--ecl-popover-position]=\"popoverPosition\" [hidden]=\"isHidden\" [attr.id]=\"popoverToggleAriaControls\">\n    <div #scrollable class=\"ecl-popover__scrollable\">\n        <button eclButton variant=\"tertiary\" (click)=\"onClose()\" class=\"ecl-popover__close\" isIconOnly>\n            <span eclButtonLabel>Close</span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n        <ng-content select=\"[eclPopoverContent]\"></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0-next.5", type: EclPopoverComponent, isStandalone: true, selector: "ecl-popover", outputs: { onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "eclClickOutside": "onClickOutsidePopover()", "document:keydown.escape": "onEscapeKeydownHandler()", "window:resize": "onWindowResize()", "document:scroll": "onDocumentScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPopoverToggle", first: true, predicate: EclPopoverToggleDirective, descendants: true }], viewQueries: [{ propertyName: "eclPopoverContainerElement", first: true, predicate: ["container"], descendants: true }, { propertyName: "eclPopoverScrollableElement", first: true, predicate: ["scrollable"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ECLClickOutsideDirective, outputs: ["eclClickOutside", "eclClickOutside"] }], ngImport: i0, template: "<ng-content select=\"[eclPopoverToggle]\"></ng-content>\n\n<div #container class=\"ecl-popover__container\" [style.--ecl-popover-position]=\"popoverPosition\" [hidden]=\"isHidden\"\n    [attr.id]=\"popoverToggleAriaControls\">\n    <div #scrollable class=\"ecl-popover__scrollable\">\n        <button eclButton variant=\"tertiary\" (click)=\"doClose()\" class=\"ecl-popover__close\" isIconOnly>\n            <span eclButtonLabel>Close</span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n        <ng-content select=\"[eclPopoverContent]\"></ng-content>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5", ngImport: i0, type: EclPopoverComponent, decorators: [{
             type: Component,
@@ -317,7 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0-next.5",
                     ], imports: [
                         ...EUI_ECL_BUTTON,
                         ...EUI_ECL_ICON,
-                    ], template: "<ng-content select=\"[eclPopoverToggle]\"></ng-content>\n\n<div #container class=\"ecl-popover__container\" [style.--ecl-popover-position]=\"popoverPosition\" [hidden]=\"isHidden\" [attr.id]=\"popoverToggleAriaControls\">\n    <div #scrollable class=\"ecl-popover__scrollable\">\n        <button eclButton variant=\"tertiary\" (click)=\"onClose()\" class=\"ecl-popover__close\" isIconOnly>\n            <span eclButtonLabel>Close</span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n        <ng-content select=\"[eclPopoverContent]\"></ng-content>\n    </div>\n</div>\n" }]
+                    ], template: "<ng-content select=\"[eclPopoverToggle]\"></ng-content>\n\n<div #container class=\"ecl-popover__container\" [style.--ecl-popover-position]=\"popoverPosition\" [hidden]=\"isHidden\"\n    [attr.id]=\"popoverToggleAriaControls\">\n    <div #scrollable class=\"ecl-popover__scrollable\">\n        <button eclButton variant=\"tertiary\" (click)=\"doClose()\" class=\"ecl-popover__close\" isIconOnly>\n            <span eclButtonLabel>Close</span>\n            <ecl-icon icon=\"close\" size=\"m\"></ecl-icon>\n        </button>\n        <ng-content select=\"[eclPopoverContent]\"></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { eclPopoverContainerElement: [{
                 type: ViewChild,
                 args: ['container']