ng-primitives 0.91.2 → 0.93.0

package/tabs/index.d.ts

@@ -1,10 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { Provider, OnInit, OnDestroy, InjectionToken } from '@angular/core';
+import { Provider, Signal, WritableSignal } 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 {
     /**
@@ -33,15 +30,7 @@ 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>>;
+declare class NgpTabButton {
     /**
      * The value of the tab this trigger controls
      * @required
@@ -57,55 +46,139 @@ declare class NgpTabButton implements OnInit, OnDestroy {
      * @internal
      */
     readonly id: _angular_core.InputSignal<string | undefined>;
+    private readonly state;
     /**
-     * Determine a unique id for the tab button if not provided
-     * @internal
+     * Whether the tab is active
      */
-    readonly buttonId: _angular_core.Signal<string>;
+    readonly active: Signal<boolean>;
+    constructor();
     /**
-     * Determine the aria-controls of the tab button
-     * @internal
+     * Select the tab this trigger controls
+     */
+    select(): 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, never>;
+}
+
+/**
+ * The state for the NgpTabButton directive.
+ */
+interface NgpTabButtonState {
+    /**
+     * The unique id for the tab button.
      */
-    readonly ariaControls: _angular_core.Signal<string>;
+    readonly id: Signal<string>;
     /**
-     * Whether the tab is active
+     * Whether the tab is active.
      */
-    readonly active: _angular_core.Signal<boolean>;
-    constructor();
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    readonly active: Signal<boolean>;
     /**
-     * Select the tab this trigger controls
+     * Select the tab this trigger controls.
      */
     select(): void;
     /**
-     * On focus select the tab this trigger controls if activateOnFocus is true
+     * Register this tab with the tabset.
      */
-    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: {}; }]>;
+    register(): void;
 }
+/**
+ * The props for the NgpTabButton state.
+ */
+interface NgpTabButtonProps {
+    /**
+     * The value of the tab this trigger controls.
+     */
+    readonly value: Signal<string>;
+    /**
+     * Whether the tab is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * The id of the tab button.
+     */
+    readonly id?: Signal<string | undefined>;
+}
+declare const NgpTabButtonStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{
+    id: Signal<string>;
+    active: Signal<boolean>;
+    select: () => void;
+}>>;
+declare const ngpTabButton: ({ value, disabled, id }: NgpTabButtonProps) => {
+    id: Signal<string>;
+    active: Signal<boolean>;
+    select: () => void;
+};
+declare const injectTabButtonState: {
+    (): Signal<{
+        id: Signal<string>;
+        active: Signal<boolean>;
+        select: () => void;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        active: Signal<boolean>;
+        select: () => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        active: Signal<boolean>;
+        select: () => void;
+    }> | Signal<{
+        id: Signal<string>;
+        active: Signal<boolean>;
+        select: () => void;
+    } | null>;
+};
+declare const provideTabButtonState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
 /**
  * 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>>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabList, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabList, "[ngpTabList]", ["ngpTabList"], {}, {}, never, never, true, never>;
 }
 
+/**
+ * The state for the NgpTabList directive.
+ */
+interface NgpTabListState {
+}
+/**
+ * The props for the NgpTabList state.
+ */
+interface NgpTabListProps {
+}
+declare const NgpTabListStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{}>>;
+declare const ngpTabList: ({}: NgpTabListProps) => {};
+declare const injectTabListState: {
+    (): _angular_core.Signal<{}>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): _angular_core.Signal<{} | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): _angular_core.Signal<{}> | _angular_core.Signal<{} | null>;
+};
+declare const provideTabListState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
 /**
  * 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>>;
+declare class NgpTabPanel {
     /**
      * The value of the tab
      * @required
@@ -116,31 +189,85 @@ declare class NgpTabPanel implements OnInit {
      * @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>;
+    private readonly state;
     /**
      * Whether the tab is active
      */
-    protected readonly active: _angular_core.Signal<boolean>;
-    ngOnInit(): void;
+    readonly active: _angular_core.Signal<boolean>;
     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
+ * The state for the NgpTabPanel directive.
  */
-declare function injectTabPanel(): NgpTabPanel;
+interface NgpTabPanelState {
+    /**
+     * The unique id for the tab panel.
+     */
+    readonly panelId: Signal<string>;
+    /**
+     * The aria-labelledby attribute for the tab panel.
+     */
+    readonly labelledBy: Signal<string>;
+    /**
+     * Whether the tab panel is active.
+     */
+    readonly active: Signal<boolean>;
+}
+/**
+ * The props for the NgpTabPanel state.
+ */
+interface NgpTabPanelProps {
+    /**
+     * The value of the tab this panel represents.
+     */
+    readonly value: Signal<string | undefined>;
+    /**
+     * The id of the tab panel.
+     */
+    readonly id?: Signal<string | undefined>;
+}
+declare const NgpTabPanelStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{
+    panelId: Signal<string>;
+    labelledBy: Signal<string>;
+    active: Signal<boolean>;
+}>>;
+declare const ngpTabPanel: ({ value, id }: NgpTabPanelProps) => {
+    panelId: Signal<string>;
+    labelledBy: Signal<string>;
+    active: Signal<boolean>;
+};
+declare const injectTabPanelState: {
+    (): Signal<{
+        panelId: Signal<string>;
+        labelledBy: Signal<string>;
+        active: Signal<boolean>;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        panelId: Signal<string>;
+        labelledBy: Signal<string>;
+        active: Signal<boolean>;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        panelId: Signal<string>;
+        labelledBy: Signal<string>;
+        active: Signal<boolean>;
+    }> | Signal<{
+        panelId: Signal<string>;
+        labelledBy: Signal<string>;
+        active: Signal<boolean>;
+    } | null>;
+};
+declare const provideTabPanelState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
 /**
  * Apply the `ngpTabset` directive to an element to manage the tabs.
@@ -150,10 +277,6 @@ 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
      */
@@ -175,48 +298,174 @@ declare class NgpTabset {
      * 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[]>;
+    private readonly state;
     /**
      * @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: {}; }]>;
+    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, never>;
 }
 
 /**
- * Provides the Tabset state.
+ * The state for the NgpTabset directive.
  */
-declare const provideTabsetState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+interface NgpTabsetState {
+    /**
+     * The unique id for the tabset.
+     */
+    readonly id: Signal<string>;
+    /**
+     * The orientation of the tabset.
+     */
+    readonly orientation: Signal<NgpOrientation>;
+    /**
+     * Whether tabs should activate on focus.
+     */
+    readonly activateOnFocus: Signal<boolean>;
+    /**
+     * The selected tab value.
+     */
+    readonly value: WritableSignal<string | undefined>;
+    /**
+     * The selected tab computed value.
+     */
+    readonly selectedTab: Signal<string | undefined>;
+    /**
+     * Select a tab by its value.
+     */
+    select(value: string): void;
+    /**
+     * Set orientation of the tabset.
+     */
+    setOrientation(orientation: NgpOrientation): void;
+    /**
+     * @internal Register a tab with the tabset.
+     */
+    registerTab(value: string, disabled: () => boolean): void;
+    /**
+     * @internal Unregister a tab with the tabset.
+     */
+    unregisterTab(value: string): void;
+}
 /**
- * Injects the Tabset state.
+ * The props for the NgpTabset state.
  */
-declare const injectTabsetState: <U = NgpTabset>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+interface NgpTabsetProps {
+    /**
+     * The unique id for the tabset.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * The selected tab value.
+     */
+    readonly value?: Signal<string | undefined>;
+    /**
+     * The orientation of the tabset.
+     */
+    readonly orientation?: Signal<NgpOrientation>;
+    /**
+     * Whether tabs should activate on focus.
+     */
+    readonly activateOnFocus?: Signal<boolean>;
+    /**
+     * Callback when the selected tab changes.
+     */
+    readonly onValueChange?: (value: string | undefined) => void;
+}
+declare const NgpTabsetStateToken: _angular_core.InjectionToken<WritableSignal<{
+    id: Signal<string>;
+    orientation: WritableSignal<NgpOrientation>;
+    activateOnFocus: Signal<boolean>;
+    value: WritableSignal<string | undefined>;
+    selectedTab: Signal<string | undefined>;
+    select: (newValue: string) => void;
+    setOrientation: (newOrientation: NgpOrientation) => void;
+    registerTab: (tab: NgpTab) => void;
+    unregisterTab: (tabValue: string) => void;
+}>>;
+declare const ngpTabset: ({ id, value: _value, orientation: _orientation, activateOnFocus, onValueChange, }: NgpTabsetProps) => {
+    id: Signal<string>;
+    orientation: WritableSignal<NgpOrientation>;
+    activateOnFocus: Signal<boolean>;
+    value: WritableSignal<string | undefined>;
+    selectedTab: Signal<string | undefined>;
+    select: (newValue: string) => void;
+    setOrientation: (newOrientation: NgpOrientation) => void;
+    registerTab: (tab: NgpTab) => void;
+    unregisterTab: (tabValue: string) => void;
+};
+declare const injectTabsetState: {
+    (): Signal<{
+        id: Signal<string>;
+        orientation: WritableSignal<NgpOrientation>;
+        activateOnFocus: Signal<boolean>;
+        value: WritableSignal<string | undefined>;
+        selectedTab: Signal<string | undefined>;
+        select: (newValue: string) => void;
+        setOrientation: (newOrientation: NgpOrientation) => void;
+        registerTab: (tab: NgpTab) => void;
+        unregisterTab: (tabValue: string) => void;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        orientation: WritableSignal<NgpOrientation>;
+        activateOnFocus: Signal<boolean>;
+        value: WritableSignal<string | undefined>;
+        selectedTab: Signal<string | undefined>;
+        select: (newValue: string) => void;
+        setOrientation: (newOrientation: NgpOrientation) => void;
+        registerTab: (tab: NgpTab) => void;
+        unregisterTab: (tabValue: string) => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        orientation: WritableSignal<NgpOrientation>;
+        activateOnFocus: Signal<boolean>;
+        value: WritableSignal<string | undefined>;
+        selectedTab: Signal<string | undefined>;
+        select: (newValue: string) => void;
+        setOrientation: (newOrientation: NgpOrientation) => void;
+        registerTab: (tab: NgpTab) => void;
+        unregisterTab: (tabValue: string) => void;
+    }> | Signal<{
+        id: Signal<string>;
+        orientation: WritableSignal<NgpOrientation>;
+        activateOnFocus: Signal<boolean>;
+        value: WritableSignal<string | undefined>;
+        selectedTab: Signal<string | undefined>;
+        select: (newValue: string) => void;
+        setOrientation: (newOrientation: NgpOrientation) => void;
+        registerTab: (tab: NgpTab) => void;
+        unregisterTab: (tabValue: string) => void;
+    } | null>;
+};
+declare const provideTabsetState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+interface NgpTab {
+    /**
+     * The unique value for the tab.
+     */
+    readonly value: Signal<string>;
+    /**
+     * Whether the tab is disabled.
+     */
+    readonly disabled: Signal<boolean>;
+}
 
-export { NgpTabButton, NgpTabList, NgpTabPanel, NgpTabPanelToken, NgpTabset, injectTabPanel, injectTabsetState, provideTabsConfig, provideTabsetState };
-export type { NgpTabsConfig };
+export { NgpTabButton, NgpTabButtonStateToken, NgpTabList, NgpTabListStateToken, NgpTabPanel, NgpTabPanelStateToken, NgpTabset, NgpTabsetStateToken, injectTabButtonState, injectTabListState, injectTabPanelState, injectTabsetState, ngpTabButton, ngpTabList, ngpTabPanel, ngpTabset, provideTabButtonState, provideTabListState, provideTabPanelState, provideTabsConfig, provideTabsetState };
+export type { NgpTabButtonProps, NgpTabButtonState, NgpTabListProps, NgpTabListState, NgpTabPanelProps, NgpTabPanelState, NgpTabsConfig, NgpTabsetProps, NgpTabsetState };

package/textarea/index.d.ts

@@ -66,6 +66,7 @@ declare const injectTextareaState: {
     }>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<{
         id: Signal<string>;
         disabled: WritableSignal<boolean>;
@@ -73,10 +74,15 @@ declare const injectTextareaState: {
     } | null>;
     (options?: {
         hoisted?: boolean;
+        optional?: boolean;
     }): Signal<{
         id: Signal<string>;
         disabled: WritableSignal<boolean>;
         setDisabled: (value: boolean) => void;
+    }> | Signal<{
+        id: Signal<string>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
     } | null>;
 };
 declare const provideTextareaState: (opts?: {

package/toggle/index.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { WritableSignal, Signal } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Observable } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
@@ -18,7 +18,7 @@ interface NgpToggleState {
     /**
      * Emits when the selected state changes.
      */
-    readonly selectedChange: Subject<boolean>;
+    readonly selectedChange: Observable<boolean>;
     /**
      * Toggle the selected state.
      */
@@ -54,10 +54,12 @@ declare const injectToggleState: {
     (): Signal<NgpToggleState>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<NgpToggleState | null>;
     (options?: {
         hoisted?: boolean;
-    }): Signal<NgpToggleState | null>;
+        optional?: boolean;
+    }): Signal<NgpToggleState> | Signal<NgpToggleState | null>;
 };
 declare const provideToggleState: (opts?: {
     inherit?: boolean;

package/toggle-group/index.d.ts

@@ -55,10 +55,12 @@ declare const injectToggleGroupItemState: {
     (): Signal<NgpToggleGroupItemState>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<NgpToggleGroupItemState | null>;
     (options?: {
         hoisted?: boolean;
-    }): Signal<NgpToggleGroupItemState | null>;
+        optional?: boolean;
+    }): Signal<NgpToggleGroupItemState> | Signal<NgpToggleGroupItemState | null>;
 };
 declare const provideToggleGroupItemState: (opts?: {
     inherit?: boolean;
@@ -113,10 +115,12 @@ declare const injectToggleGroupState: {
     (): Signal<NgpToggleGroupState>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<NgpToggleGroupState | null>;
     (options?: {
         hoisted?: boolean;
-    }): Signal<NgpToggleGroupState | null>;
+        optional?: boolean;
+    }): Signal<NgpToggleGroupState> | Signal<NgpToggleGroupState | null>;
 };
 declare const provideToggleGroupState: (opts?: {
     inherit?: boolean;

package/toolbar/index.d.ts

@@ -25,15 +25,20 @@ declare const injectToolbarState: {
     }>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<{
         orientation: WritableSignal<NgpOrientation>;
         setOrientation: (value: NgpOrientation) => void;
     } | null>;
     (options?: {
         hoisted?: boolean;
+        optional?: boolean;
     }): Signal<{
         orientation: WritableSignal<NgpOrientation>;
         setOrientation: (value: NgpOrientation) => void;
+    }> | Signal<{
+        orientation: WritableSignal<NgpOrientation>;
+        setOrientation: (value: NgpOrientation) => void;
     } | null>;
 };
 declare const provideToolbarState: (opts?: {

package/utils/index.d.ts

@@ -152,7 +152,7 @@ declare function safeTakeUntilDestroyed<T>(destroyRef?: DestroyRef): MonoTypeOpe
  * @param options.injector
  * @internal
  */
-declare function onChange<T>(source: Signal<T | null | undefined>, fn: (value: T | null | undefined, previousValue: T | null | undefined) => void, options?: {
+declare function onChange<T>(source: Signal<T>, fn: (value: T, previousValue: T | null | undefined) => void, options?: {
     injector: Injector;
 }): void;
 /**