ng-primitives 0.89.0 → 0.90.0

package/slider/index.d.ts

@@ -1,10 +1,332 @@
-export { NgpSliderRange } from './slider-range/slider-range';
-export { NgpSliderThumb } from './slider-thumb/slider-thumb';
-export { NgpSliderTrack } from './slider-track/slider-track';
-export { NgpSlider } from './slider/slider';
-export { injectSliderState, provideSliderState } from './slider/slider-state';
-export { NgpRangeSliderRange } from './range-slider/range-slider-range/range-slider-range';
-export { NgpRangeSliderThumb } from './range-slider/range-slider-thumb/range-slider-thumb';
-export { NgpRangeSliderTrack } from './range-slider/range-slider-track/range-slider-track';
-export { NgpRangeSlider } from './range-slider/range-slider/range-slider';
-export { injectRangeSliderState, provideRangeSliderState, } from './range-slider/range-slider/range-slider-state';
+import * as _angular_core from '@angular/core';
+import { OnDestroy } from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_slider from 'ng-primitives/slider';
+import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
+import { NgpOrientation } from 'ng-primitives/common';
+
+/**
+ * Apply the `ngpSliderRange` directive to an element that represents the range of the slider.
+ */
+declare class NgpSliderRange {
+    /**
+     * Access the slider state.
+     */
+    protected readonly sliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderRange, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderRange, "[ngpSliderRange]", ["ngpSliderRange"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpSliderThumb` directive to an element that represents the thumb of the slider.
+ */
+declare class NgpSliderThumb {
+    /**
+     * Access the slider state.
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    /**
+     * Access the thumb element.
+     */
+    private readonly elementRef;
+    /**
+     * Store the dragging state.
+     */
+    protected dragging: boolean;
+    constructor();
+    protected handlePointerDown(event: PointerEvent): void;
+    protected handlePointerUp(): void;
+    protected handlePointerMove(event: PointerEvent): void;
+    /**
+     * Handle keyboard events.
+     * @param event
+     */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderThumb, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderThumb, "[ngpSliderThumb]", ["ngpSliderThumb"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpSliderTrack` directive to an element that represents the track of the slider.
+ */
+declare class NgpSliderTrack {
+    /**
+     * Access the slider state.
+     */
+    protected readonly sliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    /**
+     * The element that represents the slider track.
+     */
+    readonly element: _angular_core.ElementRef<HTMLElement>;
+    constructor();
+    /**
+     * When the slider track is clicked, update the value.
+     * @param event The click event.
+     */
+    protected handlePointerDown(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderTrack, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderTrack, "[ngpSliderTrack]", ["ngpSliderTrack"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.
+ */
+declare class NgpSlider {
+    /**
+     * The id of the slider. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The value of the slider.
+     */
+    readonly value: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Emits when the value changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * The minimum value of the slider.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The maximum value of the slider.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The step value of the slider.
+     */
+    readonly step: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The orientation of the slider.
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * The disabled state of the slider.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Access the slider track.
+     * @internal
+     */
+    readonly track: _angular_core.WritableSignal<NgpSliderTrack | undefined>;
+    /**
+     * The value as a percentage based on the min and max values.
+     */
+    protected readonly percentage: _angular_core.Signal<number>;
+    /**
+     * The state of the slider. We use this for the slider state rather than relying on the inputs.
+     * @internal
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpSlider>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSlider, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSlider, "[ngpSlider]", ["ngpSlider"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpSliderValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSliderDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpSliderValueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Slider state.
+ */
+declare const provideSliderState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Slider state.
+ */
+declare const injectSliderState: <U = NgpSlider>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+/**
+ * Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.
+ */
+declare class NgpRangeSliderRange {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly rangeSliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderRange, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderRange, "[ngpRangeSliderRange]", ["ngpRangeSliderRange"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpRangeSliderThumb` directive to an element that represents a thumb of the range slider.
+ * Each thumb can be configured to control either the 'low' or 'high' value.
+ */
+declare class NgpRangeSliderThumb implements OnDestroy {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
+    /**
+     * Access the thumb element.
+     */
+    private readonly elementRef;
+    /**
+     * Determines which value this thumb controls ('low' or 'high').
+     */
+    protected readonly thumb: _angular_core.Signal<"low" | "high">;
+    /**
+     * Store the dragging state.
+     */
+    protected dragging: boolean;
+    /**
+     * Get the current value for this thumb.
+     */
+    protected readonly value: _angular_core.Signal<number>;
+    /**
+     * Get the current percentage for this thumb.
+     */
+    protected readonly percentage: _angular_core.Signal<number>;
+    constructor();
+    ngOnDestroy(): void;
+    protected handlePointerDown(event: PointerEvent): void;
+    protected handlePointerUp(): void;
+    protected handlePointerMove(event: PointerEvent): void;
+    /**
+     * Handle keyboard events.
+     * @param event
+     */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderThumb, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderThumb, "[ngpRangeSliderThumb]", ["ngpRangeSliderThumb"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
+ */
+declare class NgpRangeSliderTrack {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly rangeSliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
+    /**
+     * The element that represents the slider track.
+     */
+    readonly element: _angular_core.ElementRef<HTMLElement>;
+    constructor();
+    /**
+     * When the slider track is clicked, update the closest thumb value.
+     * @param event The click event.
+     */
+    protected handlePointerDown(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderTrack, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderTrack, "[ngpRangeSliderTrack]", ["ngpRangeSliderTrack"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.
+ */
+declare class NgpRangeSlider {
+    /**
+     * The id of the range slider. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The low value of the range slider.
+     */
+    readonly low: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Emits when the low value changes.
+     */
+    readonly lowChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * The high value of the range slider.
+     */
+    readonly high: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Emits when the high value changes.
+     */
+    readonly highChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * The minimum value of the range slider.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The maximum value of the range slider.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The step value of the range slider.
+     */
+    readonly step: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The orientation of the range slider.
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * The disabled state of the range slider.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Access the slider track.
+     * @internal
+     */
+    readonly track: _angular_core.WritableSignal<NgpRangeSliderTrack | undefined>;
+    /**
+     * The thumbs of the range slider.
+     * @internal
+     */
+    readonly thumbs: _angular_core.WritableSignal<NgpRangeSliderThumb[]>;
+    /**
+     * The low value as a percentage based on the min and max values.
+     * @internal
+     */
+    readonly lowPercentage: _angular_core.Signal<number>;
+    /**
+     * The high value as a percentage based on the min and max values.
+     * @internal
+     */
+    readonly highPercentage: _angular_core.Signal<number>;
+    /**
+     * The range between low and high values as a percentage.
+     * @internal
+     */
+    readonly rangePercentage: _angular_core.Signal<number>;
+    /**
+     * The state of the range slider. We use this for the range slider state rather than relying on the inputs.
+     * @internal
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpRangeSlider>;
+    constructor();
+    /**
+     * Updates the low value, ensuring it doesn't exceed the high value.
+     * @param value The new low value
+     * @internal
+     */
+    setLowValue(value: number): void;
+    /**
+     * Updates the high value, ensuring it doesn't go below the low value.
+     * @param value The new high value
+     * @internal
+     */
+    setHighValue(value: number): void;
+    /**
+     * Determines which thumb should be moved based on the position clicked.
+     * @param percentage The percentage position of the click
+     * @returns 'low' or 'high' indicating which thumb should move
+     *
+     * @internal
+     */
+    getClosestThumb(percentage: number): 'low' | 'high';
+    /**
+     * Updates the thumbs array when a new thumb is added.
+     * @param thumb The new thumb to add
+     * @internal
+     */
+    addThumb(thumb: NgpRangeSliderThumb): void;
+    /**
+     * Removes a thumb from the thumbs array.
+     * @param thumb The thumb to remove
+     * @internal
+     */
+    removeThumb(thumb: NgpRangeSliderThumb): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSlider, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSlider, "[ngpRangeSlider]", ["ngpRangeSlider"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "low": { "alias": "ngpRangeSliderLow"; "required": false; "isSignal": true; }; "high": { "alias": "ngpRangeSliderHigh"; "required": false; "isSignal": true; }; "min": { "alias": "ngpRangeSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpRangeSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpRangeSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpRangeSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpRangeSliderDisabled"; "required": false; "isSignal": true; }; }, { "lowChange": "ngpRangeSliderLowChange"; "highChange": "ngpRangeSliderHighChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Range Slider state.
+ */
+declare const provideRangeSliderState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Range Slider state.
+ */
+declare const injectRangeSliderState: <U = NgpRangeSlider>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderState, provideRangeSliderState, provideSliderState };

package/state/index.d.ts

@@ -1,25 +1,26 @@
-import { FactoryProvider, InjectionToken, InjectOptions, InputSignal, InputSignalWithTransform, ProviderToken, Signal, WritableSignal } from '@angular/core';
+import { InputSignalWithTransform, WritableSignal, InputSignal, Signal, InjectionToken, ProviderToken, FactoryProvider, InjectOptions } from '@angular/core';
+
 /**
  * This converts the state object to a writable state object.
  * This means that inputs become signals which are writable.
  */
-export type State<T> = {
+type State<T> = {
     [K in keyof T]: T[K] extends InputSignalWithTransform<infer U, any> ? WritableSignal<U> : T[K] extends InputSignal<infer R> ? WritableSignal<R> : T[K];
 };
 /**
  * This is similar to the state object, but we don't expose properties that are not
  * inputs.
  */
-export type CreatedState<T> = {
+type CreatedState<T> = {
     [K in keyof T]: T[K] extends InputSignalWithTransform<infer U, any> ? WritableSignal<U> : T[K] extends InputSignal<infer R> ? WritableSignal<R> : never;
 };
-export type InjectedState<T> = Signal<State<T>>;
+type InjectedState<T> = Signal<State<T>>;
 /**
  * Create a new injection token for the state.
  * @param description The description of the token
  */
-export declare function createStateToken<T>(description: string): InjectionToken<T>;
-export interface CreateStateProviderOptions {
+declare function createStateToken<T>(description: string): InjectionToken<T>;
+interface CreateStateProviderOptions {
     /**
      * Whether we should check for the state in the parent injector.
      */
@@ -31,7 +32,7 @@ export interface CreateStateProviderOptions {
  * be useful to avoid issues where the injector can't be shared in some cases when ng-content is used.
  * @param token The token for the state
  */
-export declare function createStateProvider<T>(token: ProviderToken<T>): (options?: CreateStateProviderOptions) => FactoryProvider;
+declare function createStateProvider<T>(token: ProviderToken<T>): (options?: CreateStateProviderOptions) => FactoryProvider;
 type CreateStateInjectorOptions = {
     /**
      * Whether the state may not be immediately available. This can happen when the child is instantiated before the parent.
@@ -42,13 +43,15 @@ type CreateStateInjectorOptions = {
  * Create a new state injector for the state.
  * @param token The token for the state
  */
-export declare function createStateInjector<T>(token: ProviderToken<State<T>>, options: {
+declare function createStateInjector<T>(token: ProviderToken<State<T>>, options: {
     deferred: true;
 }): <U = T>(injectOptions?: InjectOptions) => Signal<State<U> | undefined>;
-export declare function createStateInjector<T>(token: ProviderToken<State<T>>, options?: CreateStateInjectorOptions): <U = T>(injectOptions?: InjectOptions) => Signal<State<U>>;
+declare function createStateInjector<T>(token: ProviderToken<State<T>>, options?: CreateStateInjectorOptions): <U = T>(injectOptions?: InjectOptions) => Signal<State<U>>;
 /**
  * Convert the original state object into a writable state object.
  * @param token The token for the state
  */
-export declare function createState(token: ProviderToken<WritableSignal<State<unknown>>>): <U>(state: U) => CreatedState<U>;
-export {};
+declare function createState(token: ProviderToken<WritableSignal<State<unknown>>>): <U>(state: U) => CreatedState<U>;
+
+export { createState, createStateInjector, createStateProvider, createStateToken };
+export type { CreateStateProviderOptions, CreatedState, InjectedState, State };

package/switch/index.d.ts

@@ -1,3 +1,76 @@
-export { NgpSwitchThumb } from './switch-thumb/switch-thumb';
-export { NgpSwitch } from './switch/switch';
-export { injectSwitchState, provideSwitchState } from './switch/switch-state';
+import * as _angular_core from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_switch from 'ng-primitives/switch';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.
+ */
+declare class NgpSwitchThumb {
+    /**
+     * Access the switch state.
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_switch.NgpSwitch>>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitchThumb, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitchThumb, "[ngpSwitchThumb]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpSwitch` directive to an element to manage the checked state.
+ */
+declare class NgpSwitch {
+    /**
+     * Access the element ref.
+     */
+    private readonly elementRef;
+    /**
+     * Determine if the switch is a button
+     */
+    protected isButton: boolean;
+    /**
+     * The id of the switch. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Determine if the switch is checked.
+     * @default false
+     */
+    readonly checked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emits when the checked state changes.
+     */
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Determine if the switch is disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The switch state.
+     * @internal
+     */
+    readonly state: ng_primitives_state.CreatedState<NgpSwitch>;
+    constructor();
+    /**
+     * Toggle the checked state.
+     */
+    toggle(): void;
+    /**
+     * Handle the keydown event.
+     */
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitch, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Switch state.
+ */
+declare const provideSwitchState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Switch state.
+ */
+declare const injectSwitchState: <U = NgpSwitch>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpSwitch, NgpSwitchThumb, injectSwitchState, provideSwitchState };