@acorex/components 21.0.1-next.8 → 21.0.1-next.81

package/fesm2022/acorex-components-popover.mjs

@@ -1,12 +1,11 @@
 import { MXBaseComponent, convertToPlacement, AXFocusableComponent, AXComponent } from '@acorex/cdk/common';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 import { AXPlatform } from '@acorex/core/platform';
-import { AXHtmlUtil } from '@acorex/core/utils';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { AXTranslationService } from '@acorex/core/translation';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, PLATFORM_ID, Renderer2, input, EventEmitter, ElementRef, TemplateRef, Output, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { Subject, fromEvent, delay, debounceTime } from 'rxjs';
+import { inject, DOCUMENT, PLATFORM_ID, input, afterNextRender, EventEmitter, ElementRef, TemplateRef, Output, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Subject, fromEvent, delay } from 'rxjs';
 
 /**
  * @category Components
@@ -15,45 +14,67 @@ import { Subject, fromEvent, delay, debounceTime } from 'rxjs';
 class AXPopoverComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.#platform = inject(AXPlatform);
+        this.platform = inject(AXPlatform);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
-        this.renderer = inject(Renderer2);
-        this.onKeyDownListenerFn = () => undefined;
+        this.overlayService = inject(AXOverlayService);
+        this.onKeyDownHandler = null;
         /** @ignore */
-        this._platform = inject(AXPlatform);
+        this._overlayRef = null;
         /** @ignore */
-        this._overlay = inject(Overlay);
+        this._lastActiveElement = null;
         /** @ignore */
-        this._isMouseOverButton = false;
+        this._targetEvents = {};
         /** @ignore */
-        this._isMouseOverTooltip = false;
+        this._outsideClickHandler = null;
         /** @ignore */
-        this._targetEvents = {};
+        this._scrollHandler = null;
         /** @ignore */
-        this._overlayEvents = {};
+        this._scrollListenerActive = false;
+        /** @ignore */
+        this.resizeObserver = null;
         /** @ignore */
         this.resize$ = new Subject();
-        //
         /** @ignore */
         this._disabled = false;
-        this.width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.width = input('fit-content', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.disablePanelClass = input(false, ...(ngDevMode ? [{ debugName: "disablePanelClass" }] : []));
+        this.translateService = inject(AXTranslationService);
+        this.#init = afterNextRender(() => {
+            const lang = this.translateService.getActiveLang();
+            let defaultPlacementDirection;
+            if (lang === 'en-US') {
+                defaultPlacementDirection = 'bottom-start';
+            }
+            else {
+                defaultPlacementDirection = 'bottom-end';
+            }
+            if (!this.placement)
+                this.placement = defaultPlacementDirection;
+            const converted = this.placement
+                ? convertToPlacement(this.placement)
+                : convertToPlacement(defaultPlacementDirection);
+            this._placements = converted;
+            this.resize$.subscribe(() => {
+                if (this.isOpen) {
+                    this.updatePosition();
+                }
+            });
+        });
         /** @ignore */
         this._offsetX = 0;
-        //
         /** @ignore */
         this._offsetY = 0;
         /** @ignore */
-        this._defautPlacements = convertToPlacement('bottom-start');
+        this._placements = [];
         /** @ignore */
-        this._placements = [...this._defautPlacements];
+        this._placement = null;
         /** @ignore */
-        this._placement = this._placements;
+        this._componentRef = null;
         /** @ignore */
         this._openOn = 'toggle';
         /** @ignore */
         this._closeOn = 'clickOut';
-        //
         /**
          * Determines if a backdrop should be displayed behind the popover.
          */
@@ -61,16 +82,19 @@ class AXPopoverComponent extends MXBaseComponent {
         /**
          * Delay in milliseconds before the popover opens after a trigger event.
          */
-        this.openAfter = 200;
+        this._openAfter = 200;
         /**
          * Delay in milliseconds before the popover closes after a trigger event.
          */
-        this.closeAfter = 200;
+        this._closeAfter = 200;
+        /**
+         * Whether to update the popover position when scrolling.
+         */
+        this.repositionOnScroll = true;
         /**
          * Enables or disables adaptivity.
          */
         this.adaptivityEnabled = false;
-        //
         /**
          * Emits when the component is opened.
          * @event
@@ -82,7 +106,7 @@ class AXPopoverComponent extends MXBaseComponent {
          */
         this.onClosed = new EventEmitter();
     }
-    #platform;
+    #init;
     /**
      * Gets or sets whether the popover is disabled.
      * When disabled, the popover will not open and will close if already open.
@@ -149,7 +173,6 @@ class AXPopoverComponent extends MXBaseComponent {
             this._target = v.nativeElement;
         else if (typeof v?.getHostElement == 'function')
             this._target = v.getHostElement();
-        //
         this.bindTargetEvents();
     }
     /**
@@ -166,10 +189,14 @@ class AXPopoverComponent extends MXBaseComponent {
             name: 'placement',
             value: v,
             afterCallback: (o, n) => {
+                if (!n)
+                    return;
                 const converted = convertToPlacement(n);
-                this._placements = converted.length ? converted : this._defautPlacements;
+                this._placements = converted;
                 this.updateOffset();
-                this.updatePositionStrategy();
+                if (this._overlayRef) {
+                    this._overlayRef.updatePosition();
+                }
             },
         });
     }
@@ -205,7 +232,6 @@ class AXPopoverComponent extends MXBaseComponent {
     }
     /**
      * Sets the trigger for closing the popover and rebinds target events.
-     * @param v
      */
     set closeOn(v) {
         this.setOption({
@@ -216,6 +242,20 @@ class AXPopoverComponent extends MXBaseComponent {
             },
         });
     }
+    get openAfter() {
+        return this._openAfter;
+    }
+    set openAfter(value) {
+        this._openAfter = value;
+        this.bindTargetEvents();
+    }
+    get closeAfter() {
+        return this._closeAfter;
+    }
+    set closeAfter(value) {
+        this._closeAfter = value;
+        this.bindTargetEvents();
+    }
     /** @ignore */
     _emitOnOpenedEvent() {
         this.onOpened.emit({
@@ -230,25 +270,12 @@ class AXPopoverComponent extends MXBaseComponent {
             htmlElement: this.getHostElement(),
         });
     }
-    //
-    /** @ignore */
-    _handleMouseEnter(e) {
-        this._isMouseOverTooltip = true;
-    }
-    /** @ignore */
-    _handleMouseLeave(e) {
-        this._isMouseOverTooltip = false;
-        setTimeout(() => {
-            if (!this._isMouseOverButton && this.closeOn == 'leave') {
-                this.close();
-            }
-        }, 250);
-    }
     /** @ignore */
     removeTargetEvents() {
         Object.entries(this._targetEvents).forEach((e) => {
-            e[1].unsubscribe();
+            e[1]?.unsubscribe();
         });
+        this._targetEvents = {};
     }
     /** @ignore */
     bindTargetEvents() {
@@ -257,84 +284,126 @@ class AXPopoverComponent extends MXBaseComponent {
             return;
         const targetMouseEnter$ = fromEvent(this._target, 'mouseenter');
         const targetMouseLeave$ = fromEvent(this._target, 'mouseleave');
-        if (this.openOn == 'hover') {
+        if (this.openOn === 'hover') {
             this._targetEvents.mouseenter = targetMouseEnter$.pipe(delay(this.openAfter)).subscribe(() => {
-                this._isMouseOverButton = true;
                 this.open();
             });
         }
-        if (this.closeOn == 'leave') {
+        if (this.closeOn === 'leave') {
             this._targetEvents.mouseleave = targetMouseLeave$.pipe(delay(this.closeAfter)).subscribe(() => {
-                this._isMouseOverButton = false;
-                if (!this._isMouseOverTooltip) {
-                    this.close();
-                }
+                this.close();
             });
         }
         if (this.openOn === 'click' || this.openOn === 'toggle') {
             const click$ = fromEvent(this._target, 'click');
-            this._targetEvents.click = click$.subscribe((e) => {
-                this.openOn == 'toggle' ? this.toggle() : this.open();
+            this._targetEvents.click = click$.subscribe(() => {
+                this.openOn === 'toggle' ? this.toggle() : this.open();
             });
         }
     }
-    //
     /** @ignore */
     bindOverlayEvents() {
-        this.removeOverlayEvents();
-        this._overlayEvents.attach = this._overlayRef.attachments().subscribe(() => {
-            this.initializeResizeObserver();
-            if (this.openOn == 'hover') {
-                this._overlayRef?.overlayElement?.addEventListener('mouseenter', this._handleMouseEnter.bind(this));
-            }
-            if (this.closeOn == 'leave') {
-                this._overlayRef?.overlayElement?.addEventListener('mouseleave', this._handleMouseLeave.bind(this));
-            }
-            //
-            this._overlayEvents.outside = this._overlayRef._outsidePointerEvents.subscribe((e) => {
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement)
+            return;
+        overlayElement.style.pointerEvents = 'none';
+        // Outside click handler
+        if (this.closeOn === 'clickOut') {
+            this._outsideClickHandler = (e) => {
                 const el = e.target;
-                if (this.closeOn == 'clickOut' &&
-                    this.isOpen &&
-                    !this._target.contains(el) &&
-                    !this._overlayRef?.overlayElement?.contains(el)) {
-                    this.close();
-                }
-            });
-            //
-            this._overlayEvents.scroll = this._platform.scroll.subscribe((c) => {
-                //__axContext__
-                const el = c.nativeEvent.target;
-                if (!this.isActionsheetStyle && isPlatformBrowser(this.platformID)) {
-                    if (el == this.document) {
-                        this.close();
+                if (this.isOpen && !this._target?.contains(el) && !overlayElement?.contains(el)) {
+                    // Check if the click is inside a child overlay (e.g., selectbox dropdown)
+                    // Child overlays have a higher z-index than this popover
+                    if (this.isClickInsideChildOverlay(el)) {
                         return;
                     }
-                    if (el?.closest &&
-                        !el.closest('.ax-overlay-pane') &&
-                        !this._target.contains(el) &&
-                        !this._overlayRef?.overlayElement?.contains(el)) {
-                        this.close();
-                    }
+                    this.close();
                 }
-            });
-        });
+            };
+            this.document.addEventListener('mousedown', this._outsideClickHandler);
+        }
+        // Scroll listener to close on scroll
+        this.setupScrollListener();
+        // Resize observer
+        this.initializeResizeObserver();
+        setTimeout(() => {
+            overlayElement.style.pointerEvents = 'auto';
+        }, this.openAfter);
     }
     /** @ignore */
     removeOverlayEvents() {
-        this._overlayRef?.overlayElement?.removeEventListener('mouseenter', this._handleMouseEnter.bind(this));
-        this._overlayRef?.overlayElement?.addEventListener('mouseleave', this._handleMouseLeave.bind(this));
-        Object.entries(this._overlayEvents).forEach((e) => {
-            e[1].unsubscribe();
+        if (this._outsideClickHandler) {
+            this.document.removeEventListener('mousedown', this._outsideClickHandler);
+            this._outsideClickHandler = null;
+        }
+        this.removeScrollListener();
+    }
+    /** @ignore */
+    setupScrollListener() {
+        if (!this.repositionOnScroll || !isPlatformBrowser(this.platformID)) {
+            return;
+        }
+        this._scrollHandler = () => {
+            // Ignore scroll events during initial setup
+            if (!this._scrollListenerActive) {
+                return;
+            }
+            // Update popover position to follow the anchor element
+            this._overlayRef?.updatePosition();
+        };
+        // Listen on document with capture to catch all scroll events
+        this.document.addEventListener('scroll', this._scrollHandler, true);
+        window.addEventListener('scroll', this._scrollHandler, true);
+        // Delay activation to prevent initial layout scroll events from triggering
+        requestAnimationFrame(() => {
+            this._scrollListenerActive = true;
         });
     }
-    //
+    /** @ignore */
+    removeScrollListener() {
+        if (this._scrollHandler) {
+            this.document.removeEventListener('scroll', this._scrollHandler, true);
+            window.removeEventListener('scroll', this._scrollHandler, true);
+            this._scrollHandler = null;
+        }
+        this._scrollListenerActive = false;
+    }
+    /**
+     * Checks if the clicked element is inside a child overlay (e.g., selectbox dropdown).
+     * Child overlays are identified by having a higher z-index than this popover's overlay.
+     * @ignore
+     */
+    isClickInsideChildOverlay(element) {
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement)
+            return false;
+        // Find if the clicked element is inside any overlay container
+        const clickedOverlay = element.closest('.ax-overlay-container');
+        if (!clickedOverlay)
+            return false;
+        // Get z-index values
+        const popoverZIndex = parseInt(overlayElement.style.zIndex || '0', 10);
+        const clickedZIndex = parseInt(clickedOverlay.style.zIndex || '0', 10);
+        // If the clicked overlay has a higher z-index, it's a child overlay
+        return clickedZIndex > popoverZIndex;
+    }
+    /** @ignore */
+    handleOverlayDisposed() {
+        // Called when overlay is disposed externally (e.g., by scroll)
+        this.disconnectResizeObserver();
+        this.removeOverlayEvents();
+        this.removeKeyDownListener();
+        this._overlayRef = null;
+        this._componentRef = null;
+        this.restoreFocus();
+        this._emitOnClosedEvent();
+    }
     /**
      * Toggles the component's open state.
      */
     toggle() {
         this.isOpen ? this.close() : this.open();
     }
-    //
     /**
      * Closes the component if it's open, detaches the overlay, restores focus, and emits the closed event.
      */
@@ -343,29 +412,45 @@ class AXPopoverComponent extends MXBaseComponent {
             return;
         }
         this.disconnectResizeObserver();
-        this._overlayRef?.detach();
+        this.removeOverlayEvents();
+        this.removeKeyDownListener();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        this._componentRef = null;
         this.restoreFocus();
         this._emitOnClosedEvent();
-        this.onKeyDownListenerFn();
     }
-    //
     /**
      * Opens the component if it's not already open, saves focus, opens the overlay, and emits the opened event.
      */
-    open() {
+    async open() {
         if (this.isOpen || this.disabled) {
             return;
         }
+        this.addKeyDownListener();
+        this.saveFocus();
+        await this.openOverlayInternal();
+        this._emitOnOpenedEvent();
+    }
+    /** @ignore */
+    addKeyDownListener() {
         if (isPlatformBrowser(this.platformID)) {
-            this.onKeyDownListenerFn = this.renderer.listen(this.document.body, 'keydown', (e) => {
-                if (e.key == 'Escape') {
+            this.onKeyDownHandler = (e) => {
+                if (e.key === 'Escape') {
                     this.close();
                 }
-            });
+            };
+            this.document.addEventListener('keydown', this.onKeyDownHandler);
+        }
+    }
+    /** @ignore */
+    removeKeyDownListener() {
+        if (this.onKeyDownHandler) {
+            this.document.removeEventListener('keydown', this.onKeyDownHandler);
+            this.onKeyDownHandler = null;
         }
-        this.saveFocus();
-        this.openOverlayInternal();
-        this._emitOnOpenedEvent();
     }
     /** @ignore */
     saveFocus() {
@@ -376,105 +461,74 @@ class AXPopoverComponent extends MXBaseComponent {
     /** @ignore */
     restoreFocus() {
         if (this._lastActiveElement instanceof HTMLElement) {
-            if (this._lastActiveElement?.focus) {
-                this._lastActiveElement.focus();
-            }
+            this._lastActiveElement?.focus?.();
         }
     }
     /** @ignore */
-    openOverlayInternal() {
+    async openOverlayInternal() {
         const targetRef = this._target;
         if (!targetRef)
             return;
-        //if (!this._overlayRef) {
-        if (this.isActionsheetStyle) {
-            this._overlayRef = this._overlay.create({
-                positionStrategy: this._overlay.position().global().bottom().centerHorizontally(),
-                disposeOnNavigation: true,
-                scrollStrategy: this._overlay.scrollStrategies.block(),
-                panelClass: [
-                    'ax-actionsheet-base',
-                    'ax-animate-slideInUp',
-                    'ax-animate-faster',
-                    this.panelClass ? this.panelClass : this.#platform.isDark() ? 'ax-dark' : '',
-                ],
-                hasBackdrop: true,
-                width: '100%',
-            });
+        // Build panel classes
+        const panelClasses = ['ax-animate-fadeIn', 'ax-animate-faster'];
+        if (this.platform.isDark()) {
+            panelClasses.push('ax-dark');
         }
-        else {
-            this._overlayRef = this._overlay.create({
-                positionStrategy: this._overlay.position().flexibleConnectedTo(targetRef).withPositions(this._placements),
-                scrollStrategy: this._overlay.scrollStrategies.noop(),
-                disposeOnNavigation: true,
-                panelClass: ['ax-animate-fadeIn', 'ax-animate-faster', this.#platform.isDark() ? 'ax-dark' : ''],
-                maxHeight: 'unset',
-                hasBackdrop: this.hasBackdrop,
-                backdropClass: [this.backdropClass || 'cdk-overlay-transparent-backdrop'],
-                direction: AXHtmlUtil.isRtl(this.getHostElement()) ? 'rtl' : 'ltr',
-                width: this.width(),
-            });
-            // this._overlayRef.setDirection()
+        if (this.panelClass) {
+            panelClasses.push(this.panelClass);
         }
-        //
-        this.bindOverlayEvents();
-        //}
-        //
+        // Determine content to display
+        let contentToRender;
+        let inputs;
         if (this.content instanceof TemplateRef) {
-            this._portal = new TemplatePortal(this.content, this.getViewContainer(), {
-                $implicit: this.context,
-                ref: this,
-            });
-            this._overlayRef?.attach(this._portal);
+            contentToRender = this.content;
         }
         else if (typeof this.content === 'function') {
-            this._portal = new ComponentPortal(this.content);
-            this._componentRef = this._overlayRef?.attach(this._portal);
-            Object.assign(this._componentRef.instance, this.context);
+            contentToRender = this.content;
+            inputs = this.context;
         }
         else {
-            this._portal = new TemplatePortal(this._baseTemplate, this.getViewContainer(), {
-                $implicit: this.context,
-                ref: this,
-            });
-            this._overlayRef?.attach(this._portal);
+            contentToRender = this._baseTemplate;
         }
+        // Create the overlay
+        this._overlayRef = await this.overlayService.create(contentToRender, {
+            inputs,
+            anchorOptions: {
+                anchor: targetRef,
+                placement: this._placement,
+                offsetX: this._offsetX,
+                offsetY: this._offsetY,
+                autoFlip: true,
+            },
+            panelClass: !this.disablePanelClass() ? panelClasses : '',
+            width: this.width(),
+            onDispose: () => this.handleOverlayDisposed(),
+            actionSheetStyle: this.adaptivityEnabled,
+        });
+        // Store component ref if it's a component
+        if (this._overlayRef.instance && 'instance' in this._overlayRef.instance) {
+            this._componentRef = this._overlayRef.instance;
+            if (this.context && this._componentRef.instance) {
+                Object.assign(this._componentRef.instance, this.context);
+            }
+        }
+        // Bind overlay events
+        this.bindOverlayEvents();
     }
     /**
      * Checks if the overlay is currently open.
      * @returns {boolean}
      */
     get isOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
-    }
-    /**
-     * Determines if the actionsheet style should be applied.
-     * @returns {boolean}
-     */
-    get isActionsheetStyle() {
-        return this._platform.is('SM') && this.adaptivityEnabled;
-    }
-    /** @ignore */
-    updatePositionStrategy() {
-        const targetRef = this._target;
-        if (!targetRef)
-            return;
-        let strategy;
-        if (this.isActionsheetStyle) {
-            strategy = this._overlay.position().global().bottom().centerHorizontally();
-        }
-        else {
-            strategy = this._overlay.position().flexibleConnectedTo(targetRef).withPositions(this._placements);
-        }
-        this._overlayRef?.updatePositionStrategy(strategy);
+        return this._overlayRef !== null;
     }
     /** @ignore */
     updateOffset() {
         this._placements?.forEach((p) => {
-            if (this.offsetY != null)
-                p.offsetY = this.offsetY;
-            if (this.offsetX != null)
-                p.offsetX = this.offsetX;
+            if (this._offsetY != null)
+                p.offsetY = this._offsetY;
+            if (this._offsetX != null)
+                p.offsetX = this._offsetX;
         });
     }
     /**
@@ -488,7 +542,13 @@ class AXPopoverComponent extends MXBaseComponent {
      * Focuses the overlay element.
      */
     focus() {
-        //TODO: need this??
+        // Optional focus behavior
+    }
+    /**
+     * Brings this popover to the front of all other overlays.
+     */
+    bringToFront() {
+        this._overlayRef?.bringToFront();
     }
     /** @ignore */
     initializeResizeObserver() {
@@ -499,7 +559,7 @@ class AXPopoverComponent extends MXBaseComponent {
         this.resizeObserver = new ResizeObserver(() => {
             this.resize$.next();
         });
-        this.resizeObserver.observe(this._overlayRef?.overlayElement);
+        this.resizeObserver.observe(this._overlayRef.overlayElement);
     }
     /** @ignore */
     disconnectResizeObserver() {
@@ -508,40 +568,31 @@ class AXPopoverComponent extends MXBaseComponent {
             this.resizeObserver = null;
         }
     }
-    //
-    ngOnInit() {
-        super.ngOnInit();
-        // this.platformService.directionChange.subscribe((c) => {
-        //   this.isRtl = c.data == 'rtl';
-        // });
-        this.resize$.pipe(debounceTime(50)).subscribe(() => {
-            if (this.isOpen) {
-                this.updatePosition();
-            }
-        });
-    }
     /** @ignore */
     ngOnDestroy() {
         this.disconnectResizeObserver();
         this.resize$.complete();
         this.removeTargetEvents();
         this.removeOverlayEvents();
-        this._overlayRef?.detach();
-        this._overlayRef?.dispose();
+        this.removeKeyDownListener();
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: AXPopoverComponent, isStandalone: true, selector: "ax-popover", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: false, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: false, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, openAfter: { classPropertyName: "openAfter", publicName: "openAfter", isSignal: false, isRequired: false, transformFunction: null }, closeAfter: { classPropertyName: "closeAfter", publicName: "closeAfter", isSignal: false, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXPopoverComponent, isStandalone: true, selector: "ax-popover", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disablePanelClass: { classPropertyName: "disablePanelClass", publicName: "disablePanelClass", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, offsetX: { classPropertyName: "offsetX", publicName: "offsetX", isSignal: false, isRequired: false, transformFunction: null }, offsetY: { classPropertyName: "offsetY", publicName: "offsetY", isSignal: false, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: false, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: false, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: false, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: false, isRequired: false, transformFunction: null }, openAfter: { classPropertyName: "openAfter", publicName: "openAfter", isSignal: false, isRequired: false, transformFunction: null }, closeAfter: { classPropertyName: "closeAfter", publicName: "closeAfter", isSignal: false, isRequired: false, transformFunction: null }, repositionOnScroll: { classPropertyName: "repositionOnScroll", publicName: "repositionOnScroll", isSignal: false, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onOpened: "onOpened", onClosed: "onClosed" }, providers: [
             { provide: AXFocusableComponent, useExisting: AXPopoverComponent },
             { provide: AXComponent, useExisting: AXPopoverComponent },
         ], viewQueries: [{ propertyName: "_baseTemplate", first: true, predicate: ["baseTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXFocusableComponent, useExisting: AXPopoverComponent },
                         { provide: AXComponent, useExisting: AXPopoverComponent },
                     ], template: "<ng-template #baseTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disabled: [{
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], disablePanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePanelClass", required: false }] }], disabled: [{
                 type: Input
             }], offsetX: [{
                 type: Input
@@ -566,6 +617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], closeAfter: [{
                 type: Input
+            }], repositionOnScroll: [{
+                type: Input
             }], backdropClass: [{
                 type: Input
             }], panelClass: [{
@@ -579,11 +632,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AXPopoverModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverModule, imports: [CommonModule, AXPopoverComponent], exports: [AXPopoverComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverModule, imports: [CommonModule, AXPopoverComponent], exports: [AXPopoverComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXPopoverComponent],