@m1z23r/ngx-ui 1.1.47 → 1.1.48

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -3946,6 +3946,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'ui-slider', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-slider-wrapper\" [class]=\"sliderClasses()\" [class.ui-slider-wrapper--disabled]=\"disabled()\">\n  @if (label()) {\n    <label class=\"ui-slider__label\" [attr.for]=\"inputId()\">\n      {{ label() }}\n    </label>\n  }\n  <div class=\"ui-slider__container\" [style.--fill]=\"fillPercent()\">\n    <input\n      class=\"ui-slider\"\n      type=\"range\"\n      [id]=\"inputId()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [disabled]=\"disabled()\"\n      [(ngModel)]=\"value\"\n      (change)=\"valueCommit.emit(value())\"\n    />\n  </div>\n  @if (showValue()) {\n    <span class=\"ui-slider__value\">{{ value() }}</span>\n  }\n</div>\n", styles: [":host{display:block}.ui-slider-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-slider__value{font-size:var(--ui-font-sm);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-slider__container{display:flex;align-items:center}.ui-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;margin:0;padding:0}.ui-slider::-webkit-slider-runnable-track{width:100%;border-radius:var(--ui-radius-xl);background:linear-gradient(to right,var(--ui-primary) 0%,var(--ui-primary) var(--fill, 0%),var(--ui-bg-tertiary) var(--fill, 0%),var(--ui-bg-tertiary) 100%);border:none}.ui-slider::-moz-range-track{width:100%;border-radius:var(--ui-radius-xl);background:var(--ui-bg-tertiary);border:none}.ui-slider::-moz-range-progress{border-radius:var(--ui-radius-xl);background:var(--ui-primary)}.ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-slider::-moz-range-thumb{border-radius:50%;background:var(--ui-primary);border:2px solid var(--ui-bg);box-shadow:var(--ui-shadow-sm);transition:box-shadow var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-slider:focus{outline:none}.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:not(:disabled):hover::-webkit-slider-thumb{transform:scale(1.1)}.ui-slider:not(:disabled):hover::-moz-range-thumb{transform:scale(1.1)}.ui-slider:not(:disabled):active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider:not(:disabled):active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-slider--sm .ui-slider{height:20px}.ui-slider--sm .ui-slider::-webkit-slider-runnable-track{height:4px}.ui-slider--sm .ui-slider::-moz-range-track{height:4px}.ui-slider--sm .ui-slider::-moz-range-progress{height:4px}.ui-slider--sm .ui-slider::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}.ui-slider--sm .ui-slider::-moz-range-thumb{width:14px;height:14px}.ui-slider--md .ui-slider{height:24px}.ui-slider--md .ui-slider::-webkit-slider-runnable-track{height:6px}.ui-slider--md .ui-slider::-moz-range-track{height:6px}.ui-slider--md .ui-slider::-moz-range-progress{height:6px}.ui-slider--md .ui-slider::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px}.ui-slider--md .ui-slider::-moz-range-thumb{width:18px;height:18px}.ui-slider--lg .ui-slider{height:32px}.ui-slider--lg .ui-slider::-webkit-slider-runnable-track{height:8px}.ui-slider--lg .ui-slider::-moz-range-track{height:8px}.ui-slider--lg .ui-slider::-moz-range-progress{height:8px}.ui-slider--lg .ui-slider::-webkit-slider-thumb{width:24px;height:24px;margin-top:-8px}.ui-slider--lg .ui-slider::-moz-range-thumb{width:24px;height:24px}.ui-slider-wrapper--disabled{opacity:.5}.ui-slider-wrapper--disabled .ui-slider{cursor:not-allowed}\n"] }]
         }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueCommit: [{ type: i0.Output, args: ["valueCommit"] }] } });
 
+const MS_PER_MINUTE = 60_000;
+const MS_PER_DAY = 86_400_000;
+const DEFAULT_STEP = {
+    time: 15 * MS_PER_MINUTE,
+    date: MS_PER_DAY,
+    datetime: 30 * MS_PER_MINUTE,
+};
+class RangeSliderComponent {
+    min = input.required(...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input.required(...(ngDevMode ? [{ debugName: "max" }] : []));
+    mode = input('datetime', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    bubbles = input('always', ...(ngDevMode ? [{ debugName: "bubbles" }] : []));
+    showRange = input(false, ...(ngDevMode ? [{ debugName: "showRange" }] : []));
+    format = input(null, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueCommit = output();
+    trackEl = viewChild('track', ...(ngDevMode ? [{ debugName: "trackEl" }] : []));
+    startMs = signal(0, ...(ngDevMode ? [{ debugName: "startMs" }] : []));
+    endMs = signal(0, ...(ngDevMode ? [{ debugName: "endMs" }] : []));
+    dragging = signal(null, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    focusedThumb = signal(null, ...(ngDevMode ? [{ debugName: "focusedThumb" }] : []));
+    hoveredThumb = signal(null, ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : []));
+    lastEmitted = null;
+    minMs = computed(() => this.min().getTime(), ...(ngDevMode ? [{ debugName: "minMs" }] : []));
+    maxMs = computed(() => this.max().getTime(), ...(ngDevMode ? [{ debugName: "maxMs" }] : []));
+    range = computed(() => Math.max(0, this.maxMs() - this.minMs()), ...(ngDevMode ? [{ debugName: "range" }] : []));
+    effectiveStep = computed(() => {
+        const explicit = this.step();
+        return explicit && explicit > 0 ? explicit : DEFAULT_STEP[this.mode()];
+    }, ...(ngDevMode ? [{ debugName: "effectiveStep" }] : []));
+    startPercent = computed(() => this.toPercent(this.startMs()), ...(ngDevMode ? [{ debugName: "startPercent" }] : []));
+    endPercent = computed(() => this.toPercent(this.endMs()), ...(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.formatMs(this.startMs()), ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
+    endLabel = computed(() => this.formatMs(this.endMs()), ...(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 };
+        // 'active' — visible when dragged, hovered, or focused
+        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-range-slider', `ui-range-slider--${this.size()}`];
+        if (this.disabled())
+            classes.push('ui-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.minMs();
+            const max = this.maxMs();
+            const v = this.value();
+            if (v) {
+                this.startMs.set(this.snap(this.clamp(v.start.getTime())));
+                this.endMs.set(this.snap(this.clamp(v.end.getTime())));
+                this.lastEmitted = v;
+            }
+            else {
+                this.startMs.set(min);
+                this.endMs.set(max);
+                this.lastEmitted = null;
+            }
+        });
+    }
+    /** Push current thumb state into the value model (live, during interaction). */
+    writeValue() {
+        const next = {
+            start: this.materialize(this.startMs()),
+            end: this.materialize(this.endMs()),
+        };
+        const prev = this.lastEmitted;
+        if (prev &&
+            prev.start.getTime() === next.start.getTime() &&
+            prev.end.getTime() === next.end.getTime()) {
+            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 ms = this.pixelToMs(event.clientX);
+        this.setThumb(thumb, ms);
+    }
+    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 ms = this.pixelToMs(event.clientX);
+        const thumb = Math.abs(ms - this.startMs()) <= Math.abs(ms - this.endMs()) ? 'start' : 'end';
+        this.setThumb(thumb, ms);
+        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.minMs() : this.startMs();
+                break;
+            case 'End':
+                target = thumb === 'end' ? this.maxMs() : this.endMs();
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (target !== null) {
+            this.setThumb(thumb, target);
+        }
+        else {
+            const current = thumb === 'start' ? this.startMs() : this.endMs();
+            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 -------------------------------------------------
+    setThumb(thumb, msRaw) {
+        const snapped = this.snap(this.clamp(msRaw));
+        let changed = false;
+        if (thumb === 'start') {
+            const next = Math.min(snapped, this.endMs());
+            if (next !== this.startMs()) {
+                this.startMs.set(next);
+                changed = true;
+            }
+        }
+        else {
+            const next = Math.max(snapped, this.startMs());
+            if (next !== this.endMs()) {
+                this.endMs.set(next);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.writeValue();
+    }
+    commit() {
+        if (this.lastEmitted) {
+            this.valueCommit.emit(this.lastEmitted);
+        }
+    }
+    clamp(ms) {
+        return Math.min(this.maxMs(), Math.max(this.minMs(), ms));
+    }
+    snap(ms) {
+        const min = this.minMs();
+        const max = this.maxMs();
+        const step = this.effectiveStep();
+        if (step <= 0 || min >= max)
+            return ms;
+        const offset = ms - min;
+        const snapped = min + Math.round(offset / step) * step;
+        if (snapped > max)
+            return max;
+        if (snapped < min)
+            return min;
+        return snapped;
+    }
+    toPercent(ms) {
+        const range = this.range();
+        if (range <= 0)
+            return 0;
+        return ((ms - this.minMs()) / range) * 100;
+    }
+    pixelToMs(clientX) {
+        const el = this.trackEl()?.nativeElement;
+        if (!el)
+            return this.minMs();
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this.minMs();
+        const ratio = (clientX - rect.left) / rect.width;
+        const clamped = Math.min(1, Math.max(0, ratio));
+        return this.minMs() + clamped * this.range();
+    }
+    /**
+     * Convert internal ms to a Date appropriate for the current mode.
+     * date mode normalizes time-of-day to that of `min`.
+     */
+    materialize(ms) {
+        if (this.mode() === 'date') {
+            const minDate = this.min();
+            const d = new Date(ms);
+            d.setHours(minDate.getHours(), minDate.getMinutes(), minDate.getSeconds(), minDate.getMilliseconds());
+            return d;
+        }
+        return new Date(ms);
+    }
+    // -- Formatting -------------------------------------------------------
+    formatMs(ms) {
+        const date = new Date(ms);
+        const override = this.format();
+        if (override)
+            return this.applyFormat(date, override);
+        switch (this.mode()) {
+            case 'time':
+                return this.effectiveStep() < MS_PER_MINUTE
+                    ? `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+                    : `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+            case 'date':
+                return new Intl.DateTimeFormat(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                }).format(date);
+            case 'datetime':
+                return `${new Intl.DateTimeFormat(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                }).format(date)}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+        }
+    }
+    /** Tiny formatter for common tokens: yyyy MM dd HH mm ss MMM d. */
+    applyFormat(date, fmt) {
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return fmt
+            .replace(/yyyy/g, String(date.getFullYear()))
+            .replace(/MMM/g, months[date.getMonth()])
+            .replace(/MM/g, pad(date.getMonth() + 1))
+            .replace(/dd/g, pad(date.getDate()))
+            .replace(/d/g, String(date.getDate()))
+            .replace(/HH/g, pad(date.getHours()))
+            .replace(/mm/g, pad(date.getMinutes()))
+            .replace(/ss/g, pad(date.getSeconds()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: RangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: RangeSliderComponent, isStandalone: true, selector: "ui-range-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, step: { classPropertyName: "step", publicName: "step", 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 }, format: { classPropertyName: "format", publicName: "format", 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-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"minMs()\"\n      [attr.aria-valuemax]=\"endMs()\"\n      [attr.aria-valuenow]=\"startMs()\"\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-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startMs()\"\n      [attr.aria-valuemax]=\"maxMs()\"\n      [attr.aria-valuenow]=\"endMs()\"\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-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-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}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-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-range-slider__thumb{transform:translate(-50%,-50%)}.ui-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-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-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-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-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-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-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: RangeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-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-range-slider__label\">{{ label() }}</label>\n  }\n\n  <div\n    #track\n    class=\"ui-range-slider__track\"\n    (pointerdown)=\"onTrackPointerDown($event)\"\n  >\n    <div class=\"ui-range-slider__fill\" [style.left]=\"fill.left\" [style.width]=\"fill.width\"></div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--start\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"start\"\n      [attr.aria-valuemin]=\"minMs()\"\n      [attr.aria-valuemax]=\"endMs()\"\n      [attr.aria-valuenow]=\"startMs()\"\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-range-slider__bubble\">{{ startLabel() }}</span>\n      }\n    </div>\n\n    <div\n      class=\"ui-range-slider__thumb ui-range-slider__thumb--end\"\n      role=\"slider\"\n      tabindex=\"0\"\n      data-thumb=\"end\"\n      [attr.aria-valuemin]=\"startMs()\"\n      [attr.aria-valuemax]=\"maxMs()\"\n      [attr.aria-valuenow]=\"endMs()\"\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-range-slider__bubble\">{{ endLabel() }}</span>\n      }\n    </div>\n  </div>\n\n  @if (rangeOn) {\n    <div class=\"ui-range-slider__range\">\n      <span>{{ startLabel() }}</span>\n      <span class=\"ui-range-slider__range-arrow\" aria-hidden=\"true\">\u2192</span>\n      <span>{{ endLabel() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.ui-range-slider{display:flex;flex-direction:column;gap:var(--ui-spacing-sm);user-select:none;-webkit-user-select:none}.ui-range-slider__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-range-slider__track{position:relative;width:100%;background:var(--ui-bg-tertiary);border-radius:var(--ui-radius-xl);cursor:pointer;touch-action:none}.ui-range-slider__fill{position:absolute;top:0;bottom:0;background:var(--ui-primary);border-radius:var(--ui-radius-xl);pointer-events:none}.ui-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}.ui-range-slider__thumb:hover:not([aria-disabled=true]){transform:translate(-50%,-50%) scale(1.1)}.ui-range-slider__thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-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-range-slider__thumb{transform:translate(-50%,-50%)}.ui-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-range-slider-bubble-in var(--ui-transition-fast) ease-out}.ui-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-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-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-range-slider__range-arrow{color:var(--ui-text-disabled)}.ui-range-slider--sm .ui-range-slider__track{height:4px}.ui-range-slider--sm .ui-range-slider__thumb{width:14px;height:14px}.ui-range-slider--md .ui-range-slider__track{height:6px}.ui-range-slider--md .ui-range-slider__thumb{width:18px;height:18px}.ui-range-slider--lg .ui-range-slider__track{height:8px}.ui-range-slider--lg .ui-range-slider__thumb{width:24px;height:24px}.ui-range-slider__track{margin-top:var(--ui-spacing-lg)}.ui-range-slider--disabled{opacity:.5}.ui-range-slider--disabled .ui-range-slider__track,.ui-range-slider--disabled .ui-range-slider__thumb{cursor:not-allowed}.ui-range-slider--disabled .ui-range-slider__thumb:hover,.ui-range-slider--disabled .ui-range-slider__thumb:active{transform:translate(-50%,-50%);box-shadow:var(--ui-shadow-sm)}@keyframes ui-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: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", 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 }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], bubbles: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbles", required: false }] }], showRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRange", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", 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 }] }] } });
+function pad(n) {
+    return n < 10 ? `0${n}` : String(n);
+}
+
 /** 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 });
@@ -6985,5 +7290,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, 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, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, 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 };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, 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, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, 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 };
 //# sourceMappingURL=m1z23r-ngx-ui.mjs.map