ng-primitives 0.120.4 → 0.121.0

package/fesm2022/ng-primitives-popover.mjs

@@ -1,8 +1,8 @@
-import { ngpOverlayArrow, coerceOffset, coerceFlip, coerceShift, dismissGuardAttribute, createOverlay, injectOverlay } from 'ng-primitives/portal';
+import { ngpOverlayArrow, createOverlay, coerceOffset, coerceFlip, coerceShift, dismissGuardAttribute, injectOverlay, provideControlContainerIsolation } from 'ng-primitives/portal';
 export { injectOverlayContext as injectPopoverContext } from 'ng-primitives/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, numberAttribute, Directive, Injector, ViewContainerRef, booleanAttribute, signal, computed, output } from '@angular/core';
-import { createPrimitive, createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { InjectionToken, inject, input, numberAttribute, Directive, ViewContainerRef, Injector, signal, computed, booleanAttribute, output } from '@angular/core';
+import { createPrimitive, controlled, attrBinding, dataBinding, listener, styleBinding } from 'ng-primitives/state';
 import { injectElementRef, explicitEffect } from 'ng-primitives/internal';
 import * as i1 from 'ng-primitives/focus-trap';
 import { NgpFocusTrap } from 'ng-primitives/focus-trap';
@@ -53,11 +53,8 @@ class NgpPopoverArrow {
          * Padding between the arrow and the edges of the popover.
          * This prevents the arrow from overflowing the rounded corners.
          */
-        this.padding = input(undefined, ...(ngDevMode ? [{ debugName: "padding", alias: 'ngpPopoverArrowPadding',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPopoverArrowPadding',
-                transform: numberAttribute,
-            }]));
+        this.padding = input(undefined, { ...(ngDevMode ? { debugName: "padding" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverArrowPadding',
+            transform: numberAttribute });
         this.state = ngpPopoverArrow({ padding: this.padding });
     }
     /**
@@ -67,10 +64,10 @@ class NgpPopoverArrow {
     setPadding(value) {
         this.state.setPadding(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPopoverArrow, isStandalone: true, selector: "[ngpPopoverArrow]", inputs: { padding: { classPropertyName: "padding", publicName: "ngpPopoverArrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePopoverArrowState()], exportAs: ["ngpPopoverArrow"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPopoverArrow, isStandalone: true, selector: "[ngpPopoverArrow]", inputs: { padding: { classPropertyName: "padding", publicName: "ngpPopoverArrowPadding", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePopoverArrowState()], exportAs: ["ngpPopoverArrow"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopoverArrow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopoverArrow, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPopoverArrow]',
@@ -79,40 +76,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverArrowPadding", required: false }] }] } });
 
-/**
- * The state token  for the PopoverTrigger primitive.
- */
-const NgpPopoverTriggerStateToken = createStateToken('PopoverTrigger');
-/**
- * Provides the PopoverTrigger state.
- */
-const providePopoverTriggerState = createStateProvider(NgpPopoverTriggerStateToken);
-/**
- * Injects the PopoverTrigger state.
- */
-const injectPopoverTriggerState = createStateInjector(NgpPopoverTriggerStateToken);
-/**
- * The PopoverTrigger state registration function.
- */
-const popoverTriggerState = createState(NgpPopoverTriggerStateToken);
+const [NgpPopoverTriggerStateToken, ngpPopoverTrigger, _injectPopoverTriggerState, providePopoverTriggerState,] = createPrimitive('NgpPopoverTrigger', ({ popover: _popover = signal(undefined), disabled = signal(false), placement = signal('bottom'), offset = signal(4), showDelay = signal(0), hideDelay = signal(0), flip = signal(true), shift = signal(undefined), container = signal('body'), closeOnOutsideClick = signal(true), closeOnEscape = signal(true), scrollBehavior = signal('reposition'), context = signal(undefined), anchor = signal(null), trackPosition = signal(false), cooldown = signal(0), onOpenChange, }) => {
+    const elementRef = injectElementRef();
+    const viewContainerRef = inject(ViewContainerRef);
+    const injector = inject(Injector);
+    const popover = controlled(_popover);
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    // Host binding
+    attrBinding(elementRef, 'aria-expanded', () => (open() ? 'true' : 'false'));
+    attrBinding(elementRef, 'aria-describedby', () => overlay()?.ariaDescribedBy());
+    dataBinding(elementRef, 'data-open', open);
+    dataBinding(elementRef, 'data-placement', placement);
+    dataBinding(elementRef, 'data-disabled', disabled);
+    // Event listener
+    listener(elementRef, 'click', toggle);
+    function destroy() {
+        overlay()?.destroy();
+    }
+    function createOverlayInstance() {
+        const popoverInstance = popover();
+        if (!popoverInstance) {
+            throw new Error('Popover must be either a TemplateRef or a ComponentType');
+        }
+        // Create config for the overlay
+        const config = {
+            content: popoverInstance,
+            triggerElement: elementRef.nativeElement,
+            anchorElement: anchor(),
+            injector: injector,
+            context: context,
+            container: container(),
+            placement: placement,
+            offset: offset(),
+            flip: flip(),
+            shift: shift(),
+            showDelay: showDelay(),
+            hideDelay: hideDelay(),
+            closeOnOutsideClick: closeOnOutsideClick(),
+            closeOnEscape: closeOnEscape(),
+            restoreFocus: true,
+            scrollBehaviour: scrollBehavior(),
+            viewContainerRef: viewContainerRef,
+            trackPosition: trackPosition(),
+            overlayType: 'popover',
+            cooldown: cooldown(),
+            onClose: () => onOpenChange?.(false),
+        };
+        overlay.set(createOverlay(config));
+    }
+    function toggle(event) {
+        // if the trigger is disabled then do not toggle the popover
+        if (disabled()) {
+            return;
+        }
+        // determine the origin of the event, 0 is keyboard, 1 is mouse
+        const origin = event.detail === 0 ? 'keyboard' : 'mouse';
+        // if the popover is open then hide it
+        if (open()) {
+            hide(origin);
+        }
+        else {
+            show();
+        }
+    }
+    async function show() {
+        // If the trigger is disabled, don't show the popover
+        if (disabled()) {
+            return;
+        }
+        // Create the overlay if it doesn't exist yet
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        // Show the overlay
+        await overlay()?.show();
+        if (open()) {
+            onOpenChange?.(true);
+        }
+    }
+    async function hide(origin) {
+        // If the trigger is disabled or the popover is not open, do nothing
+        if (disabled() || !open()) {
+            return;
+        }
+        // Hide the overlay
+        await overlay()?.hide({ origin });
+    }
+    return {
+        elementRef,
+        popover,
+        disabled,
+        placement,
+        offset,
+        showDelay,
+        hideDelay,
+        flip,
+        shift,
+        container,
+        closeOnOutsideClick,
+        closeOnEscape,
+        scrollBehavior,
+        context,
+        anchor,
+        trackPosition,
+        cooldown,
+        overlay,
+        open,
+        destroy,
+        show,
+        hide,
+    };
+});
+function injectPopoverTriggerState(options) {
+    return _injectPopoverTriggerState(options);
+}
 
 /**
  * Apply the `ngpPopoverTrigger` directive to an element that triggers the popover to show.
  */
 class NgpPopoverTrigger {
     constructor() {
-        /**
-         * Access the trigger element
-         */
-        this.trigger = injectElementRef();
-        /**
-         * Access the injector.
-         */
-        this.injector = inject(Injector);
-        /**
-         * Access the view container reference.
-         */
-        this.viewContainerRef = inject(ViewContainerRef);
         /**
          * Access the global popover configuration.
          */
@@ -120,149 +204,97 @@ class NgpPopoverTrigger {
         /**
          * Access the popover template ref.
          */
-        this.popover = input(undefined, ...(ngDevMode ? [{ debugName: "popover", alias: 'ngpPopoverTrigger' }] : [{
-                alias: 'ngpPopoverTrigger',
-            }]));
+        this.popover = input(undefined, { ...(ngDevMode ? { debugName: "popover" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTrigger' });
         /**
          * Define if the trigger should be disabled.
          * @default false
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpPopoverTriggerDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPopoverTriggerDisabled',
-                transform: booleanAttribute,
-            }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerDisabled',
+            transform: booleanAttribute });
         /**
          * Define the placement of the popover relative to the trigger.
          * @default 'top'
          */
-        this.placement = input(this.config.placement, ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpPopoverTriggerPlacement' }] : [{
-                alias: 'ngpPopoverTriggerPlacement',
-            }]));
+        this.placement = input(this.config.placement, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerPlacement' });
         /**
          * Define the offset of the popover relative to the trigger.
          * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
          * @default 0
          */
-        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpPopoverTriggerOffset',
-                transform: coerceOffset }] : [{
-                alias: 'ngpPopoverTriggerOffset',
-                transform: coerceOffset,
-            }]));
+        this.offset = input(this.config.offset, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerOffset',
+            transform: coerceOffset });
         /**
          * Define the delay before the popover is displayed.
          * @default 0
          */
-        this.showDelay = input(this.config.showDelay, ...(ngDevMode ? [{ debugName: "showDelay", alias: 'ngpPopoverTriggerShowDelay',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPopoverTriggerShowDelay',
-                transform: numberAttribute,
-            }]));
+        this.showDelay = input(this.config.showDelay, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerShowDelay',
+            transform: numberAttribute });
         /**
          * Define the delay before the popover is hidden.
          * @default 0
          */
-        this.hideDelay = input(this.config.hideDelay, ...(ngDevMode ? [{ debugName: "hideDelay", alias: 'ngpPopoverTriggerHideDelay',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPopoverTriggerHideDelay',
-                transform: numberAttribute,
-            }]));
+        this.hideDelay = input(this.config.hideDelay, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerHideDelay',
+            transform: numberAttribute });
         /**
          * Define whether the popover should flip when there is not enough space for the popover.
          * Can be a boolean to enable/disable, or an object with padding and fallbackPlacements options.
          * @default true
          */
-        this.flip = input(this.config.flip, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpPopoverTriggerFlip',
-                transform: coerceFlip }] : [{
-                alias: 'ngpPopoverTriggerFlip',
-                transform: coerceFlip,
-            }]));
+        this.flip = input(this.config.flip, { ...(ngDevMode ? { debugName: "flip" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerFlip',
+            transform: coerceFlip });
         /**
          * Configure shift behavior to keep the popover in view.
          * Can be a boolean to enable/disable, or an object with padding and limiter options.
          * @default undefined (enabled by default in overlay)
          */
-        this.shift = input(this.config.shift, ...(ngDevMode ? [{ debugName: "shift", alias: 'ngpPopoverTriggerShift',
-                transform: coerceShift }] : [{
-                alias: 'ngpPopoverTriggerShift',
-                transform: coerceShift,
-            }]));
+        this.shift = input(this.config.shift, { ...(ngDevMode ? { debugName: "shift" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerShift',
+            transform: coerceShift });
         /**
          * Define the container in which the popover should be attached.
          * @default document.body
          */
-        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpPopoverTriggerContainer' }] : [{
-                alias: 'ngpPopoverTriggerContainer',
-            }]));
+        this.container = input(this.config.container, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerContainer' });
         /**
          * Define whether the popover should close when clicking outside of it, or a guard function.
          * @default true
          */
-        this.closeOnOutsideClick = input(this.config.closeOnOutsideClick, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick", alias: 'ngpPopoverTriggerCloseOnOutsideClick',
-                transform: dismissGuardAttribute }] : [{
-                alias: 'ngpPopoverTriggerCloseOnOutsideClick',
-                transform: dismissGuardAttribute,
-            }]));
+        this.closeOnOutsideClick = input(this.config.closeOnOutsideClick, { ...(ngDevMode ? { debugName: "closeOnOutsideClick" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerCloseOnOutsideClick',
+            transform: dismissGuardAttribute });
         /**
          * Define whether the popover should close when the escape key is pressed, or a guard function.
          * @default true
          */
-        this.closeOnEscape = input(this.config.closeOnEscape, ...(ngDevMode ? [{ debugName: "closeOnEscape", alias: 'ngpPopoverTriggerCloseOnEscape',
-                transform: dismissGuardAttribute }] : [{
-                alias: 'ngpPopoverTriggerCloseOnEscape',
-                transform: dismissGuardAttribute,
-            }]));
+        this.closeOnEscape = input(this.config.closeOnEscape, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerCloseOnEscape',
+            transform: dismissGuardAttribute });
         /**
          * Defines how the popover behaves when the window is scrolled.
          * @default 'reposition'
          */
-        this.scrollBehavior = input(this.config.scrollBehavior, ...(ngDevMode ? [{ debugName: "scrollBehavior", alias: 'ngpPopoverTriggerScrollBehavior' }] : [{
-                alias: 'ngpPopoverTriggerScrollBehavior',
-            }]));
+        this.scrollBehavior = input(this.config.scrollBehavior, { ...(ngDevMode ? { debugName: "scrollBehavior" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerScrollBehavior' });
         /**
          * Provide context to the popover. This can be used to pass data to the popover content.
          */
-        this.context = input(undefined, ...(ngDevMode ? [{ debugName: "context", alias: 'ngpPopoverTriggerContext' }] : [{
-                alias: 'ngpPopoverTriggerContext',
-            }]));
+        this.context = input(undefined, { ...(ngDevMode ? { debugName: "context" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerContext' });
         /**
          * Define an anchor element for positioning the popover.
          * If provided, the popover will be positioned relative to this element instead of the trigger.
          */
-        this.anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor", alias: 'ngpPopoverTriggerAnchor' }] : [{
-                alias: 'ngpPopoverTriggerAnchor',
-            }]));
+        this.anchor = input(null, { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerAnchor' });
         /**
          * Define whether to track the trigger element position on every animation frame.
          * Useful for moving elements like slider thumbs.
          * @default false
          */
-        this.trackPosition = input(this.config.trackPosition, ...(ngDevMode ? [{ debugName: "trackPosition", alias: 'ngpPopoverTriggerTrackPosition',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpPopoverTriggerTrackPosition',
-                transform: booleanAttribute,
-            }]));
+        this.trackPosition = input(this.config.trackPosition, { ...(ngDevMode ? { debugName: "trackPosition" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerTrackPosition',
+            transform: booleanAttribute });
         /**
          * Define the cooldown duration in milliseconds.
          * When moving from one popover to another within this duration,
          * the showDelay is skipped for the new popover.
          * @default 0
          */
-        this.cooldown = input(this.config.cooldown, ...(ngDevMode ? [{ debugName: "cooldown", alias: 'ngpPopoverTriggerCooldown',
-                transform: numberAttribute }] : [{
-                alias: 'ngpPopoverTriggerCooldown',
-                transform: numberAttribute,
-            }]));
-        /**
-         * The overlay that manages the popover
-         * @internal
-         */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        /**
-         * The open state of the popover.
-         * @internal
-         */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        this.cooldown = input(this.config.cooldown, { ...(ngDevMode ? { debugName: "cooldown" } : /* istanbul ignore next */ {}), alias: 'ngpPopoverTriggerCooldown',
+            transform: numberAttribute });
         /**
          * Event emitted when the popover open state changes.
          */
@@ -272,154 +304,108 @@ class NgpPopoverTrigger {
         /**
          * The popover trigger state.
          */
-        this.state = popoverTriggerState(this);
+        this.state = ngpPopoverTrigger({
+            popover: this.popover,
+            disabled: this.disabled,
+            placement: this.placement,
+            offset: this.offset,
+            showDelay: this.showDelay,
+            hideDelay: this.hideDelay,
+            flip: this.flip,
+            shift: this.shift,
+            container: this.container,
+            closeOnOutsideClick: this.closeOnOutsideClick,
+            closeOnEscape: this.closeOnEscape,
+            scrollBehavior: this.scrollBehavior,
+            context: this.context,
+            anchor: this.anchor,
+            trackPosition: this.trackPosition,
+            cooldown: this.cooldown,
+            onOpenChange: (value) => this.openChange.emit(value),
+        });
     }
     ngOnDestroy() {
-        this.overlay()?.destroy();
-    }
-    toggle(event) {
-        // if the trigger is disabled then do not toggle the popover
-        if (this.state.disabled()) {
-            return;
-        }
-        // determine the origin of the event, 0 is keyboard, 1 is mouse
-        const origin = event.detail === 0 ? 'keyboard' : 'mouse';
-        // if the popover is open then hide it
-        if (this.open()) {
-            this.hide(origin);
-        }
-        else {
-            this.show();
-        }
+        this.state.destroy();
     }
     /**
      * Show the popover.
      * @returns A promise that resolves when the popover has been shown
      */
-    async show() {
-        // If the trigger is disabled, don't show the popover
-        if (this.state.disabled()) {
-            return;
-        }
-        // Create the overlay if it doesn't exist yet
-        if (!this.overlay()) {
-            this.createOverlay();
-        }
-        // Show the overlay
-        await this.overlay()?.show();
-        if (this.open()) {
-            this.openChange.emit(true);
-        }
+    show() {
+        return this.state.show();
     }
     /**
      * @internal
      * Hide the popover.
      * @returns A promise that resolves when the popover has been hidden
      */
-    async hide(origin = 'program') {
-        // If the trigger is disabled or the popover is not open, do nothing
-        if (this.state.disabled() || !this.open()) {
-            return;
-        }
-        // Hide the overlay
-        await this.overlay()?.hide({ origin });
-    }
-    /**
-     * Create the overlay that will contain the popover
-     */
-    createOverlay() {
-        const popover = this.state.popover();
-        if (!popover) {
-            throw new Error('Popover must be either a TemplateRef or a ComponentType');
-        }
-        // Create config for the overlay
-        const config = {
-            content: popover,
-            triggerElement: this.trigger.nativeElement,
-            anchorElement: this.state.anchor(),
-            injector: this.injector,
-            context: this.state.context,
-            container: this.state.container(),
-            placement: this.state.placement,
-            offset: this.state.offset(),
-            flip: this.state.flip(),
-            shift: this.state.shift(),
-            showDelay: this.state.showDelay(),
-            hideDelay: this.state.hideDelay(),
-            closeOnOutsideClick: this.state.closeOnOutsideClick(),
-            closeOnEscape: this.state.closeOnEscape(),
-            restoreFocus: true,
-            scrollBehaviour: this.state.scrollBehavior(),
-            viewContainerRef: this.viewContainerRef,
-            trackPosition: this.state.trackPosition(),
-            overlayType: 'popover',
-            cooldown: this.state.cooldown(),
-            onClose: () => this.openChange.emit(false),
-        };
-        this.overlay.set(createOverlay(config));
+    hide(origin = 'program') {
+        return this.state.hide(origin);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPopoverTrigger, isStandalone: true, selector: "[ngpPopoverTrigger]", inputs: { popover: { classPropertyName: "popover", publicName: "ngpPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPopoverTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpPopoverTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpPopoverTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpPopoverTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpPopoverTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpPopoverTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "ngpPopoverTriggerShift", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpPopoverTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "ngpPopoverTriggerCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "ngpPopoverTriggerCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpPopoverTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "ngpPopoverTriggerAnchor", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "ngpPopoverTriggerTrackPosition", isSignal: true, isRequired: false, transformFunction: null }, cooldown: { classPropertyName: "cooldown", publicName: "ngpPopoverTriggerCooldown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "ngpPopoverTriggerOpenChange" }, host: { listeners: { "click": "toggle($event)" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null", "attr.data-placement": "state.placement()", "attr.data-disabled": "state.disabled() ? \"\" : null", "attr.aria-describedby": "overlay()?.ariaDescribedBy()" } }, providers: [providePopoverTriggerState({ inherit: false })], exportAs: ["ngpPopoverTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPopoverTrigger, isStandalone: true, selector: "[ngpPopoverTrigger]", inputs: { popover: { classPropertyName: "popover", publicName: "ngpPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPopoverTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpPopoverTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpPopoverTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpPopoverTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpPopoverTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpPopoverTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "ngpPopoverTriggerShift", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpPopoverTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "ngpPopoverTriggerCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "ngpPopoverTriggerCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpPopoverTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "ngpPopoverTriggerAnchor", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "ngpPopoverTriggerTrackPosition", isSignal: true, isRequired: false, transformFunction: null }, cooldown: { classPropertyName: "cooldown", publicName: "ngpPopoverTriggerCooldown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "ngpPopoverTriggerOpenChange" }, providers: [providePopoverTriggerState({ inherit: false })], exportAs: ["ngpPopoverTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopoverTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPopoverTrigger]',
                     exportAs: 'ngpPopoverTrigger',
                     providers: [providePopoverTriggerState({ inherit: false })],
-                    host: {
-                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
-                        '[attr.data-open]': 'open() ? "" : null',
-                        '[attr.data-placement]': 'state.placement()',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                        '[attr.aria-describedby]': 'overlay()?.ariaDescribedBy()',
-                        '(click)': 'toggle($event)',
-                    },
                 }]
         }], propDecorators: { popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerHideDelay", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerFlip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerShift", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerContainer", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerCloseOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerCloseOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerScrollBehavior", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerContext", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerAnchor", required: false }] }], trackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerTrackPosition", required: false }] }], cooldown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpPopoverTriggerCooldown", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpPopoverTriggerOpenChange"] }] } });
 
+const [NgpPopoverStateToken, ngpPopover, injectPopoverState, providePopoverState] = createPrimitive('NgpPopover', ({ id: _id = signal('') }) => {
+    const elementRef = injectElementRef();
+    const overlay = injectOverlay();
+    const id = controlled(_id);
+    id.set(overlay.id());
+    // Host binding
+    attrBinding(elementRef, 'role', 'dialog');
+    attrBinding(elementRef, 'id', id);
+    styleBinding(elementRef, 'left.px', () => overlay.position().x ?? null);
+    styleBinding(elementRef, 'top.px', () => overlay.position().y ?? null);
+    styleBinding(elementRef, '--ngp-popover-trigger-width.px', () => overlay.triggerWidth());
+    styleBinding(elementRef, '--ngp-popover-transform-origin', () => overlay.transformOrigin());
+    styleBinding(elementRef, '--ngp-popover-available-width.px', () => overlay.availableWidth());
+    styleBinding(elementRef, '--ngp-popover-available-height.px', () => overlay.availableHeight());
+    dataBinding(elementRef, 'data-placement', () => overlay.finalPlacement() ?? null);
+    dataBinding(elementRef, 'data-overlay', '');
+    // Effect handle
+    explicitEffect([id], ([id]) => overlay.id.set(id));
+    return {
+        id,
+    };
+});
+
 /**
  * Apply the `ngpPopover` directive to an element that represents the popover. This typically would be a `div` inside an `ng-template`.
  */
 class NgpPopover {
     constructor() {
-        /**
-         * Access the overlay.
-         */
-        this.overlay = injectOverlay();
         /**
          * The unique id of the tooltip.
          */
-        this.id = input(this.overlay.id(), ...(ngDevMode ? [{ debugName: "id" }] : []));
-        explicitEffect([this.id], ([id]) => this.overlay.id.set(id));
+        this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.state = ngpPopover({
+            id: this.id,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpPopover, isStandalone: true, selector: "[ngpPopover]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "dialog", "data-overlay": "" }, properties: { "id": "id()", "style.left.px": "overlay.position().x", "style.top.px": "overlay.position().y", "style.--ngp-popover-trigger-width.px": "overlay.triggerWidth()", "style.--ngp-popover-transform-origin": "overlay.transformOrigin()", "style.--ngp-popover-available-width.px": "overlay.availableWidth()", "style.--ngp-popover-available-height.px": "overlay.availableHeight()", "attr.data-placement": "overlay.finalPlacement()" } }, exportAs: ["ngpPopover"], hostDirectives: [{ directive: i1.NgpFocusTrap }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: NgpPopover, isStandalone: true, selector: "[ngpPopover]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePopoverState(), provideControlContainerIsolation()], exportAs: ["ngpPopover"], hostDirectives: [{ directive: i1.NgpFocusTrap }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgpPopover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPopover]',
                     exportAs: 'ngpPopover',
                     hostDirectives: [NgpFocusTrap],
-                    host: {
-                        role: 'dialog',
-                        '[id]': 'id()',
-                        '[style.left.px]': 'overlay.position().x',
-                        '[style.top.px]': 'overlay.position().y',
-                        '[style.--ngp-popover-trigger-width.px]': 'overlay.triggerWidth()',
-                        '[style.--ngp-popover-transform-origin]': 'overlay.transformOrigin()',
-                        '[style.--ngp-popover-available-width.px]': 'overlay.availableWidth()',
-                        '[style.--ngp-popover-available-height.px]': 'overlay.availableHeight()',
-                        '[attr.data-placement]': 'overlay.finalPlacement()',
-                        'data-overlay': '',
-                    },
+                    providers: [providePopoverState(), provideControlContainerIsolation()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpPopover, NgpPopoverArrow, NgpPopoverArrowStateToken, NgpPopoverTrigger, injectPopoverArrowState, injectPopoverTriggerState, ngpPopoverArrow, providePopoverArrowState, providePopoverConfig, providePopoverTriggerState };
+export { NgpPopover, NgpPopoverArrow, NgpPopoverArrowStateToken, NgpPopoverStateToken, NgpPopoverTrigger, NgpPopoverTriggerStateToken, injectPopoverArrowState, injectPopoverState, injectPopoverTriggerState, ngpPopover, ngpPopoverArrow, ngpPopoverTrigger, providePopoverArrowState, providePopoverConfig, providePopoverState, providePopoverTriggerState };
 //# sourceMappingURL=ng-primitives-popover.mjs.map