@ngbase/adk 0.1.17 → 0.1.18

package/fesm2022/ngbase-adk-popover.mjs

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, input, ElementRef, computed, Component, linkedSignal, Directive, viewChild, ViewContainerRef, effect } from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, signal, input, computed, Component, linkedSignal, viewChild, ViewContainerRef, effect } from '@angular/core';
 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';
+import { disposals } from '@ngbase/adk/utils';
+import { Observable, fromEvent, switchMap, map, startWith } from 'rxjs';
 
 function basePopoverPortal(component) {
     const NAME = 'popover';
@@ -360,6 +359,26 @@ function tooltipPosition(config, windowDimensions = { width: window.innerWidth,
     return positioner.calculatePosition();
 }
 
+/**
+ * Directive to mark the host element for arrow positioning.
+ * Apply this to the parent component that contains the arrow.
+ * The arrow will calculate offset based on the difference between
+ * the host element and the arrow element positions.
+ */
+class NgbPopoverArrowHost {
+    constructor() {
+        this.el = inject((ElementRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverArrowHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbPopoverArrowHost, isStandalone: true, selector: "[ngbPopoverArrowHost]", exportAs: ["ngbPopoverArrowHost"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverArrowHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbPopoverArrowHost]',
+                    exportAs: 'ngbPopoverArrowHost',
+                }]
+        }] });
 class PopoverArrowTracker {
     constructor() {
         this.top = 0;
@@ -380,6 +399,8 @@ class NgbPopoverArrow {
         this.arrowTracker = inject(POPOVER_ARROW_TRACKER);
         this.anchor = input(false, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
         this.el = inject((ElementRef));
+        // Optional: inject the host directive if available (for offset calculation)
+        this.arrowHost = inject(NgbPopoverArrowHost, { optional: true });
         this.styles = computed(() => {
             const { target, position } = this.arrowTracker.values();
             if (target && position) {
@@ -389,48 +410,71 @@ class NgbPopoverArrow {
         }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
     }
     updateAnchorPosition(position, target, el) {
-        const { height, width, top } = el.getBoundingClientRect();
-        const { height: tHeight, width: tWidth, top: tTop } = target.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        // Calculate offset from host element (padding + border)
+        // If arrowHost is available, use the difference between host and arrow element
+        let offsetTop = 0;
+        let offsetLeft = 0;
+        if (this.arrowHost) {
+            const hostRect = this.arrowHost.el.nativeElement.getBoundingClientRect();
+            offsetTop = elRect.top - hostRect.top;
+            offsetLeft = elRect.left - hostRect.left;
+            console.log(elRect.top - hostRect.top);
+        }
         let deg = '0deg';
-        let anchorTop = '50%';
-        let anchorLeft = '50%';
-        const anchorWidth = 8;
-        const thHeight = tHeight / 2 - anchorWidth / 2;
-        const thWidth = tWidth / 2;
+        let anchorTop = '0';
+        let anchorLeft = '0';
+        // Minimum distance from edge
+        const minPadding = 8;
+        // Calculate target center
+        const targetCenterX = targetRect.left + targetRect.width / 2;
+        const targetCenterY = targetRect.top + targetRect.height / 2;
+        // Arrow tip position relative to the arrow element
+        // Add offset to account for host padding/border
+        const arrowLeftPx = targetCenterX - elRect.left + offsetLeft;
+        const arrowTopPx = targetCenterY - elRect.top + offsetTop;
+        // Content area dimensions
+        const contentWidth = elRect.width;
+        const contentHeight = elRect.height;
+        // Clamp positions within content bounds
+        const clampedLeftPx = Math.max(minPadding, Math.min(arrowLeftPx, contentWidth - minPadding));
+        const clampedTopPx = Math.max(minPadding, Math.min(arrowTopPx, contentHeight - minPadding));
+        // Arrow positioning - always center to target
         switch (position) {
             case 'top':
             case 'tl':
             case 'tr':
+                deg = '0deg';
                 anchorTop = '100%';
+                anchorLeft = `${clampedLeftPx}px`;
+                break;
+            case 'bottom':
+            case 'bl':
+            case 'br':
+                deg = '180deg';
+                anchorTop = '0';
+                anchorLeft = `${clampedLeftPx}px`;
                 break;
             case 'left':
+            case 'ls':
+            case 'le':
                 deg = '270deg';
-                anchorLeft = `calc(100% + ${anchorWidth / 2}px)`;
-                anchorTop =
-                    tHeight > height
-                        ? `calc(50% - ${anchorWidth / 2}px)`
-                        : `calc(${thHeight + (tTop - top)}px)`;
+                anchorLeft = '100%';
+                anchorTop = `${clampedTopPx}px`;
                 break;
             case 'right':
+            case 'rs':
+            case 're':
                 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)`;
+                anchorLeft = '0';
+                anchorTop = `${clampedTopPx}px`;
                 break;
         }
         return { '--action-angle': deg, '--action-left': anchorLeft, '--action-top': anchorTop };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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>
@@ -451,16 +495,19 @@ class NgbPopoverArrow {
           border-right: 0.45rem solid transparent;
           top: var(--action-top);
           left: var(--action-left);
-          transform: translateX(-50%) rotate(var(--action-angle, 180deg));
+          /* The tip of the triangle is at center-top (50% 0) */
+          /* We rotate around the tip so it stays at the target position */
+          transform-origin: 50% 0;
+          transform: translate(-50%, 0) 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;--action-color: var(--color-background)}:host:before{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-top:.5rem solid var(--action-color);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"] }); }
+  `, isInline: true, styles: [":host{--action-angle: 180deg;--action-left: 50%;--action-top: -1rem;--action-color: var(--color-background)}:host:before{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-top:.5rem solid var(--action-color);border-left:.45rem solid transparent;border-right:.45rem solid transparent;top:var(--action-top);left:var(--action-left);transform-origin:50% 0;transform:translate(-50%) rotate(var(--action-angle, 180deg))}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverArrow, decorators: [{
             type: Component,
             args: [{
                     selector: '[ngbPopoverArrow]',
@@ -485,7 +532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
           border-right: 0.45rem solid transparent;
           top: var(--action-top);
           left: var(--action-left);
-          transform: translateX(-50%) rotate(var(--action-angle, 180deg));
+          /* The tip of the triangle is at center-top (50% 0) */
+          /* We rotate around the tip so it stays at the target position */
+          transform-origin: 50% 0;
+          transform: translate(-50%, 0) 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;  */
@@ -497,18 +547,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         '[style]': 'styles()',
                     },
                 }]
-        }] });
+        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }] } });
 
 class NgbPopoverBackdrop {
     constructor() {
         this.popover = inject(NgbPopover);
         this.focusTrap = inject(FocusTrap);
-        this.focusTrap._focusTrap = linkedSignal(() => this.popover.options().focusTrap ?? true);
+        this.focusTrap._focusTrap = linkedSignal(() => this.popover.options().focusTrap ?? true, ...(ngDevMode ? [{ debugName: "_focusTrap" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.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: "20.2.0", ngImport: i0, type: NgbPopoverBackdrop, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverBackdrop, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbPopoverBackdrop]',
@@ -524,10 +574,10 @@ class NgbPopoverMain {
     constructor() {
         this.popover = inject(NgbPopover);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverMain, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0", type: NgbPopoverMain, isStandalone: true, selector: "[ngbPopoverMain]", host: { properties: { "class": "popover.options().className" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverMain, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: NgbPopoverMain, isStandalone: true, selector: "[ngbPopoverMain]", host: { properties: { "class": "popover.options().className" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverMain, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverMain, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbPopoverMain]',
@@ -539,30 +589,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
 class NgbPopover extends BaseDialog {
     constructor() {
         super();
+        this.contentContainer = viewChild('contentContainer', { ...(ngDevMode ? { debugName: "contentContainer" } : {}), read: ViewContainerRef });
         this.arrowTracker = inject(POPOVER_ARROW_TRACKER);
         this.disposals = disposals();
-        this.myDialog = viewChild.required('myDialog', { read: ViewContainerRef });
+        // These are set by subclasses via viewChild
         this.container = viewChild.required(NgbPopoverMain, {
             read: ElementRef,
         });
-        this.backdropElement = viewChild(NgbPopoverBackdrop, ...(ngDevMode ? [{ debugName: "backdropElement", read: ElementRef }] : [{ read: ElementRef }]));
+        this.backdropElement = viewChild(NgbPopoverBackdrop, { ...(ngDevMode ? { debugName: "backdropElement" } : {}), read: ElementRef });
         this.options = signal({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.lastPosition = 'top';
         this.scrolled = signal(0, ...(ngDevMode ? [{ debugName: "scrolled" }] : []));
-        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.events = new Observable(subscriber => {
+            // Defer until container is available
+            queueMicrotask(() => {
+                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 }))));
+                event.subscribe(subscriber);
+            });
+        });
         this.scheduleUpdateDimension = () => {
             this.disposals.afterNextRender(() => this.updateDimension());
         };
-        const dialog = effect(() => {
-            this._afterViewSource.next(this.myDialog());
-            dialog.destroy();
-        }, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
         effect(cleanup => {
             const el = this.container().nativeElement;
             const options = this.options();
@@ -689,37 +739,18 @@ class NgbPopover extends BaseDialog {
         // console.log('setOptions', options);
         this.options.set(options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.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 })),
-                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')),
-            ]),
-        ] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: NgbPopover, isStandalone: true, selector: "ngb-popover", viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopover, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngb-popover',
                     template: '',
-                    host: {
-                        '[@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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgbPopoverMain), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], backdropElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgbPopoverBackdrop), { ...{ read: ElementRef }, isSignal: true }] }] } });
 function scrollToElement(target) {
     return new Promise(resolve => {
         let lastPos;
@@ -757,13 +788,13 @@ class NgbPopoverClose extends NgbPortalClose {
     close() {
         super.close(this.ngbPopoverClose());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverClose, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0", type: NgbPopoverClose, isStandalone: true, selector: "[ngbPopoverClose]", inputs: { ngbPopoverClose: { classPropertyName: "ngbPopoverClose", publicName: "ngbPopoverClose", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverClose, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgbPopoverClose, isStandalone: true, selector: "[ngbPopoverClose]", inputs: { ngbPopoverClose: { classPropertyName: "ngbPopoverClose", publicName: "ngbPopoverClose", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverClose, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverClose, decorators: [{
             type: Directive,
             args: [{ selector: '[ngbPopoverClose]' }]
-        }] });
+        }], propDecorators: { ngbPopoverClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbPopoverClose", required: false }] }] } });
 function aliasPopover(popover) {
     return [{ provide: NgbPopover, useExisting: popover }, providePopoverArrowTracker()];
 }
@@ -805,10 +836,10 @@ class NgbPopoverTrigger {
     close() {
         this.closeFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: NgbPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.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: "20.2.0", ngImport: i0, type: NgbPopoverTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgbPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngbPopoverTrigger]',
@@ -817,7 +848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
                         '(click)': 'open()',
                     },
                 }]
-        }] });
+        }], propDecorators: { ngbPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbPopoverTrigger", required: true }] }], ngbPopoverTriggerData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngbPopoverTriggerData", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 /*
  * Public API Surface of popover
@@ -827,5 +858,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgbPopover, NgbPopoverArrow, NgbPopoverBackdrop, NgbPopoverClose, NgbPopoverMain, NgbPopoverTrigger, POPOVER_ARROW_TRACKER, PopoverArrowTracker, PopoverOptions, aliasPopover, basePopoverPortal, ngbPopoverPortal, providePopoverArrowTracker, registerNgbPopover, tooltipPosition };
+export { NgbPopover, NgbPopoverArrow, NgbPopoverArrowHost, NgbPopoverBackdrop, NgbPopoverClose, NgbPopoverMain, NgbPopoverTrigger, POPOVER_ARROW_TRACKER, PopoverArrowTracker, PopoverOptions, aliasPopover, basePopoverPortal, ngbPopoverPortal, providePopoverArrowTracker, registerNgbPopover, tooltipPosition };
 //# sourceMappingURL=ngbase-adk-popover.mjs.map