ng-primitives 0.44.0 → 0.45.0

package/portal/overlay.d.ts

@@ -0,0 +1,170 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { Injector, Provider, TemplateRef, Type } from '@angular/core';
+import { Middleware, Placement, Strategy } from '@floating-ui/dom';
+import { Subject } from 'rxjs';
+/**
+ * Configuration options for creating an overlay
+ * @internal
+ */
+export interface NgpOverlayConfig<T = unknown> {
+    /** Content to display in the overlay (component or template) */
+    content: NgpOverlayContent<T>;
+    /** The element that triggers the overlay */
+    triggerElement: HTMLElement;
+    /** The injector to use for creating the portal */
+    injector: Injector;
+    /** Context data to pass to the overlay content */
+    context?: T | null;
+    /** Container element to attach the overlay to (defaults to document.body) */
+    container?: HTMLElement | null;
+    /** Preferred placement of the overlay relative to the trigger */
+    placement?: Placement;
+    /** Offset distance between the overlay and trigger in pixels */
+    offset?: number;
+    /** Whether to enable flip behavior when space is limited */
+    flip?: boolean;
+    /** Delay before showing the overlay in milliseconds */
+    showDelay?: number;
+    /** Delay before hiding the overlay in milliseconds */
+    hideDelay?: number;
+    /** Whether the overlay should be positioned with fixed or absolute strategy */
+    strategy?: Strategy;
+    /** The scroll strategy to use for the overlay */
+    scrollBehaviour?: 'reposition' | 'block';
+    /** Whether to close the overlay when clicking outside */
+    closeOnOutsideClick?: boolean;
+    /** Whether to close the overlay when pressing escape */
+    closeOnEscape?: boolean;
+    /** Whether to restore focus to the trigger element when hiding the overlay */
+    restoreFocus?: boolean;
+    /** Additional middleware for floating UI positioning */
+    additionalMiddleware?: Middleware[];
+    /** Additional providers */
+    providers?: Provider[];
+}
+/** Type for overlay content which can be either a template or component */
+export type NgpOverlayContent<T> = TemplateRef<NgpOverlayTemplateContext<T>> | Type<unknown>;
+/** Context for template-based overlays */
+export type NgpOverlayTemplateContext<T> = {
+    $implicit: T;
+};
+/**
+ * NgpOverlay manages the lifecycle and positioning of overlay UI elements.
+ * It abstracts the common behavior shared by tooltips, popovers, menus, etc.
+ * @internal
+ */
+export declare class NgpOverlay<T = unknown> {
+    private config;
+    private readonly disposables;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly viewContainerRef;
+    private readonly viewportRuler;
+    private readonly focusMonitor;
+    /** Access any parent overlays */
+    private readonly parentOverlay;
+    /** Signal tracking the portal instance */
+    private readonly portal;
+    /** Signal tracking the overlay position */
+    readonly position: import("@angular/core").WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    /** Signal tracking the trigger element width */
+    readonly triggerWidth: import("@angular/core").WritableSignal<number | null>;
+    /** The transform origin for the overlay */
+    readonly transformOrigin: import("@angular/core").WritableSignal<string>;
+    /** Function to dispose the positioning auto-update */
+    private disposePositioning?;
+    /** Timeout handle for showing the overlay */
+    private openTimeout?;
+    /** Timeout handle for hiding the overlay */
+    private closeTimeout?;
+    /** Signal tracking whether the overlay is open */
+    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    /** The scroll strategy */
+    private scrollStrategy;
+    /** An observable that emits when the overlay is closing */
+    readonly closing: Subject<void>;
+    /**
+     * Creates a new overlay instance
+     * @param config Initial configuration for the overlay
+     * @param destroyRef Reference for automatic cleanup
+     */
+    constructor(config: NgpOverlayConfig<T>);
+    /**
+     * Show the overlay with the specified delay
+     * @param showDelay Optional delay to override the configured showDelay
+     */
+    show(): Promise<void>;
+    /**
+     * Hide the overlay with the specified delay
+     * @param options Optional options for hiding the overlay
+     */
+    hide(options?: OverlayTriggerOptions): void;
+    /**
+     * Update the configuration of this overlay
+     * @param config New configuration (partial)
+     */
+    updateConfig(config: Partial<NgpOverlayConfig<T>>): void;
+    /**
+     * Immediately hide the overlay without any delay
+     */
+    hideImmediate(): void;
+    /**
+     * Toggle the overlay open/closed state
+     */
+    toggle(): void;
+    /**
+     * Force update the position of the overlay
+     */
+    updatePosition(): void;
+    /**
+     * Completely destroy this overlay instance
+     */
+    destroy(): void;
+    /**
+     * Get the elements of the overlay
+     */
+    getElements(): HTMLElement[];
+    /**
+     * Internal method to create the overlay
+     */
+    private createOverlay;
+    /**
+     * Internal method to setup positioning of the overlay
+     */
+    private setupPositioning;
+    /**
+     * Compute the overlay position using floating-ui
+     */
+    private computePosition;
+    /**
+     * Internal method to destroy the overlay portal
+     */
+    private destroyOverlay;
+    /**
+     * Get the transform origin for the overlay
+     */
+    private getTransformOrigin;
+}
+/**
+ * Helper function to create an overlay in a single call
+ * @internal
+ */
+export declare function createOverlay<T>(config: NgpOverlayConfig<T>): NgpOverlay<T>;
+/**
+ * Helper function to inject the NgpOverlay instance
+ * @internal
+ */
+export declare function injectOverlay<T>(): NgpOverlay<T>;
+export interface OverlayTriggerOptions {
+    /**
+     * Whether the visibility change should be immediate.
+     */
+    immediate?: boolean;
+    /**
+     * The origin of the focus event that triggered the visibility change.
+     */
+    origin?: FocusOrigin;
+}

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

@@ -110,6 +110,15 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       margin-top: 4px;
       max-height: 240px;
       overflow-y: auto;
+      transform-origin: var(--ngp-combobox-transform-origin);
+    }
+
+    [ngpComboboxDropdown][data-enter] {
+      animation: combobox-show 0.1s ease-out;
+    }
+
+    [ngpComboboxDropdown][data-exit] {
+      animation: combobox-hide 0.1s ease-out;
     }
 
     [ngpComboboxOption] {
@@ -148,6 +157,28 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       font-weight: 500;
       text-align: center;
     }
+
+    @keyframes combobox-show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes combobox-hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
   `,
 })
 export class Combobox<%= componentSuffix %> implements ControlValueAccessor {

package/tooltip/index.d.ts

@@ -1,5 +1,5 @@
+export { injectOverlayContext as injectTooltipContext } from 'ng-primitives/portal';
 export { NgpTooltipConfig, provideTooltipConfig } from './config/tooltip-config';
 export { NgpTooltipTrigger } from './tooltip-trigger/tooltip-trigger';
 export { injectTooltipTriggerState, provideTooltipTriggerState, } from './tooltip-trigger/tooltip-trigger-state';
 export { NgpTooltip } from './tooltip/tooltip';
-export { injectTooltipContext, NgpTooltipContextToken, provideTooltipContext, } from './tooltip/tooltip-token';

package/tooltip/tooltip/tooltip.d.ts

@@ -1,35 +1,13 @@
-import { OnInit } from '@angular/core';
 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`.
  */
-export declare class NgpTooltip implements OnInit {
+export declare class NgpTooltip {
     /**
-     * Access the tooltip element.
+     * Access the overlay.
      */
-    private readonly tooltip;
-    /**
-     * Access the platform.
-     */
-    private readonly platform;
-    /**
-     * Access the trigger instance.
-     */
-    private readonly trigger;
-    /**
-     * Compute the x position of the tooltip.
-     */
-    protected readonly x: import("@angular/core").Signal<number>;
-    /**
-     * Compute the y position of the tooltip.
-     */
-    protected readonly y: import("@angular/core").Signal<number>;
-    /**
-     * Derive the transform origin of the popover.
-     */
-    protected readonly transformOrigin: import("@angular/core").Signal<string>;
-    ngOnInit(): void;
+    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: {}; }]>;
 }

package/tooltip/tooltip-trigger/tooltip-trigger.d.ts

@@ -1,28 +1,16 @@
 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 { NgpOverlay, NgpOverlayContent } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
 /**
  * Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.
  */
 export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
-    /**
-     * Access the exit animation manager.
-     */
-    private readonly exitAnimationManager;
     /**
      * Access the trigger element
      */
     private readonly trigger;
-    /**
-     * Access the view container ref.
-     */
-    private readonly viewContainerRef;
-    /**
-     * Access the document.
-     */
-    private readonly document;
     /**
      * Access the injector.
      */
@@ -31,14 +19,10 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * Access the global tooltip configuration.
      */
     private readonly config;
-    /**
-     * Access the disposable utilities
-     */
-    private readonly disposables;
     /**
      * Access the tooltip template ref.
      */
-    readonly tooltip: import("@angular/core").InputSignal<NgpTooltipContent<T> | null>;
+    readonly tooltip: import("@angular/core").InputSignal<NgpOverlayContent<T> | undefined>;
     /**
      * Define if the trigger should be disabled.
      * @default false
@@ -75,48 +59,17 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      */
     readonly container: import("@angular/core").InputSignal<HTMLElement | null>;
     /**
-     * Provide context to the tooltip.
-     * @default null
-     */
-    readonly context: import("@angular/core").InputSignal<T | null>;
-    /**
-     * Store the tooltip view ref.
+     * Provide context to the tooltip. This can be used to pass data to the tooltip content.
      */
-    protected viewRef: import("@angular/core").WritableSignal<NgpPortal | null>;
+    readonly context: import("@angular/core").InputSignal<T | undefined>;
     /**
-     * Derive the tooltip middleware from the provided configuration.
-     */
-    private readonly middleware;
-    /**
-     * Store the computed position of the tooltip.
+     * The overlay that manages the tooltip
      * @internal
      */
-    readonly position: import("@angular/core").WritableSignal<{
-        x: number;
-        y: number;
-    }>;
-    /**
-     * The dispose function to stop computing the position of the tooltip.
-     */
-    private dispose?;
-    /**
-     * @internal
-     * Store the trigger width.
-     */
-    readonly width: import("@angular/core").WritableSignal<number | null>;
-    /**
-     * @internal
-     * The timeout to open the tooltip.
-     */
-    private openTimeout?;
-    /**
-     * @internal
-     * The timeout to close the tooltip.
-     */
-    private closeTimeout?;
+    readonly overlay: import("@angular/core").WritableSignal<NgpOverlay<T> | null>;
     /**
+     * The open state of the tooltip.
      * @internal
-     * Whether the tooltip is open or not.
      */
     readonly open: import("@angular/core").Signal<boolean>;
     /**
@@ -124,7 +77,6 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * @internal
      */
     readonly state: import("ng-primitives/state").CreatedState<NgpTooltipTrigger<T>>;
-    constructor();
     ngOnDestroy(): void;
     /**
      * Show the tooltip.
@@ -134,13 +86,10 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * Hide the tooltip.
      */
     hide(): void;
-    private createTooltip;
-    private destroyTooltip;
+    /**
+     * Create the overlay that will contain the tooltip
+     */
+    private createOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltipTrigger<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltipTrigger<any>, "[ngpTooltipTrigger]", ["ngpTooltipTrigger"], { "tooltip": { "alias": "ngpTooltipTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTooltipTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpTooltipTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpTooltipTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpTooltipTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpTooltipTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpTooltipTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpTooltipTriggerContainer"; "required": false; "isSignal": true; }; "context": { "alias": "ngpTooltipTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
-type NgpTooltipTemplateContext<T> = {
-    $implicit: T;
-};
-type NgpTooltipContent<T> = TemplateRef<NgpTooltipTemplateContext<T>> | Type<unknown>;
-export {};

package/popover/popover/popover-token.d.ts

@@ -1,10 +0,0 @@
-import { InjectionToken, ValueProvider } from '@angular/core';
-export declare const NgpPopoverContextToken: InjectionToken<unknown>;
-/**
- * Inject the Popover context
- */
-export declare function injectPopoverContext<T>(): T;
-/**
- * Provide the Popover context
- */
-export declare function providePopoverContext<T>(context: T): ValueProvider;

package/popover/utils/transform-origin.d.ts

@@ -1,2 +0,0 @@
-import type { Placement } from '@floating-ui/dom';
-export declare function getTransformOrigin(placement: Placement): string;

package/tooltip/tooltip/tooltip-token.d.ts

@@ -1,10 +0,0 @@
-import { InjectionToken, ValueProvider } from '@angular/core';
-export declare const NgpTooltipContextToken: InjectionToken<unknown>;
-/**
- * Inject the Tooltip context
- */
-export declare function injectTooltipContext<T>(): T;
-/**
- * Provide the Tooltip directive instance
- */
-export declare function provideTooltipContext<T>(context: T): ValueProvider;