@truenas/ui-components 0.1.20 → 0.1.21

package/fesm2022/truenas-ui-components.mjs

@@ -7536,6 +7536,7 @@ class TnTooltipDirective {
     _showTimeout = null;
     _hideTimeout = null;
     _isTooltipVisible = false;
+    _positionSub = null;
     _ariaDescribedBy = null;
     _overlay = inject(Overlay);
     _elementRef = inject((ElementRef));
@@ -7548,6 +7549,7 @@ class TnTooltipDirective {
     ngOnDestroy() {
         this._clearTimeouts();
         this.hide(0);
+        this._positionSub?.unsubscribe();
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = null;
@@ -7615,6 +7617,33 @@ class TnTooltipDirective {
             scrollStrategy: this._overlay.scrollStrategies.reposition({ scrollThrottle: 20 }),
             panelClass: ['tn-tooltip-panel', `tn-tooltip-panel-${this.position()}`, this.tooltipClass()].filter(Boolean),
         });
+        this._positionSub = positionStrategy.positionChanges
+            .subscribe((change) => {
+            const panel = this._overlayRef?.overlayElement?.parentElement;
+            if (!panel) {
+                return;
+            }
+            const actual = this._resolvePosition(change.connectionPair);
+            const allPositionClasses = [
+                'tn-tooltip-panel-above', 'tn-tooltip-panel-below',
+                'tn-tooltip-panel-left', 'tn-tooltip-panel-right',
+                'tn-tooltip-panel-before', 'tn-tooltip-panel-after',
+            ];
+            panel.classList.remove(...allPositionClasses);
+            panel.classList.add(`tn-tooltip-panel-${actual}`);
+        });
+    }
+    _resolvePosition(pair) {
+        if (pair.overlayY === 'bottom') {
+            return 'above';
+        }
+        if (pair.overlayY === 'top') {
+            return 'below';
+        }
+        if (pair.overlayX === 'end') {
+            return 'left';
+        }
+        return 'right';
     }
     _attachTooltip() {
         if (!this._overlayRef) {