@ngbase/adk 0.1.0

package/fesm2022/ngbase-adk-popover.mjs

@@ -0,0 +1,953 @@
+import * as i0 from '@angular/core';
+import { inject, linkedSignal, Directive, viewChild, ViewContainerRef, ElementRef, signal, effect, Component, ChangeDetectionStrategy, InjectionToken, input } 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';
+import * as i1 from '@ngbase/adk/a11y';
+import { FocusTrap } from '@ngbase/adk/a11y';
+import { disposals, createHostAnimation } from '@ngbase/adk/utils';
+import { switchMap, fromEvent, map, startWith, EMPTY } from 'rxjs';
+
+function basePopoverPortal(component) {
+    const NAME = 'popover';
+    const base = basePortal(NAME, component);
+    function open(component, options) {
+        const { diaRef, parent, replace, childSignal } = base.open(component, (comp, opt) => {
+            const compInst = comp.instance;
+            compInst.setOptions(opt);
+        }, options);
+        return {
+            diaRef,
+            events: parent.instance.events,
+            parent: parent.instance,
+            replace,
+            childSignal,
+        };
+    }
+    function closeAll() {
+        base.closeAll();
+    }
+    return { open, closeAll };
+}
+
+const positionSwap = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+    tl: 'bl',
+    tr: 'br',
+    bl: 'tl',
+    br: 'tr',
+};
+var Position;
+(function (Position) {
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+    Position["TopLeft"] = "tl";
+    Position["TopRight"] = "tr";
+    Position["BottomLeft"] = "bl";
+    Position["BottomRight"] = "br";
+})(Position || (Position = {}));
+class PopoverPositioner {
+    constructor(config, windowDimensions, scrollWidth) {
+        this.config = config;
+        this.windowDimensions = windowDimensions;
+        this.scrollWidth = scrollWidth;
+        this.offset = this.config.offset || 5;
+    }
+    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);
+    }
+    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 };
+    }
+    getElementRect() {
+        const el = this.config.el;
+        return {
+            top: 0,
+            left: 0,
+            width: el.clientWidth,
+            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),
+                };
+        }
+    }
+    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);
+        }
+        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';
+        }
+        else if (isLeftSide || isRightSide) {
+            preferredHorizontal = leftSideOverflow > rightSideOverflow ? 'right' : 'left';
+        }
+        // If both top and bottom overflow, determine which side has more space
+        if (isTop || isBottom) {
+            preferredVertical = topOverflow > bottomOverflow ? 'bottom' : 'top';
+        }
+        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,
+            },
+        };
+    }
+    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];
+            }
+        }
+        return position;
+    }
+    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);
+        let maxHeight;
+        if (position.position.startsWith('t') &&
+            this.overflow.overflowAmount.top > -overallOffset.vertical) {
+            maxHeight = this.elRect.height - this.overflow.overflowAmount.top - overallOffset.vertical;
+        }
+        else if (position.position.startsWith('b') &&
+            this.overflow.overflowAmount.bottom > -overallOffset.vertical) {
+            maxHeight = this.elRect.height - this.overflow.overflowAmount.bottom - overallOffset.vertical;
+        }
+        let maxWidth;
+        if (position.position.endsWith('l') &&
+            this.overflow.overflowAmount.right > -overallOffset.horizontal) {
+            maxWidth = this.elRect.width - this.overflow.overflowAmount.right - overallOffset.horizontal;
+        }
+        else if (position.position.endsWith('r') &&
+            this.overflow.overflowAmount.left > -overallOffset.horizontal) {
+            maxWidth = this.elRect.width - this.overflow.overflowAmount.left - overallOffset.horizontal;
+        }
+        return {
+            // top: Math.max(0, Math.min(top, this.windowDimensions.height - (maxHeight || elRect.height))),
+            top: Math.max(0, top),
+            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),
+        };
+    }
+}
+// Main function to use the class
+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 NgbPopoverBackdrop {
+    constructor() {
+        this.popover = inject(NgbPopover);
+        this.focusTrap = inject(FocusTrap);
+        this.focusTrap._focusTrap = linkedSignal(() => this.popover.options().focusTrap ?? true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbPopoverBackdrop, isStandalone: true, selector: "[ngbPopoverBackdrop]", host: { listeners: { "click": "!popover.options().disableClose && popover.close()" }, properties: { "style.clipPath": "popover.options().clipPath?.()", "class": "popover.options().backdropClassName" } }, hostDirectives: [{ directive: i1.FocusTrap }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbPopoverBackdrop]',
+                    hostDirectives: [FocusTrap],
+                    host: {
+                        '[style.clipPath]': 'popover.options().clipPath?.()',
+                        '[class]': 'popover.options().backdropClassName',
+                        '(click)': '!popover.options().disableClose && popover.close()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class NgbPopoverMain {
+    constructor() {
+        this.popover = inject(NgbPopover);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverMain, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbPopoverMain, isStandalone: true, selector: "[ngbPopoverMain]", host: { properties: { "class": "popover.options().className" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverMain, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbPopoverMain]',
+                    host: {
+                        '[class]': 'popover.options().className',
+                    },
+                }]
+        }] });
+class NgbPopover extends BaseDialog {
+    constructor() {
+        super();
+        this.disposals = disposals();
+        this.myDialog = viewChild.required('myDialog', { read: ViewContainerRef });
+        this.container = viewChild.required(NgbPopoverMain, {
+            read: ElementRef,
+        });
+        this.backdropElement = viewChild(NgbPopoverBackdrop, { read: ElementRef });
+        this.options = signal({});
+        this.lastPosition = 'top';
+        this.scrolled = signal(0);
+        this.events = this._afterViewSource.pipe(switchMap(e => {
+            const el = this.container().nativeElement;
+            const mouseenter = fromEvent(el, 'mouseenter');
+            const mouseleave = fromEvent(el, 'mouseleave');
+            const event = mouseenter.pipe(switchMap(e => mouseleave.pipe(map(x => ({ type: 'mouseleave', value: x })), startWith({ type: 'mouseenter', value: e }))));
+            return e ? event : EMPTY;
+        }));
+        this.scheduleUpdateDimension = () => {
+            this.disposals.afterNextRender(() => this.updateDimension());
+        };
+        const dialog = effect(() => {
+            this._afterViewSource.next(this.myDialog());
+            dialog.destroy();
+        });
+        effect(cleanup => {
+            const el = this.container().nativeElement;
+            const options = this.options();
+            const target = this.getTarget();
+            if (options.anchor) {
+                options.offset = 16;
+            }
+            this.lastPosition = options.position || 'bottom';
+            // this.schedulePopoverUpdate(target, el);
+            if (options.smoothScroll) {
+                // target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                // fromEvent(window, 'scroll')
+                //   .pipe(
+                //     startWith(1),
+                //     tap((x) => console.count('scroll 50')),
+                //     debounceTime(50),
+                //     take(1),
+                //   )
+                //   .subscribe(() => {});
+                // fromEvent(window, 'scroll')
+                //   .pipe(
+                //     startWith(1),
+                //     tap((x) => console.count('scroll 10')),
+                //     debounceTime(10),
+                //     take(1),
+                //   )
+                //   .subscribe(() => {
+                //     this.scrolled.update((x) => x + 1);
+                //     this.schedulePopoverUpdate(target, el);
+                //   });
+                scrollToElement(target).then(() => {
+                    this.scrolled.update(x => x + 1);
+                    this.schedulePopoverUpdate(target, el, options);
+                });
+            }
+            else {
+                this.schedulePopoverUpdate(target, el, options);
+            }
+            // TODO: remove this once we have multi cleanup support
+            if (!options.backdrop) {
+                window.addEventListener('scroll', this.scheduleUpdateDimension);
+                cleanup(() => window.removeEventListener('scroll', this.scheduleUpdateDimension));
+            }
+            // observe the target element position change
+            const resizeObserver = new ResizeObserver(() => {
+                // console.log('resizeObserver');
+                this.schedulePopoverUpdate(target, el, options);
+            });
+            resizeObserver.observe(target);
+            cleanup(() => resizeObserver.disconnect());
+        });
+    }
+    getTarget() {
+        return this.target() || this.options().target;
+    }
+    schedulePopoverUpdate(target, el, options) {
+        // this.options().target = target;
+        // if (options.backdrop) {
+        //   this.onOpen();
+        // }
+        if (options.width === 'target') {
+            // update the width of the container to be the same as the target
+            el.style.width = `${target.offsetWidth}px`;
+        }
+        else if (options.width === 'free') {
+            el.style.minWidth = `${target.offsetWidth}px`;
+        }
+        else if (options.width) {
+            el.style.width = options.width;
+        }
+        if (options.height) {
+            el.style.height = options.height;
+        }
+        if (options.maxHeight) {
+            el.style.maxHeight = options.maxHeight;
+        }
+        this.scheduleUpdateDimension();
+    }
+    updateDimension() {
+        const el = this.container().nativeElement;
+        const target = this.getTarget();
+        if (!target) {
+            return;
+        }
+        const { top, bottom, left, right, position, maxHeight, maxWidth } = tooltipPosition({
+            target,
+            el,
+            position: this.lastPosition,
+            client: this.options().client,
+            offset: this.options().offset,
+            sideOffset: this.options().sideOffset,
+        });
+        // change the anchor position
+        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) {
+            el.style.bottom = `${bottom}px`;
+            el.style.top = '';
+        }
+        else if (top) {
+            el.style.top = `${top}px`;
+            el.style.bottom = '';
+        }
+        if (right != undefined) {
+            el.style.right = `${right}px`;
+            el.style.left = '';
+        }
+        else {
+            el.style.left = `${left}px`;
+            el.style.right = '';
+        }
+        if (maxHeight) {
+            el.style.maxHeight = `${maxHeight}px`;
+        }
+        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);
+    }
+    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-base 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: [
+            createHostAnimation(['@slideInOutAnimation']),
+            trigger('slideInOutAnimation', [
+                state('1', style({ transform: 'none', opacity: 1 })),
+                state('void', style({ transform: 'translateY(-10px) scale(0.95)', opacity: 0 })),
+                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-base 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>
+    }`,
+                    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()',
+                    },
+                    animations: [
+                        createHostAnimation(['@slideInOutAnimation']),
+                        trigger('slideInOutAnimation', [
+                            state('1', style({ transform: 'none', opacity: 1 })),
+                            state('void', style({ transform: 'translateY(-10px) scale(0.95)', opacity: 0 })),
+                            state('0', style({ transform: 'translateY(-10px) scale(0.95)', opacity: 0 })),
+                            transition('* => *', animate('100ms ease-out')),
+                        ]),
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+function scrollToElement(target) {
+    return new Promise(resolve => {
+        let lastPos;
+        let currentPos = null;
+        let samePosCount = 0;
+        const checkIfScrollComplete = () => {
+            currentPos = window.pageYOffset || document.documentElement.scrollTop;
+            if (lastPos !== null && currentPos === lastPos) {
+                samePosCount++;
+                if (samePosCount > 2) {
+                    resolve(true);
+                    return;
+                }
+            }
+            else {
+                samePosCount = 0;
+                lastPos = currentPos;
+            }
+            requestAnimationFrame(checkIfScrollComplete);
+        };
+        // scroll only if the target is not in the view
+        // window.scrollTo({
+        //   top: target.offsetTop - 50,
+        //   behavior: 'smooth',
+        // });
+        target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        requestAnimationFrame(checkIfScrollComplete);
+    });
+}
+class NgbPopoverClose {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbPopoverClose, isStandalone: true, selector: "[ngbPopoverClose]", hostDirectives: [{ directive: i2.NgbPortalClose, inputs: ["ngbPortalClose", "ngbPopoverClose"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbPopoverClose]',
+                    hostDirectives: [{ directive: NgbPortalClose, inputs: ['ngbPortalClose: ngbPopoverClose'] }],
+                }]
+        }] });
+function providePopover(popover) {
+    return { provide: NgbPopover, useExisting: popover };
+}
+
+class PopoverOptions extends DialogOptions {
+}
+const POPOVER_TOKEN = new InjectionToken('POPOVER_TOKEN');
+function ngbPopoverPortal() {
+    const popover = inject(POPOVER_TOKEN, { optional: true }) ?? NgbPopover;
+    const base = basePopoverPortal(popover);
+    function open(component, options) {
+        return base.open(component, options);
+    }
+    return { open, closeAll: base.closeAll };
+}
+const registerNgbPopover = (popover) => {
+    return { provide: POPOVER_TOKEN, useValue: popover };
+};
+
+class NgbPopoverTrigger {
+    constructor() {
+        this.popoverPortal = ngbPopoverPortal();
+        this.el = inject(ElementRef);
+        this.ngbPopoverTrigger = input.required();
+        this.ngbPopoverTriggerData = input();
+        this.options = input();
+        this.closeFn = () => { };
+    }
+    open() {
+        const options = this.options();
+        const { diaRef } = this.popoverPortal.open(this.ngbPopoverTrigger(), {
+            target: this.el.nativeElement,
+            anchor: options?.anchor,
+            position: options?.position || 'top',
+            data: this.ngbPopoverTriggerData(),
+        });
+        this.closeFn = diaRef.close;
+    }
+    close() {
+        this.closeFn();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbPopoverTrigger, isStandalone: true, selector: "[ngbPopoverTrigger]", inputs: { ngbPopoverTrigger: { classPropertyName: "ngbPopoverTrigger", publicName: "ngbPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, ngbPopoverTriggerData: { classPropertyName: "ngbPopoverTriggerData", publicName: "ngbPopoverTriggerData", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "open()" } }, exportAs: ["ngbPopoverTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbPopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbPopoverTrigger]',
+                    exportAs: 'ngbPopoverTrigger',
+                    host: {
+                        '(click)': 'open()',
+                    },
+                }]
+        }] });
+
+/*
+ * Public API Surface of popover
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgbPopover, NgbPopoverBackdrop, NgbPopoverClose, NgbPopoverMain, NgbPopoverTrigger, PopoverOptions, basePopoverPortal, ngbPopoverPortal, providePopover, registerNgbPopover, tooltipPosition };
+//# sourceMappingURL=ngbase-adk-popover.mjs.map