ng-primitives 0.95.0 → 0.97.0

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

@@ -1,6 +1,6 @@
 import { Component, input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ControlValueAccessor } from '@angular/forms';
-import { explicitEffect } from 'ng-primitives/internal';
 import {
   injectRangeSliderState,
   NgpRangeSlider,
@@ -10,6 +10,7 @@ import {
   provideRangeSliderState,
 } from 'ng-primitives/slider';
 import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
+import { merge } from 'rxjs';
 
 @Component({
   selector: '<%= prefix %>-range-slider',
@@ -106,9 +107,9 @@ export class RangeSlider<%= componentSuffix %> implements ControlValueAccessor {
 
   constructor() {
     // Whenever either value changes, call the onChange function with the new tuple [low, high].
-    explicitEffect([this.state().low, this.state().high], ([low, high]) =>
-      this.onChange?.([low, high]),
-    );
+    merge(this.state().lowChange, this.state().highChange)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.onChange?.([this.state().low(), this.state().high()]));
   }
 
   writeValue(value: [number, number]): void {
@@ -131,6 +132,6 @@ export class RangeSlider<%= componentSuffix %> implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.state().disabled.set(isDisabled);
+    this.state().setDisabled(isDisabled);
   }
 }

package/slider/index.d.ts

@@ -1,10 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { Signal, WritableSignal, ElementRef, OnDestroy } from '@angular/core';
+import { Signal, WritableSignal, ElementRef } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
 import { Observable } from 'rxjs';
 import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
-import * as ng_primitives_state from 'ng-primitives/state';
-import * as ng_primitives_slider from 'ng-primitives/slider';
 
 /**
  * Apply the `ngpSliderRange` directive to an element that represents the range of the slider.
@@ -302,79 +300,146 @@ declare class NgpSlider {
  * 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>>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderRange, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderRange, "[ngpRangeSliderRange]", ["ngpRangeSliderRange"], {}, {}, never, never, true, never>;
 }
 
+/**
+ * Public state surface for the RangeSliderRange primitive.
+ */
+interface NgpRangeSliderRangeState {
+}
+/**
+ * Inputs for configuring the RangeSliderRange primitive.
+ */
+interface NgpRangeSliderRangeProps {
+}
+declare const ngpRangeSliderRange: ({}: NgpRangeSliderRangeProps) => {};
+declare const injectRangeSliderRangeState: {
+    (): _angular_core.Signal<{}>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<{} | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<{}> | _angular_core.Signal<{} | null>;
+};
+declare const provideRangeSliderRangeState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
 /**
  * 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>;
+declare class NgpRangeSliderThumb {
     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.
+ * Public state surface for the RangeSliderThumb primitive.
  */
-declare class NgpRangeSliderTrack {
+interface NgpRangeSliderThumbState {
     /**
-     * Access the range slider state.
+     * Which value this thumb controls ('low' or 'high').
      */
-    protected readonly rangeSliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpRangeSlider>>;
+    readonly thumb: Signal<'low' | 'high'>;
     /**
-     * The element that represents the slider track.
+     * The current value for this thumb.
      */
-    readonly element: _angular_core.ElementRef<HTMLElement>;
-    constructor();
+    readonly value: Signal<number>;
     /**
-     * When the slider track is clicked, update the closest thumb value.
-     * @param event The click event.
+     * The current percentage for this thumb.
      */
-    protected handlePointerDown(event: PointerEvent): void;
+    readonly percentage: Signal<number>;
+}
+/**
+ * Inputs for configuring the RangeSliderThumb primitive.
+ */
+interface NgpRangeSliderThumbProps {
+}
+declare const ngpRangeSliderThumb: ({}: NgpRangeSliderThumbProps) => {
+    thumb: Signal<"low" | "high">;
+    value: Signal<number>;
+    percentage: Signal<number>;
+};
+declare const injectRangeSliderThumbState: {
+    (): Signal<{
+        thumb: Signal<"low" | "high">;
+        value: Signal<number>;
+        percentage: Signal<number>;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<{
+        thumb: Signal<"low" | "high">;
+        value: Signal<number>;
+        percentage: Signal<number>;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<{
+        thumb: Signal<"low" | "high">;
+        value: Signal<number>;
+        percentage: Signal<number>;
+    }> | Signal<{
+        thumb: Signal<"low" | "high">;
+        value: Signal<number>;
+        percentage: Signal<number>;
+    } | null>;
+};
+declare const provideRangeSliderThumbState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
+ */
+declare class NgpRangeSliderTrack {
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpRangeSliderTrack, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpRangeSliderTrack, "[ngpRangeSliderTrack]", ["ngpRangeSliderTrack"], {}, {}, never, never, true, never>;
 }
 
+/**
+ * Public state surface for the RangeSliderTrack primitive.
+ */
+interface NgpRangeSliderTrackState {
+}
+/**
+ * Inputs for configuring the RangeSliderTrack primitive.
+ */
+interface NgpRangeSliderTrackProps {
+}
+declare const ngpRangeSliderTrack: ({}: NgpRangeSliderTrackProps) => void;
+declare const injectRangeSliderTrackState: {
+    (): _angular_core.Signal<void>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<void | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<void> | _angular_core.Signal<void | null>;
+};
+declare const provideRangeSliderTrackState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
 /**
  * Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.
  */
@@ -420,80 +485,175 @@ declare class NgpRangeSlider {
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
-     * Access the slider track.
-     * @internal
+     * The state of the range slider.
      */
-    readonly track: _angular_core.WritableSignal<NgpRangeSliderTrack | undefined>;
+    private readonly state;
+    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>;
+}
+
+/**
+ * Inputs for configuring the RangeSlider primitive.
+ */
+interface NgpRangeSliderProps {
     /**
-     * The thumbs of the range slider.
-     * @internal
+     * The id of the range slider.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * The low value of the range slider.
+     */
+    readonly low?: Signal<number>;
+    /**
+     * The high value of the range slider.
+     */
+    readonly high?: Signal<number>;
+    /**
+     * The minimum value.
+     */
+    readonly min?: Signal<number>;
+    /**
+     * The maximum value.
+     */
+    readonly max?: Signal<number>;
+    /**
+     * The step value.
+     */
+    readonly step?: Signal<number>;
+    /**
+     * The range slider orientation.
+     */
+    readonly orientation?: Signal<NgpOrientation>;
+    /**
+     * Whether the range slider is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback fired when the low value changes.
+     */
+    readonly onLowChange?: (value: number) => void;
+    /**
+     * Callback fired when the high value changes.
+     */
+    readonly onHighChange?: (value: number) => void;
+}
+/**
+ * Public state surface for the RangeSlider primitive.
+ */
+interface NgpRangeSliderState {
+    /**
+     * The id of the range slider.
+     */
+    readonly id: Signal<string>;
+    /**
+     * The low value of the range slider.
+     */
+    readonly low: WritableSignal<number>;
+    /**
+     * The high value of the range slider.
+     */
+    readonly high: WritableSignal<number>;
+    /**
+     * The minimum value of the range slider.
      */
-    readonly thumbs: _angular_core.WritableSignal<NgpRangeSliderThumb[]>;
+    readonly min: Signal<number>;
+    /**
+     * The maximum value of the range slider.
+     */
+    readonly max: Signal<number>;
+    /**
+     * The step value of the range slider.
+     */
+    readonly step: Signal<number>;
+    /**
+     * The orientation of the range slider.
+     */
+    readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * Whether the range slider is disabled.
+     */
+    readonly disabled: WritableSignal<boolean>;
     /**
      * The low value as a percentage based on the min and max values.
      * @internal
      */
-    readonly lowPercentage: _angular_core.Signal<number>;
+    readonly lowPercentage: Signal<number>;
     /**
      * The high value as a percentage based on the min and max values.
      * @internal
      */
-    readonly highPercentage: _angular_core.Signal<number>;
+    readonly highPercentage: Signal<number>;
     /**
      * The range between low and high values as a percentage.
      * @internal
      */
-    readonly rangePercentage: _angular_core.Signal<number>;
+    readonly rangePercentage: Signal<number>;
     /**
-     * The state of the range slider. We use this for the range slider state rather than relying on the inputs.
-     * @internal
+     * @internal The track element reference.
      */
-    protected readonly state: ng_primitives_state.CreatedState<NgpRangeSlider>;
-    constructor();
+    readonly track: Signal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * @internal The thumbs array.
+     */
+    readonly thumbs: Signal<ElementRef<HTMLElement>[]>;
+    /**
+     * Emit when the low value changes.
+     */
+    readonly lowChange: Observable<number>;
+    /**
+     * Emit when the high value changes.
+     */
+    readonly highChange: Observable<number>;
     /**
      * 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;
+    addThumb(thumb: ElementRef<HTMLElement>): 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>;
+    removeThumb(thumb: ElementRef<HTMLElement>): void;
+    /**
+     * Set the track element reference.
+     */
+    setTrack(track: ElementRef<HTMLElement>): void;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Set the orientation.
+     */
+    setOrientation(orientation: NgpOrientation): void;
 }
+declare const ngpRangeSlider: ({ id, low: _low, high: _high, min, max, step, orientation: _orientation, disabled: _disabled, onLowChange, onHighChange, }: NgpRangeSliderProps) => NgpRangeSliderState;
+declare const injectRangeSliderState: {
+    (): Signal<NgpRangeSliderState>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpRangeSliderState | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpRangeSliderState> | Signal<NgpRangeSliderState | null>;
+};
+declare const provideRangeSliderState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
-/**
- * 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, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
-export type { NgpSliderProps, NgpSliderRangeProps, NgpSliderRangeState, NgpSliderState, NgpSliderThumbProps, NgpSliderThumbState, NgpSliderTrackProps, NgpSliderTrackState };
+export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderRangeState, injectRangeSliderState, injectRangeSliderThumbState, injectRangeSliderTrackState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpRangeSlider, ngpRangeSliderRange, ngpRangeSliderThumb, ngpRangeSliderTrack, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderRangeState, provideRangeSliderState, provideRangeSliderThumbState, provideRangeSliderTrackState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
+export type { NgpRangeSliderProps, NgpRangeSliderRangeProps, NgpRangeSliderRangeState, NgpRangeSliderState, NgpRangeSliderThumbProps, NgpRangeSliderThumbState, NgpRangeSliderTrackProps, NgpRangeSliderTrackState, NgpSliderProps, NgpSliderRangeProps, NgpSliderRangeState, NgpSliderState, NgpSliderThumbProps, NgpSliderThumbState, NgpSliderTrackProps, NgpSliderTrackState };

package/toast/index.d.ts

@@ -216,4 +216,4 @@ interface NgpToastRef {
 }
 
 export { NgpToast, NgpToastManager, injectToastContext, provideToastConfig };
-export type { NgpToastConfig };
+export type { NgpToastConfig, NgpToastRef };

package/utils/index.d.ts

@@ -16,12 +16,6 @@ interface NgpControlStatus {
     pending: boolean | null;
     disabled: boolean | null;
 }
-/**
- * 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>;
 
 /**