@tetacom/ng-components 1.0.20 → 1.0.21

package/fesm2020/tetacom-ng-components.mjs

@@ -952,7 +952,12 @@ var VerticalAlign;
 })(VerticalAlign || (VerticalAlign = {}));
 
 class PositionUtil {
-    static getPosition(containerPosition, elementPosition, align, verticalAlign, margin = 0, verticalMargin = 0) {
+    static getPosition(containerPosition, elementPosition, align, verticalAlign, margin = 0, verticalMargin = 0, transformedParentRect = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    }) {
         const rect = {};
         const elementWidth = elementPosition.right - elementPosition.left;
         const elementHeight = elementPosition.bottom - elementPosition.top;
@@ -988,7 +993,7 @@ class PositionUtil {
             }
         }
         if (verticalAlign === VerticalAlign.top) {
-            rect.bottom = window.innerHeight - containerPosition.top + verticalMargin;
+            rect.top = containerPosition.top - elementHeight - verticalMargin;
         }
         if (verticalAlign === VerticalAlign.bottom) {
             rect.top = containerPosition.bottom + verticalMargin;
@@ -1007,12 +1012,16 @@ class PositionUtil {
         if (rect.top < 0) {
             rect.top = 0;
         }
-        if (verticalAlign === VerticalAlign.bottom) {
+        if (verticalAlign === VerticalAlign.bottom || verticalAlign === VerticalAlign.center) {
             rect.maxHeight = window.innerHeight - rect.top;
         }
         if (verticalAlign === VerticalAlign.top) {
             rect.maxHeight = containerPosition.top;
         }
+        rect.left = rect.left - transformedParentRect.left;
+        rect.right = rect.right - transformedParentRect.left;
+        rect.top = rect.top - transformedParentRect.top;
+        rect.bottom = rect.bottom ? rect.bottom - transformedParentRect.bottom : rect.bottom;
         return rect;
     }
     static setElementPosition(element, rect) {
@@ -1190,23 +1199,31 @@ class DropdownBase {
         this.setPosition(this._head.nativeElement, this._body);
     }
     setPosition(container, target) {
-        const containerRect = container.getBoundingClientRect();
+        const containerPosition = container.getBoundingClientRect();
+        const targetPosition = target.getBoundingClientRect();
         const rect = {
-            bottom: containerRect.bottom,
-            top: containerRect.top,
-            left: containerRect.left,
-            right: containerRect.right,
+            bottom: containerPosition.bottom,
+            top: containerPosition.top,
+            left: containerPosition.left,
+            right: containerPosition.right,
+        };
+        const targetRect = {
+            bottom: targetPosition.bottom,
+            top: targetPosition.top,
+            left: targetPosition.left,
+            right: targetPosition.right,
         };
-        // const transformedParent = DomUtil.findTransformedParent(container);
-        // console.log(transformedParent);
-        // if (transformedParent) {
-        //   const parentPosition = transformedParent.getBoundingClientRect();
-        //   rect.left = rect.left - parentPosition.left;
-        //   rect.top = rect.top - parentPosition.top;
-        //   rect.bottom = parentPosition.bottom - rect.top;
-        //   rect.right = parentPosition.right - rect.right;
-        // }
-        const position = PositionUtil.getPosition(rect, target.getBoundingClientRect(), this.align, this.verticalAlign);
+        const targetTransformedParent = DomUtil.findTransformedParent(target);
+        let parentPosition = {
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0
+        };
+        if (targetTransformedParent) {
+            parentPosition = targetTransformedParent.getBoundingClientRect();
+        }
+        const position = PositionUtil.getPosition(rect, targetRect, this.align, this.verticalAlign, 0, 0, parentPosition);
         PositionUtil.setElementPosition(target, position);
     }
 }