ng-primitives 0.88.0 → 0.90.0

package/fesm2022/ng-primitives-slider.mjs

@@ -33,10 +33,10 @@ class NgpSliderRange {
          */
         this.sliderState = injectSliderState();
     }
-    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]", 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 }); }
 }
-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]',
@@ -148,10 +148,10 @@ class NgpSliderThumb {
         this.state().valueChange.emit(newValue);
         event.preventDefault();
     }
-    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 }); }
+    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 }); }
 }
-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]',
@@ -215,10 +215,10 @@ class NgpSliderTrack {
         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]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "attr.data-orientation": "sliderState().orientation()", "attr.data-disabled": "sliderState().disabled() ? \"\" : null" } }, 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]',
@@ -241,14 +241,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,46 +259,50 @@ 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,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpSliderDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpSliderDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * Access the slider track.
          * @internal
          */
-        this.track = signal(undefined);
+        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);
+        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
@@ -305,10 +310,10 @@ class NgpSlider {
         this.state = sliderState(this);
         setupFormControl({ id: this.state.id, disabled: this.state.disabled });
     }
-    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" }, host: { properties: { "id": "id()", "attr.data-orientation": "state.orientation()" } }, 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]',
@@ -319,7 +324,7 @@ 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 }] }], 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 +353,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 +389,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 +397,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 +493,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 +569,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 +595,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 +613,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,62 +627,66 @@ 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
@@ -732,10 +743,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,7 +757,7 @@ 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.