@radix-ng/primitives 0.50.0 → 0.51.0

package/fesm2022/radix-ng-primitives-slider.mjs

@@ -107,25 +107,27 @@ class RdxSliderImplDirective {
         this.stepKeyDown = output();
     }
     onKeyDown(event) {
-        if (event.key === 'Home') {
-            this.homeKeyDown.emit(event);
+        const keyEvent = event;
+        if (keyEvent.key === 'Home') {
+            this.homeKeyDown.emit(keyEvent);
             // Prevent scrolling to page start
             event.preventDefault();
         }
-        else if (event.key === 'End') {
-            this.endKeyDown.emit(event);
+        else if (keyEvent.key === 'End') {
+            this.endKeyDown.emit(keyEvent);
             // Prevent scrolling to page end
             event.preventDefault();
         }
-        else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {
-            this.stepKeyDown.emit(event);
+        else if (PAGE_KEYS.concat(ARROW_KEYS).includes(keyEvent.key)) {
+            this.stepKeyDown.emit(keyEvent);
             // Prevent scrolling for directional key presses
             event.preventDefault();
         }
     }
     onPointerDown(event) {
+        const pointerEvent = event;
         const target = event.target;
-        target.setPointerCapture(event.pointerId);
+        target.setPointerCapture(pointerEvent.pointerId);
         // Prevent browser focus behaviour because we focus a thumb manually when values change.
         event.preventDefault();
         // Touch devices have a delay before focusing so won't focus if touch immediately moves
@@ -134,26 +136,28 @@ class RdxSliderImplDirective {
             target.focus();
         }
         else {
-            this.slideStart.emit(event);
+            this.slideStart.emit(pointerEvent);
         }
     }
     onPointerMove(event) {
+        const pointerEvent = event;
         const target = event.target;
-        if (target.hasPointerCapture(event.pointerId)) {
-            this.slideMove.emit(event);
+        if (target.hasPointerCapture(pointerEvent.pointerId)) {
+            this.slideMove.emit(pointerEvent);
         }
     }
     onPointerUp(event) {
+        const pointerEvent = event;
         const target = event.target;
-        if (target.hasPointerCapture(event.pointerId)) {
-            target.releasePointerCapture(event.pointerId);
-            this.slideEnd.emit(event);
+        if (target.hasPointerCapture(pointerEvent.pointerId)) {
+            target.releasePointerCapture(pointerEvent.pointerId);
+            this.slideEnd.emit(pointerEvent);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderImplDirective, isStandalone: true, selector: "[rdxSliderImpl]", outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", homeKeyDown: "homeKeyDown", endKeyDown: "endKeyDown", stepKeyDown: "stepKeyDown" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderImplDirective, isStandalone: true, selector: "[rdxSliderImpl]", outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", homeKeyDown: "homeKeyDown", endKeyDown: "endKeyDown", stepKeyDown: "stepKeyDown" }, host: { attributes: { "role": "slider", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderImpl]',
@@ -166,13 +170,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         '(pointerup)': 'onPointerUp($event)'
                     }
                 }]
-        }] });
+        }], propDecorators: { slideStart: [{ type: i0.Output, args: ["slideStart"] }], slideMove: [{ type: i0.Output, args: ["slideMove"] }], slideEnd: [{ type: i0.Output, args: ["slideEnd"] }], homeKeyDown: [{ type: i0.Output, args: ["homeKeyDown"] }], endKeyDown: [{ type: i0.Output, args: ["endKeyDown"] }], stepKeyDown: [{ type: i0.Output, args: ["stepKeyDown"] }] } });
 
 class RdxSliderHorizontalComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
         this.dir = 'ltr';
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.min = 0;
         this.max = 100;
         this.className = '';
@@ -182,8 +186,8 @@ class RdxSliderHorizontalComponent {
         this.stepKeyDown = output();
         this.endKeyDown = output();
         this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
-        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
+        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : /* istanbul ignore next */ []));
+        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
     }
     onSlideStart(event) {
         const value = this.getValueFromPointer(event.clientX);
@@ -215,8 +219,8 @@ class RdxSliderHorizontalComponent {
         this.rect.set(rect);
         return value(pointerPosition - rect.left);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: RdxSliderHorizontalComponent, isStandalone: true, selector: "rdx-slider-horizontal", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: RdxSliderHorizontalComponent, isStandalone: true, selector: "rdx-slider-horizontal", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <span
             #sliderElement
             [class]="className"
@@ -234,7 +238,7 @@ class RdxSliderHorizontalComponent {
         </span>
     `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-horizontal',
@@ -259,13 +263,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }], propDecorators: { dir: [{
                 type: Input
-            }], min: [{
+            }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], min: [{
                 type: Input
             }], max: [{
                 type: Input
             }], className: [{
                 type: Input
-            }] } });
+            }], slideStart: [{ type: i0.Output, args: ["slideStart"] }], slideMove: [{ type: i0.Output, args: ["slideMove"] }], slideEnd: [{ type: i0.Output, args: ["slideEnd"] }], stepKeyDown: [{ type: i0.Output, args: ["stepKeyDown"] }], endKeyDown: [{ type: i0.Output, args: ["endKeyDown"] }], homeKeyDown: [{ type: i0.Output, args: ["homeKeyDown"] }], sliderElement: [{ type: i0.ViewChild, args: ['sliderElement', { isSignal: true }] }] } });
 
 class RdxSliderOrientationContextService {
     constructor() {
@@ -274,7 +278,7 @@ class RdxSliderOrientationContextService {
             endEdge: 'right',
             direction: 1,
             size: 'width'
-        }, ...(ngDevMode ? [{ debugName: "contextSignal" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "contextSignal" }] : /* istanbul ignore next */ []));
     }
     get context() {
         return this.contextSignal();
@@ -285,10 +289,10 @@ class RdxSliderOrientationContextService {
             ...context
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderOrientationContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -296,7 +300,7 @@ class RdxSliderVerticalComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
         this.dir = 'ltr';
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.min = 0;
         this.max = 100;
         this.className = '';
@@ -306,8 +310,8 @@ class RdxSliderVerticalComponent {
         this.stepKeyDown = output();
         this.endKeyDown = output();
         this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
-        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
+        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : /* istanbul ignore next */ []));
+        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
     }
     onSlideStart(event) {
         const value = this.getValueFromPointer(event.clientY);
@@ -339,8 +343,8 @@ class RdxSliderVerticalComponent {
         this.rect.set(rect);
         return value(pointerPosition - rect.top);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: RdxSliderVerticalComponent, isStandalone: true, selector: "rdx-slider-vertical", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: RdxSliderVerticalComponent, isStandalone: true, selector: "rdx-slider-vertical", inputs: { dir: { classPropertyName: "dir", publicName: "dir", isSignal: false, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { slideStart: "slideStart", slideMove: "slideMove", slideEnd: "slideEnd", stepKeyDown: "stepKeyDown", endKeyDown: "endKeyDown", homeKeyDown: "homeKeyDown" }, viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <span
             #sliderElement
             [class]="className"
@@ -358,7 +362,7 @@ class RdxSliderVerticalComponent {
         </span>
     `, isInline: true, dependencies: [{ kind: "directive", type: RdxSliderImplDirective, selector: "[rdxSliderImpl]", outputs: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "stepKeyDown"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-vertical',
@@ -383,13 +387,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }], propDecorators: { dir: [{
                 type: Input
-            }], min: [{
+            }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], min: [{
                 type: Input
             }], max: [{
                 type: Input
             }], className: [{
                 type: Input
-            }] } });
+            }], slideStart: [{ type: i0.Output, args: ["slideStart"] }], slideMove: [{ type: i0.Output, args: ["slideMove"] }], slideEnd: [{ type: i0.Output, args: ["slideEnd"] }], stepKeyDown: [{ type: i0.Output, args: ["stepKeyDown"] }], endKeyDown: [{ type: i0.Output, args: ["endKeyDown"] }], homeKeyDown: [{ type: i0.Output, args: ["homeKeyDown"] }], sliderElement: [{ type: i0.ViewChild, args: ['sliderElement', { isSignal: true }] }] } });
 
 /**
  * @group Components
@@ -404,69 +408,69 @@ class RdxSliderRootComponent {
          * @group Props
          * @defaultValue 0
          */
-        this.min = input(0, ...(ngDevMode ? [{ debugName: "min", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * The maximum value for the range.
          *
          * @group Props
          * @defaultValue 100
          */
-        this.max = input(100, ...(ngDevMode ? [{ debugName: "max", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * The stepping interval.
          *
          * @group Props
          * @defaultValue 1
          */
-        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * The minimum permitted steps between multiple thumbs.
          *
          * @group Props
          * @defaultValue 0
          */
-        this.minStepsBetweenThumbs = input(0, ...(ngDevMode ? [{ debugName: "minStepsBetweenThumbs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.minStepsBetweenThumbs = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenThumbs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
          * The orientation of the slider.
          *
          * @group Props
          * @defaultValue 'horizontal'
          */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * When true, prevents the user from interacting with the slider.
          *
          * @group Props
          * @defaultValue false
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether the slider is visually inverted.
          *
          * @group Props
          * @defaultValue false
          */
-        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.inverted = input(false, { ...(ngDevMode ? { debugName: "inverted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The reading direction of the combobox when applicable.
          *
          * @group Props
          * @defaultValue 'ltr'
          */
-        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
         this.className = '';
         /**
          * Style class of the component.
          *
          * @group Props
          */
-        this.styleClass = input(...(ngDevMode ? [undefined, { debugName: "styleClass" }] : []));
+        this.styleClass = input(...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
         /**
          * The controlled value of the slider.
          *
          * @group Props
          */
-        this.modelValue = model([0], ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
+        this.modelValue = model([0], ...(ngDevMode ? [{ debugName: "modelValue" }] : /* istanbul ignore next */ []));
         /**
          * Event handler called when the slider value changes.
          *
@@ -482,13 +486,13 @@ class RdxSliderRootComponent {
          */
         this.valueCommit = output();
         /** @ignore */
-        this.valueIndexToChange = model(0, ...(ngDevMode ? [{ debugName: "valueIndexToChange" }] : []));
+        this.valueIndexToChange = model(0, ...(ngDevMode ? [{ debugName: "valueIndexToChange" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.valuesBeforeSlideStart = model([], ...(ngDevMode ? [{ debugName: "valuesBeforeSlideStart" }] : []));
+        this.valuesBeforeSlideStart = model([], ...(ngDevMode ? [{ debugName: "valuesBeforeSlideStart" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()), ...(ngDevMode ? [{ debugName: "isSlidingFromLeft" }] : []));
+        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()), ...(ngDevMode ? [{ debugName: "isSlidingFromLeft" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.isSlidingFromBottom = computed(() => !this.inverted(), ...(ngDevMode ? [{ debugName: "isSlidingFromBottom" }] : []));
+        this.isSlidingFromBottom = computed(() => !this.inverted(), ...(ngDevMode ? [{ debugName: "isSlidingFromBottom" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.thumbElements = [];
     }
@@ -560,8 +564,8 @@ class RdxSliderRootComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", valueChange: "valueChange", valueCommit: "valueCommit", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RdxSliderRootComponent, isStandalone: true, selector: "rdx-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "modelValue", isSignal: true, isRequired: false, transformFunction: null }, valueIndexToChange: { classPropertyName: "valueIndexToChange", publicName: "valueIndexToChange", isSignal: true, isRequired: false, transformFunction: null }, valuesBeforeSlideStart: { classPropertyName: "valuesBeforeSlideStart", publicName: "valuesBeforeSlideStart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelValue: "modelValueChange", valueChange: "valueChange", valueCommit: "valueCommit", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
         <ng-template #transclude><ng-content /></ng-template>
 
         @if (orientation() === 'horizontal') {
@@ -607,7 +611,7 @@ class RdxSliderRootComponent {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: RdxSliderHorizontalComponent, selector: "rdx-slider-horizontal", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "component", type: RdxSliderVerticalComponent, selector: "rdx-slider-vertical", inputs: ["dir", "inverted", "min", "max", "className"], outputs: ["slideStart", "slideMove", "slideEnd", "stepKeyDown", "endKeyDown", "homeKeyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider',
@@ -659,32 +663,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }
     `
                 }]
-        }], propDecorators: { className: [{
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], minStepsBetweenThumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenThumbs", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], className: [{
                 type: Input
-            }] } });
+            }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "modelValue", required: false }] }, { type: i0.Output, args: ["modelValueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], valueIndexToChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueIndexToChange", required: false }] }, { type: i0.Output, args: ["valueIndexToChangeChange"] }], valuesBeforeSlideStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuesBeforeSlideStart", required: false }] }, { type: i0.Output, args: ["valuesBeforeSlideStartChange"] }] } });
 
 class RdxSliderRangeComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
         this.percentages = computed(() => this.rootContext
             .modelValue()
-            ?.map((value) => convertValueToPercentage(value, this.rootContext.min(), this.rootContext.max())), ...(ngDevMode ? [{ debugName: "percentages" }] : []));
-        this.offsetStart = computed(() => (this.rootContext.modelValue().length > 1 ? Math.min(...this.percentages()) : 0), ...(ngDevMode ? [{ debugName: "offsetStart" }] : []));
-        this.offsetEnd = computed(() => 100 - Math.max(...this.percentages()), ...(ngDevMode ? [{ debugName: "offsetEnd" }] : []));
+            ?.map((value) => convertValueToPercentage(value, this.rootContext.min(), this.rootContext.max())), ...(ngDevMode ? [{ debugName: "percentages" }] : /* istanbul ignore next */ []));
+        this.offsetStart = computed(() => (this.rootContext.modelValue().length > 1 ? Math.min(...this.percentages()) : 0), ...(ngDevMode ? [{ debugName: "offsetStart" }] : /* istanbul ignore next */ []));
+        this.offsetEnd = computed(() => 100 - Math.max(...this.percentages()), ...(ngDevMode ? [{ debugName: "offsetEnd" }] : /* istanbul ignore next */ []));
         this.rangeStyles = computed(() => {
             const context = this.rootContext.orientationContext.context;
             return {
                 [context.startEdge]: `${this.offsetStart()}%`,
                 [context.endEdge]: `${this.offsetEnd()}%`
             };
-        }, ...(ngDevMode ? [{ debugName: "rangeStyles" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "rangeStyles" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderRangeComponent, isStandalone: true, selector: "rdx-slider-range", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "style": "rangeStyles()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderRangeComponent, isStandalone: true, selector: "rdx-slider-range", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "attr.data-orientation": "rootContext.orientation()", "style": "rangeStyles()" } }, ngImport: i0, template: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-range',
@@ -704,37 +708,37 @@ class RdxSliderThumbImplDirective {
         this.rootContext = inject(RdxSliderRootComponent);
         this.elementRef = inject(ElementRef);
         this.platformId = inject(PLATFORM_ID);
-        this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
+        this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : /* istanbul ignore next */ []));
         this.thumbIndex = computed(() => {
             const thumbElement = this.elementRef.nativeElement;
             const index = this.rootContext.thumbElements.indexOf(thumbElement);
             return index >= 0 ? index : null;
-        }, ...(ngDevMode ? [{ debugName: "thumbIndex" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []));
         this.value = computed(() => {
             const index = this.thumbIndex();
             if (index === null)
                 return undefined;
             return this.rootContext.modelValue()?.[index];
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.percent = computed(() => {
             const val = this.value();
             if (val === undefined)
                 return 0;
             return convertValueToPercentage(val, this.rootContext.min(), this.rootContext.max());
-        }, ...(ngDevMode ? [{ debugName: "percent" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
         this.transform = computed(() => {
             const percent = this.percent();
             const offset = this.thumbInBoundsOffset();
             return `calc(${percent}% + ${offset}px)`;
-        }, ...(ngDevMode ? [{ debugName: "transform" }] : []));
-        this.orientationSize = signal(0, ...(ngDevMode ? [{ debugName: "orientationSize" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+        this.orientationSize = signal(0, ...(ngDevMode ? [{ debugName: "orientationSize" }] : /* istanbul ignore next */ []));
         this.thumbInBoundsOffset = computed(() => {
             const context = this.rootContext.orientationContext.context;
             const size = this.orientationSize();
             const percent = this.percent();
             const direction = context.direction;
             return size ? getThumbInBoundsOffset(size, percent, direction) : 0;
-        }, ...(ngDevMode ? [{ debugName: "thumbInBoundsOffset" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "thumbInBoundsOffset" }] : /* istanbul ignore next */ []));
         this.combinedStyles = computed(() => {
             const context = this.rootContext.orientationContext.context;
             const startEdge = context.startEdge;
@@ -746,7 +750,7 @@ class RdxSliderThumbImplDirective {
                 display: (this.isMounted() && this.value()) === false ? 'none' : undefined,
                 [startEdge]: `calc(${percent}% + ${offset}px)`
             };
-        }, ...(ngDevMode ? [{ debugName: "combinedStyles" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "combinedStyles" }] : /* istanbul ignore next */ []));
     }
     onFocus() {
         if (this.thumbIndex() !== null) {
@@ -777,10 +781,10 @@ class RdxSliderThumbImplDirective {
         }
         this.isMounted.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderThumbImplDirective, isStandalone: true, selector: "[rdxSliderThumbImpl]", host: { attributes: { "role": "slider" }, listeners: { "focus": "onFocus()" }, properties: { "tabindex": "rootContext.disabled() ? undefined : 0", "attr.aria-valuenow": "rootContext.modelValue()", "attr.aria-valuemin": "rootContext.min()", "attr.aria-valuemax": "rootContext.max()", "attr.aria-orientation": "rootContext.orientation()", "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "style": "combinedStyles()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderThumbImplDirective, isStandalone: true, selector: "[rdxSliderThumbImpl]", host: { attributes: { "role": "slider" }, listeners: { "focus": "onFocus()" }, properties: { "tabindex": "rootContext.disabled() ? undefined : 0", "attr.aria-valuenow": "rootContext.modelValue()", "attr.aria-valuemin": "rootContext.min()", "attr.aria-valuemax": "rootContext.max()", "attr.aria-orientation": "rootContext.orientation()", "attr.data-orientation": "rootContext.orientation()", "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined", "style": "combinedStyles()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderThumbImpl]',
@@ -800,12 +804,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class RdxSliderThumbComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-thumb',
@@ -820,12 +824,12 @@ class RdxSliderTrackComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxSliderTrackComponent, isStandalone: true, selector: "rdx-slider-track", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? '' : undefined", "attr.data-orientation": "rootContext.orientation()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RdxSliderTrackComponent, isStandalone: true, selector: "rdx-slider-track", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? '' : undefined", "attr.data-orientation": "rootContext.orientation()" } }, ngImport: i0, template: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-track',
@@ -841,11 +845,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 const _imports = [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent];
 class RdxSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent], exports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent], exports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],