ng-primitives 0.89.0 → 0.91.0

package/resize/index.d.ts

@@ -1,2 +1,30 @@
+import { Dimensions } from 'ng-primitives/internal';
 export { Dimensions } from 'ng-primitives/internal';
-export { NgpResize } from './resize/resize';
+import * as i0 from '@angular/core';
+
+/**
+ * Apply the `ngpResize` directive to an element to listen for resize events.
+ */
+declare class NgpResize {
+    /**
+     * Access the element.
+     */
+    private readonly element;
+    /**
+     * Access zone.js
+     */
+    private readonly ngZone;
+    /**
+     * Access the destroy ref
+     */
+    private readonly destroyRef;
+    /**
+     * Emits when the element is resized.
+     */
+    readonly didResize: i0.OutputEmitterRef<Dimensions>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpResize, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpResize, "[ngpResize]", never, {}, { "didResize": "ngpResize"; }, never, never, true, never>;
+}
+
+export { NgpResize };

package/roving-focus/index.d.ts

@@ -1,4 +1,154 @@
-export { NgpRovingFocusGroup } from './roving-focus-group/roving-focus-group';
-export { injectRovingFocusGroupState, provideRovingFocusGroupState, } from './roving-focus-group/roving-focus-group-state';
-export { injectRovingFocusGroup, NgpRovingFocusGroupOptions, NgpRovingFocusGroupToken, provideRovingFocusGroup, } from './roving-focus-group/roving-focus-group-token';
-export { NgpRovingFocusItem } from './roving-focus-item/roving-focus-item';
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef, InjectionToken, Type, FactoryProvider } from '@angular/core';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { NgpOrientation } from 'ng-primitives/common';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * The state interface for the RovingFocusItem pattern.
+ */
+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 {
+    /**
+     * Whether the item is disabled.
+     */
+    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;
+    /**
+     * Expose the internal id of the roving focus item.
+     * @internal
+     */
+    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>;
+}
+
+/**
+ * Apply the `ngpRovingFocusGroup` directive to an element to manage focus for a group of child elements.
+ */
+declare class NgpRovingFocusGroup {
+    /**
+     * Determine the orientation of the roving focus group.
+     * @default 'vertical'
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * Determine if focus should wrap when the end or beginning is reached.
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Determine if the home and end keys should navigate to the first and last items.
+     */
+    readonly homeEnd: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Determine if the roving focus group is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Store the active item in the roving focus group.
+     * @internal
+     */
+    readonly activeItem: _angular_core.WritableSignal<NgpRovingFocusItem | null>;
+    /**
+     * The state of the roving focus group.
+     */
+    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;
+    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>;
+}
+
+declare const NgpRovingFocusGroupToken: InjectionToken<NgpRovingFocusGroup>;
+/**
+ * Inject the RovingFocusGroup directive instance
+ * @returns The RovingFocusGroup directive instance
+ */
+declare function injectRovingFocusGroup(): NgpRovingFocusGroup;
+interface NgpRovingFocusGroupOptions {
+    /**
+     * Whether we should inherit the focus group from the parent
+     * @default true
+     */
+    inherit?: boolean;
+}
+/**
+ * Provide the RovingFocusGroup directive instance
+ * @param type The RovingFocusGroup directive type
+ * @returns The RovingFocusGroup token
+ */
+declare function provideRovingFocusGroup(type: Type<NgpRovingFocusGroup>, { inherit }?: NgpRovingFocusGroupOptions): FactoryProvider;
+
+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/__snapshots__/index.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component Schematic should create a button primitive 1`] = `
 "import { Component, input } from '@angular/core';

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

@@ -1,3 +1,66 @@
-export { NgpSearchClear } from './search-clear/search-clear';
-export { NgpSearch } from './search/search';
-export { provideSearchState, injectSearchState } from './search/search-state';
+import * as _angular_core from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_search from 'ng-primitives/search';
+
+/**
+ * The `NgpSearchClear` directive is can be added to a button to clear the search field on click.
+ */
+declare class NgpSearchClear {
+    /**
+     * Access the Search instance.
+     */
+    protected readonly search: _angular_core.Signal<ng_primitives_state.State<ng_primitives_search.NgpSearch>>;
+    /**
+     * Clear the input field.
+     */
+    protected clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSearchClear, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSearchClear, "[ngpSearchClear]", ["ngpSearchClear"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * The `NgpSearch` directive is a container for the search field components.
+ */
+declare class NgpSearch {
+    /**
+     * The destroy reference.
+     */
+    private readonly destroyRef;
+    /**
+     * The input field.
+     */
+    private readonly input;
+    /**
+     * The value of the input.
+     */
+    private readonly value;
+    /**
+     * Whether the input field is empty.
+     * @internal
+     */
+    readonly empty: _angular_core.Signal<boolean>;
+    /**
+     * The search field state.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpSearch>;
+    clear(): void;
+    /**
+     * Register the input field.
+     * @param input The input field.
+     * @internal
+     */
+    registerInput(input: HTMLInputElement): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSearch, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSearch, "[ngpSearch]", ["ngpSearch"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the Search state.
+ */
+declare const provideSearchState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Search state.
+ */
+declare const injectSearchState: <U = NgpSearch>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpSearch, NgpSearchClear, injectSearchState, provideSearchState };