ng-primitives 0.89.0 → 0.91.0

package/toggle/index.d.ts

@@ -1,2 +1,98 @@
-export { NgpToggle } from './toggle/toggle';
-export { injectToggleState, provideToggleState } from './toggle/toggle-state';
+import * as _angular_core from '@angular/core';
+import { WritableSignal, Signal } from '@angular/core';
+import { Subject } from 'rxjs';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Public state surface for the Toggle primitive.
+ */
+interface NgpToggleState {
+    /**
+     * Whether the toggle is selected.
+     */
+    readonly selected: WritableSignal<boolean>;
+    /**
+     * Whether the toggle is disabled.
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * Emits when the selected state changes.
+     */
+    readonly selectedChange: Subject<boolean>;
+    /**
+     * Toggle the selected state.
+     */
+    toggle(event?: Event): void;
+    /**
+     * Set the selected state.
+     */
+    setSelected(value: boolean): void;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(value: boolean): void;
+}
+/**
+ * Inputs for configuring the Toggle primitive.
+ */
+interface NgpToggleProps {
+    /**
+     * Whether the toggle is selected.
+     */
+    readonly selected?: Signal<boolean>;
+    /**
+     * Whether the toggle is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback fired when the selected state changes.
+     */
+    readonly onSelectedChange?: (selected: boolean) => void;
+}
+declare const ngpToggle: ({ selected: _selected, disabled: _disabled, onSelectedChange, }: NgpToggleProps) => NgpToggleState;
+declare const injectToggleState: {
+    (): Signal<NgpToggleState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpToggleState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpToggleState | null>;
+};
+declare const provideToggleState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.
+ */
+declare class NgpToggle {
+    /**
+     * 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>;
+    /**
+     * The state for the toggle primitive.
+     * @internal
+     */
+    protected readonly state: NgpToggleState;
+    /**
+     * Toggle the selected state.
+     */
+    toggle(): 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>;
+}
+
+export { NgpToggle, injectToggleState, ngpToggle, provideToggleState };
+export type { NgpToggleProps, NgpToggleState };

package/toggle-group/index.d.ts

@@ -1,5 +1,168 @@
-export { NgpToggleGroupConfig, provideToggleGroupConfig } from './config/toggle-group-config';
-export { NgpToggleGroupItem } from './toggle-group-item/toggle-group-item';
-export { injectToggleGroupItemState, provideToggleGroupItemState, } from './toggle-group-item/toggle-group-item-state';
-export { NgpToggleGroup } from './toggle-group/toggle-group';
-export { injectToggleGroupState, provideToggleGroupState } from './toggle-group/toggle-group-state';
+import * as _angular_core from '@angular/core';
+import { Provider, OnInit, Signal, WritableSignal } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Observable } from 'rxjs';
+
+interface NgpToggleGroupConfig {
+    /**
+     * The orientation of the toggle group.
+     * @default 'horizontal'
+     */
+    orientation: NgpOrientation;
+    /**
+     * The type of the toggle group, whether only one item can be selected or multiple.
+     * @default 'single'
+     */
+    type: 'single' | 'multiple';
+    /**
+     * Whether a toggle button can be deselected.
+     * @default true
+     */
+    allowDeselection: boolean;
+}
+/**
+ * Provide the default ToggleGroup configuration
+ * @param config The ToggleGroup configuration
+ * @returns The provider
+ */
+declare function provideToggleGroupConfig(config: Partial<NgpToggleGroupConfig>): Provider[];
+
+declare class NgpToggleGroupItem implements OnInit {
+    /**
+     * The value of the item.
+     * @required
+     */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the item is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroupItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroupItem, "[ngpToggleGroupItem]", ["ngpToggleGroupItem"], { "value": { "alias": "ngpToggleGroupItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The state interface for the ToggleGroupItem pattern.
+ */
+interface NgpToggleGroupItemState {
+    selected: Signal<boolean>;
+    toggle(): void;
+}
+declare const injectToggleGroupItemState: {
+    (): Signal<NgpToggleGroupItemState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpToggleGroupItemState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpToggleGroupItemState | null>;
+};
+declare const provideToggleGroupItemState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * The state interface for the ToggleGroup pattern.
+ */
+interface NgpToggleGroupState {
+    /**
+     * The current value(s) of the toggle group.
+     */
+    readonly value: WritableSignal<string[]>;
+    /**
+     * Emit when the value changes.
+     */
+    readonly valueChange: Observable<string[]>;
+    /**
+     * Whether the toggle group is disabled.
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * Select a value in the toggle group.
+     */
+    select(selection: string): void;
+    /**
+     * De-select a value in the toggle group.
+     */
+    deselect(selection: string): void;
+    /**
+     * Check if a value is selected in the toggle group.
+     */
+    isSelected(selection: string): boolean;
+    /**
+     * Toggle a value in the toggle group.
+     */
+    toggle(selection: string): void;
+    /**
+     * Set the value(s) of the toggle group.
+     */
+    setValue(newValue: string[]): void;
+    /**
+     * Set the disabled state of the toggle group.
+     */
+    setDisabled(isDisabled: boolean): void;
+    /**
+     * Set the orientation of the toggle group.
+     */
+    setOrientation(newOrientation: NgpOrientation): void;
+}
+declare const injectToggleGroupState: {
+    (): Signal<NgpToggleGroupState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpToggleGroupState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpToggleGroupState | null>;
+};
+declare const provideToggleGroupState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+declare class NgpToggleGroup {
+    /**
+     * Access the global toggle group configuration.
+     */
+    private readonly config;
+    /**
+     * The orientation of the toggle group.
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * Whether toggle buttons can be deselected. If set to `false`, clicking a selected toggle button will not deselect it.
+     * @default true
+     */
+    readonly allowDeselection: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The type of the toggle group, whether only one item can be selected or multiple.
+     */
+    readonly type: _angular_core.InputSignal<"single" | "multiple">;
+    /**
+     * The selected value(s) of the toggle group.
+     */
+    readonly value: _angular_core.InputSignal<string[]>;
+    /**
+     * Emits when the value of the toggle group changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<string[]>;
+    /**
+     * Whether the toggle group is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The state of the toggle group.
+     */
+    protected readonly state: NgpToggleGroupState;
+    /**
+     * Toggle a value in the toggle group.
+     */
+    toggle(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "allowDeselection": { "alias": "ngpToggleGroupAllowDeselection"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
+}
+
+export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
+export type { NgpToggleGroupConfig };

package/toolbar/index.d.ts

@@ -1,2 +1,43 @@
-export { NgpToolbar } from './toolbar/toolbar';
-export { provideToolbarState, injectToolbarState } from './toolbar/toolbar-state';
+import * as _angular_core from '@angular/core';
+import { Signal, WritableSignal } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+
+declare class NgpToolbar {
+    /**
+     * The orientation of the toolbar.
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * The toolbar state.
+     */
+    protected readonly state: {
+        orientation: _angular_core.WritableSignal<NgpOrientation>;
+        setOrientation: (value: NgpOrientation) => void;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToolbar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToolbar, "[ngpToolbar]", ["ngpToolbar"], { "orientation": { "alias": "ngpToolbarOrientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const injectToolbarState: {
+    (): Signal<{
+        orientation: WritableSignal<NgpOrientation>;
+        setOrientation: (value: NgpOrientation) => void;
+    }>;
+    (options: {
+        hoisted: true;
+    }): Signal<{
+        orientation: WritableSignal<NgpOrientation>;
+        setOrientation: (value: NgpOrientation) => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<{
+        orientation: WritableSignal<NgpOrientation>;
+        setOrientation: (value: NgpOrientation) => void;
+    } | null>;
+};
+declare const provideToolbarState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+export { NgpToolbar, injectToolbarState, provideToolbarState };

package/tooltip/index.d.ts

@@ -1,6 +1,215 @@
+import * as ng_primitives_portal from 'ng-primitives/portal';
+import { NgpOffset, NgpOverlayContent, NgpOffsetInput, NgpOverlay } from 'ng-primitives/portal';
 export { injectOverlayContext as injectTooltipContext } from 'ng-primitives/portal';
-export { NgpTooltipConfig, provideTooltipConfig } from './config/tooltip-config';
-export { NgpTooltipArrow } from './tooltip-arrow/tooltip-arrow';
-export { NgpTooltipTrigger, type NgpTooltipPlacement } from './tooltip-trigger/tooltip-trigger';
-export { injectTooltipTriggerState, provideTooltipTriggerState, } from './tooltip-trigger/tooltip-trigger-state';
-export { NgpTooltip } from './tooltip/tooltip';
+import * as _angular_core from '@angular/core';
+import { Provider, OnDestroy, Signal } from '@angular/core';
+import { Placement } from '@floating-ui/dom';
+import * as ng_primitives_state from 'ng-primitives/state';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+
+interface NgpTooltipConfig {
+    /**
+     * Define the offset of the tooltip 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 tooltip relative to the trigger.
+     * @default 'top'
+     */
+    placement: Placement;
+    /**
+     * Define the delay before the tooltip is shown.
+     * @default 0
+     */
+    showDelay: number;
+    /**
+     * Define the delay before the tooltip is hidden.
+     * @default 500
+     */
+    hideDelay: number;
+    /**
+     * Define whether the tooltip should flip when there is not enough space for the tooltip.
+     * @default true
+     */
+    flip: boolean;
+    /**
+     * Define the container element or selector in to which the tooltip should be attached.
+     * @default 'body'
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Whether the tooltip should only show when the trigger element overflows.
+     * @default false
+     */
+    showOnOverflow: boolean;
+    /**
+     * Whether to use the text content of the trigger element as the tooltip content.
+     * @default true
+     */
+    useTextContent: boolean;
+}
+/**
+ * Provide the default Tooltip configuration
+ * @param config The Tooltip configuration
+ * @returns The provider
+ */
+declare function provideTooltipConfig(config: Partial<NgpTooltipConfig>): Provider[];
+
+declare class NgpTooltipArrow {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTooltipArrow, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTooltipArrow, "[ngpTooltipArrow]", ["ngpTooltipArrow"], {}, {}, never, never, true, never>;
+}
+
+type TooltipInput<T> = NgpOverlayContent<T> | string | null | undefined;
+/**
+ * Apply the `ngpTooltipTrigger` directive to an element that triggers the tooltip to show.
+ */
+declare class NgpTooltipTrigger<T = null> 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 tooltip configuration.
+     */
+    private readonly config;
+    /**
+     * Access the tooltip template ref.
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<string | NgpOverlayContent<T> | null, TooltipInput<T>>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the tooltip relative to the trigger.
+     * @default 'top'
+     */
+    readonly placement: _angular_core.InputSignal<NgpTooltipPlacement>;
+    /**
+     * Define the offset of the tooltip 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 the delay before the tooltip is displayed.
+     * @default 500
+     */
+    readonly showDelay: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Define the delay before the tooltip is hidden.
+     * @default 0
+     */
+    readonly hideDelay: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Define whether the tooltip should flip when there is not enough space for the tooltip.
+     * @default true
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the container in which the tooltip should be attached.
+     * @default document.body
+     */
+    readonly container: _angular_core.InputSignal<string | HTMLElement | null>;
+    /**
+     * Define whether the tooltip should only show when the trigger element overflows.
+     * @default false
+     */
+    readonly showOnOverflow: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Provide context to the tooltip. This can be used to pass data to the tooltip content.
+     */
+    readonly context: _angular_core.InputSignal<T | undefined>;
+    /**
+     * Define whether to use the text content of the trigger element as the tooltip content.
+     * When enabled, the tooltip will display the text content of the trigger element.
+     * @default true
+     */
+    readonly useTextContent: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The overlay that manages the tooltip
+     * @internal
+     */
+    readonly overlay: _angular_core.WritableSignal<NgpOverlay<string | T> | null>;
+    /**
+     * The unique id of the tooltip.
+     */
+    readonly tooltipId: _angular_core.WritableSignal<string | undefined>;
+    /**
+     * The open state of the tooltip.
+     * @internal
+     */
+    readonly open: Signal<boolean>;
+    /**
+     * Determine if the trigger element has overflow.
+     */
+    private readonly hasOverflow;
+    /**
+     * Store the state of the tooltip.
+     * @internal
+     */
+    readonly state: ng_primitives_state.CreatedState<NgpTooltipTrigger<T>>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Show the tooltip.
+     */
+    show(): void;
+    /**
+     * Hide the tooltip.
+     */
+    hide(): void;
+    /**
+     * Create the overlay that will contain the tooltip
+     */
+    private createOverlay;
+    /**
+     * Set the tooltip id.
+     */
+    setTooltipId(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTooltipTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵ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; }; "showOnOverflow": { "alias": "ngpTooltipTriggerShowOnOverflow"; "required": false; "isSignal": true; }; "context": { "alias": "ngpTooltipTriggerContext"; "required": false; "isSignal": true; }; "useTextContent": { "alias": "ngpTooltipTriggerUseTextContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type NgpTooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
+/**
+ * Provides the TooltipTrigger state.
+ */
+declare const provideTooltipTriggerState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the TooltipTrigger state.
+ */
+declare const injectTooltipTriggerState: <U = NgpTooltipTrigger<unknown>>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+/**
+ * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
+ */
+declare class NgpTooltip {
+    /**
+     * Access the overlay.
+     */
+    protected readonly overlay: ng_primitives_portal.NgpOverlay<unknown>;
+    /**
+     * The unique id of the tooltip.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTooltip, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgpTooltip, NgpTooltipArrow, NgpTooltipTrigger, injectTooltipTriggerState, provideTooltipConfig, provideTooltipTriggerState };
+export type { NgpTooltipConfig, NgpTooltipPlacement };