ng-primitives 0.74.0 → 0.75.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "keywords": [
     "angular",
     "primitives",
@@ -67,21 +67,25 @@
       "types": "./a11y/index.d.ts",
       "default": "./fesm2022/ng-primitives-a11y.mjs"
     },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "default": "./fesm2022/ng-primitives-accordion.mjs"
+    },
     "./autofill": {
       "types": "./autofill/index.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/ng-primitives-accordion.mjs"
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ng-primitives-avatar.mjs"
     },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/ng-primitives-button.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ng-primitives-avatar.mjs"
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "default": "./fesm2022/ng-primitives-checkbox.mjs"
     },
     "./combobox": {
       "types": "./combobox/index.d.ts",
@@ -91,10 +95,6 @@
       "types": "./common/index.d.ts",
       "default": "./fesm2022/ng-primitives-common.mjs"
     },
-    "./checkbox": {
-      "types": "./checkbox/index.d.ts",
-      "default": "./fesm2022/ng-primitives-checkbox.mjs"
-    },
     "./date-picker": {
       "types": "./date-picker/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-picker.mjs"
@@ -103,14 +103,14 @@
       "types": "./date-time/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time.mjs"
     },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "default": "./fesm2022/ng-primitives-dialog.mjs"
-    },
     "./date-time-luxon": {
       "types": "./date-time-luxon/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
     },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "default": "./fesm2022/ng-primitives-dialog.mjs"
+    },
     "./file-upload": {
       "types": "./file-upload/index.d.ts",
       "default": "./fesm2022/ng-primitives-file-upload.mjs"

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

@@ -0,0 +1,136 @@
+import { Component, input } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { explicitEffect } from 'ng-primitives/internal';
+import {
+  injectRangeSliderState,
+  NgpRangeSlider,
+  NgpRangeSliderRange,
+  NgpRangeSliderThumb,
+  NgpRangeSliderTrack,
+  provideRangeSliderState,
+} from 'ng-primitives/slider';
+import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
+
+@Component({
+  selector: '<%= prefix %>-range-slider',
+  hostDirectives: [
+    {
+      directive: NgpRangeSlider,
+      inputs: [
+        'ngpRangeSliderLow:low',
+        'ngpRangeSliderHigh:high',
+        'ngpRangeSliderMin:min',
+        'ngpRangeSliderMax:max',
+        'ngpRangeSliderStep:step',
+        'ngpRangeSliderDisabled:disabled',
+        'ngpRangeSliderOrientation:orientation',
+      ],
+      outputs: ['ngpRangeSliderLowChange:lowChange', 'ngpRangeSliderHighChange:highChange'],
+    },
+  ],
+  imports: [NgpRangeSliderTrack, NgpRangeSliderRange, NgpRangeSliderThumb],
+  providers: [provideRangeSliderState(), provideValueAccessor(RangeSlider<%= componentSuffix %>)],
+  template: `
+    <div ngpRangeSliderTrack>
+      <div ngpRangeSliderRange></div>
+    </div>
+    <div ngpRangeSliderThumb></div>
+    <div ngpRangeSliderThumb></div>
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: flex;
+      position: relative;
+      width: 200px;
+      height: 20px;
+      touch-action: none;
+      user-select: none;
+      align-items: center;
+    }
+
+    [ngpRangeSliderTrack] {
+      position: relative;
+      height: 5px;
+      width: 100%;
+      border-radius: 999px;
+      background-color: var(--ngp-background-secondary);
+    }
+
+    [ngpRangeSliderRange] {
+      position: absolute;
+      height: 100%;
+      border-radius: 999px;
+      background-color: var(--ngp-background-inverse);
+    }
+
+    [ngpRangeSliderThumb] {
+      position: absolute;
+      display: block;
+      height: 20px;
+      width: 20px;
+      border-radius: 10px;
+      background-color: white;
+      box-shadow: var(--ngp-button-shadow);
+      outline: none;
+      transform: translateX(-50%);
+    }
+
+    [ngpRangeSliderThumb][data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+      outline-offset: 0;
+    }
+
+    [ngpRangeSliderThumb][data-thumb='high'] {
+      z-index: 2;
+    }
+  `,
+  host: {
+    '(focusout)': 'onTouched?.()',
+  },
+})
+export class RangeSlider<%= componentSuffix %> implements ControlValueAccessor {
+  /** Access the range slider state */
+  private readonly state = injectRangeSliderState();
+
+  /** Forward aria-labels to each thumb */
+  readonly ariaLabelLow = input<string | null>(null);
+  readonly ariaLabelHigh = input<string | null>(null);
+
+  /** The onChange callback function. */
+  private onChange?: ChangeFn<[number, number]>;
+
+  /** The onTouched callback function. */
+  protected onTouched?: TouchedFn;
+
+  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]),
+    );
+  }
+
+  writeValue(value: [number, number]): void {
+    if (!value || value.length !== 2) {
+      return;
+    }
+
+    const [low, high] = value;
+    // Use the directive's clamping setters to respect min/max and ordering
+    this.state().setLowValue(low);
+    this.state().setHighValue(high);
+  }
+
+  registerOnChange(fn: ChangeFn<[number, number]>): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchedFn): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.state().disabled.set(isDisabled);
+  }
+}

package/slider/index.d.ts

@@ -3,3 +3,8 @@ 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';

package/slider/range-slider/range-slider/range-slider-state.d.ts

@@ -0,0 +1,17 @@
+import type { NgpRangeSlider } from './range-slider';
+/**
+ * The state token for the Range Slider primitive.
+ */
+export declare const NgpRangeSliderStateToken: import("@angular/core").InjectionToken<NgpRangeSlider>;
+/**
+ * Provides the Range Slider state.
+ */
+export declare const provideRangeSliderState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
+/**
+ * Injects the Range Slider state.
+ */
+export declare const injectRangeSliderState: <U = NgpRangeSlider>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+/**
+ * The Range Slider state registration function.
+ */
+export declare const rangeSliderState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;

package/slider/range-slider/range-slider/range-slider.d.ts

@@ -0,0 +1,115 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { NgpOrientation } from 'ng-primitives/common';
+import { NgpRangeSliderThumb } from '../range-slider-thumb/range-slider-thumb';
+import type { NgpRangeSliderTrack } from '../range-slider-track/range-slider-track';
+import * as i0 from "@angular/core";
+/**
+ * Apply the `ngpRangeSlider` directive to an element that represents the range slider and contains the track, range, and thumbs.
+ */
+export declare class NgpRangeSlider {
+    /**
+     * The id of the range slider. If not provided, a unique id will be generated.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * The low value of the range slider.
+     */
+    readonly low: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Emits when the low value changes.
+     */
+    readonly lowChange: import("@angular/core").OutputEmitterRef<number>;
+    /**
+     * The high value of the range slider.
+     */
+    readonly high: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * Emits when the high value changes.
+     */
+    readonly highChange: import("@angular/core").OutputEmitterRef<number>;
+    /**
+     * The minimum value of the range slider.
+     */
+    readonly min: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The maximum value of the range slider.
+     */
+    readonly max: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The step value of the range slider.
+     */
+    readonly step: import("@angular/core").InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The orientation of the range slider.
+     */
+    readonly orientation: import("@angular/core").InputSignal<NgpOrientation>;
+    /**
+     * The disabled state of the range slider.
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Access the slider track.
+     * @internal
+     */
+    readonly track: import("@angular/core").WritableSignal<NgpRangeSliderTrack | undefined>;
+    /**
+     * The thumbs of the range slider.
+     * @internal
+     */
+    readonly thumbs: import("@angular/core").WritableSignal<NgpRangeSliderThumb[]>;
+    /**
+     * The low value as a percentage based on the min and max values.
+     * @internal
+     */
+    readonly lowPercentage: import("@angular/core").Signal<number>;
+    /**
+     * The high value as a percentage based on the min and max values.
+     * @internal
+     */
+    readonly highPercentage: import("@angular/core").Signal<number>;
+    /**
+     * The range between low and high values as a percentage.
+     * @internal
+     */
+    readonly rangePercentage: import("@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: import("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: i0.ɵɵFactoryDeclaration<NgpRangeSlider, never>;
+    static ɵdir: i0.ɵɵ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>;
+}

package/slider/range-slider/range-slider-range/range-slider-range.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+/**
+ * Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.
+ */
+export declare class NgpRangeSliderRange {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly rangeSliderState: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpRangeSlider>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpRangeSliderRange, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpRangeSliderRange, "[ngpRangeSliderRange]", ["ngpRangeSliderRange"], {}, {}, never, never, true, never>;
+}

package/slider/range-slider/range-slider-thumb/range-slider-thumb.d.ts

@@ -0,0 +1,44 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * 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.
+ */
+export declare class NgpRangeSliderThumb implements OnDestroy {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpRangeSlider>>;
+    /**
+     * Access the thumb element.
+     */
+    private readonly elementRef;
+    /**
+     * Determines which value this thumb controls ('low' or 'high').
+     */
+    protected readonly thumb: import("@angular/core").Signal<"low" | "high">;
+    /**
+     * Store the dragging state.
+     */
+    protected dragging: boolean;
+    /**
+     * Get the current value for this thumb.
+     */
+    protected readonly value: import("@angular/core").Signal<number>;
+    /**
+     * Get the current percentage for this thumb.
+     */
+    protected readonly percentage: import("@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: i0.ɵɵFactoryDeclaration<NgpRangeSliderThumb, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpRangeSliderThumb, "[ngpRangeSliderThumb]", ["ngpRangeSliderThumb"], {}, {}, never, never, true, never>;
+}

package/slider/range-slider/range-slider-track/range-slider-track.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+/**
+ * Apply the `ngpRangeSliderTrack` directive to an element that represents the track of the range slider.
+ */
+export declare class NgpRangeSliderTrack {
+    /**
+     * Access the range slider state.
+     */
+    protected readonly rangeSliderState: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/slider").NgpRangeSlider>>;
+    /**
+     * The element that represents the slider track.
+     */
+    readonly element: import("@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: i0.ɵɵFactoryDeclaration<NgpRangeSliderTrack, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpRangeSliderTrack, "[ngpRangeSliderTrack]", ["ngpRangeSliderTrack"], {}, {}, never, never, true, never>;
+}