ng-primitives 0.89.0 → 0.90.0

package/menu/index.d.ts

@@ -1,9 +1,297 @@
+import * as ng_primitives_portal from 'ng-primitives/portal';
+import { NgpOverlayContent, NgpOffset, NgpOffsetInput, NgpOverlay } from 'ng-primitives/portal';
 export { injectOverlayContext as injectMenuContext } from 'ng-primitives/portal';
-export { NgpMenuConfig, provideMenuConfig } from './config/menu-config';
-export { NgpMenuItem } from './menu-item/menu-item';
-export { NgpMenuTrigger, type NgpMenuPlacement } from './menu-trigger/menu-trigger';
-export { injectMenuTriggerState, provideMenuTriggerState } from './menu-trigger/menu-trigger-state';
-export { NgpMenu } from './menu/menu';
-export { injectMenu, NgpMenuToken } from './menu/menu-token';
-export { NgpSubmenuTrigger } from './submenu-trigger/submenu-trigger';
-export { injectSubmenuTriggerState, provideSubmenuTriggerState, } from './submenu-trigger/submenu-trigger-state';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, Provider, InjectionToken } from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i1 from 'ng-primitives/roving-focus';
+import { Subject } from 'rxjs';
+import * as i2 from 'ng-primitives/focus-trap';
+
+/**
+ * The `NgpMenuTrigger` directive allows you to turn an element into a menu trigger.
+ */
+declare class NgpMenuTrigger<T = unknown> implements OnDestroy {
+    /**
+     * Access the trigger element
+     */
+    private readonly trigger;
+    /**
+     * Access the injector.
+     */
+    private readonly injector;
+    /**
+     * Access the view container reference.
+     */
+    private readonly viewContainerRef;
+    /**
+     * Access the global menu configuration.
+     */
+    private readonly config;
+    /**
+     * Access the menu template ref or ComponentType.
+     */
+    readonly menu: _angular_core.InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the menu relative to the trigger.
+     * @default 'bottom-start'
+     */
+    readonly placement: _angular_core.InputSignal<NgpMenuPlacement>;
+    /**
+     * Define the offset of the menu relative to the trigger.
+     * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
+     * @default 4
+     */
+    readonly offset: _angular_core.InputSignalWithTransform<NgpOffset, NgpOffsetInput>;
+    /**
+     * Define whether the menu should flip when there is not enough space for the menu.
+     * @default true
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the container in which the menu should be attached.
+     * @default document.body
+     */
+    readonly container: _angular_core.InputSignal<string | HTMLElement | null>;
+    /**
+     * Defines how the menu behaves when the window is scrolled.
+     * @default 'block'
+     */
+    readonly scrollBehavior: _angular_core.InputSignal<"reposition" | "block">;
+    /**
+     * Provide context to the menu. This can be used to pass data to the menu content.
+     */
+    readonly context: _angular_core.InputSignal<T | undefined>;
+    /**
+     * The overlay that manages the menu
+     * @internal
+     */
+    readonly overlay: _angular_core.WritableSignal<NgpOverlay<T> | null>;
+    /**
+     * The open state of the menu.
+     * @internal
+     */
+    readonly open: _angular_core.Signal<boolean>;
+    /**
+     * The menu trigger state.
+     */
+    readonly state: ng_primitives_state.CreatedState<NgpMenuTrigger<T>>;
+    ngOnDestroy(): void;
+    protected onClick(event: MouseEvent): void;
+    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: _angular_core.ɵɵFactoryDeclaration<NgpMenuTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵ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>;
+}
+type NgpMenuPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
+interface NgpMenuConfig {
+    /**
+     * Define the offset of the menu relative to the trigger.
+     * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
+     * @default 4
+     */
+    offset: NgpOffset;
+    /**
+     * Define the placement of the menu relative to the trigger.
+     * @default 'bottom-start'
+     */
+    placement: NgpMenuPlacement;
+    /**
+     * Define whether the menu should flip when there is not enough space for the menu.
+     * @default true
+     */
+    flip: boolean;
+    /**
+     * Define the container element or selector in to which the menu should be attached.
+     * @default 'body'
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Defines how the menu behaves when the window is scrolled.
+     * @default scroll
+     */
+    scrollBehavior: 'reposition' | 'block';
+}
+/**
+ * Provide the default Menu configuration
+ * @param config The Menu configuration
+ * @returns The provider
+ */
+declare function provideMenuConfig(config: Partial<NgpMenuConfig>): Provider[];
+
+/**
+ * The `NgpMenuItem` directive represents a menu item.
+ */
+declare class NgpMenuItem {
+    /** Access the injector */
+    private readonly injector;
+    /** Access the button element */
+    private readonly elementRef;
+    /** Access the parent menu */
+    private readonly parentMenu;
+    /** Whether the menu item is disabled */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    /** Close the menu when the item is clicked */
+    protected onClick(event: MouseEvent): void;
+    /**
+     * If the user presses the left arrow key (in LTR) and there is a parent menu,
+     * we want to close the menu and focus the parent menu item.
+     */
+    protected handleArrowKey(event: KeyboardEvent): void;
+    /**
+     * If the user hovers over the trigger, we want to open the submenu
+     */
+    protected showSubmenuOnHover(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMenuItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMenuItem, "[ngpMenuItem]", ["ngpMenuItem"], { "disabled": { "alias": "ngpMenuItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusItem; inputs: { "ngpRovingFocusItemDisabled": "ngpMenuItemDisabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Provides the MenuTrigger state.
+ */
+declare const provideMenuTriggerState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the MenuTrigger state.
+ */
+declare const injectMenuTriggerState: <U = NgpMenuTrigger<unknown>>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+/**
+ * The `NgpMenu` is a container for menu items.
+ */
+declare class NgpMenu {
+    /** Access the overlay. */
+    protected readonly overlay: ng_primitives_portal.NgpOverlay<unknown>;
+    /** Access the menu trigger state */
+    private readonly menuTrigger;
+    /** Access any parent menus */
+    private readonly parentMenu;
+    /** @internal Whether we should close submenus */
+    readonly closeSubmenus: Subject<HTMLElement>;
+    /** @internal Close the menu and any parent menus */
+    closeAllMenus(origin: FocusOrigin): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMenu, "[ngpMenu]", ["ngpMenu"], {}, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpFocusTrap; inputs: {}; outputs: {}; }]>;
+}
+
+declare const NgpMenuToken: InjectionToken<NgpMenu>;
+/**
+ * Inject the Menu directive instance
+ */
+declare function injectMenu(): NgpMenu;
+
+declare class NgpSubmenuTrigger<T = unknown> {
+    /**
+     * Access the menu trigger element.
+     */
+    private readonly trigger;
+    /**
+     * Access the injector.
+     */
+    private readonly injector;
+    /**
+     * Access the view container reference.
+     */
+    private readonly viewContainerRef;
+    /** Access the parent menu */
+    private readonly parentMenu;
+    /**
+     * Access the submenu template ref.
+     */
+    readonly menu: _angular_core.InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the menu relative to the trigger.
+     * @default 'right-start'
+     */
+    readonly placement: _angular_core.InputSignal<NgpMenuPlacement>;
+    /**
+     * Define the offset of the menu relative to the trigger.
+     * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
+     * @default 0
+     */
+    readonly offset: _angular_core.InputSignalWithTransform<NgpOffset, NgpOffsetInput>;
+    /**
+     * Define whether the menu should flip when there is not enough space for the menu.
+     * @default true
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The overlay that manages the menu
+     * @internal
+     */
+    readonly overlay: _angular_core.WritableSignal<NgpOverlay<T> | null>;
+    /**
+     * The open state of the menu.
+     * @internal
+     */
+    readonly open: _angular_core.Signal<boolean>;
+    /**
+     * Access the menu trigger state.
+     */
+    readonly state: 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
+     */
+    private createOverlay;
+    /**
+     * If the user presses the right arrow key, we want to open the submenu
+     * and focus the first item in the submenu.
+     * This behavior will be inverted if the direction is RTL.
+     * @param event
+     */
+    protected showSubmenuOnArrow(event: KeyboardEvent): void;
+    /**
+     * If the user hovers over the trigger, we want to open the submenu
+     */
+    protected showSubmenuOnHover(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSubmenuTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSubmenuTrigger<any>, "[ngpSubmenuTrigger]", ["ngpSubmenuTrigger"], { "menu": { "alias": "ngpSubmenuTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSubmenuTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpSubmenuTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpSubmenuTriggerOffset"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpSubmenuTriggerFlip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the SubmenuTrigger state.
+ */
+declare const provideSubmenuTriggerState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the SubmenuTrigger state.
+ */
+declare const injectSubmenuTriggerState: <U = NgpSubmenuTrigger<unknown>>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpMenu, NgpMenuItem, NgpMenuToken, NgpMenuTrigger, NgpSubmenuTrigger, injectMenu, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuTriggerState, provideSubmenuTriggerState };
+export type { NgpMenuConfig, NgpMenuPlacement };

package/meter/index.d.ts

@@ -1,6 +1,67 @@
-export { NgpMeter } from './meter/meter';
-export { provideMeterState, injectMeterState } from './meter/meter-state';
-export { NgpMeterTrack } from './meter-track/meter-track';
-export { NgpMeterIndicator } from './meter-indicator/meter-indicator';
-export { NgpMeterValue } from './meter-value/meter-value';
-export { NgpMeterLabel } from './meter-label/meter-label';
+import * as _angular_core from '@angular/core';
+import { NumberInput } from '@angular/cdk/coercion';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_meter from 'ng-primitives/meter';
+
+declare class NgpMeterLabel {
+    /** Access the meter */
+    protected readonly meter: _angular_core.Signal<ng_primitives_state.State<ng_primitives_meter.NgpMeter>>;
+    /** The id of the meter label */
+    readonly id: _angular_core.InputSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeterLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeterLabel, "[ngpMeterLabel]", ["ngpMeterLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpMeter {
+    /** The value of the meter. */
+    readonly value: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /** The minimum value of the meter. */
+    readonly min: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /** The maximum value of the meter. */
+    readonly max: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Define a function that returns the meter value label.
+     * @param value The current value
+     * @param max The maximum value
+     * @returns The value label
+     */
+    readonly valueLabel: _angular_core.InputSignal<NgpMeterValueTextFn>;
+    /** @internal Store the label instance */
+    readonly label: _angular_core.WritableSignal<NgpMeterLabel | null>;
+    /** @internal The percentage of the meter. */
+    readonly percentage: _angular_core.Signal<number>;
+    /** The state of the meter. */
+    private readonly state;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeter, "[ngpMeter]", ["ngpMeter"], { "value": { "alias": "ngpMeterValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpMeterMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpMeterMax"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "ngpMeterValueLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type NgpMeterValueTextFn = (value: number, max: number) => string;
+
+/**
+ * Provides the Meter state.
+ */
+declare const provideMeterState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Meter state.
+ */
+declare const injectMeterState: <U = NgpMeter>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+declare class NgpMeterTrack {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeterTrack, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeterTrack, "[ngpMeterTrack]", ["ngpMeterTrack"], {}, {}, never, never, true, never>;
+}
+
+declare class NgpMeterIndicator {
+    /** Access the meter */
+    protected readonly meter: _angular_core.Signal<ng_primitives_state.State<ng_primitives_meter.NgpMeter>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeterIndicator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeterIndicator, "[ngpMeterIndicator]", ["ngpMeterIndicator"], {}, {}, never, never, true, never>;
+}
+
+declare class NgpMeterValue {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMeterValue, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMeterValue, "[ngpMeterValue]", ["ngpMeterValue"], {}, {}, never, never, true, never>;
+}
+
+export { NgpMeter, NgpMeterIndicator, NgpMeterLabel, NgpMeterTrack, NgpMeterValue, injectMeterState, provideMeterState };

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.89.0",
+  "version": "0.90.0",
   "keywords": [
     "angular",
     "primitives",
@@ -34,12 +34,12 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
-    "@angular/forms": ">=19.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/cdk": ">=20.0.0",
+    "@angular/forms": ">=20.0.0",
     "rxjs": ">=6.6.0",
     "@floating-ui/dom": ">=1.6.0",
-    "@angular/common": ">=19.0.0"
+    "@angular/common": ">=20.0.0"
   },
   "peerDependenciesMeta": {
     "luxon": {
@@ -71,22 +71,22 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ng-primitives-accordion.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ng-primitives-avatar.mjs"
+    "./ai": {
+      "types": "./ai/index.d.ts",
+      "default": "./fesm2022/ng-primitives-ai.mjs"
     },
     "./autofill": {
       "types": "./autofill/index.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ng-primitives-avatar.mjs"
+    },
     "./breadcrumbs": {
       "types": "./breadcrumbs/index.d.ts",
       "default": "./fesm2022/ng-primitives-breadcrumbs.mjs"
     },
-    "./ai": {
-      "types": "./ai/index.d.ts",
-      "default": "./fesm2022/ng-primitives-ai.mjs"
-    },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/ng-primitives-button.mjs"
@@ -99,14 +99,14 @@
       "types": "./combobox/index.d.ts",
       "default": "./fesm2022/ng-primitives-combobox.mjs"
     },
-    "./date-picker": {
-      "types": "./date-picker/index.d.ts",
-      "default": "./fesm2022/ng-primitives-date-picker.mjs"
-    },
     "./common": {
       "types": "./common/index.d.ts",
       "default": "./fesm2022/ng-primitives-common.mjs"
     },
+    "./date-picker": {
+      "types": "./date-picker/index.d.ts",
+      "default": "./fesm2022/ng-primitives-date-picker.mjs"
+    },
     "./date-time": {
       "types": "./date-time/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time.mjs"
@@ -155,14 +155,14 @@
       "types": "./menu/index.d.ts",
       "default": "./fesm2022/ng-primitives-menu.mjs"
     },
-    "./pagination": {
-      "types": "./pagination/index.d.ts",
-      "default": "./fesm2022/ng-primitives-pagination.mjs"
-    },
     "./meter": {
       "types": "./meter/index.d.ts",
       "default": "./fesm2022/ng-primitives-meter.mjs"
     },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "default": "./fesm2022/ng-primitives-pagination.mjs"
+    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/ng-primitives-popover.mjs"
@@ -179,14 +179,14 @@
       "types": "./radio/index.d.ts",
       "default": "./fesm2022/ng-primitives-radio.mjs"
     },
-    "./roving-focus": {
-      "types": "./roving-focus/index.d.ts",
-      "default": "./fesm2022/ng-primitives-roving-focus.mjs"
-    },
     "./resize": {
       "types": "./resize/index.d.ts",
       "default": "./fesm2022/ng-primitives-resize.mjs"
     },
+    "./roving-focus": {
+      "types": "./roving-focus/index.d.ts",
+      "default": "./fesm2022/ng-primitives-roving-focus.mjs"
+    },
     "./search": {
       "types": "./search/index.d.ts",
       "default": "./fesm2022/ng-primitives-search.mjs"
@@ -219,6 +219,10 @@
       "types": "./textarea/index.d.ts",
       "default": "./fesm2022/ng-primitives-textarea.mjs"
     },
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "default": "./fesm2022/ng-primitives-toast.mjs"
+    },
     "./toggle": {
       "types": "./toggle/index.d.ts",
       "default": "./fesm2022/ng-primitives-toggle.mjs"
@@ -227,10 +231,6 @@
       "types": "./toggle-group/index.d.ts",
       "default": "./fesm2022/ng-primitives-toggle-group.mjs"
     },
-    "./toast": {
-      "types": "./toast/index.d.ts",
-      "default": "./fesm2022/ng-primitives-toast.mjs"
-    },
     "./toolbar": {
       "types": "./toolbar/index.d.ts",
       "default": "./fesm2022/ng-primitives-toolbar.mjs"