ng-primitives 0.44.0 → 0.45.0

package/menu/menu-trigger/menu-trigger.d.ts

@@ -1,18 +1,92 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { OnDestroy } from '@angular/core';
+import { Placement } from '@floating-ui/dom';
+import { NgpOverlay, NgpOverlayContent } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/popover";
 /**
  * The `NgpMenuTrigger` directive allows you to turn an element into a menu trigger.
  */
-export declare class NgpMenuTrigger {
-    /** Access the popover trigger state */
-    private readonly state;
-    /** Access any parent menus */
-    private readonly parentMenu;
-    constructor();
-    /**
-     * Close the menu and any parent menus
-     */
-    closeOnEscape(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgpMenuTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpMenuTrigger, "[ngpMenuTrigger]", ["ngpMenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.NgpPopoverTrigger; inputs: { "ngpPopoverTrigger": "ngpMenuTrigger"; "ngpPopoverTriggerDisabled": "ngpMenuTriggerDisabled"; "ngpPopoverTriggerPlacement": "ngpMenuTriggerPlacement"; "ngpPopoverTriggerOffset": "ngpMenuTriggerOffset"; "ngpPopoverTriggerShowDelay": "ngpMenuTriggerShowDelay"; "ngpPopoverTriggerHideDelay": "ngpMenuTriggerHideDelay"; "ngpPopoverTriggerFlip": "ngpMenuTriggerFlip"; "ngpPopoverTriggerContainer": "ngpMenuTriggerContainer"; "ngpPopoverTriggerScrollBehavior": "ngpMenuTriggerScrollBehavior"; }; outputs: {}; }]>;
+export declare class NgpMenuTrigger<T = unknown> implements OnDestroy {
+    /**
+     * Access the trigger element
+     */
+    private readonly trigger;
+    /**
+     * Access the injector.
+     */
+    private readonly injector;
+    /**
+     * Access the global menu configuration.
+     */
+    private readonly config;
+    /**
+     * Access the menu template ref.
+     */
+    readonly menu: import("@angular/core").InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the menu relative to the trigger.
+     * @default 'bottom-start'
+     */
+    readonly placement: import("@angular/core").InputSignal<Placement>;
+    /**
+     * Define the offset of the menu relative to the trigger.
+     * @default 0
+     */
+    readonly offset: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Define whether the menu should flip when there is not enough space for the menu.
+     * @default true
+     */
+    readonly flip: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the container in which the menu should be attached.
+     * @default document.body
+     */
+    readonly container: import("@angular/core").InputSignal<HTMLElement | null>;
+    /**
+     * Defines how the menu behaves when the window is scrolled.
+     * @default 'block'
+     */
+    readonly scrollBehavior: import("@angular/core").InputSignal<"reposition" | "block">;
+    /**
+     * Provide context to the menu. This can be used to pass data to the menu content.
+     */
+    readonly context: import("@angular/core").InputSignal<T | undefined>;
+    /**
+     * The overlay that manages the menu
+     * @internal
+     */
+    readonly overlay: import("@angular/core").WritableSignal<NgpOverlay<T> | null>;
+    /**
+     * The open state of the menu.
+     * @internal
+     */
+    readonly open: import("@angular/core").Signal<boolean>;
+    /**
+     * The menu trigger state.
+     */
+    readonly state: import("ng-primitives/state").CreatedState<NgpMenuTrigger<T>>;
+    ngOnDestroy(): void;
+    protected toggle(event: MouseEvent): void;
+    /**
+     * Show the menu.
+     */
+    show(): void;
+    /**
+     * @internal
+     * Hide the menu.
+     */
+    hide(origin?: FocusOrigin): void;
+    /**
+     * Create the overlay that will contain the menu
+     */
+    private createOverlay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpMenuTrigger<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpMenuTrigger<any>, "[ngpMenuTrigger]", ["ngpMenuTrigger"], { "menu": { "alias": "ngpMenuTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpMenuTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpMenuTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpMenuTriggerOffset"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpMenuTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpMenuTriggerContainer"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "ngpMenuTriggerScrollBehavior"; "required": false; "isSignal": true; }; "context": { "alias": "ngpMenuTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/menu/submenu-trigger/submenu-trigger-state.d.ts

@@ -0,0 +1,56 @@
+import type { NgpSubmenuTrigger } from './submenu-trigger';
+/**
+ * The state token  for the SubmenuTrigger primitive.
+ */
+export declare const NgpSubmenuTriggerStateToken: import("@angular/core").InjectionToken<NgpSubmenuTrigger<unknown>>;
+/**
+ * Provides the SubmenuTrigger state.
+ */
+export declare const provideSubmenuTriggerState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
+/**
+ * Injects the SubmenuTrigger state.
+ */
+export declare const injectSubmenuTriggerState: <U = {
+    readonly trigger: import("@angular/core").ElementRef<HTMLElement>;
+    readonly injector: import("@angular/core").Injector;
+    readonly menuTrigger: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly trigger: /*elided*/ any;
+        readonly injector: /*elided*/ any;
+        readonly config: /*elided*/ any;
+        readonly menu: /*elided*/ any;
+        readonly disabled: /*elided*/ any;
+        readonly placement: /*elided*/ any;
+        readonly offset: /*elided*/ any;
+        readonly flip: /*elided*/ any;
+        readonly container: /*elided*/ any;
+        readonly scrollBehavior: /*elided*/ any;
+        readonly context: /*elided*/ any;
+        readonly overlay: /*elided*/ any;
+        readonly open: /*elided*/ any;
+        readonly state: /*elided*/ any;
+        ngOnDestroy: /*elided*/ any;
+        toggle: /*elided*/ any;
+        show: /*elided*/ any;
+        hide: /*elided*/ any;
+        createOverlay: /*elided*/ any;
+    }>>;
+    readonly parentMenu: import("ng-primitives/menu").NgpMenu | null;
+    readonly menu: import("@angular/core").InputSignal<import("ng-primitives/portal").NgpOverlayContent<unknown> | undefined>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly placement: import("@angular/core").InputSignal<import("@floating-ui/dom").Placement>;
+    readonly offset: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-CJVxXUcb").N>;
+    readonly flip: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
+    readonly overlay: import("@angular/core").WritableSignal<import("ng-primitives/portal").NgpOverlay<unknown> | null>;
+    readonly open: import("@angular/core").Signal<boolean>;
+    readonly state: import("ng-primitives/state").CreatedState<NgpSubmenuTrigger<unknown>>;
+    toggle: (event: MouseEvent) => void;
+    show: () => void;
+    hide: (origin?: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
+    createOverlay: () => void;
+    showSubmenuOnArrow: (event: KeyboardEvent) => void;
+    showSubmenuOnHover: () => void;
+}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+/**
+ * The SubmenuTrigger state registration function.
+ */
+export declare const submenuTriggerState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;

package/menu/submenu-trigger/submenu-trigger.d.ts

@@ -1,22 +1,74 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { Placement } from '@floating-ui/dom';
+import { NgpOverlay, NgpOverlayContent } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/popover";
-export declare class NgpSubmenuTrigger {
-    /** Access the popover trigger element. */
+export declare class NgpSubmenuTrigger<T = unknown> {
+    /**
+     * Access the menu trigger element.
+     */
     private readonly trigger;
-    /** Access the popover trigger state */
-    private readonly popoverTrigger;
+    /**
+     * Access the injector.
+     */
+    private readonly injector;
+    /** Access the menu trigger state */
+    private readonly menuTrigger;
     /** Access the parent menu */
     private readonly parentMenu;
-    constructor();
     /**
+     * Access the submenu template ref.
+     */
+    readonly menu: import("@angular/core").InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the menu relative to the trigger.
+     * @default 'right-start'
+     */
+    readonly placement: import("@angular/core").InputSignal<Placement>;
+    /**
+     * Define the offset of the menu relative to the trigger.
+     * @default 0
+     */
+    readonly offset: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Define whether the menu should flip when there is not enough space for the menu.
+     * @default true
+     */
+    readonly flip: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The overlay that manages the menu
+     * @internal
+     */
+    readonly overlay: import("@angular/core").WritableSignal<NgpOverlay<T> | null>;
+    /**
+     * The open state of the menu.
      * @internal
      */
-    openMenu(origin: FocusOrigin): void;
+    readonly open: import("@angular/core").Signal<boolean>;
+    /**
+     * Access the menu trigger state.
+     */
+    readonly state: import("ng-primitives/state").CreatedState<NgpSubmenuTrigger<T>>;
+    constructor();
+    protected toggle(event: MouseEvent): void;
+    /**
+     * Show the menu.
+     */
+    show(): void;
     /**
      * @internal
+     * Hide the menu.
+     */
+    hide(origin?: FocusOrigin): void;
+    /**
+     * Create the overlay that will contain the menu
      */
-    closeMenu(origin: FocusOrigin): void;
+    private createOverlay;
     /**
      * If the user presses the right arrow key, we want to open the submenu
      * and focus the first item in the submenu.
@@ -28,6 +80,6 @@ export declare class NgpSubmenuTrigger {
      * If the user hovers over the trigger, we want to open the submenu
      */
     protected showSubmenuOnHover(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgpSubmenuTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSubmenuTrigger, "[ngpSubmenuTrigger]", ["ngpSubmenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.NgpPopoverTrigger; inputs: { "ngpPopoverTrigger": "ngpSubmenuTrigger"; }; outputs: {}; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpSubmenuTrigger<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSubmenuTrigger<any>, "[ngpSubmenuTrigger]", ["ngpSubmenuTrigger"], { "menu": { "alias": "ngpSubmenuTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpMenuTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpMenuTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpMenuTriggerOffset"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpMenuTriggerFlip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "keywords": [
     "angular",
     "primitives",

package/popover/index.d.ts

@@ -1,6 +1,5 @@
+export { injectOverlayContext as injectPopoverContext } from 'ng-primitives/portal';
 export { NgpPopoverConfig, providePopoverConfig } from './config/popover-config';
 export { NgpPopoverTrigger } from './popover-trigger/popover-trigger';
 export { injectPopoverTriggerState, providePopoverTriggerState, } from './popover-trigger/popover-trigger-state';
 export { NgpPopover } from './popover/popover';
-export { injectPopoverContext, NgpPopoverContextToken } from './popover/popover-token';
-export { getTransformOrigin } from './utils/transform-origin';

package/popover/popover/popover.d.ts

@@ -1,4 +1,3 @@
-import { FocusOrigin } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/focus-trap";
 import * as i2 from "ng-primitives/internal";
@@ -7,49 +6,9 @@ import * as i2 from "ng-primitives/internal";
  */
 export declare class NgpPopover {
     /**
-     * Access the popover element.
+     * Access the overlay.
      */
-    private readonly popover;
-    /**
-     * Access the focus trap.
-     */
-    private readonly focusTrap;
-    /**
-     * Access the interactivity checker.
-     */
-    private readonly interactivity;
-    /**
-     * Access the focus monitor.
-     */
-    private readonly focusMonitor;
-    /**
-     * Access the trigger instance.
-     */
-    protected readonly trigger: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/popover").NgpPopoverTrigger<unknown>>>;
-    /**
-     * Compute the x position of the popover.
-     */
-    protected readonly x: import("@angular/core").Signal<number>;
-    /**
-     * Compute the y position of the popover.
-     */
-    protected readonly y: import("@angular/core").Signal<number>;
-    /**
-     * Derive the transform origin of the popover.
-     */
-    protected readonly transformOrigin: import("@angular/core").Signal<string>;
-    constructor();
-    /**
-     * Focus the first tabbable element inside the popover.
-     * If no tabbable element is found, focus the popover itself.
-     * @internal
-     */
-    setInitialFocus(origin: FocusOrigin): void;
-    /**
-     * Disable the focus trap.
-     * @internal
-     */
-    disableFocusTrap(): void;
+    protected readonly overlay: import("ng-primitives/portal").NgpOverlay<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpPopover, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpPopover, "[ngpPopover]", ["ngpPopover"], {}, {}, never, never, true, [{ directive: typeof i1.NgpFocusTrap; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
 }

package/popover/popover-trigger/popover-trigger.d.ts

@@ -1,9 +1,8 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { OnDestroy, TemplateRef, Type } from '@angular/core';
+import { OnDestroy } from '@angular/core';
 import { Placement } from '@floating-ui/dom';
-import { NgpPortal } from 'ng-primitives/portal';
-import type { NgpPopover } from '../popover/popover';
+import { NgpOverlay, NgpOverlayContent } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
 /**
  * Apply the `ngpPopoverTrigger` directive to an element that triggers the popover to show.
@@ -13,26 +12,6 @@ export declare class NgpPopoverTrigger<T = null> implements OnDestroy {
      * Access the trigger element
      */
     private readonly trigger;
-    /**
-     * Access the exit animation state.
-     */
-    private readonly exitAnimationState;
-    /**
-     * Inject the parent popover trigger if available.
-     */
-    private readonly parentTrigger;
-    /**
-     * Access the view container ref.
-     */
-    private readonly viewContainerRef;
-    /**
-     * Access the document.
-     */
-    private readonly document;
-    /**
-     * Access the viewport ruler.
-     */
-    private readonly viewportRuler;
     /**
      * Access the injector.
      */
@@ -41,18 +20,10 @@ export declare class NgpPopoverTrigger<T = null> implements OnDestroy {
      * Access the global popover configuration.
      */
     private readonly config;
-    /**
-     * Access the disposable utilities
-     */
-    private readonly disposables;
-    /**
-     * Access the focus monitor.
-     */
-    private readonly focusMonitor;
     /**
      * Access the popover template ref.
      */
-    readonly popover: import("@angular/core").InputSignal<NgpPopoverContent<T> | null>;
+    readonly popover: import("@angular/core").InputSignal<NgpOverlayContent<T> | undefined>;
     /**
      * Define if the trigger should be disabled.
      * @default false
@@ -104,103 +75,38 @@ export declare class NgpPopoverTrigger<T = null> implements OnDestroy {
      */
     readonly scrollBehavior: import("@angular/core").InputSignal<"reposition" | "block">;
     /**
-     * Provide context to the popover.
-     * @default null
-     */
-    readonly context: import("@angular/core").InputSignal<T | null>;
-    /**
-     * Store the popover view ref.
-     */
-    protected readonly viewRef: import("@angular/core").WritableSignal<NgpPortal | undefined>;
-    /**
-     * Determines if the popover is open.
-     */
-    readonly open: import("@angular/core").Signal<boolean>;
-    /**
-     * Derive the popover middleware from the provided configuration.
-     */
-    private readonly middleware;
-    /**
-     * Store the computed position of the popover.
-     * @internal
-     */
-    readonly position: import("@angular/core").WritableSignal<{
-        x: number;
-        y: number;
-    }>;
-    /**
-     * @internal
-     * Store the trigger width.
-     */
-    readonly width: import("@angular/core").WritableSignal<number | null>;
-    /**
-     * The dispose function to stop computing the position of the popover.
-     */
-    private dispose?;
-    /**
-     * A document-wide click listener that checks if the click
-     * occurred outside of the popover and trigger elements.
-     */
-    private documentClickListener?;
-    /**
-     * Store the popover instance.
-     * @internal
-     */
-    private popoverInstance;
-    /**
-     * Get the scroll strategy based on the configuration.
-     */
-    private readonly scrollStrategy;
-    /**
-     * @internal
-     * Register any child popover to the stack.
+     * Provide context to the popover. This can be used to pass data to the popover content.
      */
-    readonly stack: NgpPopoverTrigger<any>[];
+    readonly context: import("@angular/core").InputSignal<T | undefined>;
     /**
+     * The overlay that manages the popover
      * @internal
-     * The timeout to open the popover.
      */
-    private openTimeout?;
+    readonly overlay: import("@angular/core").WritableSignal<NgpOverlay<T> | null>;
     /**
+     * The open state of the popover.
      * @internal
-     * The timeout to close the popover.
      */
-    private closeTimeout?;
+    readonly open: import("@angular/core").Signal<boolean>;
     /**
      * The popover trigger state.
      */
     readonly state: import("ng-primitives/state").CreatedState<NgpPopoverTrigger<T>>;
-    constructor();
     ngOnDestroy(): void;
-    protected toggleOpenState(event: MouseEvent): void;
+    protected toggle(event: MouseEvent): void;
     /**
      * Show the popover.
      */
-    show(origin: FocusOrigin): void;
+    show(): void;
     /**
      * @internal
      * Hide the popover.
      */
     hide(origin?: FocusOrigin): void;
-    private onDocumentClick;
-    private createPopover;
-    private destroyPopover;
     /**
-     * @internal
-     * Handle escape key press to close the popover.
-     */
-    protected handleEscapeKey(): void;
-    private focusTrigger;
-    /**
-     * Set the popover instance.
-     * @internal
+     * Create the overlay that will contain the popover
      */
-    setPopover(instance: NgpPopover): void;
+    private createOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpPopoverTrigger<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpPopoverTrigger<any>, "[ngpPopoverTrigger]", ["ngpPopoverTrigger"], { "popover": { "alias": "ngpPopoverTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpPopoverTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpPopoverTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpPopoverTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpPopoverTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpPopoverTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpPopoverTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpPopoverTriggerContainer"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "ngpPopoverTriggerCloseOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "ngpPopoverTriggerCloseOnEscape"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "ngpPopoverTriggerScrollBehavior"; "required": false; "isSignal": true; }; "context": { "alias": "ngpPopoverTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-type NgpPopoverTemplateContext<T> = {
-    $implicit: T;
-};
-type NgpPopoverContent<T> = TemplateRef<NgpPopoverTemplateContext<T>> | Type<unknown>;
-export {};

package/portal/index.d.ts

@@ -1 +1,3 @@
+export { createOverlay, injectOverlay, NgpOverlay, NgpOverlayConfig, NgpOverlayContent, NgpOverlayTemplateContext, } from './overlay';
+export { injectOverlayContext, provideOverlayContext } from './overlay-token';
 export { createPortal, NgpComponentPortal, NgpPortal, NgpTemplatePortal } from './portal';

package/portal/overlay-token.d.ts

@@ -0,0 +1,12 @@
+import { ValueProvider } from '@angular/core';
+/**
+ * Injects the context for the overlay.
+ * @internal
+ */
+export declare function injectOverlayContext<T>(): T;
+/**
+ * Provides the context for the overlay.
+ * @param value The value to provide as the context.
+ * @internal
+ */
+export declare function provideOverlayContext<T>(value: T): ValueProvider;