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

package/fesm2022/acorex-components-popover.mjs

@@ -1,9 +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 { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, PLATFORM_ID, input, EventEmitter, ElementRef, TemplateRef, Output, Input, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } 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';
 
 /**
@@ -13,42 +15,45 @@ 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.overlayService = inject(AXOverlayService);
-        this.onKeyDownHandler = null;
+        this.renderer = inject(Renderer2);
+        this.onKeyDownListenerFn = () => undefined;
         /** @ignore */
-        this._overlayRef = null;
+        this._platform = inject(AXPlatform);
         /** @ignore */
-        this._lastActiveElement = null;
+        this._overlay = inject(Overlay);
         /** @ignore */
-        this._targetEvents = {};
+        this._isMouseOverButton = false;
+        /** @ignore */
+        this._isMouseOverTooltip = false;
         /** @ignore */
-        this._outsideClickHandler = null;
+        this._targetEvents = {};
         /** @ignore */
-        this.resizeObserver = null;
+        this._overlayEvents = {};
         /** @ignore */
         this.resize$ = new Subject();
+        //
         /** @ignore */
         this._disabled = false;
-        this.width = input('fit-content', ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.width = input('auto', ...(ngDevMode ? [{ debugName: "width" }] : []));
         /** @ignore */
         this._offsetX = 0;
+        //
         /** @ignore */
         this._offsetY = 0;
         /** @ignore */
-        this._defaultPlacements = convertToPlacement('bottom-start');
+        this._defautPlacements = convertToPlacement('bottom-start');
         /** @ignore */
-        this._placements = [...this._defaultPlacements];
+        this._placements = [...this._defautPlacements];
         /** @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.
          */
@@ -65,6 +70,7 @@ class AXPopoverComponent extends MXBaseComponent {
          * Enables or disables adaptivity.
          */
         this.adaptivityEnabled = false;
+        //
         /**
          * Emits when the component is opened.
          * @event
@@ -76,6 +82,7 @@ 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.
@@ -142,6 +149,7 @@ class AXPopoverComponent extends MXBaseComponent {
             this._target = v.nativeElement;
         else if (typeof v?.getHostElement == 'function')
             this._target = v.getHostElement();
+        //
         this.bindTargetEvents();
     }
     /**
@@ -159,11 +167,9 @@ class AXPopoverComponent extends MXBaseComponent {
             value: v,
             afterCallback: (o, n) => {
                 const converted = convertToPlacement(n);
-                this._placements = converted.length ? converted : this._defaultPlacements;
+                this._placements = converted.length ? converted : this._defautPlacements;
                 this.updateOffset();
-                if (this._overlayRef) {
-                    this._overlayRef.updatePosition();
-                }
+                this.updatePositionStrategy();
             },
         });
     }
@@ -199,6 +205,7 @@ class AXPopoverComponent extends MXBaseComponent {
     }
     /**
      * Sets the trigger for closing the popover and rebinds target events.
+     * @param v
      */
     set closeOn(v) {
         this.setOption({
@@ -223,12 +230,25 @@ 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() {
@@ -237,69 +257,84 @@ 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.close();
+                this._isMouseOverButton = false;
+                if (!this._isMouseOverTooltip) {
+                    this.close();
+                }
             });
         }
         if (this.openOn === 'click' || this.openOn === 'toggle') {
             const click$ = fromEvent(this._target, 'click');
-            this._targetEvents.click = click$.subscribe(() => {
-                this.openOn === 'toggle' ? this.toggle() : this.open();
+            this._targetEvents.click = click$.subscribe((e) => {
+                this.openOn == 'toggle' ? this.toggle() : this.open();
             });
         }
     }
+    //
     /** @ignore */
     bindOverlayEvents() {
-        const overlayElement = this._overlayRef?.overlayElement;
-        if (!overlayElement)
-            return;
-        overlayElement.style.pointerEvents = 'none';
-        // Outside click handler
-        if (this.closeOn === 'clickOut') {
-            this._outsideClickHandler = (e) => {
+        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 el = e.target;
-                if (this.isOpen && !this._target?.contains(el) && !overlayElement?.contains(el)) {
+                if (this.closeOn == 'clickOut' &&
+                    this.isOpen &&
+                    !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);
+            });
+            //
+            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();
+                    }
+                }
+            });
+        });
     }
     /** @ignore */
     removeOverlayEvents() {
-        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();
+        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();
+        });
     }
+    //
     /**
      * 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.
      */
@@ -308,45 +343,29 @@ class AXPopoverComponent extends MXBaseComponent {
             return;
         }
         this.disconnectResizeObserver();
-        this.removeOverlayEvents();
-        this.removeKeyDownListener();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-        this._componentRef = null;
+        this._overlayRef?.detach();
         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.
      */
-    async open() {
+    open() {
         if (this.isOpen || this.disabled) {
             return;
         }
-        this.addKeyDownListener();
-        this.saveFocus();
-        await this.openOverlayInternal();
-        this._emitOnOpenedEvent();
-    }
-    /** @ignore */
-    addKeyDownListener() {
         if (isPlatformBrowser(this.platformID)) {
-            this.onKeyDownHandler = (e) => {
-                if (e.key === 'Escape') {
+            this.onKeyDownListenerFn = this.renderer.listen(this.document.body, 'keydown', (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() {
@@ -357,72 +376,97 @@ class AXPopoverComponent extends MXBaseComponent {
     /** @ignore */
     restoreFocus() {
         if (this._lastActiveElement instanceof HTMLElement) {
-            this._lastActiveElement?.focus?.();
+            if (this._lastActiveElement?.focus) {
+                this._lastActiveElement.focus();
+            }
         }
     }
     /** @ignore */
-    async openOverlayInternal() {
+    openOverlayInternal() {
         const targetRef = this._target;
         if (!targetRef)
             return;
-        // Build panel classes
-        const panelClasses = ['ax-overlay-pane', 'ax-animate-fadeIn', 'ax-animate-faster'];
-        if (this.platform.isDark()) {
-            panelClasses.push('ax-dark');
+        //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%',
+            });
         }
-        if (this.panelClass) {
-            panelClasses.push(this.panelClass);
+        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()
         }
-        // Determine content to display
-        let contentToRender;
-        let inputs;
+        //
+        this.bindOverlayEvents();
+        //}
+        //
         if (this.content instanceof TemplateRef) {
-            contentToRender = this.content;
+            this._portal = new TemplatePortal(this.content, this.getViewContainer(), {
+                $implicit: this.context,
+                ref: this,
+            });
+            this._overlayRef?.attach(this._portal);
         }
         else if (typeof this.content === 'function') {
-            contentToRender = this.content;
-            inputs = this.context;
+            this._portal = new ComponentPortal(this.content);
+            this._componentRef = this._overlayRef?.attach(this._portal);
+            Object.assign(this._componentRef.instance, this.context);
         }
         else {
-            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);
-            }
+            this._portal = new TemplatePortal(this._baseTemplate, this.getViewContainer(), {
+                $implicit: this.context,
+                ref: this,
+            });
+            this._overlayRef?.attach(this._portal);
         }
-        // Bind overlay events
-        this.bindOverlayEvents();
     }
     /**
      * Checks if the overlay is currently open.
      * @returns {boolean}
      */
     get isOpen() {
-        return this._overlayRef !== null;
+        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;
+        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);
     }
     /** @ignore */
     updateOffset() {
@@ -444,13 +488,7 @@ class AXPopoverComponent extends MXBaseComponent {
      * Focuses the overlay element.
      */
     focus() {
-        // Optional focus behavior
-    }
-    /**
-     * Brings this popover to the front of all other overlays.
-     */
-    bringToFront() {
-        this._overlayRef?.bringToFront();
+        //TODO: need this??
     }
     /** @ignore */
     initializeResizeObserver() {
@@ -461,7 +499,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() {
@@ -470,8 +508,12 @@ 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();
@@ -484,11 +526,8 @@ class AXPopoverComponent extends MXBaseComponent {
         this.resize$.complete();
         this.removeTargetEvents();
         this.removeOverlayEvents();
-        this.removeKeyDownListener();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
+        this._overlayRef?.detach();
+        this._overlayRef?.dispose();
     }
     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: [