@shival99/z-ui 2.3.11 → 2.4.0

package/fesm2022/shival99-z-ui-components-z-popover.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, ChangeDetectionStrategy, Component, inject, Renderer2, DestroyRef, PLATFORM_ID, viewChild, output, input, ElementRef, Directive } from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, inject, Renderer2, DestroyRef, PLATFORM_ID, NgZone, viewChild, output, input, ElementRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Z_OVERLAY_FALLBACK_ORDER, ZOverlayService, startZOverlayAutoUpdate, computeZOverlayPlacement } from '@shival99/z-ui/components/z-overlay';
 import { ZOverlayContainerService, ZOverlayZIndexService } from '@shival99/z-ui/services';
@@ -100,6 +100,11 @@ class ZPopoverContentComponent {
         close: this.closeHandler(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    templateContext = computed(() => {
+        const context = this.context();
+        return { $implicit: context, close: context.close };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateContext" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const baseClasses = zPopoverVariants({
             zPosition: this.position(),
@@ -159,10 +164,7 @@ class ZPopoverContentComponent {
 
     <!-- Content -->
     <div [class]="contentClasses()">
-      <ng-container
-        [ngTemplateOutlet]="content()"
-        [ngTemplateOutletContext]="{ $implicit: context(), close: context().close }"
-      />
+      <ng-container [ngTemplateOutlet]="content()" [ngTemplateOutletContext]="templateContext()" />
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -180,10 +182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
     <!-- Content -->
     <div [class]="contentClasses()">
-      <ng-container
-        [ngTemplateOutlet]="content()"
-        [ngTemplateOutletContext]="{ $implicit: context(), close: context().close }"
-      />
+      <ng-container [ngTemplateOutlet]="content()" [ngTemplateOutletContext]="templateContext()" />
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -224,6 +223,7 @@ class ZPopoverComponent {
     _document = inject(DOCUMENT);
     _overlayContainerService = inject(ZOverlayContainerService);
     _zIndexService = inject(ZOverlayZIndexService);
+    _zone = inject(NgZone);
     _trigger = viewChild.required('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
     zShow = output();
@@ -421,7 +421,7 @@ class ZPopoverComponent {
                 return;
             }
             if (this.zScrollClose()) {
-                this.hideImmediate();
+                this._zone.run(() => this.hideImmediate());
                 return;
             }
             if (ticking) {
@@ -433,16 +433,18 @@ class ZPopoverComponent {
                 return;
             }
             ticking = true;
-            requestAnimationFrame(() => {
-                if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+            this._zone.runOutsideAngular(() => {
+                requestAnimationFrame(() => {
+                    if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+                        ticking = false;
+                        return;
+                    }
+                    void this._updatePositionNow();
                     ticking = false;
-                    return;
-                }
-                void this._updatePositionNow();
-                ticking = false;
+                });
             });
         };
-        this._document.addEventListener('scroll', onScroll, true);
+        this._zone.runOutsideAngular(() => this._document.addEventListener('scroll', onScroll, true));
         this._scrollSubscription = {
             unsubscribe: () => {
                 this._document.removeEventListener('scroll', onScroll, true);
@@ -463,8 +465,10 @@ class ZPopoverComponent {
             }
             this._schedulePositionUpdate();
         };
-        window.addEventListener('resize', onResize);
-        window.visualViewport?.addEventListener('resize', onResize);
+        this._zone.runOutsideAngular(() => {
+            window.addEventListener('resize', onResize);
+            window.visualViewport?.addEventListener('resize', onResize);
+        });
         this._viewportResizeSubscription = {
             unsubscribe: () => {
                 window.removeEventListener('resize', onResize);
@@ -475,7 +479,16 @@ class ZPopoverComponent {
     }
     async _showPopover() {
         const content = this.zContent();
-        if (!content || this._componentRef) {
+        if (!content) {
+            return;
+        }
+        if (this._componentRef) {
+            if (!this._hideTimeout) {
+                return;
+            }
+            this._clearHideTimeout();
+            this._componentRef.instance.state.set('open');
+            this._isVisible.set(true);
             return;
         }
         if (!this._overlayRef) {
@@ -483,19 +496,23 @@ class ZPopoverComponent {
             this._setupOutsideClick();
         }
         this._setupScrollClose();
-        this._componentRef = this._overlayRef.attach(ZPopoverContentComponent);
-        this._componentRef.instance.setProps({
+        const overlayRef = this._overlayRef;
+        if (!overlayRef) {
+            return;
+        }
+        const componentRef = (this._componentRef = overlayRef.attach(ZPopoverContentComponent));
+        componentRef.instance.setProps({
             content,
             position: this.zPosition(),
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
         });
-        await this._applyPosition();
-        if (!this._overlayRef || !this._componentRef) {
+        await this._zone.runOutsideAngular(() => this._applyPosition(overlayRef, componentRef));
+        if (this._overlayRef !== overlayRef || this._componentRef !== componentRef || this._destroyRef.destroyed) {
             return; // đã bị dispose (hide/destroy) trong lúc chờ computePosition
         }
-        this._autoUpdateCleanup = startZOverlayAutoUpdate(this._trigger().nativeElement, this._overlayRef.overlayElement, () => void this._applyPosition(), { ancestorScroll: false });
+        this._autoUpdateCleanup = this._zone.runOutsideAngular(() => startZOverlayAutoUpdate(this._trigger().nativeElement, overlayRef.overlayElement, () => void this._applyPosition(overlayRef, componentRef), { ancestorScroll: false }));
         if (this.zTrigger() === 'hover') {
             this._setupPopoverHover();
         }
@@ -526,25 +543,27 @@ class ZPopoverComponent {
     }
     _setupResizeObserver() {
         this._resizeObserver?.disconnect();
-        this._resizeObserver = new ResizeObserver(() => {
-            if (this._overlayRef && this._isVisible()) {
-                this._schedulePositionUpdate();
+        this._zone.runOutsideAngular(() => {
+            this._resizeObserver = new ResizeObserver(() => {
+                if (this._overlayRef && this._isVisible()) {
+                    this._schedulePositionUpdate();
+                }
+            });
+            this._resizeObserver.observe(this._trigger().nativeElement);
+            const wrapper = this._trigger().nativeElement.parentElement?.parentElement;
+            if (wrapper && wrapper !== document.body) {
+                this._resizeObserver.observe(wrapper);
             }
         });
-        this._resizeObserver.observe(this._trigger().nativeElement);
-        const wrapper = this._trigger().nativeElement.parentElement?.parentElement;
-        if (wrapper && wrapper !== document.body) {
-            this._resizeObserver.observe(wrapper);
-        }
     }
     _schedulePositionUpdate(force = false) {
         if (this._positionFrame !== null) {
             return;
         }
-        this._positionFrame = requestAnimationFrame(() => {
+        this._positionFrame = this._zone.runOutsideAngular(() => requestAnimationFrame(() => {
             this._positionFrame = null;
             void this._updatePositionNow(force);
-        });
+        }));
     }
     _scheduleSettledPositionUpdate() {
         this._clearViewportResizeTimeout();
@@ -575,12 +594,15 @@ class ZPopoverComponent {
         }
         await this._applyPosition();
     }
-    async _applyPosition() {
-        if (!this._overlayRef || !this._componentRef) {
+    async _applyPosition(expectedOverlayRef = this._overlayRef, expectedComponentRef = this._componentRef) {
+        if (!expectedOverlayRef ||
+            !expectedComponentRef ||
+            this._overlayRef !== expectedOverlayRef ||
+            this._componentRef !== expectedComponentRef) {
             return;
         }
         const anchorElement = this._trigger().nativeElement;
-        const floatingElement = this._overlayRef.overlayElement;
+        const floatingElement = expectedOverlayRef.overlayElement;
         const position = this.zPosition();
         const result = await computeZOverlayPlacement({
             reference: anchorElement,
@@ -591,12 +613,18 @@ class ZPopoverComponent {
             push: true,
             viewportPadding: 10,
         });
-        if (!this._componentRef) {
+        if (this._overlayRef !== expectedOverlayRef || this._componentRef !== expectedComponentRef) {
             return;
         }
         floatingElement.style.left = `${result.x}px`;
         floatingElement.style.top = `${result.y}px`;
-        this._componentRef.instance.position.set(result.placement);
+        if (expectedComponentRef.instance.position() !== result.placement) {
+            this._zone.run(() => {
+                if (this._overlayRef === expectedOverlayRef && this._componentRef === expectedComponentRef) {
+                    expectedComponentRef.instance.position.set(result.placement);
+                }
+            });
+        }
     }
     _markViewportSettling() {
         this._viewportSettlingUntil = Date.now() + 260;
@@ -656,17 +684,21 @@ class ZPopoverComponent {
         }
     }
     _hidePopover() {
-        if (!this._componentRef) {
+        const componentRef = this._componentRef;
+        if (!componentRef || this._hideTimeout) {
             return;
         }
-        this._componentRef.instance.state.set('closed');
+        this._isVisible.set(false);
+        componentRef.instance.state.set('closed');
         this._hideTimeout = setTimeout(() => {
             this._hideTimeout = null;
             if (this._destroyRef.destroyed) {
                 return;
             }
+            if (this._componentRef !== componentRef) {
+                return;
+            }
             this._disposeOverlay();
-            this._isVisible.set(false);
             this.zHide.emit();
         }, Z_POPOVER_ANIMATION_DURATION);
     }