@morozeckiy/dd-lib 0.9.1 → 0.9.2

package/assets/scss/common.scss

@@ -265,11 +265,11 @@ html {
 
 .cdk-overlay-pane {
   &.right {
-    margin-left: 35px;
+    margin-left: 8px;
   }
 
   &.left {
-    margin-right: 35px;
+    margin-right: 8px;
   }
 
   &.top {

package/fesm2022/morozeckiy-dd-lib.mjs

@@ -933,32 +933,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }] }] });
 
 const TOOLTIP_RIGHT = {
-    originX: 'start',
-    originY: 'center',
-    overlayX: 'start',
+    originX: 'end', // привязываемся к правому краю элемента
+    originY: 'center', // по центру по вертикали
+    overlayX: 'start', // overlay начинается с левого края
     overlayY: 'center',
     panelClass: 'right',
+    offsetX: 8, // небольшой отступ
 };
 const TOOLTIP_BOTTOM = {
     originX: 'center',
-    originY: 'bottom',
+    originY: 'bottom', // привязываемся к нижнему краю элемента
     overlayX: 'center',
-    overlayY: 'top',
+    overlayY: 'top', // overlay привязывается сверху
     panelClass: 'bottom',
+    offsetY: 8,
 };
 const TOOLTIP_TOP = {
     originX: 'center',
-    originY: 'top',
+    originY: 'top', // привязываемся к верхнему краю элемента
     overlayX: 'center',
-    overlayY: 'bottom',
+    overlayY: 'bottom', // overlay привязывается снизу
     panelClass: 'top',
+    offsetY: -8,
 };
 const TOOLTIP_LEFT = {
-    originX: 'end',
+    originX: 'start', // привязываемся к левому краю элемента
     originY: 'center',
-    overlayX: 'end',
+    overlayX: 'end', // overlay привязывается справа
     overlayY: 'center',
     panelClass: 'left',
+    offsetX: -8,
 };
 class TooltipDirective {
     set position(p) {
@@ -994,8 +998,9 @@ class TooltipDirective {
         }
         const clickedInside = this.element.nativeElement.contains(targetElement.target);
         if (!clickedInside) {
-            if (this.overlayRef?.hasAttached() === true) {
-                this.overlayRef?.detach();
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.dispose();
+                this.overlayRef = null;
             }
         }
     }
@@ -1003,12 +1008,9 @@ class TooltipDirective {
         if (!this.ddTooltip) {
             return;
         }
-        const overlay = document.getElementsByClassName('cdk-overlay-container')?.[0];
-        if (overlay && overlay.firstChild) {
-            overlay.removeChild(overlay.firstChild);
-        }
-        if (this.overlayRef?.hasAttached() === true) {
-            this.overlayRef?.detach();
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
             return;
         }
         this.attachTooltip();
@@ -1029,18 +1031,23 @@ class TooltipDirective {
         if (this.withClick) {
             return;
         }
-        if (this.overlayRef?.hasAttached() === true) {
-            this.overlayRef?.detach();
+        this.detachOverlay();
+    }
+    detachOverlay() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef.detach();
         }
     }
     ngOnDestroy() {
         this.overlayRef?.dispose();
     }
     attachTooltip() {
-        if (this.overlayRef === null) {
-            const positionStrategy = this.getPositionStrategy();
-            this.overlayRef = this.overlay.create({ positionStrategy });
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
+        const positionStrategy = this.getPositionStrategy();
+        this.overlayRef = this.overlay.create({ positionStrategy });
         const injector = Injector.create({
             providers: [
                 {