ng-primitives 0.89.0 → 0.90.0

package/tabs/index.d.ts

@@ -1,7 +1,222 @@
-export { NgpTabsConfig, provideTabsConfig } from './config/tabs-config';
-export { NgpTabButton } from './tab-button/tab-button';
-export { NgpTabList } from './tab-list/tab-list';
-export { NgpTabPanel } from './tab-panel/tab-panel';
-export { injectTabPanel, NgpTabPanelToken } from './tab-panel/tab-panel-token';
-export { NgpTabset } from './tabset/tabset';
-export { injectTabsetState, provideTabsetState } from './tabset/tabset-state';
+import * as _angular_core from '@angular/core';
+import { Provider, OnInit, OnDestroy, InjectionToken } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_tabs from 'ng-primitives/tabs';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i1 from 'ng-primitives/roving-focus';
+
+interface NgpTabsConfig {
+    /**
+     * The orientation of the tabset
+     * @default 'horizontal'
+     */
+    orientation: NgpOrientation;
+    /**
+     * Whether tabs should activate on focus
+     * @default true
+     */
+    activateOnFocus: boolean;
+    /**
+     * Whether focus should wrap within the tab list when using the keyboard.
+     * @default true
+     */
+    wrap: boolean;
+}
+/**
+ * Provide the default Tabs configuration
+ * @param config The Tabs configuration
+ * @returns The provider
+ */
+declare function provideTabsConfig(config: Partial<NgpTabsConfig>): Provider[];
+
+/**
+ * Apply the `ngpTabButton` directive to an element within a tab list to represent a tab button. This directive should be applied to a button element.
+ */
+declare class NgpTabButton implements OnInit, OnDestroy {
+    /**
+     * Access the tag host name
+     */
+    protected readonly tagName: string;
+    /**
+     * Access the tabset state
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_tabs.NgpTabset>>;
+    /**
+     * The value of the tab this trigger controls
+     * @required
+     */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the tab is disabled
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Determine the id of the tab button
+     * @internal
+     */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Determine a unique id for the tab button if not provided
+     * @internal
+     */
+    readonly buttonId: _angular_core.Signal<string>;
+    /**
+     * Determine the aria-controls of the tab button
+     * @internal
+     */
+    readonly ariaControls: _angular_core.Signal<string>;
+    /**
+     * Whether the tab is active
+     */
+    readonly active: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Select the tab this trigger controls
+     */
+    select(): void;
+    /**
+     * On focus select the tab this trigger controls if activateOnFocus is true
+     */
+    protected activateOnFocus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabButton, "[ngpTabButton]", ["ngpTabButton"], { "value": { "alias": "ngpTabButtonValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTabButtonDisabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgpRovingFocusItem; inputs: { "ngpRovingFocusItemDisabled": "ngpTabButtonDisabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * Apply the `ngpTabList` directive to an element that represents the list of tab buttons.
+ */
+declare class NgpTabList {
+    /**
+     * Access the tabset state
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_tabs.NgpTabset>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabList, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabList, "[ngpTabList]", ["ngpTabList"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpTabPanel` directive to an element that represents the content of a tab.
+ */
+declare class NgpTabPanel implements OnInit {
+    /**
+     * Access the tabset
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_tabs.NgpTabset>>;
+    /**
+     * The value of the tab
+     * @required
+     */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Determine the id of the tab panel
+     * @internal
+     */
+    readonly id: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Determine a unique id for the tab panel if not provided
+     * @internal
+     */
+    protected readonly panelId: _angular_core.Signal<string>;
+    /**
+     * Determine the aria-labelledby of the tab panel
+     * @internal
+     */
+    protected readonly labelledBy: _angular_core.Signal<string>;
+    /**
+     * Whether the tab is active
+     */
+    protected readonly active: _angular_core.Signal<boolean>;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabPanel, "[ngpTabPanel]", ["ngpTabPanel"], { "value": { "alias": "ngpTabPanelValue"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const NgpTabPanelToken: InjectionToken<NgpTabPanel>;
+/**
+ * Inject the TabPanel directive instance
+ * @returns The TabPanel directive instance
+ */
+declare function injectTabPanel(): NgpTabPanel;
+
+/**
+ * Apply the `ngpTabset` directive to an element to manage the tabs.
+ */
+declare class NgpTabset {
+    /**
+     * Access the global tabset configuration
+     */
+    private readonly config;
+    /**
+     * Access the roving focus group state
+     */
+    private readonly rovingFocusGroupState;
+    /**
+     * Define the id for the tabset
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Define the active tab
+     */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emit the value of the selected tab when it changes
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<string | undefined>;
+    /**
+     * The orientation of the tabset
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * Whether tabs should activate on focus
+     */
+    readonly activateOnFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Access the tabs within the tabset
+     * @internal
+     */
+    readonly buttons: _angular_core.WritableSignal<NgpTabButton[]>;
+    /**
+     * @internal
+     * Get the id of the selected tab
+     */
+    readonly selectedTab: _angular_core.Signal<string | undefined>;
+    /**
+     * The state of the tabset
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpTabset>;
+    constructor();
+    /**
+     * Select a tab by its value
+     * @param value The value of the tab to select
+     */
+    select(value: string): void;
+    /**
+     * @internal
+     * Register a tab with the tabset
+     */
+    registerTab(tab: NgpTabButton): void;
+    /**
+     * @internal
+     * Unregister a tab with the tabset
+     */
+    unregisterTab(tab: NgpTabButton): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabset, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabset, "[ngpTabset]", ["ngpTabset"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpTabsetValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpTabsetOrientation"; "required": false; "isSignal": true; }; "activateOnFocus": { "alias": "ngpTabsetActivateOnFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpTabsetValueChange"; }, never, never, true, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Provides the Tabset state.
+ */
+declare const provideTabsetState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Tabset state.
+ */
+declare const injectTabsetState: <U = NgpTabset>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpTabButton, NgpTabList, NgpTabPanel, NgpTabPanelToken, NgpTabset, injectTabPanel, injectTabsetState, provideTabsConfig, provideTabsetState };
+export type { NgpTabsConfig };

package/textarea/index.d.ts

@@ -1,2 +1,32 @@
-export { NgpTextarea } from './textarea/textarea';
-export { injectTextareaState, provideTextareaState } from './textarea/textarea-state';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+declare class NgpTextarea {
+    /**
+     * The id of the textarea. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Whether the element is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The state of the textarea.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpTextarea>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTextarea, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTextarea, "[ngpTextarea]", ["ngpTextarea"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the Textarea state.
+ */
+declare const provideTextareaState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Textarea state.
+ */
+declare const injectTextareaState: <U = NgpTextarea>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpTextarea, injectTextareaState, provideTextareaState };

package/toast/index.d.ts

@@ -1,4 +1,219 @@
-export { NgpToastConfig, provideToastConfig } from './config/toast-config';
-export { NgpToast } from './toast/toast';
-export { injectToastContext } from './toast/toast-context';
-export { NgpToastManager } from './toast/toast-manager';
+import * as _angular_core from '@angular/core';
+import { Signal, Provider, TemplateRef, Type } from '@angular/core';
+import * as ng_primitives_internal from 'ng-primitives/internal';
+import { NgpPortal } from 'ng-primitives/portal';
+
+interface NgpToastOptions$1 {
+    /**
+     * The position of the toast.
+     */
+    placement: NgpToastPlacement;
+    /**
+     * The duration of the toast in milliseconds.
+     */
+    duration: number;
+    /**
+     * A function to register the toast instance with the manager.
+     * @internal
+     */
+    register: (toast: NgpToast) => void;
+    /**
+     * Whether the toast region is expanded.
+     * @internal
+     */
+    expanded: Signal<boolean>;
+    /**
+     * Whether the toast supports swipe dismiss.
+     * @internal
+     */
+    dismissible: boolean;
+    /**
+     * The swipe directions supported by the toast.
+     * @internal
+     */
+    swipeDirections: NgpToastSwipeDirection[];
+}
+
+declare class NgpToast {
+    private readonly manager;
+    private readonly injector;
+    protected readonly config: NgpToastConfig;
+    /** @internal */
+    readonly options: NgpToastOptions$1;
+    private readonly interactivityChecker;
+    private readonly isInteracting;
+    private pointerStartRef;
+    private dragStartTime;
+    protected readonly swiping: _angular_core.WritableSignal<boolean>;
+    protected readonly swipeDirection: _angular_core.WritableSignal<"x" | "y" | null>;
+    protected readonly swipeAmount: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    protected readonly swipeOutDirection: _angular_core.Signal<"top" | "right" | "bottom" | "left" | null>;
+    /**
+     * Get all toasts that are currently being displayed in the same position.
+     */
+    private readonly toasts;
+    /**
+     * The number of toasts that are currently being displayed before this toast.
+     */
+    protected readonly index: _angular_core.Signal<number>;
+    /**
+     * Determine the position of the toast in the list of toasts.
+     * This is the combination of the heights of all the toasts before this one, plus the gap between them.
+     */
+    protected readonly offset: _angular_core.Signal<number>;
+    /**
+     * Determine if this toast is visible.
+     * Visible considers the maximum number of toasts that can be displayed at once, and the last x toasts that are currently being displayed.
+     */
+    protected readonly visible: _angular_core.Signal<boolean>;
+    /**
+     * Determine the height of the front toast.
+     * This is used to determine the height of the toast when it is not expanded.
+     */
+    protected readonly frontToastHeight: _angular_core.Signal<number>;
+    /**
+     * Determine the z-index of the toast. This is the inverse of the index.
+     * The first toast will have the highest z-index, and the last toast will have the lowest z-index.
+     * This is used to ensure that the first toast is always on top of the others.
+     */
+    protected readonly zIndex: _angular_core.Signal<number>;
+    /**
+     * The height of the toast in pixels.
+     */
+    protected readonly dimensions: _angular_core.Signal<ng_primitives_internal.Dimensions>;
+    /**
+     * The x position of the toast.
+     */
+    readonly x: string;
+    /**
+     * The y position of the toast.
+     */
+    readonly y: string;
+    /**
+     * The toast timer instance.
+     */
+    private readonly timer;
+    constructor();
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToast, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToast, "[ngpToast]", ["ngpToast"], {}, {}, never, never, true, never>;
+}
+type NgpToastSwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+type NgpToastPlacement = 'top-start' | 'top-end' | 'top-center' | 'bottom-start' | 'bottom-end' | 'bottom-center';
+
+interface NgpToastConfig {
+    /**
+     * The position of the toast.
+     */
+    placement: NgpToastPlacement;
+    /**
+     * The duration of each toast.
+     */
+    duration: number;
+    /**
+     * The offset from the top of the viewport in pixels.
+     */
+    offsetTop: number;
+    /**
+     * The offset from the bottom of the viewport in pixels.
+     */
+    offsetBottom: number;
+    /**
+     * The offset from the left of the viewport in pixels.
+     */
+    offsetLeft: number;
+    /**
+     * The offset from the right of the viewport in pixels.
+     */
+    offsetRight: number;
+    /**
+     * Whether a toast can be dismissed by swiping.
+     */
+    dismissible: boolean;
+    /**
+     * The amount a toast must be swiped before it is considered dismissed.
+     */
+    swipeThreshold: number;
+    /**
+     * The default swipe directions supported by the toast.
+     */
+    swipeDirections: NgpToastSwipeDirection[];
+    /**
+     * The maximum number of toasts that can be displayed at once.
+     */
+    maxToasts: number;
+    /**
+     * The aria live setting.
+     */
+    ariaLive: string;
+    /**
+     * The gap between each toast.
+     */
+    gap: number;
+    /**
+     * The z-index of the toast container.
+     * This is used to ensure that the toast container is always on top of other elements.
+     */
+    zIndex: number;
+}
+/**
+ * Provide the default Toast configuration
+ * @param config The Toast configuration
+ * @returns The provider
+ */
+declare function provideToastConfig(config: Partial<NgpToastConfig>): Provider[];
+
+declare function injectToastContext<T>(): T;
+
+declare class NgpToastManager {
+    private readonly config;
+    private readonly applicationRef;
+    private readonly rendererFactory;
+    private readonly renderer;
+    private readonly injector;
+    private readonly containers;
+    readonly toasts: _angular_core.WritableSignal<NgpToastRecord[]>;
+    /** Signal that tracks which placements are expanded */
+    private readonly expanded;
+    /** Show a toast notification */
+    show(toast: TemplateRef<void> | Type<unknown>, options?: NgpToastOptions): NgpToastRef;
+    /** Hide a toast notification */
+    dismiss(toast: NgpToast): Promise<void>;
+    /**
+     * Lazily create or get a container for a given placement.
+     */
+    private getOrCreateContainer;
+    /**
+     * Create a section in which toasts will be rendered for a specific placement.
+     */
+    private createContainer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToastManager, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgpToastManager>;
+}
+interface NgpToastOptions<T = unknown> {
+    /** The position of the toast */
+    placement?: NgpToastPlacement;
+    /** The duration of the toast in milliseconds */
+    duration?: number;
+    /** Whether the toast is dismissible */
+    dismissible?: boolean;
+    /** The swipe directions supported by the toast */
+    swipeDirections?: NgpToastSwipeDirection[];
+    /** The context to make available to the toast */
+    context?: T;
+}
+interface NgpToastRecord {
+    instance: NgpToast;
+    portal: NgpPortal;
+}
+interface NgpToastRef {
+    dismiss(): Promise<void>;
+}
+
+export { NgpToast, NgpToastManager, injectToastContext, provideToastConfig };
+export type { NgpToastConfig };

package/toggle/index.d.ts

@@ -1,2 +1,57 @@
-export { NgpToggle } from './toggle/toggle';
-export { injectToggleState, provideToggleState } from './toggle/toggle-state';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.
+ */
+declare class NgpToggle {
+    /**
+     * Access the element.
+     */
+    private readonly element;
+    /**
+     * Whether the toggle is selected.
+     * @default false
+     */
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emits when the selected state changes.
+     */
+    readonly selectedChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Whether the toggle is disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Determine if the element is a button.
+     */
+    protected isButton: boolean;
+    /**
+     * The state for the toggle primitive.
+     * @internal
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpToggle>;
+    /**
+     * Toggle the selected state.
+     */
+    toggle(): void;
+    /**
+     * If the element is not a button or a link the space key should toggle the selected state.
+     */
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggle, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggle, "[ngpToggle]", ["ngpToggle"], { "selected": { "alias": "ngpToggleSelected"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleDisabled"; "required": false; "isSignal": true; }; }, { "selectedChange": "ngpToggleSelectedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Toggle state.
+ */
+declare const provideToggleState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Toggle state.
+ */
+declare const injectToggleState: <U = NgpToggle>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpToggle, injectToggleState, provideToggleState };