@acorex/components 21.0.2-next.35 → 21.0.2-next.37

package/fesm2022/acorex-components-range-slider.mjs

@@ -25,84 +25,84 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
          * The orientation of the slider, either 'horizontal' or 'vertical'.
          * @default 'horizontal'
          */
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Color theme for the slider, affecting highlight, tooltip, and handler.
          * @default 'primary'
          */
-        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The value(s) of the slider. Can be a single number for single mode or an array of two numbers for dual mode.
          */
-        this.values = model(this.value, ...(ngDevMode ? [{ debugName: "values" }] : []));
+        this.values = model(this.value, ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The mode of the slider, either 'single' or 'dual'.
          * @default 'single'
          */
-        this.mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The minimum value of the slider.
          * @default 0
          */
-        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The maximum value of the slider.
          * @default 100
          */
-        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The step increment for value changes.
          * @default 1
          */
-        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * The snapping increment for the slider.
          * @default 1
          */
-        this.snap = input(1, ...(ngDevMode ? [{ debugName: "snap" }] : []));
+        this.snap = input(1, ...(ngDevMode ? [{ debugName: "snap" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Mode for displaying tooltips, can be at the start, end, or both.
          * @default 'end'
          */
-        this.tooltipMode = input('end', ...(ngDevMode ? [{ debugName: "tooltipMode" }] : []));
+        this.tooltipMode = input('end', ...(ngDevMode ? [{ debugName: "tooltipMode" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Mode for snapping, can snap at the start, end, or both.
          * @default 'start'
          */
-        this.snapMode = input('start', ...(ngDevMode ? [{ debugName: "snapMode" }] : []));
+        this.snapMode = input('start', ...(ngDevMode ? [{ debugName: "snapMode" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Whether the slider should have steps.
          * @default true
          */
-        this.hasStep = input(true, ...(ngDevMode ? [{ debugName: "hasStep" }] : []));
+        this.hasStep = input(true, ...(ngDevMode ? [{ debugName: "hasStep" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Whether the slider should display snapping.
          * @default false
          */
-        this.hasSnap = input(false, ...(ngDevMode ? [{ debugName: "hasSnap" }] : []));
+        this.hasSnap = input(false, ...(ngDevMode ? [{ debugName: "hasSnap" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Whether the slider should display labels for snapping points.
          * @default Value derived from `hasSnap()`
          */
-        this.hasLable = input(this.hasSnap(), ...(ngDevMode ? [{ debugName: "hasLable" }] : []));
+        this.hasLable = input(this.hasSnap(), ...(ngDevMode ? [{ debugName: "hasLable" }] : /* istanbul ignore next */ []));
         /**
          * @description
          * Whether the slider should display tooltips.
          * @default false
          */
-        this.hasTooltip = input(false, ...(ngDevMode ? [{ debugName: "hasTooltip" }] : []));
+        this.hasTooltip = input(false, ...(ngDevMode ? [{ debugName: "hasTooltip" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -114,19 +114,19 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
         /**
          * @ignore
          */
-        this.range = computed(() => this.max() - this.min(), ...(ngDevMode ? [{ debugName: "range" }] : []));
+        this.range = computed(() => this.max() - this.min(), ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.isHorizontal = computed(() => this.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : []));
+        this.isHorizontal = computed(() => this.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "isHorizontal" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.isDual = computed(() => this.mode() === 'dual', ...(ngDevMode ? [{ debugName: "isDual" }] : []));
+        this.isDual = computed(() => this.mode() === 'dual', ...(ngDevMode ? [{ debugName: "isDual" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
-        this.correctMinMax = computed(() => this.max() - this.min() > 0, ...(ngDevMode ? [{ debugName: "correctMinMax" }] : []));
+        this.correctMinMax = computed(() => this.max() - this.min() > 0, ...(ngDevMode ? [{ debugName: "correctMinMax" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -154,7 +154,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 return array;
             }
             return null;
-        }, ...(ngDevMode ? [{ debugName: "calculateSnapBar" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "calculateSnapBar" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -168,7 +168,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
             else {
                 return ((this.values() - this.min()) / this.range()) * 100;
             }
-        }, ...(ngDevMode ? [{ debugName: "calculatePos" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "calculatePos" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -188,7 +188,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
             : {
                 height: this.isDual() ? this.calculatePos()[1] - this.calculatePos()[0] + '%' : this.calculatePos() + '%',
                 bottom: this.mode() === 'dual' ? this.calculatePos()[0] + '%' : '0%',
-            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHighlight" }] : []));
+            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHighlight" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -200,7 +200,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 bottom: this.isDual()
                     ? 'calc(' + this.calculatePos()[0] + '% - ' + 6 * this.height + 'rem)'
                     : 'calc(' + this.calculatePos() + '% - ' + 6 * this.height + 'rem)',
-            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHandler1" }] : []));
+            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHandler1" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -210,7 +210,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
             }
             : {
                 bottom: 'calc(' + this.calculatePos()[1] + '% - ' + 6 * this.height + 'rem)',
-            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHandler2" }] : []));
+            }, ...(ngDevMode ? [{ debugName: "AXRangeSliderHandler2" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -235,7 +235,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                         return { left: -2 * this.height + 'rem', width: 4 * this.height + 'rem' };
                 }
             }
-        }, ...(ngDevMode ? [{ debugName: "AXRangeSliderStep" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "AXRangeSliderStep" }] : /* istanbul ignore next */ []));
         /**
          * @ignore
          */
@@ -260,7 +260,7 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                         return { left: -8 * this.height + 'rem' };
                 }
             }
-        }, ...(ngDevMode ? [{ debugName: "AXRangeLabel" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "AXRangeLabel" }] : /* istanbul ignore next */ []));
         this.isUserInteraction = false;
         effect(() => {
             this.commitValue(this.values(), this.isUserInteraction);
@@ -634,13 +634,13 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
      */
     get __hostClass() {
         return [
-            `ax-${this.color()}-solid`,
+            `ax-${this.color()}`,
             `${this.disabled ? 'ax-state-disabled' : ''}`,
             `${this.readonly ? 'ax-state-readonly' : ''}`,
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXRangeSliderComponent, isStandalone: true, selector: "ax-range-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, 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 }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, tooltipMode: { classPropertyName: "tooltipMode", publicName: "tooltipMode", isSignal: true, isRequired: false, transformFunction: null }, snapMode: { classPropertyName: "snapMode", publicName: "snapMode", isSignal: true, isRequired: false, transformFunction: null }, hasStep: { classPropertyName: "hasStep", publicName: "hasStep", isSignal: true, isRequired: false, transformFunction: null }, hasSnap: { classPropertyName: "hasSnap", publicName: "hasSnap", isSignal: true, isRequired: false, transformFunction: null }, hasLable: { classPropertyName: "hasLable", publicName: "hasLable", isSignal: true, isRequired: false, transformFunction: null }, hasTooltip: { classPropertyName: "hasTooltip", publicName: "hasTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { listeners: { "wheel": "onWheel($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXRangeSliderComponent, isStandalone: true, selector: "ax-range-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, 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 }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, tooltipMode: { classPropertyName: "tooltipMode", publicName: "tooltipMode", isSignal: true, isRequired: false, transformFunction: null }, snapMode: { classPropertyName: "snapMode", publicName: "snapMode", isSignal: true, isRequired: false, transformFunction: null }, hasStep: { classPropertyName: "hasStep", publicName: "hasStep", isSignal: true, isRequired: false, transformFunction: null }, hasSnap: { classPropertyName: "hasSnap", publicName: "hasSnap", isSignal: true, isRequired: false, transformFunction: null }, hasLable: { classPropertyName: "hasLable", publicName: "hasLable", isSignal: true, isRequired: false, transformFunction: null }, hasTooltip: { classPropertyName: "hasTooltip", publicName: "hasTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { listeners: { "wheel": "onWheel($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -648,9 +648,9 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXRangeSliderComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["ax-range-slider{--ax-comp-range-slider-size: .25rem;--ax-comp-range-slider-ring-size: .6rem}ax-range-slider{--ax-comp-range-slider-ring-color: var(--ax-comp-range-slider-color), .25}ax-range-slider.ax-primary-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-primary-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-primary-surface)}ax-range-slider.ax-secondary-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-secondary-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-secondary-surface)}ax-range-slider.ax-success-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-success-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-success-surface)}ax-range-slider.ax-warning-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-warning-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-warning-surface)}ax-range-slider.ax-danger-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-danger-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-danger-surface)}ax-range-slider.ax-accent1-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent1-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent1-surface)}ax-range-slider.ax-accent2-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent2-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent2-surface)}ax-range-slider.ax-accent3-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent3-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent3-surface)}ax-range-slider.ax-accent4-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent4-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent4-surface)}ax-range-slider.ax-accent5-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent5-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent5-surface)}ax-range-slider.ax-accent6-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent6-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent6-surface)}ax-range-slider.ax-accent7-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent7-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent7-surface)}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small;-webkit-user-select:none;user-select:none}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-comp-range-slider-size) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-comp-range-slider-bar-height, var(--ax-comp-range-slider-size));transform:translateY(-50%);z-index:5;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-line-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-comp-range-slider-size) * 3 / 2);transform:translateY(-50%);z-index:6;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:var(--ax-comp-range-slider-handler-size, calc(var(--ax-comp-range-slider-size) * 6));height:var(--ax-comp-range-slider-handler-size, calc(var(--ax-comp-range-slider-size) * 6));z-index:10;background-color:rgba(var(--ax-comp-range-slider-color));border-radius:50%;cursor:pointer;transform:translate(-45%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:0 0 0 calc(var(--ax-comp-range-slider-ring-size)) rgba(var(--ax-comp-range-slider-ring-color))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-comp-range-slider-size) * 2.8);top:calc(var(--ax-comp-range-slider-size) * -2);background-color:rgba(var(--ax-comp-range-slider-color));color:rgba(var(--ax-comp-range-slider-tooltip-text-color));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:1.75rem;left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgba(var(--ax-comp-range-slider-color)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:4}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-comp-range-slider-size) / 2) solid rgba(var(--ax-sys-color-border-lightest-surface));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-comp-range-slider-size) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-comp-range-slider-size) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-comp-range-slider-size);height:100.1%;transform:translate(-50%);z-index:5;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-line-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-comp-range-slider-size) * 3 / 2);transform:translate(-50%);z-index:6;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-comp-range-slider-size) * 6);height:calc(var(--ax-comp-range-slider-size) * 6);z-index:10;background-color:rgba(var(--ax-comp-range-slider-color));border-radius:50%;cursor:pointer;transform:translate(-50%,-55%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-comp-range-slider-color),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-comp-range-slider-size) * 8.5);left:calc(var(--ax-comp-range-slider-size) * -8);background-color:rgba(var(--ax-comp-range-slider-color));color:rgba(var(--ax-comp-range-slider-tooltip-text-color));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgba(var(--ax-comp-range-slider-color))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:4}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-comp-range-slider-size) / 2) solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-comp-range-slider-size) * -3)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{z-index:5;height:var(--spacing,.25rem);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute;top:50%;left:0}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:rgba(var(--ax-sys-color-border-lightest-surface));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{z-index:5;height:100%;width:var(--spacing,.25rem);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;top:0;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:var(--spacing,.25rem);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:rgba(var(--ax-sys-color-primary-surface));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:rgba(var(--ax-sys-color-border-lightest-surface));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-range-slider', inputs: ['disabled', 'readonly'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
@@ -660,8 +660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             multi: true,
                         },
                         { provide: AXComponent, useExisting: AXRangeSliderComponent },
-                    ], imports: [NgStyle], template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["ax-range-slider{--ax-comp-range-slider-size: .25rem;--ax-comp-range-slider-ring-size: .6rem}ax-range-slider{--ax-comp-range-slider-ring-color: var(--ax-comp-range-slider-color), .25}ax-range-slider.ax-primary-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-primary-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-primary-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-primary-surface)}ax-range-slider.ax-secondary-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-secondary-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-secondary-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-secondary-surface)}ax-range-slider.ax-success-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-success-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-success-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-success-surface)}ax-range-slider.ax-warning-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-warning-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-warning-surface)}ax-range-slider.ax-danger-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-danger-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-danger-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-danger-surface)}ax-range-slider.ax-accent1-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent1-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent1-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent1-surface)}ax-range-slider.ax-accent2-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent2-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent2-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent2-surface)}ax-range-slider.ax-accent3-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent3-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent3-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent3-surface)}ax-range-slider.ax-accent4-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent4-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent4-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent4-surface)}ax-range-slider.ax-accent5-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent5-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent5-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent5-surface)}ax-range-slider.ax-accent6-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent6-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent6-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent6-surface)}ax-range-slider.ax-accent7-solid{--ax-comp-range-slider-line-color: var(--ax-sys-color-accent7-lighter-surface);--ax-comp-range-slider-color: var(--ax-sys-color-accent7-surface);--ax-comp-range-slider-tooltip-text-color: var(--ax-sys-color-on-accent7-surface)}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small;-webkit-user-select:none;user-select:none}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-comp-range-slider-size) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-comp-range-slider-bar-height, var(--ax-comp-range-slider-size));transform:translateY(-50%);z-index:5;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-line-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-comp-range-slider-size) * 3 / 2);transform:translateY(-50%);z-index:6;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:var(--ax-comp-range-slider-handler-size, calc(var(--ax-comp-range-slider-size) * 6));height:var(--ax-comp-range-slider-handler-size, calc(var(--ax-comp-range-slider-size) * 6));z-index:10;background-color:rgba(var(--ax-comp-range-slider-color));border-radius:50%;cursor:pointer;transform:translate(-45%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:0 0 0 calc(var(--ax-comp-range-slider-ring-size)) rgba(var(--ax-comp-range-slider-ring-color))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-comp-range-slider-size) * 2.8);top:calc(var(--ax-comp-range-slider-size) * -2);background-color:rgba(var(--ax-comp-range-slider-color));color:rgba(var(--ax-comp-range-slider-tooltip-text-color));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:1.75rem;left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgba(var(--ax-comp-range-slider-color)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:4}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-comp-range-slider-size) / 2) solid rgba(var(--ax-sys-color-border-lightest-surface));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-comp-range-slider-size) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-comp-range-slider-size) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-comp-range-slider-size);height:100.1%;transform:translate(-50%);z-index:5;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-line-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-comp-range-slider-size) * 3 / 2);transform:translate(-50%);z-index:6;border-radius:9999rem;background-color:rgba(var(--ax-comp-range-slider-color));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-comp-range-slider-size) * 6);height:calc(var(--ax-comp-range-slider-size) * 6);z-index:10;background-color:rgba(var(--ax-comp-range-slider-color));border-radius:50%;cursor:pointer;transform:translate(-50%,-55%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-comp-range-slider-color),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-comp-range-slider-size) * 8.5);left:calc(var(--ax-comp-range-slider-size) * -8);background-color:rgba(var(--ax-comp-range-slider-color));color:rgba(var(--ax-comp-range-slider-tooltip-text-color));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgba(var(--ax-comp-range-slider-color))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:4}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-comp-range-slider-size) / 2) solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-comp-range-slider-size) * -3)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onWheel: [{
+                    ], imports: [NgStyle], template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartBar($event)\"\n        (touchstart)=\"onStartBar($event)\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-border-style:solid;--tw-content:\"\"}}}@layer components{ax-range-slider{padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}ax-range-slider .ax-range-slider.ax-orientation-horizontal{height:calc(var(--spacing,.25rem) * 4);width:100%;position:relative}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{z-index:5;height:var(--spacing,.25rem);--tw-translate-y: -50% ;width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-lighter);border-radius:3.40282e38px;position:absolute;top:50%;left:0}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{z-index:6;height:calc(var(--spacing,.25rem) * 2);--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;top:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;position:absolute;top:50%;transform:translate(-45%,-50%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover,ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xs,.125rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{top:calc(var(--spacing,.25rem) * 7);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-top-style:var(--tw-border-style);border-top-width:8px;border-top-color:var(--ax-comp-bg);--tw-content:\"\";content:var(--tw-content);position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{z-index:4;flex-direction:row;width:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{border-left-style:var(--tw-border-style);border-left-width:2px;border-left-color:rgba(var(--ax-sys-color-border-lightest-surface));height:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * 2);text-align:center;position:relative;left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{height:100%;width:calc(var(--spacing,.25rem) * 4);position:relative}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{z-index:5;height:100%;width:var(--spacing,.25rem);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg-primary-lighter);border-radius:3.40282e38px;position:absolute;top:0;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{z-index:6;width:var(--spacing,.25rem);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;background-color:var(--ax-comp-bg);border-radius:3.40282e38px;position:absolute;left:50%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{z-index:10;height:calc(var(--spacing,.25rem) * 6);width:calc(var(--spacing,.25rem) * 6);cursor:pointer;background-color:var(--ax-comp-bg);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-radius:3.40282e38px;position:absolute;left:50%;transform:translate(-50%,-55%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border-style:var(--tw-border-style);--tw-shadow-color:rgba(var(--ax-sys-color-primary-surface));border-width:1px;border-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{--tw-shadow-color:color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) var(--tw-shadow-alpha), transparent)}}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{top:calc(var(--spacing,.25rem) * 9);left:calc(var(--spacing,.25rem) * -8);border-radius:var(--radius-sm,.25rem);background-color:var(--ax-comp-bg);padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:var(--spacing,.25rem);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);white-space:nowrap;color:var(--ax-comp-text);position:absolute;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);border-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-width:8px;border-bottom-color:rgba(var(--ax-sys-color-primary-surface));--tw-content:\"\";content:var(--tw-content);position:absolute;top:50%;left:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{z-index:4;flex-direction:column;height:100%;display:flex;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{border-top-color:rgba(var(--ax-sys-color-border-lightest-surface));width:50%;position:absolute}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{top:calc(var(--spacing,.25rem) * -3);position:absolute;left:150%}ax-range-slider.ax-state-disabled{cursor:not-allowed;opacity:.5}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}\n/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], 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 }] }], snap: [{ type: i0.Input, args: [{ isSignal: true, alias: "snap", required: false }] }], tooltipMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMode", required: false }] }], snapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapMode", required: false }] }], hasStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasStep", required: false }] }], hasSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSnap", required: false }] }], hasLable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLable", required: false }] }], hasTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTooltip", required: false }] }], onWheel: [{
                 type: HostListener,
                 args: ['wheel', ['$event']]
             }], __hostClass: [{
@@ -670,11 +670,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class AXRangeSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderModule, imports: [CommonModule, AXRangeSliderComponent], exports: [AXRangeSliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderModule, imports: [CommonModule, AXRangeSliderComponent], exports: [AXRangeSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRangeSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRangeSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXRangeSliderComponent],