@radix-ng/primitives 0.28.0 → 0.30.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Directive, Output, input, booleanAttribute, viewChild, signal, Component, Input, Injectable, numberAttribute, model, computed, ElementRef, PLATFORM_ID, NgModule } 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';
 
 // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
@@ -99,12 +99,12 @@ function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFI
 class RdxSliderImplDirective {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.homeKeyDown = output();
+        this.endKeyDown = output();
+        this.stepKeyDown = output();
     }
     onKeyDown(event) {
         if (event.key === 'Home') {
@@ -150,14 +150,13 @@ class RdxSliderImplDirective {
             this.slideEnd.emit(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderImpl]',
-                    standalone: true,
                     host: {
                         role: 'slider',
                         tabindex: '0',
@@ -167,19 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         '(pointerup)': 'onPointerUp($event)'
                     }
                 }]
-        }], propDecorators: { slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }] } });
+        }] });
 
 class RdxSliderHorizontalComponent {
     constructor() {
@@ -189,12 +176,12 @@ class RdxSliderHorizontalComponent {
         this.min = 0;
         this.max = 100;
         this.className = '';
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.stepKeyDown = output();
+        this.endKeyDown = output();
+        this.homeKeyDown = output();
         this.sliderElement = viewChild('sliderElement');
         this.rect = signal(undefined);
     }
@@ -228,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.0.5", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.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: `
         <span
             #sliderElement
             [class]="className"
@@ -247,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.0.5", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-horizontal',
@@ -278,18 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], className: [{
                 type: Input
-            }], slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
             }] } });
 
 class RdxSliderOrientationContextService {
@@ -310,10 +285,10 @@ class RdxSliderOrientationContextService {
             ...context
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderOrientationContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderOrientationContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderOrientationContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderOrientationContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -325,12 +300,12 @@ class RdxSliderVerticalComponent {
         this.min = 0;
         this.max = 100;
         this.className = '';
-        this.slideStart = new EventEmitter();
-        this.slideMove = new EventEmitter();
-        this.slideEnd = new EventEmitter();
-        this.stepKeyDown = new EventEmitter();
-        this.endKeyDown = new EventEmitter();
-        this.homeKeyDown = new EventEmitter();
+        this.slideStart = output();
+        this.slideMove = output();
+        this.slideEnd = output();
+        this.stepKeyDown = output();
+        this.endKeyDown = output();
+        this.homeKeyDown = output();
         this.sliderElement = viewChild('sliderElement');
         this.rect = signal(undefined);
     }
@@ -364,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.0.5", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.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: `
         <span
             #sliderElement
             [class]="className"
@@ -383,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.0.5", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-vertical',
@@ -414,36 +389,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: Input
             }], className: [{
                 type: Input
-            }], slideStart: [{
-                type: Output
-            }], slideMove: [{
-                type: Output
-            }], slideEnd: [{
-                type: Output
-            }], stepKeyDown: [{
-                type: Output
-            }], endKeyDown: [{
-                type: Output
-            }], homeKeyDown: [{
-                type: Output
             }] } });
 
+/**
+ * @group Components
+ */
 class RdxSliderRootComponent {
     constructor() {
         /** @ignore */
         this.orientationContext = inject(RdxSliderOrientationContextService);
+        /**
+         * The minimum value for the range.
+         *
+         * @group Props
+         * @defaultValue 0
+         */
         this.min = input(0, { transform: numberAttribute });
+        /**
+         * The maximum value for the range.
+         *
+         * @group Props
+         * @defaultValue 100
+         */
         this.max = input(100, { transform: numberAttribute });
+        /**
+         * The stepping interval.
+         *
+         * @group Props
+         * @defaultValue 1
+         */
         this.step = input(1, { transform: numberAttribute });
+        /**
+         * The minimum permitted steps between multiple thumbs.
+         *
+         * @group Props
+         * @defaultValue 0
+         */
         this.minStepsBetweenThumbs = input(0, { transform: numberAttribute });
+        /**
+         * The orientation of the slider.
+         *
+         * @group Props
+         * @defaultValue 'horizontal'
+         */
         this.orientation = input('horizontal');
+        /**
+         * When true, prevents the user from interacting with the slider.
+         *
+         * @group Props
+         * @defaultValue false
+         */
         this.disabled = input(false, { transform: booleanAttribute });
+        /**
+         * Whether the slider is visually inverted.
+         *
+         * @group Props
+         * @defaultValue false
+         */
         this.inverted = input(false, { transform: booleanAttribute });
+        /**
+         * The reading direction of the combobox when applicable.
+         *
+         * @group Props
+         * @defaultValue 'ltr'
+         */
         this.dir = input('ltr');
         this.className = '';
-        this.valueChange = new EventEmitter();
-        this.valueCommit = new EventEmitter();
+        /**
+         * Style class of the component.
+         *
+         * @group Props
+         */
+        this.styleClass = input();
+        /**
+         * The controlled value of the slider.
+         *
+         * @group Props
+         */
         this.modelValue = model([0]);
+        /**
+         * Event handler called when the slider value changes.
+         *
+         * @group Emits
+         */
+        this.valueChange = output();
+        /**
+         * Event handler called when the value changes at the end of an interaction.
+         *
+         * Useful when you only need to capture a final value e.g. to update a backend service.
+         *
+         * @group Emits
+         */
+        this.valueCommit = output();
         /** @ignore */
         this.valueIndexToChange = model(0);
         /** @ignore */
@@ -523,13 +560,13 @@ class RdxSliderRootComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", 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 }, 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: { valueChange: "valueChange", valueCommit: "valueCommit", modelValue: "modelValueChange", valueIndexToChange: "valueIndexToChangeChange", valuesBeforeSlideStart: "valuesBeforeSlideStartChange" }, providers: [RdxSliderOrientationContextService], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.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: `
         <ng-template #transclude><ng-content /></ng-template>
 
         <ng-container *ngIf="orientation() === 'horizontal'">
             <rdx-slider-horizontal
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -550,7 +587,7 @@ class RdxSliderRootComponent {
 
         <ng-container *ngIf="orientation() === 'vertical'">
             <rdx-slider-vertical
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -570,7 +607,7 @@ class RdxSliderRootComponent {
         </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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderRootComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider',
@@ -581,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
         <ng-container *ngIf="orientation() === 'horizontal'">
             <rdx-slider-horizontal
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -602,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
         <ng-container *ngIf="orientation() === 'vertical'">
             <rdx-slider-vertical
-                [className]="className"
+                [className]="styleClass() || className"
                 [min]="min()"
                 [max]="max()"
                 [dir]="dir()"
@@ -624,10 +661,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }], propDecorators: { className: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], valueCommit: [{
-                type: Output
             }] } });
 
 class RdxSliderRangeComponent {
@@ -646,16 +679,15 @@ class RdxSliderRangeComponent {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.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: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderRangeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-range',
-                    standalone: true,
                     host: {
                         '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined',
                         '[attr.data-orientation]': 'rootContext.orientation()',
@@ -745,14 +777,13 @@ class RdxSliderThumbImplDirective {
         }
         this.isMounted.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderThumbImplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderThumbImplDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxSliderThumbImpl]',
-                    standalone: true,
                     host: {
                         role: 'slider',
                         '[tabindex]': 'rootContext.disabled() ? undefined : 0',
@@ -769,16 +800,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class RdxSliderThumbComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: RdxSliderThumbComponent, isStandalone: true, selector: "rdx-slider-thumb", hostDirectives: [{ directive: RdxSliderThumbImplDirective }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.0.5", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderThumbComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-thumb',
-                    standalone: true,
                     hostDirectives: [RdxSliderThumbImplDirective],
                     template: `
         <ng-content />
@@ -790,16 +820,15 @@ class RdxSliderTrackComponent {
     constructor() {
         this.rootContext = inject(RdxSliderRootComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", 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: "19.1.4", ngImport: i0, type: RdxSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.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: `
         <ng-content />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderTrackComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rdx-slider-track',
-                    standalone: true,
                     host: {
                         '[attr.data-disabled]': "rootContext.disabled() ? '' : undefined",
                         '[attr.data-orientation]': 'rootContext.orientation()'
@@ -812,11 +841,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 const _imports = [RdxSliderRootComponent, RdxSliderTrackComponent, RdxSliderRangeComponent, RdxSliderThumbComponent];
 class RdxSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", 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.0.5", ngImport: i0, type: RdxSliderModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.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.1.4", ngImport: i0, type: RdxSliderModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],