@m1z23r/ngx-ui 1.1.59 → 1.1.60

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -4453,6 +4453,256 @@ function pad(n) {
     return n < 10 ? `0${n}` : String(n);
 }
 
+class NumberRangeSliderComponent {
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    bubbles = input('always', ...(ngDevMode ? [{ debugName: "bubbles" }] : []));
+    showRange = input(false, ...(ngDevMode ? [{ debugName: "showRange" }] : []));
+    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
+    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    decimals = input(0, ...(ngDevMode ? [{ debugName: "decimals" }] : []));
+    formatValue = input(null, ...(ngDevMode ? [{ debugName: "formatValue" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueCommit = output();
+    trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
+    startVal = signal(0, ...(ngDevMode ? [{ debugName: "startVal" }] : []));
+    endVal = signal(0, ...(ngDevMode ? [{ debugName: "endVal" }] : []));
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
+    hoveredThumb = signal(null, ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : []));
+    lastEmitted = null;
+    range = computed(() => Math.max(0, this.max() - this.min()), ...(ngDevMode ? [{ debugName: "range" }] : []));
+    startPercent = computed(() => this.toPercent(this.startVal()), ...(ngDevMode ? [{ debugName: "startPercent" }] : []));
+    endPercent = computed(() => this.toPercent(this.endVal()), ...(ngDevMode ? [{ debugName: "endPercent" }] : []));
+    fillStyle = computed(() => {
+        const start = this.startPercent();
+        const end = this.endPercent();
+        return { left: `${start}%`, width: `${Math.max(0, end - start)}%` };
+    }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
+    startLabel = computed(() => this.format(this.startVal()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
+    endLabel = computed(() => this.format(this.endVal()), ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
+    bubbleVisible = computed(() => {
+        const mode = this.bubbles();
+        if (mode === 'never')
+            return { start: false, end: false };
+        if (mode === 'always')
+            return { start: true, end: true };
+        const active = (t) => this.dragging() === t || this.focusedThumb() === t || this.hoveredThumb() === t;
+        return { start: active('start'), end: active('end') };
+    }, ...(ngDevMode ? [{ debugName: "bubbleVisible" }] : []));
+    rootClasses = computed(() => {
+        const classes = ['ui-number-range-slider', `ui-number-range-slider--${this.size()}`];
+        if (this.disabled())
+            classes.push('ui-number-range-slider--disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : []));
+    constructor() {
+        // Sync external value → internal thumb positions. Falls back to [min, max] when null.
+        effect(() => {
+            const min = this.min();
+            const max = this.max();
+            const v = this.value();
+            if (v) {
+                this.startVal.set(this.snap(this.clamp(v.start)));
+                this.endVal.set(this.snap(this.clamp(v.end)));
+                this.lastEmitted = v;
+            }
+            else {
+                this.startVal.set(min);
+                this.endVal.set(max);
+                this.lastEmitted = null;
+            }
+        });
+    }
+    /** Push current thumb state into the value model (live, during interaction). */
+    writeValue() {
+        const next = { start: this.startVal(), end: this.endVal() };
+        const prev = this.lastEmitted;
+        if (prev && prev.start === next.start && prev.end === next.end) {
+            return;
+        }
+        this.lastEmitted = next;
+        this.value.set(next);
+    }
+    // -- Pointer handling -------------------------------------------------
+    onThumbPointerDown(event, thumb) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        const target = event.target;
+        target.setPointerCapture(event.pointerId);
+        this.dragging.set(thumb);
+        this.focusedThumb.set(thumb);
+        target.focus();
+    }
+    onThumbPointerMove(event, thumb) {
+        if (this.dragging() !== thumb)
+            return;
+        event.preventDefault();
+        const val = this.pixelToVal(event.clientX);
+        this.setThumb(thumb, val);
+    }
+    onThumbPointerUp(event, thumb) {
+        if (this.dragging() !== thumb)
+            return;
+        const target = event.target;
+        if (target.hasPointerCapture(event.pointerId)) {
+            target.releasePointerCapture(event.pointerId);
+        }
+        this.dragging.set(null);
+        this.commit();
+    }
+    onTrackPointerDown(event) {
+        if (this.disabled())
+            return;
+        if (event.target.dataset['thumb'])
+            return; // ignore thumb hits
+        const val = this.pixelToVal(event.clientX);
+        const thumb = Math.abs(val - this.startVal()) <= Math.abs(val - this.endVal()) ? 'start' : 'end';
+        this.setThumb(thumb, val);
+        this.commit();
+    }
+    // -- Keyboard ---------------------------------------------------------
+    onThumbKeyDown(event, thumb) {
+        if (this.disabled())
+            return;
+        const step = this.effectiveStep();
+        const big = step * 10;
+        let delta = 0;
+        let target = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                delta = event.shiftKey ? -big : -step;
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                delta = event.shiftKey ? big : step;
+                break;
+            case 'Home':
+                target = thumb === 'start' ? this.min() : this.startVal();
+                break;
+            case 'End':
+                target = thumb === 'end' ? this.max() : this.endVal();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target !== null) {
+            this.setThumb(thumb, target);
+        }
+        else {
+            const current = thumb === 'start' ? this.startVal() : this.endVal();
+            this.setThumb(thumb, current + delta);
+        }
+    }
+    onThumbKeyUp(event) {
+        const keys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+        if (keys.includes(event.key)) {
+            this.commit();
+        }
+    }
+    onThumbFocus(thumb) {
+        this.focusedThumb.set(thumb);
+    }
+    onThumbBlur() {
+        this.focusedThumb.set(null);
+    }
+    onThumbEnter(thumb) {
+        this.hoveredThumb.set(thumb);
+    }
+    onThumbLeave() {
+        this.hoveredThumb.set(null);
+    }
+    // -- Internal helpers -------------------------------------------------
+    effectiveStep() {
+        const step = this.step();
+        return step > 0 ? step : 1;
+    }
+    setThumb(thumb, raw) {
+        const snapped = this.snap(this.clamp(raw));
+        let changed = false;
+        if (thumb === 'start') {
+            const next = Math.min(snapped, this.endVal());
+            if (next !== this.startVal()) {
+                this.startVal.set(next);
+                changed = true;
+            }
+        }
+        else {
+            const next = Math.max(snapped, this.startVal());
+            if (next !== this.endVal()) {
+                this.endVal.set(next);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.writeValue();
+    }
+    commit() {
+        if (this.lastEmitted) {
+            this.valueCommit.emit(this.lastEmitted);
+        }
+    }
+    clamp(val) {
+        return Math.min(this.max(), Math.max(this.min(), val));
+    }
+    snap(val) {
+        const min = this.min();
+        const max = this.max();
+        const step = this.step();
+        if (step <= 0 || min >= max)
+            return val;
+        const offset = val - min;
+        const snapped = min + Math.round(offset / step) * step;
+        if (snapped > max)
+            return max;
+        if (snapped < min)
+            return min;
+        return snapped;
+    }
+    toPercent(val) {
+        const range = this.range();
+        if (range <= 0)
+            return 0;
+        return ((val - this.min()) / range) * 100;
+    }
+    pixelToVal(clientX) {
+        const el = this.trackEl()?.nativeElement;
+        if (!el)
+            return this.min();
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this.min();
+        const ratio = (clientX - rect.left) / rect.width;
+        const clamped = Math.min(1, Math.max(0, ratio));
+        return this.min() + clamped * this.range();
+    }
+    // -- Formatting -------------------------------------------------------
+    format(val) {
+        const fn = this.formatValue();
+        if (fn)
+            return fn(val);
+        const decimals = this.decimals();
+        const body = val.toLocaleString(undefined, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+        });
+        return `${this.prefix()}${body}${this.suffix()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NumberRangeSliderComponent, isStandalone: true, selector: "ui-number-range-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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, bubbles: { classPropertyName: "bubbles", publicName: "bubbles", isSignal: true, isRequired: false, transformFunction: null }, showRange: { classPropertyName: "showRange", publicName: "showRange", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueCommit: "valueCommit" }, viewQueries: [{ propertyName: "trackEl", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n  @if (label()) {\n    <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-number-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div\n      class=\"ui-number-range-slider__fill\"\n      [style.left]=\"fill.left\"\n      [style.width]=\"fill.width\"\n    ></div>\n\n    <div\n      class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"endVal()\"\n      [attr.aria-valuenow]=\"startVal()\"\n      [attr.aria-valuetext]=\"startLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"Start\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"startPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n      (pointermove)=\"onThumbPointerMove($event, 'start')\"\n      (pointerup)=\"onThumbPointerUp($event, 'start')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n      (pointerenter)=\"onThumbEnter('start')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'start')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('start')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.start) {\n        <span class=\"ui-number-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startVal()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endVal()\"\n      [attr.aria-valuetext]=\"endLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"End\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"endPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n      (pointermove)=\"onThumbPointerMove($event, 'end')\"\n      (pointerup)=\"onThumbPointerUp($event, 'end')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n      (pointerenter)=\"onThumbEnter('end')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'end')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('end')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.end) {\n        <span class=\"ui-number-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-number-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-number-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-number-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-number-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-number-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none;margin-top:var(--ui-spacing-lg)}.ui-number-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-number-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none;transform:translate(-50%,-50%)}.ui-number-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-number-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-number-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-number-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-number-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-number-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-number-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-number-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-number-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-number-range-slider--sm .ui-number-range-slider__track{height:4px}.ui-number-range-slider--sm .ui-number-range-slider__thumb{width:14px;height:14px}.ui-number-range-slider--md .ui-number-range-slider__track{height:6px}.ui-number-range-slider--md .ui-number-range-slider__thumb{width:18px;height:18px}.ui-number-range-slider--lg .ui-number-range-slider__track{height:8px}.ui-number-range-slider--lg .ui-number-range-slider__thumb{width:24px;height:24px}.ui-number-range-slider--disabled{opacity:.5}.ui-number-range-slider--disabled .ui-number-range-slider__track,.ui-number-range-slider--disabled .ui-number-range-slider__thumb{cursor:not-allowed}.ui-number-range-slider--disabled .ui-number-range-slider__thumb:hover,.ui-number-range-slider--disabled .ui-number-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-number-range-slider-bubble-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NumberRangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-number-range-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let isDisabled = disabled();\n@let bubbleVis = bubbleVisible();\n@let rangeOn = showRange();\n@let startPct = startPercent();\n@let endPct = endPercent();\n@let fill = fillStyle();\n\n<div [class]=\"rootClasses()\">\n  @if (label()) {\n    <label class=\"ui-number-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-number-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div\n      class=\"ui-number-range-slider__fill\"\n      [style.left]=\"fill.left\"\n      [style.width]=\"fill.width\"\n    ></div>\n\n    <div\n      class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"endVal()\"\n      [attr.aria-valuenow]=\"startVal()\"\n      [attr.aria-valuetext]=\"startLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"Start\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"startPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n      (pointermove)=\"onThumbPointerMove($event, 'start')\"\n      (pointerup)=\"onThumbPointerUp($event, 'start')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'start')\"\n      (pointerenter)=\"onThumbEnter('start')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'start')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('start')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.start) {\n        <span class=\"ui-number-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-number-range-slider__thumb ui-number-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startVal()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"endVal()\"\n      [attr.aria-valuetext]=\"endLabel()\"\n      [attr.aria-disabled]=\"isDisabled\"\n      aria-label=\"End\"\n      aria-orientation=\"horizontal\"\n      [style.left.%]=\"endPct\"\n      (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n      (pointermove)=\"onThumbPointerMove($event, 'end')\"\n      (pointerup)=\"onThumbPointerUp($event, 'end')\"\n      (pointercancel)=\"onThumbPointerUp($event, 'end')\"\n      (pointerenter)=\"onThumbEnter('end')\"\n      (pointerleave)=\"onThumbLeave()\"\n      (keydown)=\"onThumbKeyDown($event, 'end')\"\n      (keyup)=\"onThumbKeyUp($event)\"\n      (focus)=\"onThumbFocus('end')\"\n      (blur)=\"onThumbBlur()\"\n    >\n      @if (bubbleVis.end) {\n        <span class=\"ui-number-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-number-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-number-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-number-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-number-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-number-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none;margin-top:var(--ui-spacing-lg)}.ui-number-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-number-range-slider__thumb{position:absolute;top:50%;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);cursor:grab;outline:none;transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast);touch-action:none;transform:translate(-50%,-50%)}.ui-number-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-number-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-number-range-slider__thumb:active:not([aria-disabled=true]){cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent);z-index:3}.ui-number-range-slider__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--ui-bg);border:1px solid var(--ui-border);color:var(--ui-text);font-size:var(--ui-font-xs);font-weight:500;padding:2px var(--ui-spacing-sm);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-sm);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;animation:ui-number-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-number-range-slider__bubble:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-border)}.ui-number-range-slider__bubble:before{content:\"\";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--ui-bg);z-index:1}.ui-number-range-slider__range{display:flex;align-items:center;gap:var(--ui-spacing-xs);font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-number-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-number-range-slider--sm .ui-number-range-slider__track{height:4px}.ui-number-range-slider--sm .ui-number-range-slider__thumb{width:14px;height:14px}.ui-number-range-slider--md .ui-number-range-slider__track{height:6px}.ui-number-range-slider--md .ui-number-range-slider__thumb{width:18px;height:18px}.ui-number-range-slider--lg .ui-number-range-slider__track{height:8px}.ui-number-range-slider--lg .ui-number-range-slider__thumb{width:24px;height:24px}.ui-number-range-slider--disabled{opacity:.5}.ui-number-range-slider--disabled .ui-number-range-slider__track,.ui-number-range-slider--disabled .ui-number-range-slider__thumb{cursor:not-allowed}.ui-number-range-slider--disabled .ui-number-range-slider__thumb:hover,.ui-number-range-slider--disabled .ui-number-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-number-range-slider-bubble-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }], trackEl: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
 /** Directive to mark a custom chip template */
 class ChipTemplateDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ChipTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -8360,5 +8610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbSeparatorDirective, ButtonComponent, CardComponent, CarouselComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, ImageUploaderComponent, InputComponent, JsonTreeComponent, LOADABLE, LightboxComponent, LightboxService, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SegmentedComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, StepperComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbSeparatorDirective, ButtonComponent, CardComponent, CarouselComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, ImageUploaderComponent, InputComponent, JsonTreeComponent, LOADABLE, LightboxComponent, LightboxService, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, NumberRangeSliderComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SegmentedComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, StepperComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map