ng-primitives 0.90.0 → 0.91.0

package/fesm2022/ng-primitives-slider.mjs

@@ -1,237 +1,265 @@
 import * as i0 from '@angular/core';
-import { Directive, HostListener, input, numberAttribute, output, booleanAttribute, signal, computed } from '@angular/core';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { ngpInteractions } from 'ng-primitives/interactions';
+import { signal, computed, Directive, input, numberAttribute, output, booleanAttribute, HostListener } from '@angular/core';
 import { injectElementRef } from 'ng-primitives/internal';
-import { setupFormControl } from 'ng-primitives/form-field';
+import { createPrimitive, controlled, attrBinding, dataBinding, deprecatedSetter, styleBinding, listener, createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { ngpFormControl } from 'ng-primitives/form-field';
 import { uniqueId } from 'ng-primitives/utils';
+import { Subject } from 'rxjs';
+import { ngpInteractions } from 'ng-primitives/interactions';
 
-/**
- * The state token  for the Slider primitive.
- */
-const NgpSliderStateToken = createStateToken('Slider');
-/**
- * Provides the Slider state.
- */
-const provideSliderState = createStateProvider(NgpSliderStateToken);
-/**
- * Injects the Slider state.
- */
-const injectSliderState = createStateInjector(NgpSliderStateToken);
-/**
- * The Slider state registration function.
- */
-const sliderState = createState(NgpSliderStateToken);
+const [NgpSliderStateToken, ngpSlider, injectSliderState, provideSliderState] = createPrimitive('NgpSlider', ({ id = signal(uniqueId('ngp-slider')), value: _value = signal(0), min = signal(0), max = signal(100), step = signal(1), orientation: _orientation = signal('horizontal'), disabled: _disabled = signal(false), onValueChange, }) => {
+    const element = injectElementRef();
+    const value = controlled(_value);
+    const disabledInput = controlled(_disabled);
+    const orientation = controlled(_orientation);
+    const valueChange = new Subject();
+    const track = signal(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
+    // Form control integration
+    const status = ngpFormControl({ id, disabled: disabledInput });
+    const percentage = computed(() => {
+        const range = max() - min();
+        if (range <= 0) {
+            return 0;
+        }
+        const pct = ((value() - min()) / range) * 100;
+        return Math.min(100, Math.max(0, pct));
+    }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
+    // Host bindings
+    attrBinding(element, 'id', id);
+    dataBinding(element, 'data-orientation', orientation);
+    dataBinding(element, 'data-disabled', () => status().disabled);
+    function setTrack(newTrack) {
+        track.set(newTrack);
+    }
+    function setValue(newValue) {
+        const clamped = Math.min(max(), Math.max(min(), newValue));
+        value.set(clamped);
+        onValueChange?.(clamped);
+        valueChange.next(clamped);
+    }
+    function setDisabled(isDisabled) {
+        disabledInput.set(isDisabled);
+    }
+    function setOrientation(newOrientation) {
+        orientation.set(newOrientation);
+    }
+    return {
+        id,
+        value,
+        min,
+        max,
+        step,
+        orientation: deprecatedSetter(orientation, 'setOrientation'),
+        disabled: deprecatedSetter(disabledInput, 'setDisabled'),
+        valueChange,
+        percentage,
+        track,
+        setValue,
+        setTrack,
+        setDisabled,
+        setOrientation,
+    };
+});
+
+const [NgpSliderRangeStateToken, ngpSliderRange, injectSliderRangeState, provideSliderRangeState,] = createPrimitive('NgpSliderRange', ({}) => {
+    const element = injectElementRef();
+    const slider = injectSliderState();
+    // Host bindings
+    dataBinding(element, 'data-orientation', () => slider().orientation());
+    dataBinding(element, 'data-disabled', () => slider().disabled());
+    styleBinding(element, 'width.%', () => slider().orientation() === 'horizontal' ? slider().percentage() : null);
+    styleBinding(element, 'height.%', () => slider().orientation() === 'vertical' ? slider().percentage() : null);
+    return {};
+});
 
 /**
  * Apply the `ngpSliderRange` directive to an element that represents the range of the slider.
  */
 class NgpSliderRange {
     constructor() {
-        /**
-         * Access the slider state.
-         */
-        this.sliderState = injectSliderState();
+        ngpSliderRange({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderRange, isStandalone: true, selector: "[ngpSliderRange]", host: { properties: { "attr.data-orientation": "sliderState().orientation()", "attr.data-disabled": "sliderState().disabled() ? \"\" : null", "style.width.%": "sliderState().orientation() === \"horizontal\" ? sliderState().percentage() : undefined", "style.height.%": "sliderState().orientation() === \"vertical\" ? sliderState().percentage() : undefined" } }, exportAs: ["ngpSliderRange"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderRange, isStandalone: true, selector: "[ngpSliderRange]", providers: [provideSliderRangeState()], exportAs: ["ngpSliderRange"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderRange, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSliderRange]',
                     exportAs: 'ngpSliderRange',
-                    host: {
-                        '[attr.data-orientation]': 'sliderState().orientation()',
-                        '[attr.data-disabled]': 'sliderState().disabled() ? "" : null',
-                        '[style.width.%]': 'sliderState().orientation() === "horizontal" ? sliderState().percentage() : undefined',
-                        '[style.height.%]': 'sliderState().orientation() === "vertical" ? sliderState().percentage() : undefined',
-                    },
+                    providers: [provideSliderRangeState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-/**
- * Apply the `ngpSliderThumb` directive to an element that represents the thumb of the slider.
- */
-class NgpSliderThumb {
-    constructor() {
-        /**
-         * Access the slider state.
-         */
-        this.state = injectSliderState();
-        /**
-         * Access the thumb element.
-         */
-        this.elementRef = injectElementRef();
-        /**
-         * Store the dragging state.
-         */
-        this.dragging = false;
-        ngpInteractions({
-            hover: true,
-            focusVisible: true,
-            press: true,
-            disabled: this.state().disabled,
-        });
-    }
-    handlePointerDown(event) {
+const [NgpSliderThumbStateToken, ngpSliderThumb, injectSliderThumbState, provideSliderThumbState,] = createPrimitive('NgpSliderThumb', ({}) => {
+    const elementRef = injectElementRef();
+    const slider = injectSliderState();
+    let dragging = false;
+    const ariaValueNow = computed(() => slider().value(), ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : []));
+    const tabindex = computed(() => (slider().disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Host bindings
+    attrBinding(elementRef, 'role', 'slider');
+    attrBinding(elementRef, 'aria-valuemin', () => slider().min().toString());
+    attrBinding(elementRef, 'aria-valuemax', () => slider().max().toString());
+    attrBinding(elementRef, 'aria-valuenow', () => ariaValueNow().toString());
+    attrBinding(elementRef, 'aria-orientation', () => slider().orientation());
+    attrBinding(elementRef, 'tabindex', () => tabindex().toString());
+    dataBinding(elementRef, 'data-orientation', () => slider().orientation());
+    dataBinding(elementRef, 'data-disabled', () => slider().disabled());
+    styleBinding(elementRef, 'inset-inline-start.%', () => slider().orientation() === 'horizontal' ? slider().percentage() : null);
+    styleBinding(elementRef, 'inset-block-start.%', () => slider().orientation() === 'vertical' ? slider().percentage() : null);
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        press: true,
+        disabled: slider().disabled,
+    });
+    // Pointer interactions
+    listener(elementRef, 'pointerdown', (event) => {
         event.preventDefault();
-        if (this.state().disabled()) {
+        if (slider().disabled()) {
             return;
         }
-        this.dragging = true;
-    }
-    handlePointerUp() {
-        if (this.state().disabled()) {
+        dragging = true;
+        elementRef.nativeElement.setPointerCapture(event.pointerId);
+    });
+    listener(elementRef, 'pointerup', (event) => {
+        if (slider().disabled()) {
             return;
         }
-        this.dragging = false;
-    }
-    handlePointerMove(event) {
-        if (this.state().disabled() || !this.dragging) {
+        dragging = false;
+        if (elementRef.nativeElement.hasPointerCapture(event.pointerId)) {
+            elementRef.nativeElement.releasePointerCapture(event.pointerId);
+        }
+    });
+    listener(elementRef, 'pointermove', (event) => {
+        if (slider().disabled() || !dragging) {
             return;
         }
-        const rect = this.state().track()?.element.nativeElement.getBoundingClientRect();
+        const track = slider().track();
+        const rect = track?.nativeElement.getBoundingClientRect();
         if (!rect) {
             return;
         }
-        const percentage = this.state().orientation() === 'horizontal'
+        const percentage = slider().orientation() === 'horizontal'
             ? (event.clientX - rect.left) / rect.width
             : 1 - (event.clientY - rect.top) / rect.height;
-        const value = this.state().min() +
-            (this.state().max() - this.state().min()) * Math.max(0, Math.min(1, percentage));
-        this.state().value.set(value);
-        this.state().valueChange.emit(value);
-    }
-    /**
-     * Handle keyboard events.
-     * @param event
-     */
-    handleKeydown(event) {
+        const value = slider().min() + (slider().max() - slider().min()) * Math.max(0, Math.min(1, percentage));
+        slider().setValue(value);
+    });
+    // Keyboard interactions
+    listener(elementRef, 'keydown', (event) => {
         const multiplier = event.shiftKey ? 10 : 1;
-        const step = this.state().step() * multiplier;
-        const currentValue = this.state().value();
+        const step = slider().step() * multiplier;
+        const currentValue = slider().value();
         // determine the document direction
-        const isRTL = getComputedStyle(this.elementRef.nativeElement).direction === 'rtl';
+        const isRTL = getComputedStyle(elementRef.nativeElement).direction === 'rtl';
         let newValue;
         switch (event.key) {
             case 'ArrowLeft':
                 newValue = isRTL
-                    ? Math.min(currentValue + step, this.state().max())
-                    : Math.max(currentValue - step, this.state().min());
+                    ? Math.min(currentValue + step, slider().max())
+                    : Math.max(currentValue - step, slider().min());
                 break;
             case 'ArrowDown':
-                newValue = Math.max(currentValue - step, this.state().min());
+                newValue = Math.max(currentValue - step, slider().min());
                 break;
             case 'ArrowRight':
                 newValue = isRTL
-                    ? Math.max(currentValue - step, this.state().min())
-                    : Math.min(currentValue + step, this.state().max());
+                    ? Math.max(currentValue - step, slider().min())
+                    : Math.min(currentValue + step, slider().max());
                 break;
             case 'ArrowUp':
-                newValue = Math.min(currentValue + step, this.state().max());
+                newValue = Math.min(currentValue + step, slider().max());
                 break;
             case 'Home':
-                newValue = isRTL ? this.state().max() : this.state().min();
+                newValue = isRTL ? slider().max() : slider().min();
                 break;
             case 'End':
-                newValue = isRTL ? this.state().min() : this.state().max();
+                newValue = isRTL ? slider().min() : slider().max();
                 break;
             default:
                 return;
         }
-        // if the value is the same, do not emit an event
         if (newValue === currentValue) {
             return;
         }
-        this.state().value.set(newValue);
-        this.state().valueChange.emit(newValue);
+        slider().setValue(newValue);
         event.preventDefault();
+    });
+    function focus() {
+        elementRef.nativeElement.focus({ preventScroll: true });
+    }
+    return {
+        dragging: computed(() => dragging),
+        focus,
+    };
+});
+
+/**
+ * Apply the `ngpSliderThumb` directive to an element that represents the thumb of the slider.
+ */
+class NgpSliderThumb {
+    constructor() {
+        ngpSliderThumb({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderThumb, isStandalone: true, selector: "[ngpSliderThumb]", host: { attributes: { "role": "slider" }, listeners: { "pointerdown": "handlePointerDown($event)", "document:pointerup": "handlePointerUp()", "document:pointermove": "handlePointerMove($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-valuemin": "state().min()", "attr.aria-valuemax": "state().max()", "attr.aria-valuenow": "state().value()", "attr.aria-orientation": "state().orientation()", "tabindex": "state().disabled() ? -1 : 0", "attr.data-orientation": "state().orientation()", "attr.data-disabled": "state().disabled() ? \"\" : null", "style.inset-inline-start.%": "state().orientation() === \"horizontal\" ? state().percentage() : undefined", "style.inset-block-start.%": "state().orientation() === \"vertical\" ? state().percentage() : undefined" } }, exportAs: ["ngpSliderThumb"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderThumb, isStandalone: true, selector: "[ngpSliderThumb]", providers: [provideSliderThumbState()], exportAs: ["ngpSliderThumb"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSliderThumb]',
                     exportAs: 'ngpSliderThumb',
-                    host: {
-                        role: 'slider',
-                        '[attr.aria-valuemin]': 'state().min()',
-                        '[attr.aria-valuemax]': 'state().max()',
-                        '[attr.aria-valuenow]': 'state().value()',
-                        '[attr.aria-orientation]': 'state().orientation()',
-                        '[tabindex]': 'state().disabled() ? -1 : 0',
-                        '[attr.data-orientation]': 'state().orientation()',
-                        '[attr.data-disabled]': 'state().disabled() ? "" : null',
-                        '[style.inset-inline-start.%]': 'state().orientation() === "horizontal" ? state().percentage() : undefined',
-                        '[style.inset-block-start.%]': 'state().orientation() === "vertical" ? state().percentage() : undefined',
-                    },
+                    providers: [provideSliderThumbState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { handlePointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], handlePointerUp: [{
-                type: HostListener,
-                args: ['document:pointerup']
-            }], handlePointerMove: [{
-                type: HostListener,
-                args: ['document:pointermove', ['$event']]
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
+
+const [NgpSliderTrackStateToken, ngpSliderTrack, injectSliderTrackState, provideSliderTrackState,] = createPrimitive('NgpSliderTrack', ({}) => {
+    const element = injectElementRef();
+    const slider = injectSliderState();
+    // Host bindings
+    dataBinding(element, 'data-orientation', () => slider().orientation());
+    dataBinding(element, 'data-disabled', () => slider().disabled());
+    // Register track for thumb measurements
+    slider().setTrack(element);
+    // Listener for pointer interactions to set value
+    listener(element, 'pointerdown', (event) => {
+        if (slider().disabled()) {
+            return;
+        }
+        // prevent text selection
+        event.preventDefault();
+        const rect = element.nativeElement.getBoundingClientRect();
+        const position = slider().orientation() === 'horizontal'
+            ? event.clientX - rect.left
+            : event.clientY - rect.top;
+        const size = slider().orientation() === 'horizontal' ? rect.width : rect.height;
+        const percentage = size === 0 ? 0 : position / size;
+        const value = slider().min() + (slider().max() - slider().min()) * Math.max(0, Math.min(1, percentage));
+        slider().setValue(value);
+    });
+    return {};
+});
 
 /**
  * Apply the `ngpSliderTrack` directive to an element that represents the track of the slider.
  */
 class NgpSliderTrack {
     constructor() {
-        /**
-         * Access the slider state.
-         */
-        this.sliderState = injectSliderState();
-        /**
-         * The element that represents the slider track.
-         */
-        this.element = injectElementRef();
-        this.sliderState().track.set(this);
-    }
-    /**
-     * When the slider track is clicked, update the value.
-     * @param event The click event.
-     */
-    handlePointerDown(event) {
-        if (this.sliderState().disabled()) {
-            return;
-        }
-        // get the position the click occurred within the slider track
-        const position = this.sliderState().orientation() === 'horizontal' ? event.clientX : event.clientY;
-        const rect = this.element.nativeElement.getBoundingClientRect();
-        const percentage = (position - (this.sliderState().orientation() === 'horizontal' ? rect.left : rect.top)) /
-            (this.sliderState().orientation() === 'horizontal' ? rect.width : rect.height);
-        // update the value based on the position
-        this.sliderState().value.set(this.sliderState().min() + (this.sliderState().max() - this.sliderState().min()) * percentage);
-        this.sliderState().valueChange.emit(this.sliderState().value());
+        ngpSliderTrack({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderTrack, isStandalone: true, selector: "[ngpSliderTrack]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "sliderState().orientation()", "attr.data-disabled": "sliderState().disabled() ? \"\" : null" } }, exportAs: ["ngpSliderTrack"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSliderTrack, isStandalone: true, selector: "[ngpSliderTrack]", providers: [provideSliderTrackState()], exportAs: ["ngpSliderTrack"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSliderTrack, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSliderTrack]',
                     exportAs: 'ngpSliderTrack',
-                    host: {
-                        '[attr.data-orientation]': 'sliderState().orientation()',
-                        '[attr.data-disabled]': 'sliderState().disabled() ? "" : null',
-                    },
+                    providers: [provideSliderTrackState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { handlePointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.
@@ -294,24 +322,23 @@ class NgpSlider {
                 alias: 'ngpSliderDisabled',
                 transform: booleanAttribute,
             }]));
-        /**
-         * Access the slider track.
-         * @internal
-         */
-        this.track = signal(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
-        /**
-         * The value as a percentage based on the min and max values.
-         */
-        this.percentage = computed(() => ((this.state.value() - this.state.min()) / (this.state.max() - this.state.min())) * 100, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
         /**
          * The state of the slider. We use this for the slider state rather than relying on the inputs.
          * @internal
          */
-        this.state = sliderState(this);
-        setupFormControl({ id: this.state.id, disabled: this.state.disabled });
+        this.state = ngpSlider({
+            id: this.id,
+            value: this.value,
+            min: this.min,
+            max: this.max,
+            step: this.step,
+            orientation: this.orientation,
+            disabled: this.disabled,
+            onValueChange: value => this.valueChange.emit(value),
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSlider, isStandalone: true, selector: "[ngpSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSliderValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSliderValueChange" }, host: { properties: { "id": "id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideSliderState()], exportAs: ["ngpSlider"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSlider, isStandalone: true, selector: "[ngpSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpSliderValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpSliderValueChange" }, providers: [provideSliderState()], exportAs: ["ngpSlider"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSlider, decorators: [{
             type: Directive,
@@ -319,12 +346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     selector: '[ngpSlider]',
                     exportAs: 'ngpSlider',
                     providers: [provideSliderState()],
-                    host: {
-                        '[id]': 'id()',
-                        '[attr.data-orientation]': 'state.orientation()',
-                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSliderValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderDisabled", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpSliderValueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSliderDisabled", required: false }] }] } });
 
 /**
  * The state token for the Range Slider primitive.
@@ -692,7 +715,7 @@ class NgpRangeSlider {
          * @internal
          */
         this.state = rangeSliderState(this);
-        setupFormControl({ id: this.state.id, disabled: this.state.disabled });
+        ngpFormControl({ id: this.state.id, disabled: this.state.disabled });
     }
     /**
      * Updates the low value, ensuring it doesn't exceed the high value.
@@ -763,5 +786,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderState, provideRangeSliderState, provideSliderState };
+export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
 //# sourceMappingURL=ng-primitives-slider.mjs.map