@ngbase/adk 0.1.1 → 0.1.2

package/fesm2022/ngbase-adk-popover.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, linkedSignal, Directive, viewChild, ViewContainerRef, ElementRef, signal, effect, Component, ChangeDetectionStrategy, InjectionToken, input } from '@angular/core';
+import { InjectionToken, signal, inject, input, ElementRef, computed, Component, linkedSignal, Directive, viewChild, ViewContainerRef, effect } from '@angular/core';
 import * as i2 from '@ngbase/adk/portal';
 import { basePortal, BaseDialog, NgbPortalClose, DialogOptions } from '@ngbase/adk/portal';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -30,16 +30,7 @@ function basePopoverPortal(component) {
     return { open, closeAll };
 }
 
-const positionSwap = {
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left',
-    tl: 'bl',
-    tr: 'br',
-    bl: 'tl',
-    br: 'tr',
-};
+// Main position enum with all supported positions
 var Position;
 (function (Position) {
     Position["Top"] = "top";
@@ -50,30 +41,171 @@ var Position;
     Position["TopRight"] = "tr";
     Position["BottomLeft"] = "bl";
     Position["BottomRight"] = "br";
+    Position["RightStart"] = "rs";
+    Position["RightEnd"] = "re";
+    Position["LeftStart"] = "ls";
+    Position["LeftEnd"] = "le";
 })(Position || (Position = {}));
+// Position metadata definitions
+const POSITION_META = {
+    [Position.Top]: {
+        main: 'vertical',
+        placement: 'before',
+        align: 'center',
+        oppositePosition: Position.Bottom,
+        fallbacks: [Position.Bottom],
+        getCoords: (target, element, offset) => ({
+            top: target.top - element.height - offset,
+            left: target.left + (target.width - element.width) / 2,
+        }),
+    },
+    [Position.Bottom]: {
+        main: 'vertical',
+        placement: 'after',
+        align: 'center',
+        oppositePosition: Position.Top,
+        fallbacks: [Position.Top, Position.Right, Position.Left],
+        getCoords: (target, element, offset) => ({
+            top: target.top + target.height + offset,
+            left: target.left + (target.width - element.width) / 2,
+        }),
+    },
+    [Position.Left]: {
+        main: 'horizontal',
+        placement: 'before',
+        align: 'center',
+        oppositePosition: Position.Right,
+        fallbacks: [Position.Right, Position.Top, Position.Bottom],
+        getCoords: (target, element, offset) => ({
+            top: target.top + (target.height - element.height) / 2,
+            left: target.left - element.width - offset,
+        }),
+    },
+    [Position.Right]: {
+        main: 'horizontal',
+        placement: 'after',
+        align: 'center',
+        oppositePosition: Position.Left,
+        fallbacks: [Position.Left, Position.Top, Position.Bottom],
+        getCoords: (target, element, offset) => ({
+            top: target.top + (target.height - element.height) / 2,
+            left: target.left + target.width + offset,
+        }),
+    },
+    [Position.TopLeft]: {
+        main: 'vertical',
+        placement: 'before',
+        align: 'start',
+        oppositePosition: Position.BottomLeft,
+        fallbacks: [Position.BottomLeft, Position.TopRight, Position.BottomRight],
+        getCoords: (target, element, offset) => ({
+            top: target.top - element.height - offset,
+            left: target.left,
+        }),
+    },
+    [Position.TopRight]: {
+        main: 'vertical',
+        placement: 'before',
+        align: 'end',
+        oppositePosition: Position.BottomRight,
+        fallbacks: [Position.BottomRight, Position.TopLeft, Position.BottomLeft],
+        getCoords: (target, element, offset) => ({
+            top: target.top - element.height - offset,
+            left: target.left + target.width - element.width,
+        }),
+    },
+    [Position.BottomLeft]: {
+        main: 'vertical',
+        placement: 'after',
+        align: 'start',
+        oppositePosition: Position.BottomRight,
+        fallbacks: [Position.BottomRight, Position.TopLeft, Position.TopRight],
+        getCoords: (target, element, offset) => ({
+            top: target.top + target.height + offset,
+            left: target.left,
+        }),
+    },
+    [Position.BottomRight]: {
+        main: 'vertical',
+        placement: 'after',
+        align: 'end',
+        oppositePosition: Position.BottomLeft,
+        fallbacks: [Position.BottomLeft, Position.TopRight, Position.TopLeft],
+        getCoords: (target, element, offset) => ({
+            top: target.top + target.height + offset,
+            left: target.left + target.width - element.width,
+        }),
+    },
+    [Position.RightStart]: {
+        main: 'horizontal',
+        placement: 'after',
+        align: 'start',
+        oppositePosition: Position.RightEnd,
+        fallbacks: [Position.RightEnd, Position.LeftStart, Position.LeftEnd],
+        getCoords: (target, element, offset) => ({
+            top: target.top,
+            left: target.left + target.width + offset,
+        }),
+    },
+    [Position.RightEnd]: {
+        main: 'horizontal',
+        placement: 'after',
+        align: 'end',
+        oppositePosition: Position.LeftEnd,
+        fallbacks: [Position.LeftEnd, Position.RightStart, Position.LeftStart],
+        getCoords: (target, element, offset) => ({
+            top: target.top + target.height - element.height,
+            left: target.left + target.width + offset,
+        }),
+    },
+    [Position.LeftStart]: {
+        main: 'horizontal',
+        placement: 'before',
+        align: 'start',
+        oppositePosition: Position.LeftEnd,
+        fallbacks: [Position.LeftEnd, Position.RightStart, Position.RightEnd],
+        getCoords: (target, element, offset) => ({
+            top: target.top,
+            left: target.left - element.width - offset,
+        }),
+    },
+    [Position.LeftEnd]: {
+        main: 'horizontal',
+        placement: 'before',
+        align: 'end',
+        oppositePosition: Position.RightEnd,
+        fallbacks: [Position.RightEnd, Position.LeftStart, Position.RightStart],
+        getCoords: (target, element, offset) => ({
+            top: target.top + target.height - element.height,
+            left: target.left - element.width - offset,
+        }),
+    },
+};
 class PopoverPositioner {
-    constructor(config, windowDimensions, scrollWidth) {
+    constructor(config, windowDimensions, scrollWidth = 0) {
         this.config = config;
         this.windowDimensions = windowDimensions;
         this.scrollWidth = scrollWidth;
         this.offset = this.config.offset || 5;
+        this.sideOffset = this.config.sideOffset || 0;
     }
     calculatePosition() {
         const targetRect = this.getTargetRect();
-        const elRect = this.getElementRect();
-        this.elRect = elRect;
-        const initialPosition = this.getInitialPosition(targetRect, elRect, this.config.position || Position.Bottom);
-        const adjustedPosition = this.adjustForOverflow(initialPosition, targetRect, elRect);
-        return this.finalizePosition(adjustedPosition, elRect);
+        this.elementRect = this.getElementRect();
+        // Get initial position or use bottom as default
+        const initialPosition = this.config.position || Position.Bottom;
+        // Find best position
+        const bestPosition = this.findBestPosition(initialPosition, targetRect);
+        // Generate and finalize coordinates
+        const coords = POSITION_META[bestPosition].getCoords(targetRect, this.elementRect, this.offset);
+        return this.finalizePosition(coords, bestPosition, targetRect);
     }
     getTargetRect() {
         if (this.config.client) {
             const { x, y, w, h } = this.config.client;
             return { top: y, left: x, width: w, height: h };
         }
-        const { top, left, width, height } = this.config.target.getBoundingClientRect();
-        // return { top, left, width, height: Math.min(height, this.windowDimensions.height - top) };
-        return { top, left, width, height };
+        return this.config.target.getBoundingClientRect();
     }
     getElementRect() {
         const el = this.config.el;
@@ -84,433 +216,289 @@ class PopoverPositioner {
             height: el.clientHeight,
         };
     }
-    getInitialPosition(targetRect, elRect, position) {
-        const coords = this.getCoordinatesForPosition(position, targetRect, elRect, this.offset);
-        // coords.left = Math.max(0, coords.left);
-        // coords.top = Math.max(0, coords.top);
-        return { ...coords, position };
-    }
-    getCoordinatesForPosition(position, targetRect, elRect, offset) {
-        switch (position) {
-            case Position.Top:
-                return {
-                    top: targetRect.top - elRect.height - offset,
-                    left: targetRect.left + (targetRect.width - elRect.width) / 2,
-                };
-            case Position.Bottom:
-                return {
-                    top: targetRect.top + targetRect.height + offset,
-                    left: targetRect.left + (targetRect.width - elRect.width) / 2,
-                };
-            case Position.Left:
-                return { top: targetRect.top, left: targetRect.left - elRect.width - offset };
-            case Position.Right:
-                return { top: targetRect.top, left: targetRect.left + targetRect.width + offset };
-            case Position.TopLeft:
-                return { top: targetRect.top - elRect.height - offset, left: targetRect.left };
-            case Position.TopRight:
-                return {
-                    top: targetRect.top - elRect.height - offset,
-                    left: targetRect.left - (elRect.width - targetRect.width),
-                };
-            case Position.BottomLeft:
-                return { top: targetRect.top + targetRect.height + offset, left: targetRect.left };
-            case Position.BottomRight:
-                return {
-                    top: targetRect.top + targetRect.height + offset,
-                    left: targetRect.left - (elRect.width - targetRect.width),
-                };
+    findBestPosition(initialPosition, targetRect) {
+        // If the initial position works, use it
+        if (!this.positionOverflows(initialPosition, targetRect)) {
+            return initialPosition;
         }
-    }
-    adjustForOverflow(position, targetRect, elRect) {
-        const overflow = this.checkOverflow(position, elRect, targetRect);
-        this.overflow = overflow;
-        if (overflow.any) {
-            const newPosition = this.getAlternativePosition(position.position, overflow);
-            return this.getInitialPosition(targetRect, elRect, newPosition);
+        // Get available space in each direction
+        const space = this.getAvailableSpace(targetRect);
+        // Special handling for simple cases (e.g., choosing between top and bottom based on space)
+        const meta = POSITION_META[initialPosition];
+        // 1. Try the opposite position on the same axis (e.g., bottom for top)
+        const opposite = meta.oppositePosition;
+        if (!this.positionOverflows(opposite, targetRect)) {
+            return opposite;
         }
-        return position;
-    }
-    checkOverflow(position, elRect, targetRect) {
-        // Calculate available space on all sides
-        const topSpace = position.top;
-        const bottomSpace = this.windowDimensions.height - position.top;
-        const leftSpace = position.left;
-        const rightSpace = this.windowDimensions.width - position.left;
-        // Calculate overflow amounts (negative means no overflow)
-        const topOverflow = -(targetRect.top - elRect.height);
-        const bottomOverflow = targetRect.top + targetRect.height + elRect.height - this.windowDimensions.height;
-        // const leftOverflow = -(position.left - (elRect.width - targetRect.width));
-        const leftOverflow = -(targetRect.left + targetRect.width - elRect.width);
-        const leftSideOverflow = -(targetRect.left - elRect.width);
-        const rightOverflow = targetRect.left + elRect.width - this.windowDimensions.width;
-        const rightSideOverflow = -(targetRect.left + targetRect.width - elRect.width);
-        const isTop = topOverflow > 0;
-        const isBottom = bottomOverflow > 0;
-        const isLeft = leftOverflow > 0;
-        const isRight = rightOverflow > 0;
-        const isLeftSide = leftSideOverflow > 0;
-        const isRightSide = rightSideOverflow > 0;
-        let preferredHorizontal;
-        let preferredVertical;
-        // If both left and right overflow, determine which side has more space
-        if (isLeft || isRight) {
-            preferredHorizontal = leftOverflow > rightOverflow ? 'right' : 'left';
+        // 2. For vertical positions, prefer the side with more space
+        if (meta.main === 'vertical') {
+            const preferredVertical = space.top > space.bottom ? Position.Top : Position.Bottom;
+            if (!this.positionOverflows(preferredVertical, targetRect)) {
+                return preferredVertical;
+            }
         }
-        else if (isLeftSide || isRightSide) {
-            preferredHorizontal = leftSideOverflow > rightSideOverflow ? 'right' : 'left';
+        // 3. For horizontal positions, prefer the side with more space
+        if (meta.main === 'horizontal') {
+            const preferredHorizontal = space.left > space.right ? Position.Left : Position.Right;
+            if (!this.positionOverflows(preferredHorizontal, targetRect)) {
+                return preferredHorizontal;
+            }
         }
-        // If both top and bottom overflow, determine which side has more space
-        if (isTop || isBottom) {
-            preferredVertical = topOverflow > bottomOverflow ? 'bottom' : 'top';
+        // 4. Try fallbacks in order
+        for (const fallback of meta.fallbacks) {
+            if (!this.positionOverflows(fallback, targetRect)) {
+                return fallback;
+            }
         }
+        // 5. If all positions have issues, find the one with the best fit
+        return this.getPositionWithLeastOverflow(initialPosition, targetRect);
+    }
+    getAvailableSpace(targetRect) {
         return {
-            top: isTop,
-            bottom: isBottom,
-            left: isLeft,
-            right: isRight,
-            leftSide: isLeftSide,
-            rightSide: isRightSide,
-            any: isTop || isBottom || isLeft || isRight || isLeftSide || isRightSide,
-            preferredHorizontal,
-            preferredVertical,
-            overflowAmount: {
-                top: topOverflow,
-                bottom: bottomOverflow,
-                left: leftOverflow,
-                right: rightOverflow,
-                leftSide: leftSideOverflow,
-                rightSide: rightSideOverflow,
-            },
+            top: targetRect.top,
+            right: this.windowDimensions.width - (targetRect.left + targetRect.width),
+            bottom: this.windowDimensions.height - (targetRect.top + targetRect.height),
+            left: targetRect.left,
         };
     }
-    getAlternativePosition(position, overflow) {
-        // if (overflow.top) {
-        //   if (position === Position.Top) {
-        //     return Position.Bottom;
-        //   }
-        // }
-        // if (
-        //   (overflow.preferredVertical === 'top' || !overflow.bottom) &&
-        //   (overflow.preferredHorizontal === 'left' || !overflow.right)
-        // ) {
-        //   return Position.BottomRight;
-        // }
-        // if (
-        //   (overflow.preferredVertical === 'top' || !overflow.bottom) &&
-        //   (overflow.preferredHorizontal === 'right' || !overflow.left)
-        // ) {
-        //   return Position.BottomLeft;
-        // }
-        // if (
-        //   (overflow.preferredVertical === 'bottom' || !overflow.top) &&
-        //   (overflow.preferredHorizontal === 'left' || !overflow.right)
-        // ) {
-        //   return Position.TopRight;
-        // }
-        // if (
-        //   (overflow.preferredVertical === 'bottom' || !overflow.top) &&
-        //   (overflow.preferredHorizontal === 'right' || !overflow.left)
-        // ) {
-        //   return Position.TopLeft;
-        // }
-        // if (overflow.bottom) {
-        //   if (position.includes('bottom')) {
-        //     return positionSwap[position] as Position;
-        //   } else if (position.includes('bl') && overflow.preferredVertical === 'top') {
-        //     return overflow.right && overflow.preferredHorizontal !== 'right'
-        //       ? Position.TopRight
-        //       : Position.TopLeft;
-        //   } else if (position.includes('bl') && overflow.preferredVertical === 'bottom') {
-        //     return overflow.right && overflow.preferredHorizontal !== 'right'
-        //       ? Position.BottomRight
-        //       : Position.BottomLeft;
-        //   }
-        // }
-        // if (overflow.left) {
-        //   if (position === Position.Left) {
-        //     return Position.Right;
-        //   }
-        //   if (overflow.preferredHorizontal === 'left' || !overflow.right) {
-        //     return overflow.bottom ? Position.TopLeft : Position.BottomLeft;
-        //   }
-        //   if (overflow.preferredHorizontal === 'right') {
-        //     return overflow.bottom ? Position.TopRight : Position.BottomRight;
-        //   }
-        // }
-        // if (overflow.right) {
-        //   if (position.includes('right')) {
-        //     return !overflow.left
-        //       ? Position.Left
-        //       : overflow.bottom && !overflow.left
-        //         ? (positionSwap[position] as Position)
-        //         : overflow.left && overflow.bottom
-        //           ? Position.Top
-        //           : Position.BottomRight;
-        //   } else if (position.includes('bl')) {
-        //     return overflow.bottom ? Position.TopRight : Position.BottomRight;
-        //   }
-        // }
-        // return position;
-        if (!overflow.any) {
-            return position;
-        }
-        // Simple mapping for opposite positions
-        const opposites = {
-            [Position.Top]: Position.Bottom,
-            [Position.Bottom]: Position.Top,
-            [Position.Left]: Position.Right,
-            [Position.Right]: Position.Left,
-            [Position.TopLeft]: Position.BottomRight,
-            [Position.TopRight]: Position.BottomLeft,
-            [Position.BottomLeft]: Position.TopRight,
-            [Position.BottomRight]: Position.TopLeft,
-        };
-        // For cardinal positions (Top, Bottom, Left, Right)
-        if ([Position.Top, Position.Bottom].includes(position)) {
-            return overflow.preferredVertical || opposites[position];
-        }
-        if ([Position.Left, Position.Right].includes(position)) {
-            return overflow.preferredHorizontal || opposites[position];
-        }
-        // For corner positions
-        const isTop = position.includes('t');
-        const isLeft = position.includes('l');
-        const vertical = overflow.preferredVertical === 'top' ? 't' : 'b';
-        const horizontal = overflow.preferredHorizontal === 'left' ? 'r' : 'l';
-        // If current position overflows, use the preferred directions
-        if ((isTop && overflow.top) ||
-            (!isTop && overflow.bottom) ||
-            (isLeft && overflow.left) ||
-            (!isLeft && overflow.right) ||
-            (horizontal === 'r' && overflow.right) ||
-            (horizontal === 'l' && overflow.left)) {
-            switch (vertical + horizontal) {
-                case 'tl':
-                    return Position.TopLeft;
-                case 'tr':
-                    return Position.TopRight;
-                case 'bl':
-                    return Position.BottomLeft;
-                case 'br':
-                    return Position.BottomRight;
-                default:
-                    return opposites[position];
+    positionOverflows(position, targetRect) {
+        const meta = POSITION_META[position];
+        const element = this.elementRect;
+        const coords = meta.getCoords(targetRect, element, this.offset);
+        const { width: windowWidth, height: windowHeight } = this.windowDimensions;
+        // Check boundaries
+        return (coords.left < 0 ||
+            coords.left + element.width > windowWidth ||
+            coords.top < 0 ||
+            coords.top + element.height > windowHeight);
+    }
+    getOverflowAmount(position, targetRect) {
+        const meta = POSITION_META[position];
+        const element = this.elementRect;
+        const coords = meta.getCoords(targetRect, element, this.offset);
+        const { width: windowWidth, height: windowHeight } = this.windowDimensions;
+        let amount = 0;
+        // Calculate overflow for each edge
+        if (coords.left < 0)
+            amount += Math.abs(coords.left);
+        if (coords.left + element.width > windowWidth)
+            amount += coords.left + element.width - windowWidth;
+        if (coords.top < 0)
+            amount += Math.abs(coords.top);
+        if (coords.top + element.height > windowHeight)
+            amount += coords.top + element.height - windowHeight;
+        return amount;
+    }
+    getPositionWithLeastOverflow(initialPosition, targetRect) {
+        const positionsToCheck = [initialPosition, ...POSITION_META[initialPosition].fallbacks];
+        let bestPosition = initialPosition;
+        let leastOverflow = this.getOverflowAmount(initialPosition, targetRect);
+        for (const position of positionsToCheck) {
+            const overflow = this.getOverflowAmount(position, targetRect);
+            if (overflow < leastOverflow) {
+                leastOverflow = overflow;
+                bestPosition = position;
             }
         }
-        return position;
+        return bestPosition;
     }
-    finalizePosition(position, elRect) {
-        const { top, left } = position;
-        const bottom = position.position.startsWith('t')
-            ? this.windowDimensions.height - (top + elRect.height)
-            : undefined;
-        // this is required if tooltip is going outside of the screen horizontally
-        // this has to be done only if the position is top or bottom
-        let right;
-        right =
-            left + elRect.width > this.windowDimensions.width
-                ? 0
-                : position.position.endsWith('r')
-                    ? this.windowDimensions.width - (left + elRect.width) - this.scrollWidth
-                    : undefined;
-        let overallOffset = this.getOverallOffset(position);
+    finalizePosition(coords, position, targetRect) {
+        const { top, left } = coords;
+        const element = this.elementRect;
+        const { width: windowWidth, height: windowHeight } = this.windowDimensions;
+        const meta = POSITION_META[position];
+        // Calculate max dimensions
         let maxHeight;
-        if (position.position.startsWith('t') &&
-            this.overflow.overflowAmount.top > -overallOffset.vertical) {
-            maxHeight = this.elRect.height - this.overflow.overflowAmount.top - overallOffset.vertical;
+        let maxWidth;
+        // Set maxHeight if needed
+        if (top - this.sideOffset < 0) {
+            maxHeight = element.height + top - this.sideOffset;
         }
-        else if (position.position.startsWith('b') &&
-            this.overflow.overflowAmount.bottom > -overallOffset.vertical) {
-            maxHeight = this.elRect.height - this.overflow.overflowAmount.bottom - overallOffset.vertical;
+        else if (top + element.height + this.sideOffset > windowHeight) {
+            maxHeight = element.height - (top + element.height + this.sideOffset - windowHeight);
         }
-        let maxWidth;
-        if (position.position.endsWith('l') &&
-            this.overflow.overflowAmount.right > -overallOffset.horizontal) {
-            maxWidth = this.elRect.width - this.overflow.overflowAmount.right - overallOffset.horizontal;
+        // Set maxWidth if needed
+        if (left + element.width + this.sideOffset > windowWidth) {
+            maxWidth = windowWidth - left - this.sideOffset;
         }
-        else if (position.position.endsWith('r') &&
-            this.overflow.overflowAmount.left > -overallOffset.horizontal) {
-            maxWidth = this.elRect.width - this.overflow.overflowAmount.left - overallOffset.horizontal;
+        // Add sideOffset to maxHeight and maxWidth because the sideOffset is used for the maxHeight and maxWidth
+        const h = maxHeight ? maxHeight + this.sideOffset : element.height;
+        const w = maxWidth ? maxWidth + this.sideOffset : element.width;
+        // Calculate adjusted coordinates
+        let adjustedTop = Math.max(0, Math.min(top, windowHeight - h));
+        let adjustedLeft = Math.max(0, Math.min(left, windowWidth - w));
+        // Calculate bottom and right (for RTL support)
+        let bottom;
+        let right;
+        // Set bottom if appropriate
+        if (meta.main === 'vertical' && meta.placement === 'before') {
+            bottom = windowHeight - (adjustedTop + h);
+            adjustedTop = undefined;
+        }
+        // Set right if appropriate
+        if (adjustedLeft + w > windowWidth) {
+            adjustedLeft = 0;
+            right = 0;
+        }
+        else if (meta.align === 'end' ||
+            (meta.main === 'horizontal' && meta.placement === 'before')) {
+            right = windowWidth - (adjustedLeft + w) - this.scrollWidth;
         }
         return {
-            // top: Math.max(0, Math.min(top, this.windowDimensions.height - (maxHeight || elRect.height))),
-            top: Math.max(0, top),
+            top: adjustedTop,
+            left: right !== undefined ? undefined : adjustedLeft,
             bottom,
-            left: right ? 0 : Math.max(overallOffset.horizontal, left),
-            right: right ? Math.max(overallOffset.horizontal, right) : undefined,
-            position: position.position,
-            maxHeight,
-            maxWidth,
-        };
-    }
-    getOverallOffset(position) {
-        const overallOffset = this.config.sideOffset ?? 0;
-        const isHorizontal = position.position === 'left' || position.position === 'right';
-        return {
-            horizontal: overallOffset + (isHorizontal ? this.offset : 0),
-            vertical: overallOffset + (isHorizontal ? 0 : this.offset),
+            right,
+            position,
+            maxHeight: maxHeight && maxHeight > 0 ? maxHeight : undefined,
+            maxWidth: maxWidth && maxWidth > 0 ? maxWidth : undefined,
         };
     }
 }
 // Main function to use the class
-function tooltipPosition(config, windowDimensions = {
-    width: window.innerWidth,
-    height: window.innerHeight,
-}, scrollWidth = window.innerWidth - document.documentElement.clientWidth) {
+function tooltipPosition(config, windowDimensions = { width: window.innerWidth, height: window.innerHeight }, scrollWidth = window.innerWidth - document.documentElement.clientWidth) {
     const positioner = new PopoverPositioner(config, windowDimensions, scrollWidth);
     return positioner.calculatePosition();
 }
-// export function tooltipPosition(config: OverlayConfig): {
-//   top: number;
-//   left: number;
-//   bottom?: number;
-//   right?: number;
-//   position: DialogPosition;
-// } {
-//   const { target, el, position: priority = 'bottom', offset = 5, client: clientXY = null } = config;
-//   let position: DialogPosition = priority;
-//   let { top, left, width, height } = target.getBoundingClientRect();
-//   if (clientXY) {
-//     top = clientXY.y;
-//     left = clientXY.x;
-//     width = clientXY.w;
-//     height = clientXY.h;
-//   }
-//   const { clientWidth: elWidth, clientHeight: elHeight } = el!;
-//   // we need to check whether the height of the target element is greater than the height then we need to adjust the height
-//   if (height > window.innerHeight) {
-//     height = window.innerHeight - top;
-//   }
-//   return tooltipPositionInternal({
-//     top,
-//     left,
-//     width,
-//     height,
-//     elWidth,
-//     elHeight,
-//     offset,
-//     priority,
-//     position,
-//     windowWidth: window.innerWidth,
-//     windowHeight: window.innerHeight,
-//     scrollWidth: window.innerWidth - document.documentElement.clientWidth,
-//   });
-// }
-// export function tooltipPositionInternal(data: ConfigObj): {
-//   top: number;
-//   bottom?: number;
-//   left: number;
-//   right?: number;
-//   position: DialogPosition;
-// } {
-//   let { elHeight, position, windowHeight, windowWidth, offset, elWidth, scrollWidth } = data;
-//   position = positionSwapBasedOnOverflow(data);
-//   let { top: topPos, left: leftPos } = getTooltipCoordinates(position, data);
-//   if (topPos <= 0) {
-//     topPos = offset;
-//   } else if (topPos + elHeight > windowHeight) {
-//     topPos = windowHeight - elHeight - offset;
-//   } else if (leftPos < 0) {
-//     leftPos = 0;
-//   }
-//   const bottomPos = position.startsWith('t') ? windowHeight - (topPos + elHeight) : undefined;
-//   const rightPos =
-//     leftPos + elWidth > windowWidth
-//       ? 0
-//       : position.endsWith('r')
-//         ? windowWidth - (leftPos + elWidth) - scrollWidth
-//         : undefined;
-//   return {
-//     top: topPos,
-//     bottom: bottomPos,
-//     left: rightPos ? 0 : leftPos,
-//     position,
-//     right: rightPos,
-//   };
-// }
-// function getTooltipCoordinates(
-//   position: DialogPosition,
-//   data: ConfigObj,
-// ): { top: number; left: number } {
-//   const { top, left, width, height, elWidth, elHeight, offset } = data;
-//   switch (position) {
-//     case 'top':
-//       return {
-//         top: top - elHeight - offset,
-//         left: left + (width - elWidth) / 2,
-//       };
-//     case 'bottom':
-//       return { top: top + height + offset, left: left + (width - elWidth) / 2 };
-//     case 'left':
-//       return { top, left: left - elWidth - offset };
-//     case 'right':
-//       return { top, left: left + width + offset };
-//     case 'tl':
-//       return { top: top - elHeight - offset, left };
-//     case 'tr':
-//       return { top: top - elHeight - offset, left: left - (elWidth - width) };
-//     case 'bl':
-//       return { top: top + height + offset, left };
-//     case 'br':
-//       return { top: top + height + offset, left: left - (elWidth - width) };
-//     default:
-//       return {
-//         top: top - elHeight - offset,
-//         left: left + (width - elWidth) / 2,
-//       };
-//   }
-// }
-// // function to check the overflow sides for target and element
-// export function checkOverflow(data: ConfigObj) {
-//   const isTop = data.top - data.elHeight < 0;
-//   const isBottom = data.top + data.height + data.elHeight > data.windowHeight;
-//   const isLeft = data.left - data.elWidth < 0;
-//   const isRight = data.left + data.width + data.elWidth > data.windowWidth;
-//   return { top: isTop, bottom: isBottom, left: isLeft, right: isRight };
-// }
-// // position swap based on the overflow and priority
-// function positionSwapBasedOnOverflow(data: ConfigObj): DialogPosition {
-//   const {
-//     bottom: bottomOverflow,
-//     left: leftOverflow,
-//     right: rightOverflow,
-//     top: topOverflow,
-//   } = checkOverflow(data);
-//   const { priority } = data;
-//   let position = priority;
-//   if (topOverflow) {
-//     if (position.includes('top')) {
-//       position = positionSwap[position];
-//     }
-//   }
-//   if (bottomOverflow) {
-//     if (position.includes('bottom')) {
-//       position = positionSwap[position];
-//     } else if (position.includes('bl')) {
-//       position = rightOverflow ? 'tr' : 'tl';
-//     }
-//   }
-//   if (leftOverflow) {
-//     if (position.includes('left')) {
-//       position = positionSwap[position];
-//     }
-//   }
-//   if (rightOverflow) {
-//     if (position.includes('right')) {
-//       position = !leftOverflow
-//         ? 'left'
-//         : bottomOverflow && !leftOverflow
-//           ? positionSwap[position]
-//           : leftOverflow && bottomOverflow
-//             ? 'top'
-//             : 'br';
-//     } else if (position.includes('bl')) {
-//       position = bottomOverflow ? 'tr' : 'br';
-//     }
-//   }
-//   return position;
-// }
+
+class PopoverArrowTracker {
+    constructor() {
+        this.top = 0;
+        this.left = 0;
+        this.right = 0;
+        this.bottom = 0;
+    }
+}
+const POPOVER_ARROW_TRACKER = new InjectionToken('popoverArrowTracker');
+function providePopoverArrowTracker() {
+    return {
+        provide: POPOVER_ARROW_TRACKER,
+        useFactory: () => ({ values: signal(new PopoverArrowTracker()) }),
+    };
+}
+class NgbPopoverArrow {
+    constructor() {
+        this.arrowTracker = inject(POPOVER_ARROW_TRACKER);
+        this.anchor = input(false);
+        this.el = inject((ElementRef));
+        this.styles = computed(() => {
+            const { target, position } = this.arrowTracker.values();
+            if (target && position) {
+                return this.updateAnchorPosition(position, target, this.el.nativeElement);
+            }
+            return {};
+        });
+    }
+    updateAnchorPosition(position, target, el) {
+        const { height, width, top } = el.getBoundingClientRect();
+        const { height: tHeight, width: tWidth, top: tTop } = target.getBoundingClientRect();
+        let deg = '0deg';
+        let anchorTop = '50%';
+        let anchorLeft = '50%';
+        const anchorWidth = 8;
+        const thHeight = tHeight / 2 - anchorWidth / 2;
+        const thWidth = tWidth / 2;
+        switch (position) {
+            case 'top':
+            case 'tl':
+            case 'tr':
+                anchorTop = '100%';
+                break;
+            case 'left':
+                deg = '270deg';
+                anchorLeft = `calc(100% + ${anchorWidth / 2}px)`;
+                anchorTop =
+                    tHeight > height
+                        ? `calc(50% - ${anchorWidth / 2}px)`
+                        : `calc(${thHeight + (tTop - top)}px)`;
+                break;
+            case 'right':
+                deg = '90deg';
+                anchorLeft = `-${anchorWidth / 2}px`;
+                anchorTop =
+                    tHeight > height
+                        ? `calc(50% - ${anchorWidth / 2}px)`
+                        : `calc(${thHeight + (tTop - top)}px)`;
+                break;
+            case 'bottom':
+            case 'bl':
+            case 'br':
+                deg = '180deg';
+                anchorTop = '-0.5rem';
+                anchorLeft = thWidth > width ? '50%' : `calc(100% - ${thWidth}px)`;
+                break;
+        }
+        return { '--action-angle': deg, '--action-left': anchorLeft, '--action-top': anchorTop };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbPopoverArrow, isStandalone: true, selector: "[ngbPopoverArrow]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "styles()" } }, ngImport: i0, template: `
+    <ng-content />
+    @if (anchor()) {
+      <style>
+        :host {
+          --action-angle: 180deg;
+          --action-left: 50%;
+          --action-top: -1rem;
+        }
+        :host::before {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-top: 0.5rem solid;
+          @apply border-foreground;
+          border-left: 0.45rem solid transparent;
+          border-right: 0.45rem solid transparent;
+          top: var(--action-top);
+          left: var(--action-left);
+          transform: translateX(-50%) rotate(var(--action-angle, 180deg));
+          /* Add shadow to match the container shadow */
+          /* filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+            z-index: -1;  */
+        }
+      </style>
+    }
+  `, isInline: true, styles: [":host{--action-angle: 180deg;--action-left: 50%;--action-top: -1rem}:host:before{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-top:.5rem solid;@apply border-foreground;border-left:.45rem solid transparent;border-right:.45rem solid transparent;top:var(--action-top);left:var(--action-left);transform:translate(-50%) rotate(var(--action-angle, 180deg))}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverArrow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbPopoverArrow]',
+                    template: `
+    <ng-content />
+    @if (anchor()) {
+      <style>
+        :host {
+          --action-angle: 180deg;
+          --action-left: 50%;
+          --action-top: -1rem;
+        }
+        :host::before {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-top: 0.5rem solid;
+          @apply border-foreground;
+          border-left: 0.45rem solid transparent;
+          border-right: 0.45rem solid transparent;
+          top: var(--action-top);
+          left: var(--action-left);
+          transform: translateX(-50%) rotate(var(--action-angle, 180deg));
+          /* Add shadow to match the container shadow */
+          /* filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+            z-index: -1;  */
+        }
+      </style>
+    }
+  `,
+                    host: {
+                        '[style]': 'styles()',
+                    },
+                }]
+        }] });
 
 class NgbPopoverBackdrop {
     constructor() {
@@ -552,6 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
 class NgbPopover extends BaseDialog {
     constructor() {
         super();
+        this.arrowTracker = inject(POPOVER_ARROW_TRACKER);
         this.disposals = disposals();
         this.myDialog = viewChild.required('myDialog', { read: ViewContainerRef });
         this.container = viewChild.required(NgbPopoverMain, {
@@ -668,16 +657,16 @@ class NgbPopover extends BaseDialog {
             sideOffset: this.options().sideOffset,
         });
         // change the anchor position
-        if (this.options().anchor) {
-            this.updateAnchorPosition(position, el, target);
-        }
+        // if (this.options().anchor) {
+        // this.updateAnchorPosition(position, el, target);
+        // }
         this.lastPosition = position;
         // we need to update the values directly instead of signal to avoid too many CD checks
-        if (bottom) {
+        if (bottom !== undefined) {
             el.style.bottom = `${bottom}px`;
             el.style.top = '';
         }
-        else if (top) {
+        else {
             el.style.top = `${top}px`;
             el.style.bottom = '';
         }
@@ -695,87 +684,14 @@ class NgbPopover extends BaseDialog {
         if (maxWidth) {
             el.style.maxWidth = `${maxWidth}px`;
         }
-    }
-    updateAnchorPosition(position, el, target) {
-        let deg = '0deg';
-        let anchorTop = '50%';
-        let anchorLeft = '50%';
-        const anchorWidth = 12.8;
-        const thHeight = target.offsetHeight / 2;
-        const thWidth = target.offsetWidth / 2;
-        switch (position) {
-            case 'top':
-            case 'tl':
-            case 'tr':
-                anchorTop = '100%';
-                break;
-            case 'left':
-                deg = '270deg';
-                anchorLeft = `calc(100% + ${anchorWidth / 2}px)`;
-                anchorTop = thHeight > el.clientHeight ? '50%' : `calc(${thHeight}px)`;
-                break;
-            case 'right':
-                deg = '90deg';
-                anchorLeft = `-${anchorWidth / 2}px`;
-                anchorTop = thHeight > el.clientHeight ? '50%' : `calc(${thHeight}px)`;
-                break;
-            case 'bottom':
-            case 'bl':
-            case 'br':
-                deg = '180deg';
-                anchorTop = '-1rem';
-                anchorLeft = thWidth > el.clientWidth ? '50%' : `calc(100% - ${thWidth}px)`;
-                break;
-        }
-        el.style.setProperty('--action-angle', deg);
-        el.style.setProperty('--action-left', anchorLeft);
-        el.style.setProperty('--action-top', anchorTop);
-        // console.log('updateAnchorPosition', position, deg);
+        this.arrowTracker.values.set({ top, bottom, left, right, target, position });
     }
     setOptions(options) {
         // console.log('setOptions', options);
         this.options.set(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbPopover, isStandalone: true, selector: "ngb-popover", host: { listeners: { "@parentAnimation.done": "animationDone()" }, properties: { "@parentAnimation": "" }, classAttribute: "fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center" }, viewQueries: [{ propertyName: "myDialog", first: true, predicate: ["myDialog"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "container", first: true, predicate: NgbPopoverMain, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "backdropElement", first: true, predicate: NgbPopoverBackdrop, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <style>
-      .popover-anchor {
-        --action-angle: 180deg;
-        --action-left: 50%;
-        --action-top: -1rem;
-      }
-      .popover-anchor::before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-top: 0.8rem solid;
-        @apply border-foreground;
-        border-left: 0.5rem solid transparent;
-        border-right: 0.5rem solid transparent;
-        top: var(--action-top);
-        left: var(--action-left);
-        transform: translateX(-50%) rotate(var(--action-angle, 180deg));
-      }
-    </style>
-    <div
-      ngbPopoverMain
-      [@slideInOutAnimation]
-      class="{{
-        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md ' +
-          (options().anchor ? 'popover-anchor ' : 'overflow-auto ')
-      }}"
-    >
-      <div class="flex flex-1 flex-col overflow-auto">
-        <ng-container #myDialog />
-      </div>
-    </div>
-    @if (options().backdrop) {
-      <div
-        ngbPopoverBackdrop
-        class="popover-backdrop pointer-events-auto fixed top-0 h-full w-full"
-      ></div>
-    }`, isInline: true, styles: [".popover-anchor{--action-angle: 180deg;--action-left: 50%;--action-top: -1rem}.popover-anchor:before{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-top:.8rem solid;@apply border-foreground;border-left:.5rem solid transparent;border-right:.5rem solid transparent;top:var(--action-top);left:var(--action-left);transform:translate(-50%) rotate(var(--action-angle, 180deg))}\n"], dependencies: [{ kind: "directive", type: NgbPopoverBackdrop, selector: "[ngbPopoverBackdrop]" }, { kind: "directive", type: NgbPopoverMain, selector: "[ngbPopoverMain]" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.0", type: NgbPopover, isStandalone: true, selector: "ngb-popover", host: { listeners: { "@parentAnimation.done": "animationDone()" }, properties: { "@parentAnimation": "" } }, viewQueries: [{ propertyName: "myDialog", first: true, predicate: ["myDialog"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "container", first: true, predicate: NgbPopoverMain, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "backdropElement", first: true, predicate: NgbPopoverBackdrop, descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, animations: [
             createHostAnimation(['@slideInOutAnimation']),
             trigger('slideInOutAnimation', [
                 state('1', style({ transform: 'none', opacity: 1 })),
@@ -783,55 +699,14 @@ class NgbPopover extends BaseDialog {
                 state('0', style({ transform: 'translateY(-10px) scale(0.95)', opacity: 0 })),
                 transition('* => *', animate('100ms ease-out')),
             ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopover, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngb-popover',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgbPopoverBackdrop, NgbPopoverMain],
-                    template: ` <style>
-      .popover-anchor {
-        --action-angle: 180deg;
-        --action-left: 50%;
-        --action-top: -1rem;
-      }
-      .popover-anchor::before {
-        content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-top: 0.8rem solid;
-        @apply border-foreground;
-        border-left: 0.5rem solid transparent;
-        border-right: 0.5rem solid transparent;
-        top: var(--action-top);
-        left: var(--action-left);
-        transform: translateX(-50%) rotate(var(--action-angle, 180deg));
-      }
-    </style>
-    <div
-      ngbPopoverMain
-      [@slideInOutAnimation]
-      class="{{
-        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md ' +
-          (options().anchor ? 'popover-anchor ' : 'overflow-auto ')
-      }}"
-    >
-      <div class="flex flex-1 flex-col overflow-auto">
-        <ng-container #myDialog />
-      </div>
-    </div>
-    @if (options().backdrop) {
-      <div
-        ngbPopoverBackdrop
-        class="popover-backdrop pointer-events-auto fixed top-0 h-full w-full"
-      ></div>
-    }`,
+                    template: '',
                     host: {
-                        class: 'fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center',
                         '[@parentAnimation]': '',
                         '(@parentAnimation.done)': 'animationDone()',
                     },
@@ -886,8 +761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     hostDirectives: [{ directive: NgbPortalClose, inputs: ['ngbPortalClose: ngbPopoverClose'] }],
                 }]
         }] });
-function providePopover(popover) {
-    return { provide: NgbPopover, useExisting: popover };
+function aliasPopover(popover) {
+    return [{ provide: NgbPopover, useExisting: popover }, providePopoverArrowTracker()];
 }
 
 class PopoverOptions extends DialogOptions {
@@ -949,5 +824,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgbPopover, NgbPopoverBackdrop, NgbPopoverClose, NgbPopoverMain, NgbPopoverTrigger, PopoverOptions, basePopoverPortal, ngbPopoverPortal, providePopover, registerNgbPopover, tooltipPosition };
+export { NgbPopover, NgbPopoverArrow, NgbPopoverBackdrop, NgbPopoverClose, NgbPopoverMain, NgbPopoverTrigger, POPOVER_ARROW_TRACKER, PopoverArrowTracker, PopoverOptions, aliasPopover, basePopoverPortal, ngbPopoverPortal, providePopoverArrowTracker, registerNgbPopover, tooltipPosition };
 //# sourceMappingURL=ngbase-adk-popover.mjs.map