ng-primitives 0.90.0 → 0.91.0

package/pagination/index.d.ts

@@ -36,7 +36,7 @@ declare class NgpPaginationButton {
      * A click event may not be fired if this is on an anchor tag and the href is empty.
      * This is a workaround to ensure the click event is fired.
      */
-    protected onEnter(event: KeyboardEvent): void;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPaginationButton, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPaginationButton, "[ngpPaginationButton]", ["ngpPaginationButton"], { "page": { "alias": "ngpPaginationButtonPage"; "required": true; "isSignal": true; }; "buttonDisabled": { "alias": "ngpPaginationButtonDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -63,7 +63,7 @@ declare class NgpPaginationFirst {
      * A click event may not be fired if this is on an anchor tag and the href is empty.
      * This is a workaround to ensure the click event is fired.
      */
-    protected onEnter(event: KeyboardEvent): void;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPaginationFirst, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPaginationFirst, "[ngpPaginationFirst]", ["ngpPaginationFirst"], { "buttonDisabled": { "alias": "ngpPaginationFirstDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -75,7 +75,7 @@ declare class NgpPaginationLast {
     /**
      * Access the pagination state.
      */
-    private readonly paginationState;
+    protected readonly paginationState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_pagination.NgpPagination>>;
     /**
      * Whether the button is disabled.
      */
@@ -90,7 +90,7 @@ declare class NgpPaginationLast {
      * A click event may not be fired if this is on an anchor tag and the href is empty.
      * This is a workaround to ensure the click event is fired.
      */
-    protected onEnter(event: KeyboardEvent): void;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPaginationLast, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPaginationLast, "[ngpPaginationLast]", ["ngpPaginationLast"], { "buttonDisabled": { "alias": "ngpPaginationLastDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -120,7 +120,7 @@ declare class NgpPaginationNext {
      * A click event may not be fired if this is on an anchor tag and the href is empty.
      * This is a workaround to ensure the click event is fired.
      */
-    protected onEnter(event: KeyboardEvent): void;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPaginationNext, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPaginationNext, "[ngpPaginationNext]", ["ngpPaginationNext"], { "buttonDisabled": { "alias": "ngpPaginationNextDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -150,7 +150,7 @@ declare class NgpPaginationPrevious {
      * A click event may not be fired if this is on an anchor tag and the href is empty.
      * This is a workaround to ensure the click event is fired.
      */
-    protected onEnter(event: KeyboardEvent): void;
+    protected onEnter(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPaginationPrevious, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPaginationPrevious, "[ngpPaginationPrevious]", ["ngpPaginationPrevious"], { "buttonDisabled": { "alias": "ngpPaginationPreviousDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -189,7 +189,7 @@ declare class NgpPagination {
      * The control state for the pagination.
      * @internal
      */
-    private readonly state;
+    protected readonly state: ng_primitives_state.CreatedState<NgpPagination>;
     /**
      * Go to the specified page.
      * @param page The page to go to.

package/roving-focus/index.d.ts

@@ -1,56 +1,91 @@
-import * as ng_primitives_state from 'ng-primitives/state';
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy, ElementRef, InjectionToken, Type, FactoryProvider } from '@angular/core';
+import { Signal, ElementRef, InjectionToken, Type, FactoryProvider } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { NgpOrientation } from 'ng-primitives/common';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
- * Apply the `ngpRovingFocusItem` directive to an element within a roving focus group to automatically manage focus.
+ * The state interface for the RovingFocusItem pattern.
  */
-declare class NgpRovingFocusItem implements OnInit, OnDestroy {
-    /**
-     * Access the group the roving focus item belongs to.
-     */
-    private readonly group;
-    /**
-     * Access the focus monitor service.
-     */
-    private readonly focusMonitor;
+interface NgpRovingFocusItemState {
+    readonly id: Signal<string>;
+    readonly disabled: Signal<boolean>;
+    readonly tabindex: Signal<number>;
+    readonly element: ElementRef<HTMLElement>;
+    focus(origin: FocusOrigin): void;
+}
+/**
+ * The props interface for the RovingFocusItem pattern.
+ */
+interface NgpRovingFocusItemProps {
     /**
-     * Access the element the roving focus item is attached to.
+     * Whether the item is disabled.
      */
-    readonly elementRef: ElementRef<HTMLElement>;
+    readonly disabled: Signal<boolean>;
+}
+declare const NgpRovingFocusItemStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<NgpRovingFocusItemState>>;
+declare const ngpRovingFocusItem: ({ disabled }: NgpRovingFocusItemProps) => NgpRovingFocusItemState;
+declare const injectRovingFocusItemState: {
+    (): Signal<NgpRovingFocusItemState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpRovingFocusItemState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpRovingFocusItemState | null>;
+};
+declare const provideRovingFocusItemState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+interface NgpRovingFocusGroupState {
+    orientation: Signal<NgpOrientation>;
+    wrap: Signal<boolean>;
+    homeEnd: Signal<boolean>;
+    disabled: Signal<boolean>;
+    activeItem: Signal<string | null>;
+    onKeydown(event: KeyboardEvent): void;
+    setActiveItem(id: string | null, origin?: FocusOrigin): void;
+    register(item: NgpRovingFocusItemState): void;
+    unregister(item: NgpRovingFocusItemState): void;
+    setOrientation(orientation: NgpOrientation): void;
+}
+interface NgpRovingFocusGroupProps {
+    orientation?: Signal<NgpOrientation>;
+    wrap?: Signal<boolean>;
+    homeEnd?: Signal<boolean>;
+    disabled?: Signal<boolean>;
+    inherit?: boolean;
+}
+declare const NgpRovingFocusGroupStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<NgpRovingFocusGroupState>>;
+declare const ngpRovingFocusGroup: ({ orientation: _orientation, wrap, homeEnd, disabled, inherit, }: NgpRovingFocusGroupProps) => NgpRovingFocusGroupState;
+declare const injectRovingFocusGroupState: {
+    (): Signal<NgpRovingFocusGroupState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpRovingFocusGroupState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpRovingFocusGroupState | null>;
+};
+declare const provideRovingFocusGroupState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpRovingFocusItem` directive to an element within a roving focus group to automatically manage focus.
+ */
+declare class NgpRovingFocusItem {
     /**
      * Define if the item is disabled.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly state;
     /**
-     * Derive the tabindex of the roving focus item.
-     */
-    readonly tabindex: _angular_core.Signal<0 | -1>;
-    /**
-     * Initialize the roving focus item.
-     */
-    ngOnInit(): void;
-    /**
-     * Clean up the roving focus item.
-     */
-    ngOnDestroy(): void;
-    /**
-     * Forward the keydown event to the roving focus group.
-     * @param event The keyboard event
-     */
-    protected onKeydown(event: KeyboardEvent): void;
-    /**
-     * Activate the roving focus item on click.
-     */
-    protected activate(): void;
-    /**
-     * Focus the roving focus item.
-     * @param origin The origin of the focus
+     * Expose the internal id of the roving focus item.
+     * @internal
      */
-    focus(origin: FocusOrigin): void;
+    readonly id: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRovingFocusItem, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRovingFocusItem, "[ngpRovingFocusItem]", ["ngpRovingFocusItem"], { "disabled": { "alias": "ngpRovingFocusItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -59,10 +94,6 @@ declare class NgpRovingFocusItem implements OnInit, OnDestroy {
  * Apply the `ngpRovingFocusGroup` directive to an element to manage focus for a group of child elements.
  */
 declare class NgpRovingFocusGroup {
-    /**
-     * Access the directionality service.
-     */
-    private readonly directionality;
     /**
      * Determine the orientation of the roving focus group.
      * @default 'vertical'
@@ -80,14 +111,6 @@ declare class NgpRovingFocusGroup {
      * Determine if the roving focus group is disabled.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Store the items in the roving focus group.
-     */
-    private readonly items;
-    /**
-     * Get the items in the roving focus group sorted by order.
-     */
-    private get sortedItems();
     /**
      * Store the active item in the roving focus group.
      * @internal
@@ -96,64 +119,17 @@ declare class NgpRovingFocusGroup {
     /**
      * The state of the roving focus group.
      */
-    readonly state: ng_primitives_state.CreatedState<NgpRovingFocusGroup>;
-    /**
-     * Register an item with the roving focus group.
-     * @param item The item to register
-     * @internal
-     */
-    register(item: NgpRovingFocusItem): void;
-    /**
-     * Unregister an item with the roving focus group.
-     * @param item The item to unregister
-     * @internal
-     */
-    unregister(item: NgpRovingFocusItem): void;
+    readonly state: NgpRovingFocusGroupState;
     /**
      * Activate an item in the roving focus group.
      * @param item The item to activate
      * @param origin The origin of the focus change
      */
     setActiveItem(item: NgpRovingFocusItem | null, origin?: FocusOrigin): void;
-    /**
-     * Activate the first item in the roving focus group.
-     * @param origin The origin of the focus change
-     */
-    private activateFirstItem;
-    /**
-     * Activate the last item in the roving focus group.
-     * @param origin The origin of the focus change
-     */
-    private activateLastItem;
-    /**
-     * Activate the next item in the roving focus group.
-     * @param origin The origin of the focus change
-     */
-    private activateNextItem;
-    /**
-     * Activate the previous item in the roving focus group.
-     * @param origin The origin of the focus change
-     */
-    private activatePreviousItem;
-    /**
-     * Handle keyboard navigation for the roving focus group.
-     * @param event The keyboard event
-     * @internal
-     */
-    onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRovingFocusGroup, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRovingFocusGroup, "[ngpRovingFocusGroup]", ["ngpRovingFocusGroup"], { "orientation": { "alias": "ngpRovingFocusGroupOrientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpRovingFocusGroupWrap"; "required": false; "isSignal": true; }; "homeEnd": { "alias": "ngpRovingFocusGroupHomeEnd"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpRovingFocusGroupDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * Provides the RovingFocusGroup state.
- */
-declare const provideRovingFocusGroupState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the RovingFocusGroup state.
- */
-declare const injectRovingFocusGroupState: <U = NgpRovingFocusGroup>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
 declare const NgpRovingFocusGroupToken: InjectionToken<NgpRovingFocusGroup>;
 /**
  * Inject the RovingFocusGroup directive instance
@@ -174,5 +150,5 @@ interface NgpRovingFocusGroupOptions {
  */
 declare function provideRovingFocusGroup(type: Type<NgpRovingFocusGroup>, { inherit }?: NgpRovingFocusGroupOptions): FactoryProvider;
 
-export { NgpRovingFocusGroup, NgpRovingFocusGroupToken, NgpRovingFocusItem, injectRovingFocusGroup, injectRovingFocusGroupState, provideRovingFocusGroup, provideRovingFocusGroupState };
-export type { NgpRovingFocusGroupOptions };
+export { NgpRovingFocusGroup, NgpRovingFocusGroupStateToken, NgpRovingFocusGroupToken, NgpRovingFocusItem, NgpRovingFocusItemStateToken, injectRovingFocusGroup, injectRovingFocusGroupState, injectRovingFocusItemState, ngpRovingFocusGroup, ngpRovingFocusItem, provideRovingFocusGroup, provideRovingFocusGroupState, provideRovingFocusItemState };
+export type { NgpRovingFocusGroupOptions, NgpRovingFocusGroupProps, NgpRovingFocusGroupState, NgpRovingFocusItemProps, NgpRovingFocusItemState };

package/schematics/ng-add/schema.d.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-empty-interface
 export interface Schema {}

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

@@ -91,7 +91,7 @@ export class Checkbox<%= componentSuffix %> implements ControlValueAccessor {
   }
 
   writeValue(checked: boolean): void {
-    this.state().checked.set(checked);
+    this.state().setChecked(checked);
   }
 
   registerOnChange(fn: ChangeFn<boolean>): void {
@@ -103,6 +103,6 @@ export class Checkbox<%= componentSuffix %> implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.state().disabled.set(isDisabled);
+    this.state().setDisabled(isDisabled);
   }
 }

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

@@ -1,4 +1,5 @@
 import { Component, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ControlValueAccessor } from '@angular/forms';
 import {
   injectSliderState,
@@ -101,11 +102,13 @@ export class Slider<%= componentSuffix %> implements ControlValueAccessor {
 
   constructor() {
     // Whenever the user interacts with the slider, call the onChange function with the new value.
-    this.state().valueChange.subscribe(value => this.onChange?.(value));
+    this.state()
+      .valueChange.pipe(takeUntilDestroyed())
+      .subscribe(value => this.onChange?.(value));
   }
 
   writeValue(value: number): void {
-    this.state().value.set(value);
+    this.state().setValue(value);
   }
 
   registerOnChange(fn: ChangeFn<number>): void {
@@ -117,6 +120,6 @@ export class Slider<%= componentSuffix %> implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.state().disabled.set(isDisabled);
+    this.state().setDisabled(isDisabled);
   }
 }

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

@@ -85,7 +85,7 @@ export class Switch<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Write a new value to the switch. */
   writeValue(value: boolean): void {
-    this.switch().checked.set(value);
+    this.switch().setChecked(value);
   }
 
   /** Register a callback function to be called when the value changes. */
@@ -100,6 +100,6 @@ export class Switch<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Set the disabled state of the switch. */
   setDisabledState(isDisabled: boolean): void {
-    this.switch().disabled.set(isDisabled);
+    this.switch().setDisabled(isDisabled);
   }
 }

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

@@ -74,7 +74,7 @@ export class Toggle<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Write a new value to the toggle. */
   writeValue(value: boolean): void {
-    this.toggle().selected.set(value);
+    this.toggle().setSelected(value);
   }
 
   /** Register a callback function to be called when the value changes. */
@@ -89,6 +89,6 @@ export class Toggle<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Set the disabled state of the toggle. */
   setDisabledState(isDisabled: boolean): void {
-    this.toggle().disabled.set(isDisabled);
+    this.toggle().setDisabled(isDisabled);
   }
 }

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

@@ -55,7 +55,7 @@ export class ToggleGroup<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Write a new value to the toggle group. */
   writeValue(value: string[]): void {
-    this.toggleGroup().value.set(value);
+    this.toggleGroup().setValue(value);
   }
 
   /** Register a callback function to be called when the value changes. */
@@ -70,6 +70,6 @@ export class ToggleGroup<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Set the disabled state of the toggle group. */
   setDisabledState(isDisabled: boolean): void {
-    this.toggleGroup().disabled.set(isDisabled);
+    this.toggleGroup().setDisabled(isDisabled);
   }
 }

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

@@ -32,6 +32,6 @@ export class Toolbar<%= componentSuffix %> {
 
   constructor() {
     // default to horizontal orientation
-    this.toolbar().orientation.set('horizontal');
+    this.toolbar().setOrientation('horizontal');
   }
 }

package/search/index.d.ts

@@ -38,7 +38,7 @@ declare class NgpSearch {
      * Whether the input field is empty.
      * @internal
      */
-    protected readonly empty: _angular_core.Signal<boolean>;
+    readonly empty: _angular_core.Signal<boolean>;
     /**
      * The search field state.
      */

package/select/index.d.ts

@@ -1,7 +1,7 @@
+import * as ng_primitives_state from 'ng-primitives/state';
 import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, Provider, Injector } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import * as ng_primitives_state from 'ng-primitives/state';
 import * as ng_primitives_internal from 'ng-primitives/internal';
 import * as ng_primitives_select from 'ng-primitives/select';
 import { NgpActivatable } from 'ng-primitives/a11y';
@@ -24,7 +24,7 @@ declare class NgpNativeSelect {
     /**
      * The select state.
      */
-    private readonly state;
+    protected readonly state: ng_primitives_state.CreatedState<NgpNativeSelect>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNativeSelect, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNativeSelect, "select[ngpNativeSelect]", ["ngpNativeSelect"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpNativeSelectDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;