ng-primitives 0.45.1 → 0.47.0

package/internal/exit-animation/exit-animation.d.ts

@@ -3,15 +3,24 @@ import * as i0 from "@angular/core";
 export declare class NgpExitAnimation implements OnDestroy {
     /** The animation manager. */
     private readonly animationManager;
-    /** The element to animate. */
-    private readonly elementRef;
-    /** Access the renderer. */
-    private readonly renderer;
+    /** Access the element reference. */
+    protected readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
+    /** Exist animation reference. */
+    protected readonly ref: NgpExitAnimationRef;
     constructor();
     ngOnDestroy(): void;
     /** Mark the element as exiting. */
     exit(): Promise<void>;
-    private setAnimationState;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpExitAnimation, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpExitAnimation, "[ngpExitAnimation]", ["ngpExitAnimation"], {}, {}, never, never, true, never>;
 }
+interface NgpExitAnimationOptions {
+    /** The element to animate. */
+    element: HTMLElement;
+}
+export interface NgpExitAnimationRef {
+    /** Mark the element as exiting and wait for the animation to finish. */
+    exit: () => Promise<void>;
+}
+export declare function setupExitAnimation({ element }: NgpExitAnimationOptions): NgpExitAnimationRef;
+export {};

package/internal/index.d.ts

@@ -1,4 +1,4 @@
-export { NgpExitAnimation } from './exit-animation/exit-animation';
+export { NgpExitAnimation, NgpExitAnimationRef, setupExitAnimation, } from './exit-animation/exit-animation';
 export { injectExitAnimationManager, NgpExitAnimationManager, provideExitAnimationManager, } from './exit-animation/exit-animation-manager';
 export * from './interactions/index';
 export * from './signals/explicit-effect';

package/menu/menu/menu.d.ts

@@ -1,15 +1,13 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/popover";
-import * as i2 from "ng-primitives/roving-focus";
+import * as i1 from "ng-primitives/roving-focus";
+import * as i2 from "ng-primitives/focus-trap";
 /**
  * The `NgpMenu` is a container for menu items.
  */
 export declare class NgpMenu {
-    /**
-     * Access the overlay.
-     */
+    /** Access the overlay. */
     protected readonly overlay: import("ng-primitives/portal").NgpOverlay<unknown>;
     /** Access the menu trigger state */
     private readonly menuTrigger;
@@ -17,8 +15,8 @@ export declare class NgpMenu {
     private readonly parentMenu;
     /** @internal Whether we should close submenus */
     readonly closeSubmenus: Subject<HTMLElement>;
-    /** Close the menu and any parent menus */
+    /** @internal Close the menu and any parent menus */
     closeAllMenus(origin: FocusOrigin): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpMenu, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpMenu, "[ngpMenu]", ["ngpMenu"], {}, {}, never, never, true, [{ directive: typeof i1.NgpPopover; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpMenu, "[ngpMenu]", ["ngpMenu"], {}, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpFocusTrap; inputs: {}; outputs: {}; }]>;
 }

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

@@ -14,28 +14,6 @@ export declare const injectSubmenuTriggerState: <U = {
     readonly trigger: import("@angular/core").ElementRef<HTMLElement>;
     readonly injector: import("@angular/core").Injector;
     readonly viewContainerRef: import("@angular/core").ViewContainerRef;
-    readonly menuTrigger: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly trigger: /*elided*/ any;
-        readonly injector: /*elided*/ any;
-        readonly viewContainerRef: /*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>;
@@ -50,7 +28,7 @@ export declare const injectSubmenuTriggerState: <U = {
     hide: (origin?: import("@angular/cdk/focus-monitor.d-CvvJeQRc").F) => void;
     createOverlay: () => void;
     showSubmenuOnArrow: (event: KeyboardEvent) => void;
-    showSubmenuOnHover: () => void;
+    showSubmenuOnHover: (event: PointerEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The SubmenuTrigger state registration function.

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

@@ -16,8 +16,6 @@ export declare class NgpSubmenuTrigger<T = unknown> {
      * Access the view container reference.
      */
     private readonly viewContainerRef;
-    /** Access the menu trigger state */
-    private readonly menuTrigger;
     /** Access the parent menu */
     private readonly parentMenu;
     /**
@@ -83,7 +81,7 @@ export declare class NgpSubmenuTrigger<T = unknown> {
     /**
      * If the user hovers over the trigger, we want to open the submenu
      */
-    protected showSubmenuOnHover(): void;
+    protected showSubmenuOnHover(event: PointerEvent): void;
     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>;
+    static ɵdir: i0.ɵɵ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>;
 }

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.45.1",
+  "version": "0.47.0",
   "keywords": [
     "angular",
     "primitives",
@@ -71,26 +71,26 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/ng-primitives-accordion.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"
     },
+    "./autofill": {
+      "types": "./autofill/index.d.ts",
+      "default": "./fesm2022/ng-primitives-autofill.mjs"
+    },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/ng-primitives-button.mjs"
     },
-    "./combobox": {
-      "types": "./combobox/index.d.ts",
-      "default": "./fesm2022/ng-primitives-combobox.mjs"
-    },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
       "default": "./fesm2022/ng-primitives-checkbox.mjs"
     },
+    "./combobox": {
+      "types": "./combobox/index.d.ts",
+      "default": "./fesm2022/ng-primitives-combobox.mjs"
+    },
     "./common": {
       "types": "./common/index.d.ts",
       "default": "./fesm2022/ng-primitives-common.mjs"
@@ -99,14 +99,18 @@
       "types": "./date-picker/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-picker.mjs"
     },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "default": "./fesm2022/ng-primitives-dialog.mjs"
+    "./date-time": {
+      "types": "./date-time/index.d.ts",
+      "default": "./fesm2022/ng-primitives-date-time.mjs"
     },
     "./date-time-luxon": {
       "types": "./date-time-luxon/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
     },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "default": "./fesm2022/ng-primitives-dialog.mjs"
+    },
     "./file-upload": {
       "types": "./file-upload/index.d.ts",
       "default": "./fesm2022/ng-primitives-file-upload.mjs"
@@ -155,10 +159,6 @@
       "types": "./portal/index.d.ts",
       "default": "./fesm2022/ng-primitives-portal.mjs"
     },
-    "./date-time": {
-      "types": "./date-time/index.d.ts",
-      "default": "./fesm2022/ng-primitives-date-time.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ng-primitives-progress.mjs"

package/popover/popover/popover.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/focus-trap";
-import * as i2 from "ng-primitives/internal";
 /**
  * Apply the `ngpPopover` directive to an element that represents the popover. This typically would be a `div` inside an `ng-template`.
  */
@@ -10,5 +9,5 @@ export declare class NgpPopover {
      */
     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: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpPopover, "[ngpPopover]", ["ngpPopover"], {}, {}, never, never, true, [{ directive: typeof i1.NgpFocusTrap; inputs: {}; outputs: {}; }]>;
 }

package/portal/portal.d.ts

@@ -29,6 +29,7 @@ export declare class NgpComponentPortal<T> extends NgpPortal {
     private readonly componentPortal;
     private viewRef;
     private isDestroying;
+    private exitAnimationRef;
     constructor(component: Type<T>, viewContainerRef: ViewContainerRef, injector: Injector);
     /**
      * Attach the portal to a DOM element.
@@ -55,6 +56,7 @@ export declare class NgpComponentPortal<T> extends NgpPortal {
 export declare class NgpTemplatePortal<T> extends NgpPortal {
     private readonly templatePortal;
     private viewRef;
+    private exitAnimationRefs;
     private isDestroying;
     constructor(template: TemplateRef<T>, viewContainerRef: ViewContainerRef, injector: Injector, context?: T);
     /**

package/schematics/ng-generate/templates/combobox/combobox.__fileSuffix@dasherize__.ts.template

@@ -106,6 +106,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       position: absolute;
       animation: popover-show 0.1s ease-out;
       width: var(--ngp-combobox-width);
+      box-shadow: var(--ngp-shadow-lg);
       box-sizing: border-box;
       margin-top: 4px;
       max-height: 240px;
@@ -161,22 +162,22 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
     @keyframes combobox-show {
       0% {
         opacity: 0;
-        transform: scale(0.9);
+        transform: translateY(-10px) scale(0.9);
       }
       100% {
         opacity: 1;
-        transform: scale(1);
+        transform: translateY(0) scale(1);
       }
     }
 
     @keyframes combobox-hide {
       0% {
         opacity: 1;
-        transform: scale(1);
+        transform: translateY(0) scale(1);
       }
       100% {
         opacity: 0;
-        transform: scale(0.9);
+        transform: translateY(-10px) scale(0.9);
       }
     }
   `,

package/schematics/ng-generate/templates/listbox/listbox.__fileSuffix@dasherize__.ts.template

@@ -76,6 +76,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       position: absolute;
       animation: popover-show 0.1s ease-out;
       width: var(--ngp-popover-trigger-width);
+      box-shadow: var(--ngp-shadow-lg);
       box-sizing: border-box;
     }
   `,

package/schematics/ng-generate/templates/switch/switch.__fileSuffix@dasherize__.ts.template

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { injectSwitchState, NgpSwitch, NgpSwitchThumb } from 'ng-primitives/switch';
 import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
@@ -68,7 +68,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
     '(focusout)': 'onTouched?.()',
   },
 })
-export class Switch<%= componentSuffix %> implements ControlValueAccessor {
+export class Switch<%= componentSuffix %> implements OnInit, ControlValueAccessor {
   /** Access the switch state. */
   private readonly switch = injectSwitchState();
 
@@ -78,7 +78,7 @@ export class Switch<%= componentSuffix %> implements ControlValueAccessor {
   /** The on touched callback */
   protected onTouched?: TouchedFn;
 
-  constructor() {
+  ngOnInit() {
     // Any time the switch changes, update the form value.
     this.switch().checkedChange.subscribe(value => this.onChange?.(value));
   }

package/switch/switch/switch-state.d.ts

@@ -18,7 +18,7 @@ export declare const injectSwitchState: <U = {
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly state: import("ng-primitives/state").CreatedState<NgpSwitch>;
     toggle: () => void;
-    onKeyDown: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Switch state registration function.

package/switch/switch/switch.d.ts

@@ -40,7 +40,7 @@ export declare class NgpSwitch {
     /**
      * Handle the keydown event.
      */
-    protected onKeyDown(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitch, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }]>;
 }

package/switch/switch-thumb/switch-thumb.d.ts

@@ -14,7 +14,7 @@ export declare class NgpSwitchThumb {
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/switch").NgpSwitch>;
         toggle: () => void;
-        onKeyDown: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
     }>>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitchThumb, never>;

package/tooltip/tooltip/tooltip.d.ts

@@ -1,5 +1,4 @@
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/internal";
 /**
  * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
  */
@@ -9,5 +8,5 @@ export declare class NgpTooltip {
      */
     protected readonly overlay: import("ng-primitives/portal").NgpOverlay<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltip, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true, [{ directive: typeof i1.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true, never>;
 }

package/utils/forms/status.d.ts

@@ -0,0 +1,16 @@
+import { Signal } from '@angular/core';
+export interface NgpControlStatus {
+    valid: boolean | null;
+    invalid: boolean | null;
+    pristine: boolean | null;
+    dirty: boolean | null;
+    touched: boolean | null;
+    pending: boolean | null;
+    disabled: boolean | null;
+}
+/**
+ * A utility function to get the status of an Angular form control as a reactive signal.
+ * This function injects the NgControl and returns a signal that reflects the control's status.
+ * @internal
+ */
+export declare function controlStatus(): Signal<NgpControlStatus>;

package/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { provideValueAccessor } from './forms/providers';
+export { controlStatus, NgpControlStatus } from './forms/status';
 export { ChangeFn, TouchedFn } from './forms/types';
 export { injectDisposables } from './helpers/disposables';
 export { uniqueId } from './helpers/unique-id';