ng-primitives 0.89.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: "19.2.11", ngImport: i0, type: NgpSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", 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.ɵ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]", providers: [provideSliderRangeState()], exportAs: ["ngpSliderRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSliderRange, decorators: [{
+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 });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", 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 }); }
+    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]", providers: [provideSliderThumbState()], exportAs: ["ngpSliderThumb"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSliderThumb, decorators: [{
+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);
+        ngpSliderTrack({});
     }
-    /**
-     * 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());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", 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.ɵ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]", providers: [provideSliderTrackState()], exportAs: ["ngpSliderTrack"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSliderTrack, decorators: [{
+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.
@@ -241,14 +269,15 @@ class NgpSlider {
         /**
          * The id of the slider. If not provided, a unique id will be generated.
          */
-        this.id = input(uniqueId('ngp-slider'));
+        this.id = input(uniqueId('ngp-slider'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * The value of the slider.
          */
-        this.value = input(0, {
-            alias: 'ngpSliderValue',
-            transform: numberAttribute,
-        });
+        this.value = input(0, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpSliderValue',
+                transform: numberAttribute }] : [{
+                alias: 'ngpSliderValue',
+                transform: numberAttribute,
+            }]));
         /**
          * Emits when the value changes.
          */
@@ -258,68 +287,67 @@ class NgpSlider {
         /**
          * The minimum value of the slider.
          */
-        this.min = input(0, {
-            alias: 'ngpSliderMin',
-            transform: numberAttribute,
-        });
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min", alias: 'ngpSliderMin',
+                transform: numberAttribute }] : [{
+                alias: 'ngpSliderMin',
+                transform: numberAttribute,
+            }]));
         /**
          * The maximum value of the slider.
          */
-        this.max = input(100, {
-            alias: 'ngpSliderMax',
-            transform: numberAttribute,
-        });
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max", alias: 'ngpSliderMax',
+                transform: numberAttribute }] : [{
+                alias: 'ngpSliderMax',
+                transform: numberAttribute,
+            }]));
         /**
          * The step value of the slider.
          */
-        this.step = input(1, {
-            alias: 'ngpSliderStep',
-            transform: numberAttribute,
-        });
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", alias: 'ngpSliderStep',
+                transform: numberAttribute }] : [{
+                alias: 'ngpSliderStep',
+                transform: numberAttribute,
+            }]));
         /**
          * The orientation of the slider.
          */
-        this.orientation = input('horizontal', {
-            alias: 'ngpSliderOrientation',
-        });
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpSliderOrientation' }] : [{
+                alias: 'ngpSliderOrientation',
+            }]));
         /**
          * The disabled state of the slider.
          */
-        this.disabled = input(false, {
-            alias: 'ngpSliderDisabled',
-            transform: booleanAttribute,
-        });
-        /**
-         * Access the slider track.
-         * @internal
-         */
-        this.track = signal(undefined);
-        /**
-         * 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);
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpSliderDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpSliderDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * 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: "19.2.11", ngImport: i0, type: NgpSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", 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.ɵ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" }, providers: [provideSliderState()], exportAs: ["ngpSlider"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSlider, decorators: [{
             type: Directive,
             args: [{
                     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 }] }] } });
 
 /**
  * The state token for the Range Slider primitive.
@@ -348,10 +376,10 @@ class NgpRangeSliderRange {
          */
         this.rangeSliderState = injectRangeSliderState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpRangeSliderRange, isStandalone: true, selector: "[ngpRangeSliderRange]", host: { properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null", "style.width.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().rangePercentage() : undefined", "style.height.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().rangePercentage() : undefined", "style.inset-inline-start.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().lowPercentage() : undefined", "style.inset-block-start.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().lowPercentage() : undefined" } }, exportAs: ["ngpRangeSliderRange"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderRange, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderRange, isStandalone: true, selector: "[ngpRangeSliderRange]", host: { properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null", "style.width.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().rangePercentage() : undefined", "style.height.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().rangePercentage() : undefined", "style.inset-inline-start.%": "rangeSliderState().orientation() === \"horizontal\" ? rangeSliderState().lowPercentage() : undefined", "style.inset-block-start.%": "rangeSliderState().orientation() === \"vertical\" ? rangeSliderState().lowPercentage() : undefined" } }, exportAs: ["ngpRangeSliderRange"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderRange, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderRange]',
@@ -384,7 +412,7 @@ class NgpRangeSliderThumb {
         /**
          * Determines which value this thumb controls ('low' or 'high').
          */
-        this.thumb = computed(() => this.state().thumbs().indexOf(this) === 0 ? 'low' : 'high');
+        this.thumb = computed(() => this.state().thumbs().indexOf(this) === 0 ? 'low' : 'high', ...(ngDevMode ? [{ debugName: "thumb" }] : []));
         /**
          * Store the dragging state.
          */
@@ -392,11 +420,11 @@ class NgpRangeSliderThumb {
         /**
          * Get the current value for this thumb.
          */
-        this.value = computed(() => this.thumb() === 'low' ? this.state().low() : this.state().high());
+        this.value = computed(() => this.thumb() === 'low' ? this.state().low() : this.state().high(), ...(ngDevMode ? [{ debugName: "value" }] : []));
         /**
          * Get the current percentage for this thumb.
          */
-        this.percentage = computed(() => this.thumb() === 'low' ? this.state().lowPercentage() : this.state().highPercentage());
+        this.percentage = computed(() => this.thumb() === 'low' ? this.state().lowPercentage() : this.state().highPercentage(), ...(ngDevMode ? [{ debugName: "percentage" }] : []));
         ngpInteractions({
             hover: true,
             focusVisible: true,
@@ -488,10 +516,10 @@ class NgpRangeSliderThumb {
         }
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpRangeSliderThumb, isStandalone: true, selector: "[ngpRangeSliderThumb]", 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": "value()", "attr.aria-orientation": "state().orientation()", "tabindex": "state().disabled() ? -1 : 0", "attr.data-orientation": "state().orientation()", "attr.data-disabled": "state().disabled() ? \"\" : null", "attr.data-thumb": "thumb()", "style.inset-inline-start.%": "state().orientation() === \"horizontal\" ? percentage() : undefined", "style.inset-block-start.%": "state().orientation() === \"vertical\" ? percentage() : undefined" } }, exportAs: ["ngpRangeSliderThumb"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderThumb, isStandalone: true, selector: "[ngpRangeSliderThumb]", 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": "value()", "attr.aria-orientation": "state().orientation()", "tabindex": "state().disabled() ? -1 : 0", "attr.data-orientation": "state().orientation()", "attr.data-disabled": "state().disabled() ? \"\" : null", "attr.data-thumb": "thumb()", "style.inset-inline-start.%": "state().orientation() === \"horizontal\" ? percentage() : undefined", "style.inset-block-start.%": "state().orientation() === \"vertical\" ? percentage() : undefined" } }, exportAs: ["ngpRangeSliderThumb"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderThumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderThumb]',
@@ -564,10 +592,10 @@ class NgpRangeSliderTrack {
             this.rangeSliderState().setHighValue(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpRangeSliderTrack, isStandalone: true, selector: "[ngpRangeSliderTrack]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null" } }, exportAs: ["ngpRangeSliderTrack"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpRangeSliderTrack, isStandalone: true, selector: "[ngpRangeSliderTrack]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "rangeSliderState().orientation()", "attr.data-disabled": "rangeSliderState().disabled() ? \"\" : null" } }, exportAs: ["ngpRangeSliderTrack"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSliderTrack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSliderTrack, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSliderTrack]',
@@ -590,14 +618,15 @@ class NgpRangeSlider {
         /**
          * The id of the range slider. If not provided, a unique id will be generated.
          */
-        this.id = input(uniqueId('ngp-range-slider'));
+        this.id = input(uniqueId('ngp-range-slider'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * The low value of the range slider.
          */
-        this.low = input(0, {
-            alias: 'ngpRangeSliderLow',
-            transform: numberAttribute,
-        });
+        this.low = input(0, ...(ngDevMode ? [{ debugName: "low", alias: 'ngpRangeSliderLow',
+                transform: numberAttribute }] : [{
+                alias: 'ngpRangeSliderLow',
+                transform: numberAttribute,
+            }]));
         /**
          * Emits when the low value changes.
          */
@@ -607,10 +636,11 @@ class NgpRangeSlider {
         /**
          * The high value of the range slider.
          */
-        this.high = input(100, {
-            alias: 'ngpRangeSliderHigh',
-            transform: numberAttribute,
-        });
+        this.high = input(100, ...(ngDevMode ? [{ debugName: "high", alias: 'ngpRangeSliderHigh',
+                transform: numberAttribute }] : [{
+                alias: 'ngpRangeSliderHigh',
+                transform: numberAttribute,
+            }]));
         /**
          * Emits when the high value changes.
          */
@@ -620,68 +650,72 @@ class NgpRangeSlider {
         /**
          * The minimum value of the range slider.
          */
-        this.min = input(0, {
-            alias: 'ngpRangeSliderMin',
-            transform: numberAttribute,
-        });
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min", alias: 'ngpRangeSliderMin',
+                transform: numberAttribute }] : [{
+                alias: 'ngpRangeSliderMin',
+                transform: numberAttribute,
+            }]));
         /**
          * The maximum value of the range slider.
          */
-        this.max = input(100, {
-            alias: 'ngpRangeSliderMax',
-            transform: numberAttribute,
-        });
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max", alias: 'ngpRangeSliderMax',
+                transform: numberAttribute }] : [{
+                alias: 'ngpRangeSliderMax',
+                transform: numberAttribute,
+            }]));
         /**
          * The step value of the range slider.
          */
-        this.step = input(1, {
-            alias: 'ngpRangeSliderStep',
-            transform: numberAttribute,
-        });
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", alias: 'ngpRangeSliderStep',
+                transform: numberAttribute }] : [{
+                alias: 'ngpRangeSliderStep',
+                transform: numberAttribute,
+            }]));
         /**
          * The orientation of the range slider.
          */
-        this.orientation = input('horizontal', {
-            alias: 'ngpRangeSliderOrientation',
-        });
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpRangeSliderOrientation' }] : [{
+                alias: 'ngpRangeSliderOrientation',
+            }]));
         /**
          * The disabled state of the range slider.
          */
-        this.disabled = input(false, {
-            alias: 'ngpRangeSliderDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpRangeSliderDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpRangeSliderDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * Access the slider track.
          * @internal
          */
-        this.track = signal(undefined);
+        this.track = signal(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
         /**
          * The thumbs of the range slider.
          * @internal
          */
-        this.thumbs = signal([]);
+        this.thumbs = signal([], ...(ngDevMode ? [{ debugName: "thumbs" }] : []));
         /**
          * The low value as a percentage based on the min and max values.
          * @internal
          */
-        this.lowPercentage = computed(() => ((this.state.low() - this.state.min()) / (this.state.max() - this.state.min())) * 100);
+        this.lowPercentage = computed(() => ((this.state.low() - this.state.min()) / (this.state.max() - this.state.min())) * 100, ...(ngDevMode ? [{ debugName: "lowPercentage" }] : []));
         /**
          * The high value as a percentage based on the min and max values.
          * @internal
          */
-        this.highPercentage = computed(() => ((this.state.high() - this.state.min()) / (this.state.max() - this.state.min())) * 100);
+        this.highPercentage = computed(() => ((this.state.high() - this.state.min()) / (this.state.max() - this.state.min())) * 100, ...(ngDevMode ? [{ debugName: "highPercentage" }] : []));
         /**
          * The range between low and high values as a percentage.
          * @internal
          */
-        this.rangePercentage = computed(() => this.highPercentage() - this.lowPercentage());
+        this.rangePercentage = computed(() => this.highPercentage() - this.lowPercentage(), ...(ngDevMode ? [{ debugName: "rangePercentage" }] : []));
         /**
          * The state of the range slider. We use this for the range slider state rather than relying on the inputs.
          * @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.
@@ -732,10 +766,10 @@ class NgpRangeSlider {
     removeThumb(thumb) {
         this.thumbs.update(thumbs => thumbs.filter(t => t !== thumb));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpRangeSlider, isStandalone: true, selector: "[ngpRangeSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "ngpRangeSliderLow", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "ngpRangeSliderHigh", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpRangeSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpRangeSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpRangeSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpRangeSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRangeSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lowChange: "ngpRangeSliderLowChange", highChange: "ngpRangeSliderHighChange" }, host: { properties: { "id": "id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideRangeSliderState()], exportAs: ["ngpRangeSlider"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRangeSlider, isStandalone: true, selector: "[ngpRangeSlider]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "ngpRangeSliderLow", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "ngpRangeSliderHigh", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpRangeSliderMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpRangeSliderMax", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "ngpRangeSliderStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpRangeSliderOrientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRangeSliderDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lowChange: "ngpRangeSliderLowChange", highChange: "ngpRangeSliderHighChange" }, host: { properties: { "id": "id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideRangeSliderState()], exportAs: ["ngpRangeSlider"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpRangeSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRangeSlider, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRangeSlider]',
@@ -746,11 +780,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-orientation]': 'state.orientation()',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], low: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderLow", required: false }] }], lowChange: [{ type: i0.Output, args: ["ngpRangeSliderLowChange"] }], high: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderHigh", required: false }] }], highChange: [{ type: i0.Output, args: ["ngpRangeSliderHighChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMin", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderMax", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderOrientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRangeSliderDisabled", required: false }] }] } });
 
 /**
  * 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