@shival99/z-ui 2.2.6 → 2.3.0

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

@@ -1,9 +1,8 @@
-import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, ChangeDetectionStrategy, Component, input, output, inject, ElementRef, Renderer2, DestroyRef, PLATFORM_ID, effect, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Z_OVERLAY_PREFERRED_SIDE_ORDER, Z_OVERLAY_FALLBACK_ORDER, ZOverlayService, startZOverlayAutoUpdate, computeZOverlayPlacement, computeZOverlayArrowOffset } from '@shival99/z-ui/components/z-overlay';
 import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
 import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -275,133 +274,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 }]
         }] });
 
-function createTooltipPosition(position, offset) {
-    const positions = {
-        top: {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        'top-left': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        'top-right': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        bottom: {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        'bottom-left': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        'bottom-right': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        left: {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center',
-            offsetX: -offset,
-        },
-        'left-top': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetX: -offset,
-        },
-        'left-bottom': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetX: -offset,
-        },
-        right: {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center',
-            offsetX: offset,
-        },
-        'right-top': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetX: offset,
-        },
-        'right-bottom': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetX: offset,
-        },
-    };
-    return positions[position];
-}
-function getTooltipFallbackPositions(position, offset) {
-    const fallbackOrder = {
-        top: ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
-        'top-left': ['top-left', 'bottom-left', 'top', 'bottom', 'top-right', 'bottom-right'],
-        'top-right': ['top-right', 'bottom-right', 'top', 'bottom', 'top-left', 'bottom-left'],
-        bottom: ['bottom', 'top', 'bottom-left', 'bottom-right', 'top-left', 'top-right'],
-        'bottom-left': ['bottom-left', 'top-left', 'bottom', 'top', 'bottom-right', 'top-right'],
-        'bottom-right': ['bottom-right', 'top-right', 'bottom', 'top', 'bottom-left', 'top-left'],
-        left: ['left', 'right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'],
-        'left-top': ['left-top', 'right-top', 'left', 'right', 'left-bottom', 'right-bottom'],
-        'left-bottom': ['left-bottom', 'right-bottom', 'left', 'right', 'left-top', 'right-top'],
-        right: ['right', 'left', 'right-top', 'right-bottom', 'left-top', 'left-bottom'],
-        'right-top': ['right-top', 'left-top', 'right', 'left', 'right-bottom', 'left-bottom'],
-        'right-bottom': ['right-bottom', 'left-bottom', 'right', 'left', 'right-top', 'left-top'],
-    };
-    const orderedPositions = fallbackOrder[position] ?? [position];
-    return orderedPositions.map(pos => createTooltipPosition(pos, offset));
-}
-function getTooltipPreferredSidePositions(position, offset) {
-    const preferredOrder = {
-        top: ['top', 'top-left', 'top-right'],
-        'top-left': ['top-left', 'top', 'top-right'],
-        'top-right': ['top-right', 'top', 'top-left'],
-        bottom: ['bottom', 'bottom-left', 'bottom-right'],
-        'bottom-left': ['bottom-left', 'bottom', 'bottom-right'],
-        'bottom-right': ['bottom-right', 'bottom', 'bottom-left'],
-        left: ['left', 'left-top', 'left-bottom'],
-        'left-top': ['left-top', 'left', 'left-bottom'],
-        'left-bottom': ['left-bottom', 'left', 'left-top'],
-        right: ['right', 'right-top', 'right-bottom'],
-        'right-top': ['right-top', 'right', 'right-bottom'],
-        'right-bottom': ['right-bottom', 'right', 'right-top'],
-    };
-    return preferredOrder[position].map(pos => createTooltipPosition(pos, offset));
-}
-function getTooltipStrategyPositions(origin, position, offset) {
-    const originElement = 'nativeElement' in origin ? origin.nativeElement : origin;
-    const rect = originElement.getBoundingClientRect();
+/**
+ * Chọn danh sách fallback (không gồm vị trí chính — Floating UI tự thử vị trí chính trước):
+ * nếu cạnh đang hướng tới còn đủ chỗ, chỉ đổi qua các biến thể cùng cạnh (không bao giờ lật
+ * sang cạnh đối diện); nếu không đủ, cho phép lật cạnh đối diện.
+ */
+function getTooltipFallbackPlacements(origin, position, offset) {
+    const rect = origin.getBoundingClientRect();
     const viewportWidth = globalThis.visualViewport?.width ?? globalThis.innerWidth;
     const viewportHeight = globalThis.visualViewport?.height ?? globalThis.innerHeight;
     const availableSpace = {
@@ -413,57 +292,9 @@ function getTooltipStrategyPositions(origin, position, offset) {
     const side = position.split('-')[0];
     const minimumSideSpace = Math.max(40, offset + 32);
     if (availableSpace[side] >= minimumSideSpace) {
-        return getTooltipPreferredSidePositions(position, offset);
+        return Z_OVERLAY_PREFERRED_SIDE_ORDER[position];
     }
-    return getTooltipFallbackPositions(position, offset);
-}
-function createTooltipPositionStrategy(overlayPositionBuilder, origin, position, offset) {
-    return overlayPositionBuilder
-        .flexibleConnectedTo(origin)
-        .withPositions(getTooltipStrategyPositions(origin, position, offset))
-        .withFlexibleDimensions(true)
-        .withPush(true)
-        .withViewportMargin(8);
-}
-function getActualPosition(change) {
-    const { originX, originY, overlayX, overlayY } = change.connectionPair;
-    if (overlayY === 'bottom' && originY === 'top') {
-        if (originX === 'start' && overlayX === 'start') {
-            return 'top-left';
-        }
-        if (originX === 'end' && overlayX === 'end') {
-            return 'top-right';
-        }
-        return 'top';
-    }
-    if (overlayY === 'top' && originY === 'bottom') {
-        if (originX === 'start' && overlayX === 'start') {
-            return 'bottom-left';
-        }
-        if (originX === 'end' && overlayX === 'end') {
-            return 'bottom-right';
-        }
-        return 'bottom';
-    }
-    if (overlayX === 'end' && originX === 'start') {
-        if (originY === 'top' && overlayY === 'top') {
-            return 'left-top';
-        }
-        if (originY === 'bottom' && overlayY === 'bottom') {
-            return 'left-bottom';
-        }
-        return 'left';
-    }
-    if (overlayX === 'start' && originX === 'end') {
-        if (originY === 'top' && overlayY === 'top') {
-            return 'right-top';
-        }
-        if (originY === 'bottom' && overlayY === 'bottom') {
-            return 'right-bottom';
-        }
-        return 'right';
-    }
-    return 'top';
+    return Z_OVERLAY_FALLBACK_ORDER[position];
 }
 
 const Z_TOOLTIP_ANIMATION_DURATION = 150;
@@ -527,8 +358,7 @@ class ZTooltipDirective {
     ...(ngDevMode ? [{ debugName: "_offset" }] : /* istanbul ignore next */ []));
     zShow = output();
     zHide = output();
-    _overlay = inject(Overlay);
-    _overlayPositionBuilder = inject(OverlayPositionBuilder);
+    _overlayService = inject(ZOverlayService);
     _elementRef = inject((ElementRef));
     _renderer = inject(Renderer2);
     _destroyRef = inject(DestroyRef);
@@ -538,7 +368,7 @@ class ZTooltipDirective {
     _componentRef = null;
     _delaySubject = new Subject();
     _listenerCleanups = [];
-    _positionSubscription = null;
+    _autoUpdateCleanup = null;
     _hideTimeout = null;
     _isVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
@@ -672,17 +502,12 @@ class ZTooltipDirective {
         }
         this.show();
     }
-    _createOverlay() {
-        const anchorElement = this.zTriggerElement() || this._elementRef;
-        const positionStrategy = createTooltipPositionStrategy(this._overlayPositionBuilder, anchorElement, this._position(), this._offset());
-        return this._overlay.create({
-            positionStrategy,
-            scrollStrategy: this._overlay.scrollStrategies.reposition(),
-        });
+    _getAnchorElement() {
+        return this.zTriggerElement() ?? this._elementRef.nativeElement;
     }
     _disposeOverlay() {
-        this._positionSubscription?.unsubscribe();
-        this._positionSubscription = null;
+        this._autoUpdateCleanup?.();
+        this._autoUpdateCleanup = null;
         this._overlayRef?.dispose();
         this._overlayRef = null;
         this._componentRef = null;
@@ -692,7 +517,7 @@ class ZTooltipDirective {
             .pipe(switchMap(config => (config.delay <= 0 ? of(config) : timer(config.delay).pipe(map(() => config)))), takeUntilDestroyed(this._destroyRef))
             .subscribe(config => {
             if (config.show) {
-                this._showTooltip();
+                void this._showTooltip();
                 return;
             }
             this._hideTooltip();
@@ -734,7 +559,7 @@ class ZTooltipDirective {
     _delay(show, delay) {
         this._delaySubject.next({ show, delay });
     }
-    _showTooltip() {
+    async _showTooltip() {
         const content = this.zContent();
         if (!content || this._disabled()) {
             return;
@@ -746,14 +571,10 @@ class ZTooltipDirective {
             return;
         }
         if (!this._overlayRef) {
-            this._overlayRef = this._createOverlay();
+            this._overlayRef = this._overlayService.createAnchored();
             this._setupOutsideClick();
         }
-        const anchorElement = this.zTriggerElement() || this._elementRef;
-        const positionStrategy = createTooltipPositionStrategy(this._overlayPositionBuilder, anchorElement, this._position(), this._offset());
-        this._overlayRef.updatePositionStrategy(positionStrategy);
-        const portal = new ComponentPortal(ZTooltipContentComponent);
-        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef = this._overlayRef.attach(ZTooltipContentComponent);
         this._componentRef.instance.setProps({
             content,
             position: this._position(),
@@ -763,10 +584,12 @@ class ZTooltipDirective {
             arrow: this._arrow(),
             maxWidth: this.zMaxWidth(),
         });
-        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
-            const actualPosition = getActualPosition(change);
-            this._componentRef?.instance.position.set(actualPosition);
-            this._calculateArrowOffset(actualPosition);
+        await this._applyPosition();
+        if (!this._overlayRef || !this._componentRef) {
+            return; // đã bị dispose (hide/destroy) trong lúc chờ computePosition
+        }
+        this._autoUpdateCleanup = startZOverlayAutoUpdate(this._getAnchorElement(), this._overlayRef.overlayElement, () => {
+            void this._applyPosition();
         });
         if (this._trigger() === 'hover') {
             this._setupTooltipHover();
@@ -774,6 +597,29 @@ class ZTooltipDirective {
         this._isVisible.set(true);
         this.zShow.emit();
     }
+    async _applyPosition() {
+        if (!this._overlayRef || !this._componentRef) {
+            return;
+        }
+        const anchorElement = this._getAnchorElement();
+        const floatingElement = this._overlayRef.overlayElement;
+        const fallbackPlacements = getTooltipFallbackPlacements(anchorElement, this._position(), this._offset());
+        const result = await computeZOverlayPlacement({
+            reference: anchorElement,
+            floating: floatingElement,
+            placement: this._position(),
+            fallbackPlacements,
+            offset: this._offset(),
+            flexibleDimensions: true,
+        });
+        if (!this._componentRef) {
+            return;
+        }
+        floatingElement.style.left = `${result.x}px`;
+        floatingElement.style.top = `${result.y}px`;
+        this._componentRef.instance.position.set(result.placement);
+        this._calculateArrowOffset(result.placement);
+    }
     _setupTooltipHover() {
         const overlayElement = this._overlayRef?.overlayElement;
         if (!overlayElement) {
@@ -815,27 +661,11 @@ class ZTooltipDirective {
         if (!this._overlayRef || !this._componentRef) {
             return;
         }
-        const triggerElement = this.zTriggerElement() ?? this._elementRef.nativeElement;
+        const triggerElement = this._getAnchorElement();
         const triggerRect = triggerElement.getBoundingClientRect();
         const tooltipRect = this._overlayRef.overlayElement.getBoundingClientRect();
-        let offset = 0;
-        if (position === 'top' || position === 'bottom') {
-            const triggerCenterX = triggerRect.left + triggerRect.width / 2;
-            const tooltipCenterX = tooltipRect.left + tooltipRect.width / 2;
-            offset = triggerCenterX - tooltipCenterX;
-        }
-        if (position === 'left' || position === 'right') {
-            const triggerCenterY = triggerRect.top + triggerRect.height / 2;
-            const tooltipCenterY = tooltipRect.top + tooltipRect.height / 2;
-            offset = triggerCenterY - tooltipCenterY;
-        }
-        const maxOffset = position === 'top' || position === 'bottom' ? tooltipRect.width / 2 - 12 : tooltipRect.height / 2 - 12;
-        offset = Math.max(-maxOffset, Math.min(maxOffset, offset));
-        if (Math.abs(offset) > 1) {
-            this._componentRef.instance.arrowOffset.set(offset);
-            return;
-        }
-        this._componentRef.instance.arrowOffset.set(0);
+        const offset = computeZOverlayArrowOffset({ triggerRect, overlayRect: tooltipRect, placement: position });
+        this._componentRef.instance.arrowOffset.set(offset);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: ZTooltipDirective, isStandalone: true, selector: "[z-tooltip], [zTooltip]", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTooltipPosition: { classPropertyName: "zTooltipPosition", publicName: "zTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zTooltipTrigger: { classPropertyName: "zTooltipTrigger", publicName: "zTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zTooltipType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zTooltipClass: { classPropertyName: "zTooltipClass", publicName: "zTooltipClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zTooltipShowDelay: { classPropertyName: "zTooltipShowDelay", publicName: "zTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zTooltipHideDelay: { classPropertyName: "zTooltipHideDelay", publicName: "zTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zArrow: { classPropertyName: "zArrow", publicName: "zArrow", isSignal: true, isRequired: false, transformFunction: null }, zTooltipArrow: { classPropertyName: "zTooltipArrow", publicName: "zTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zTooltipDisabled: { classPropertyName: "zTooltipDisabled", publicName: "zTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zTooltipOffset: { classPropertyName: "zTooltipOffset", publicName: "zTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, zAutoDetect: { classPropertyName: "zAutoDetect", publicName: "zAutoDetect", isSignal: true, isRequired: false, transformFunction: null }, zTriggerElement: { classPropertyName: "zTriggerElement", publicName: "zTriggerElement", isSignal: true, isRequired: false, transformFunction: null }, zAlwaysShow: { classPropertyName: "zAlwaysShow", publicName: "zAlwaysShow", isSignal: true, isRequired: false, transformFunction: null }, zMaxWidth: { classPropertyName: "zMaxWidth", publicName: "zMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide" }, exportAs: ["zTooltip"], ngImport: i0 });