@acorex/components 21.0.1-next.3 → 21.0.1-next.4

package/fesm2022/acorex-components-popover.mjs

@@ -1,11 +1,9 @@
 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 { 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 { inject, DOCUMENT, PLATFORM_ID, input, EventEmitter, ElementRef, TemplateRef, Output, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { Subject, fromEvent, delay, debounceTime } from 'rxjs';
 
 /**
@@ -15,45 +13,42 @@ 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);
-        /** @ignore */
-        this._isMouseOverButton = false;
-        /** @ignore */
-        this._isMouseOverTooltip = false;
+        this._lastActiveElement = null;
         /** @ignore */
         this._targetEvents = {};
         /** @ignore */
-        this._overlayEvents = {};
+        this._outsideClickHandler = null;
+        /** @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" }] : []));
         /** @ignore */
         this._offsetX = 0;
-        //
         /** @ignore */
         this._offsetY = 0;
         /** @ignore */
-        this._defautPlacements = convertToPlacement('bottom-start');
+        this._defaultPlacements = convertToPlacement('bottom-start');
         /** @ignore */
-        this._placements = [...this._defautPlacements];
+        this._placements = [...this._defaultPlacements];
         /** @ignore */
         this._placement = this._placements;
         /** @ignore */
+        this._componentRef = null;
+        /** @ignore */
         this._openOn = 'toggle';
         /** @ignore */
         this._closeOn = 'clickOut';
-        //
         /**
          * Determines if a backdrop should be displayed behind the popover.
          */
@@ -70,7 +65,6 @@ class AXPopoverComponent extends MXBaseComponent {
          * Enables or disables adaptivity.
          */
         this.adaptivityEnabled = false;
-        //
         /**
          * Emits when the component is opened.
          * @event
@@ -82,7 +76,6 @@ class AXPopoverComponent extends MXBaseComponent {
          */
         this.onClosed = new EventEmitter();
     }
-    #platform;
     /**
      * Gets or sets whether the popover is disabled.
      * When disabled, the popover will not open and will close if already open.
@@ -149,7 +142,6 @@ class AXPopoverComponent extends MXBaseComponent {
             this._target = v.nativeElement;
         else if (typeof v?.getHostElement == 'function')
             this._target = v.getHostElement();
-        //
         this.bindTargetEvents();
     }
     /**
@@ -167,9 +159,11 @@ class AXPopoverComponent extends MXBaseComponent {
             value: v,
             afterCallback: (o, n) => {
                 const converted = convertToPlacement(n);
-                this._placements = converted.length ? converted : this._defautPlacements;
+                this._placements = converted.length ? converted : this._defaultPlacements;
                 this.updateOffset();
-                this.updatePositionStrategy();
+                if (this._overlayRef) {
+                    this._overlayRef.updatePosition();
+                }
             },
         });
     }
@@ -205,7 +199,6 @@ class AXPopoverComponent extends MXBaseComponent {
     }
     /**
      * Sets the trigger for closing the popover and rebinds target events.
-     * @param v
      */
     set closeOn(v) {
         this.setOption({
@@ -230,25 +223,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 +237,69 @@ 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)) {
+                if (this.isOpen && !this._target?.contains(el) && !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();
-                        return;
-                    }
-                    if (el?.closest &&
-                        !el.closest('.ax-overlay-pane') &&
-                        !this._target.contains(el) &&
-                        !this._overlayRef?.overlayElement?.contains(el)) {
-                        this.close();
-                    }
-                }
-            });
-        });
+            };
+            this.document.addEventListener('mousedown', this._outsideClickHandler);
+        }
+        // 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;
+        }
+    }
+    /** @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 +308,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,97 +357,72 @@ 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-overlay-pane', '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: panelClasses,
+            width: this.width(),
+            onDispose: () => this.handleOverlayDisposed(),
+        });
+        // 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;
+        return this._overlayRef !== null;
     }
     /**
      * 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.platform.is('SM') && this.adaptivityEnabled;
     }
     /** @ignore */
     updateOffset() {
@@ -488,7 +444,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 +461,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,12 +470,8 @@ 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();
@@ -526,8 +484,11 @@ class AXPopoverComponent extends MXBaseComponent {
         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: [