ng-primitives 0.90.0 → 0.91.0

package/toggle/index.d.ts

@@ -1,15 +1,72 @@
-import * as ng_primitives_state from 'ng-primitives/state';
 import * as _angular_core from '@angular/core';
+import { WritableSignal, Signal } from '@angular/core';
+import { Subject } from 'rxjs';
 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.
+ * Public state surface for the Toggle primitive.
  */
-declare class NgpToggle {
+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 {
     /**
-     * Access the element.
+     * Whether the toggle is selected.
+     */
+    readonly selected?: Signal<boolean>;
+    /**
+     * Whether the toggle is disabled.
      */
-    private readonly element;
+    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
@@ -24,34 +81,18 @@ declare class NgpToggle {
      * @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>;
+    protected readonly state: NgpToggleState;
     /**
      * 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 };
+export { NgpToggle, injectToggleState, ngpToggle, provideToggleState };
+export type { NgpToggleProps, NgpToggleState };

package/toggle-group/index.d.ts

@@ -1,9 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { Provider, OnInit } from '@angular/core';
+import { Provider, OnInit, Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
-import * as ng_primitives_state from 'ng-primitives/state';
 import { BooleanInput } from '@angular/cdk/coercion';
-import * as i1 from 'ng-primitives/roving-focus';
+import { Observable } from 'rxjs';
 
 interface NgpToggleGroupConfig {
     /**
@@ -30,10 +29,6 @@ interface NgpToggleGroupConfig {
 declare function provideToggleGroupConfig(config: Partial<NgpToggleGroupConfig>): Provider[];
 
 declare class NgpToggleGroupItem implements OnInit {
-    /**
-     * Access the group that the item belongs to.
-     */
-    private readonly toggleGroup;
     /**
      * The value of the item.
      * @required
@@ -43,37 +38,91 @@ declare class NgpToggleGroupItem implements OnInit {
      * Whether the item is disabled.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Whether the item is selected.
-     */
-    protected readonly selected: _angular_core.Signal<boolean>;
-    /**
-     * The state of the item.
-     */
-    protected readonly state: ng_primitives_state.CreatedState<NgpToggleGroupItem>;
+    constructor();
     ngOnInit(): void;
-    /**
-     * Toggle the item.
-     */
-    protected toggle(): 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, [{ directive: typeof i1.NgpRovingFocusItem; inputs: { "ngpRovingFocusItemDisabled": "ngpToggleGroupItemDisabled"; }; outputs: {}; }]>;
+    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>;
 }
 
 /**
- * Provides the ToggleGroupItem state.
+ * The state interface for the ToggleGroupItem pattern.
  */
-declare const provideToggleGroupItemState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+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;
+
 /**
- * Injects the ToggleGroupItem state.
+ * The state interface for the ToggleGroup pattern.
  */
-declare const injectToggleGroupItemState: <U = NgpToggleGroupItem>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
-declare class NgpToggleGroup {
+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;
     /**
-     * Access the roving focus group state.
+     * Set the disabled state of the toggle group.
      */
-    private readonly rovingFocusGroupState;
+    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.
      */
@@ -106,38 +155,14 @@ declare class NgpToggleGroup {
     /**
      * The state of the toggle group.
      */
-    protected readonly state: ng_primitives_state.CreatedState<NgpToggleGroup>;
-    constructor();
-    /**
-     * Select a value in the toggle group.
-     */
-    private select;
-    /**
-     * De-select a value in the toggle group.
-     */
-    private deselect;
-    /**
-     * Check if a value is selected in the toggle group.
-     * @internal
-     */
-    isSelected(value: string): boolean;
+    protected readonly state: NgpToggleGroupState;
     /**
      * Toggle a value in the toggle group.
-     * @internal
      */
     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, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
+    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>;
 }
 
-/**
- * Provides the ToggleGroup state.
- */
-declare const provideToggleGroupState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the ToggleGroup state.
- */
-declare const injectToggleGroupState: <U = NgpToggleGroup>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
 export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
 export type { NgpToggleGroupConfig };

package/toolbar/index.d.ts

@@ -1,13 +1,8 @@
-import * as ng_primitives_state from 'ng-primitives/state';
 import * as _angular_core from '@angular/core';
+import { Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
-import * as i1 from 'ng-primitives/roving-focus';
 
 declare class NgpToolbar {
-    /**
-     * Access the roving focus group state.
-     */
-    private readonly rovingFocusGroup;
     /**
      * The orientation of the toolbar.
      */
@@ -15,19 +10,34 @@ declare class NgpToolbar {
     /**
      * The toolbar state.
      */
-    protected readonly state: ng_primitives_state.CreatedState<NgpToolbar>;
-    constructor();
+    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, [{ directive: typeof i1.NgpRovingFocusGroup; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToolbar, "[ngpToolbar]", ["ngpToolbar"], { "orientation": { "alias": "ngpToolbarOrientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Provides the Toolbar state.
- */
-declare const provideToolbarState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the Toolbar state.
- */
-declare const injectToolbarState: <U = NgpToolbar>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+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/utils/index.d.ts

@@ -19,6 +19,7 @@ interface NgpControlStatus {
 /**
  * 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.
+ * It supports both classic reactive forms controls and signal-forms interop controls.
  * @internal
  */
 declare function controlStatus(): Signal<NgpControlStatus>;