@radix-ng/primitives 0.42.0 → 0.44.0

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, output, Directive, input, booleanAttribute, viewChild, signal, Input, Component, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } from '@angular/core';
-import { NgIf, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 
 // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
 function linearScale(input, output) {
@@ -150,10 +150,10 @@ class RdxSliderImplDirective {
             this.slideEnd.emit(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderImpl]',
@@ -172,7 +172,7 @@ class RdxSliderHorizontalComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
         this.dir = 'ltr';
-        this.inverted = input(false, { transform: booleanAttribute });
+        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.min = 0;
         this.max = 100;
         this.className = '';
@@ -182,8 +182,8 @@ class RdxSliderHorizontalComponent {
         this.stepKeyDown = output();
         this.endKeyDown = output();
         this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement');
-        this.rect = signal(undefined);
+        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
+        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
     }
     onSlideStart(event) {
         const value = this.getValueFromPointer(event.clientX);
@@ -215,8 +215,8 @@ class RdxSliderHorizontalComponent {
         this.rect.set(rect);
         return value(pointerPosition - rect.left);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.4", 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: "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: `
         <span
             #sliderElement
             [class]="className"
@@ -234,7 +234,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: "19.2.4", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-horizontal',
@@ -274,7 +274,7 @@ class RdxSliderOrientationContextService {
             endEdge: 'right',
             direction: 1,
             size: 'width'
-        });
+        }, ...(ngDevMode ? [{ debugName: "contextSignal" }] : []));
     }
     get context() {
         return this.contextSignal();
@@ -285,10 +285,10 @@ class RdxSliderOrientationContextService {
             ...context
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderOrientationContextService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -296,7 +296,7 @@ class RdxSliderVerticalComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
         this.dir = 'ltr';
-        this.inverted = input(false, { transform: booleanAttribute });
+        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.min = 0;
         this.max = 100;
         this.className = '';
@@ -306,8 +306,8 @@ class RdxSliderVerticalComponent {
         this.stepKeyDown = output();
         this.endKeyDown = output();
         this.homeKeyDown = output();
-        this.sliderElement = viewChild('sliderElement');
-        this.rect = signal(undefined);
+        this.sliderElement = viewChild('sliderElement', ...(ngDevMode ? [{ debugName: "sliderElement" }] : []));
+        this.rect = signal(undefined, ...(ngDevMode ? [{ debugName: "rect" }] : []));
     }
     onSlideStart(event) {
         const value = this.getValueFromPointer(event.clientY);
@@ -339,8 +339,8 @@ class RdxSliderVerticalComponent {
         this.rect.set(rect);
         return value(pointerPosition - rect.top);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.4", 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: "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: `
         <span
             #sliderElement
             [class]="className"
@@ -358,7 +358,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: "19.2.4", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-vertical',
@@ -404,69 +404,69 @@ class RdxSliderRootComponent {
          * @group Props
          * @defaultValue 0
          */
-        this.min = input(0, { transform: numberAttribute });
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /**
          * The maximum value for the range.
          *
          * @group Props
          * @defaultValue 100
          */
-        this.max = input(100, { transform: numberAttribute });
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /**
          * The stepping interval.
          *
          * @group Props
          * @defaultValue 1
          */
-        this.step = input(1, { transform: numberAttribute });
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /**
          * The minimum permitted steps between multiple thumbs.
          *
          * @group Props
          * @defaultValue 0
          */
-        this.minStepsBetweenThumbs = input(0, { transform: numberAttribute });
+        this.minStepsBetweenThumbs = input(0, ...(ngDevMode ? [{ debugName: "minStepsBetweenThumbs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /**
          * The orientation of the slider.
          *
          * @group Props
          * @defaultValue 'horizontal'
          */
-        this.orientation = input('horizontal');
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
         /**
          * When true, prevents the user from interacting with the slider.
          *
          * @group Props
          * @defaultValue false
          */
-        this.disabled = input(false, { transform: booleanAttribute });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Whether the slider is visually inverted.
          *
          * @group Props
          * @defaultValue false
          */
-        this.inverted = input(false, { transform: booleanAttribute });
+        this.inverted = input(false, ...(ngDevMode ? [{ debugName: "inverted", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * The reading direction of the combobox when applicable.
          *
          * @group Props
          * @defaultValue 'ltr'
          */
-        this.dir = input('ltr');
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
         this.className = '';
         /**
          * Style class of the component.
          *
          * @group Props
          */
-        this.styleClass = input();
+        this.styleClass = input(...(ngDevMode ? [undefined, { debugName: "styleClass" }] : []));
         /**
          * The controlled value of the slider.
          *
          * @group Props
          */
-        this.modelValue = model([0]);
+        this.modelValue = model([0], ...(ngDevMode ? [{ debugName: "modelValue" }] : []));
         /**
          * Event handler called when the slider value changes.
          *
@@ -482,13 +482,13 @@ class RdxSliderRootComponent {
          */
         this.valueCommit = output();
         /** @ignore */
-        this.valueIndexToChange = model(0);
+        this.valueIndexToChange = model(0, ...(ngDevMode ? [{ debugName: "valueIndexToChange" }] : []));
         /** @ignore */
-        this.valuesBeforeSlideStart = model([]);
+        this.valuesBeforeSlideStart = model([], ...(ngDevMode ? [{ debugName: "valuesBeforeSlideStart" }] : []));
         /** @ignore */
-        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()));
+        this.isSlidingFromLeft = computed(() => (this.dir() === 'ltr' && !this.inverted()) || (this.dir() !== 'ltr' && this.inverted()), ...(ngDevMode ? [{ debugName: "isSlidingFromLeft" }] : []));
         /** @ignore */
-        this.isSlidingFromBottom = computed(() => !this.inverted());
+        this.isSlidingFromBottom = computed(() => !this.inverted(), ...(ngDevMode ? [{ debugName: "isSlidingFromBottom" }] : []));
         /** @ignore */
         this.thumbElements = [];
     }
@@ -560,11 +560,11 @@ class RdxSliderRootComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", 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: "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: `
         <ng-template #transclude><ng-content /></ng-template>
 
-        <ng-container *ngIf="orientation() === 'horizontal'">
+        @if (orientation() === 'horizontal') {
             <rdx-slider-horizontal
                 [className]="styleClass() || className"
                 [min]="min()"
@@ -583,9 +583,9 @@ class RdxSliderRootComponent {
             >
                 <ng-container *ngTemplateOutlet="transclude" />
             </rdx-slider-horizontal>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="orientation() === 'vertical'">
+        @if (orientation() === 'vertical') {
             <rdx-slider-vertical
                 [className]="styleClass() || className"
                 [min]="min()"
@@ -604,19 +604,19 @@ class RdxSliderRootComponent {
             >
                 <ng-container *ngTemplateOutlet="transclude" />
             </rdx-slider-vertical>
-        </ng-container>
-    `, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        }
+    `, 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: "19.2.4", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider',
-                    imports: [RdxSliderHorizontalComponent, RdxSliderVerticalComponent, NgIf, NgTemplateOutlet],
+                    imports: [RdxSliderHorizontalComponent, RdxSliderVerticalComponent, NgTemplateOutlet],
                     providers: [RdxSliderOrientationContextService],
                     template: `
         <ng-template #transclude><ng-content /></ng-template>
 
-        <ng-container *ngIf="orientation() === 'horizontal'">
+        @if (orientation() === 'horizontal') {
             <rdx-slider-horizontal
                 [className]="styleClass() || className"
                 [min]="min()"
@@ -635,9 +635,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             >
                 <ng-container *ngTemplateOutlet="transclude" />
             </rdx-slider-horizontal>
-        </ng-container>
+        }
 
-        <ng-container *ngIf="orientation() === 'vertical'">
+        @if (orientation() === 'vertical') {
             <rdx-slider-vertical
                 [className]="styleClass() || className"
                 [min]="min()"
@@ -656,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
             >
                 <ng-container *ngTemplateOutlet="transclude" />
             </rdx-slider-vertical>
-        </ng-container>
+        }
     `
                 }]
         }], propDecorators: { className: [{
@@ -668,23 +668,23 @@ class RdxSliderRangeComponent {
         this.rootContext = inject(RdxSliderRootComponent);
         this.percentages = computed(() => this.rootContext
             .modelValue()
-            ?.map((value) => convertValueToPercentage(value, this.rootContext.min(), this.rootContext.max())));
-        this.offsetStart = computed(() => (this.rootContext.modelValue().length > 1 ? Math.min(...this.percentages()) : 0));
-        this.offsetEnd = computed(() => 100 - Math.max(...this.percentages()));
+            ?.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" }] : []));
         this.rangeStyles = computed(() => {
             const context = this.rootContext.orientationContext.context;
             return {
                 [context.startEdge]: `${this.offsetStart()}%`,
                 [context.endEdge]: `${this.offsetEnd()}%`
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "rangeStyles" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "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: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-range',
@@ -704,37 +704,37 @@ class RdxSliderThumbImplDirective {
         this.rootContext = inject(RdxSliderRootComponent);
         this.elementRef = inject(ElementRef);
         this.platformId = inject(PLATFORM_ID);
-        this.isMounted = signal(false);
+        this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
         this.thumbIndex = computed(() => {
             const thumbElement = this.elementRef.nativeElement;
             const index = this.rootContext.thumbElements.indexOf(thumbElement);
             return index >= 0 ? index : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "thumbIndex" }] : []));
         this.value = computed(() => {
             const index = this.thumbIndex();
             if (index === null)
                 return undefined;
             return this.rootContext.modelValue()?.[index];
-        });
+        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
         this.percent = computed(() => {
             const val = this.value();
             if (val === undefined)
                 return 0;
             return convertValueToPercentage(val, this.rootContext.min(), this.rootContext.max());
-        });
+        }, ...(ngDevMode ? [{ debugName: "percent" }] : []));
         this.transform = computed(() => {
             const percent = this.percent();
             const offset = this.thumbInBoundsOffset();
             return `calc(${percent}% + ${offset}px)`;
-        });
-        this.orientationSize = signal(0);
+        }, ...(ngDevMode ? [{ debugName: "transform" }] : []));
+        this.orientationSize = signal(0, ...(ngDevMode ? [{ debugName: "orientationSize" }] : []));
         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" }] : []));
         this.combinedStyles = computed(() => {
             const context = this.rootContext.orientationContext.context;
             const startEdge = context.startEdge;
@@ -746,7 +746,7 @@ class RdxSliderThumbImplDirective {
                 display: (this.isMounted() && this.value()) === false ? 'none' : undefined,
                 [startEdge]: `calc(${percent}% + ${offset}px)`
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "combinedStyles" }] : []));
     }
     onFocus() {
         if (this.thumbIndex() !== null) {
@@ -777,10 +777,10 @@ class RdxSliderThumbImplDirective {
         }
         this.isMounted.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderThumbImpl]',
@@ -800,12 +800,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
         }] });
 
 class RdxSliderThumbComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
+    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: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-thumb',
@@ -820,12 +820,12 @@ class RdxSliderTrackComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", 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: "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: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-track',
@@ -841,11 +841,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 
 const _imports = [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent];
 class RdxSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderModule, imports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent], exports: [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],