@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-slider.mjs

@@ -0,0 +1,514 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, model, contentChild, computed, signal, ElementRef, Renderer2, DestroyRef, viewChild, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DOWN_ARROW, LEFT_ARROW, UP_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import { MlvSignalFormControlBase, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import * as i1 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, MlvCompactComfortableDensity } from '@malva-ui/cdk/density';
+import { MlvRtlService, clamp } from '@malva-ui/cdk/utils';
+import { MLV_SLIDER_I18N } from '@malva-ui/i18n';
+
+/**
+ * Structural directive that provides custom slider tooltip text.
+ *
+ * @example
+ * ```html
+ * <mlv-slider tooltip>
+ *   <ng-template mlvSliderTooltipDef let-value>
+ *     {{ value }}%
+ *   </ng-template>
+ * </mlv-slider>
+ * ```
+ */
+class MlvSliderTooltipDef {
+    /** Template used to render the current thumb value. */
+    templateRef = inject((TemplateRef));
+    /** Type guard for `let-value`, `let-value="value"`, and `let-thumb="thumb"`. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSliderTooltipDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSliderTooltipDef, isStandalone: true, selector: "[mlvSliderTooltipDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSliderTooltipDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSliderTooltipDef]',
+                }]
+        }] });
+
+class MlvSlider extends MlvSignalFormControlBase {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_SLIDER_I18N);
+    /**
+     * Orientation of the slider.
+     * In `'vertical'` mode the track runs bottom-to-top, thumbs are positioned
+     * with `bottom`, and the host must have an explicit height set.
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Minimum value of the slider. */
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === 'number' ? value : 0) });
+    /** Maximum value of the slider. */
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === 'number' ? value : 100) });
+    /** Step increment between values. */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => value ?? 1 });
+    /** Whether to display tick marks at each step interval. */
+    showTicks = input(false, { ...(ngDevMode ? { debugName: "showTicks" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** When true, the slider operates in dual-thumb range mode. */
+    range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Shows the current value in a tooltip while a thumb is hovered, dragged,
+     * or keyboard-focused.
+     */
+    tooltip = input(false, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The selected scalar or range value used by all Angular forms APIs. */
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @protected Optional consumer template used to render tooltip text. */
+    _tooltipDef = contentChild(MlvSliderTooltipDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipDef" }] : /* istanbul ignore next */ []));
+    /** @private True when orientation is vertical. */
+    _isVertical = computed(() => this.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isVertical" }] : /* istanbul ignore next */ []));
+    /** @private Low (or sole) thumb value derived directly from the forms model. */
+    _lowValue = computed(() => {
+        const value = this.value();
+        return this._clamp(Array.isArray(value) ? value[0] : value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lowValue" }] : /* istanbul ignore next */ []));
+    /** @private High thumb value derived directly from the forms model. */
+    _highValue = computed(() => {
+        const value = this.value();
+        return this._clamp(Array.isArray(value) ? value[1] : this.max());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highValue" }] : /* istanbul ignore next */ []));
+    /** @protected Template context for the low or single-value thumb tooltip. */
+    _lowTooltipContext = computed(() => {
+        const value = this._lowValue();
+        return {
+            $implicit: value,
+            value,
+            thumb: this.range() ? 'min' : 'value',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lowTooltipContext" }] : /* istanbul ignore next */ []));
+    /** @protected Template context for the high thumb tooltip in range mode. */
+    _highTooltipContext = computed(() => {
+        const value = this._highValue();
+        return {
+            $implicit: value,
+            value,
+            thumb: 'max',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highTooltipContext" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The thumb currently being dragged: 'low', 'high', or null.
+     */
+    _activeDragThumb = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeDragThumb" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Raw drag position (0–100%) for the low thumb while dragging.
+     * Null when not dragging — thumb reverts to the snapped value's position.
+     */
+    _lowDragPercent = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lowDragPercent" }] : /* istanbul ignore next */ []));
+    _rtlService = inject(MlvRtlService);
+    /**
+     * @private Effective direction of this slider, tracking the global direction
+     * and any `[dir]` scope above the host. Mirrors pointer-to-value mapping.
+     */
+    _direction = this._rtlService.elementDirection(inject((ElementRef)));
+    /**
+     * @private Raw drag position (0–100%) for the high thumb while dragging.
+     * Null when not dragging — thumb reverts to the snapped value's position.
+     */
+    _highDragPercent = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highDragPercent" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Visual percentage position of the low thumb.
+     * Uses the raw drag position while dragging for a smooth feel;
+     * snaps back to the step-aligned position on pointer release.
+     */
+    _lowPercent = computed(() => {
+        const drag = this._lowDragPercent();
+        return drag !== null ? drag : this._valueToPercent(this._lowValue());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lowPercent" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Visual percentage position of the high thumb.
+     * Uses the raw drag position while dragging for a smooth feel;
+     * snaps back to the step-aligned position on pointer release.
+     */
+    _highPercent = computed(() => {
+        const drag = this._highDragPercent();
+        return drag !== null ? drag : this._valueToPercent(this._highValue());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_highPercent" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Computed percentage for the fill region start (0–100%).
+     * In single mode this is always 0; in range mode it tracks the low thumb visual position.
+     */
+    _fillStart = computed(() => {
+        if (!this.range())
+            return '0%';
+        return `${this._lowPercent()}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fillStart" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Computed percentage for the fill region end (0–100%).
+     * Tracks the visual (drag or snapped) position of the active thumb.
+     */
+    _fillEnd = computed(() => {
+        return `${this.range() ? this._highPercent() : this._lowPercent()}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fillEnd" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Array of tick positions (percentages) shown when showTicks is true.
+     */
+    _ticks = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const step = this.step();
+        if (step <= 0)
+            return [];
+        const ticks = [];
+        for (let v = min; v <= max; v += step) {
+            ticks.push(this._valueToPercent(v));
+        }
+        return ticks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ticks" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this._elementRef = inject(ElementRef);
+        this._renderer = inject(Renderer2);
+        this._destroyRef = inject(DestroyRef);
+    }
+    /** @private Host element ref for pointer-to-value calculation. */
+    _elementRef;
+    /** @private Renderer2 for SSR-safe + auto-cleanup window listeners during drag. */
+    _renderer;
+    /** @private DestroyRef so a destroy mid-drag releases the listeners. */
+    _destroyRef;
+    /**
+     * @private The `.mlv-slider__track` element — a static child of this
+     * component's own template, so it is resolved via a signal `viewChild` query
+     * (repo rule: no `querySelector` for own-template elements) rather than a DOM
+     * lookup on the host.
+     */
+    _trackRef = viewChild('track', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_trackRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Track bounding rect captured at pointerdown and reused for the whole
+     * drag, so `_pointerToPercent` does not force a `getBoundingClientRect` layout
+     * read on every pointermove. Dropped when the pointer ends or is cancelled.
+     */
+    _dragTrackRect = null;
+    // -------------------------------------------------------------------------
+    // Forms value
+    // -------------------------------------------------------------------------
+    /** Whether the control holds a clearable value — A slider always carries a numeric value. */
+    hasValue = computed(() => true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // -------------------------------------------------------------------------
+    // Keyboard handling (delegated from thumb elements)
+    // -------------------------------------------------------------------------
+    /**
+     * @protected Handles keydown events on the low thumb.
+     */
+    _onLowThumbKeydown(event) {
+        if (this.computedDisabled())
+            return;
+        const newValue = this._computeKeyValue(event, this._lowValue());
+        if (newValue !== null) {
+            event.preventDefault();
+            const clamped = this.range()
+                ? Math.min(newValue, this._highValue())
+                : newValue;
+            this._setLowValue(clamped);
+            this._emitChange();
+        }
+    }
+    /**
+     * @protected Handles keydown events on the high thumb (range mode only).
+     */
+    _onHighThumbKeydown(event) {
+        if (this.computedDisabled() || !this.range())
+            return;
+        const newValue = this._computeKeyValue(event, this._highValue());
+        if (newValue !== null) {
+            event.preventDefault();
+            const clamped = Math.max(newValue, this._lowValue());
+            this._setHighValue(clamped);
+            this._emitChange();
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Pointer / drag handling
+    // -------------------------------------------------------------------------
+    /**
+     * @protected Handles pointerdown events on the track area to begin thumb dragging.
+     */
+    _onTrackPointerDown(event) {
+        if (this.computedDisabled())
+            return;
+        // Cache the track rect once per drag so the per-move percent math (track
+        // click and every pointermove) avoids a repeated getBoundingClientRect
+        // layout read. Cleared on pointerup. The element itself comes from the
+        // `viewChild` query, not a DOM lookup.
+        this._dragTrackRect =
+            this._trackRef()?.nativeElement.getBoundingClientRect() ?? null;
+        const target = event.target;
+        const thumbElement = target instanceof Element
+            ? target.closest('.mlv-slider__thumb')
+            : null;
+        if (thumbElement && this._elementRef.nativeElement.contains(thumbElement)) {
+            const thumb = (thumbElement.dataset['thumb'] ?? 'low');
+            this._activeDragThumb.set(thumb);
+            thumbElement.setPointerCapture(event.pointerId);
+            this._attachPointerListeners(event.pointerId);
+            return;
+        }
+        // Click on track — jump the nearest thumb to that position
+        const value = this._pointerEventToValue(event);
+        if (!this.range()) {
+            this._setLowValue(value);
+            this._emitChange();
+            this._activeDragThumb.set('low');
+        }
+        else {
+            const lowDist = Math.abs(this._lowValue() - value);
+            const highDist = Math.abs(this._highValue() - value);
+            if (lowDist <= highDist) {
+                this._setLowValue(Math.min(value, this._highValue()));
+                this._activeDragThumb.set('low');
+            }
+            else {
+                this._setHighValue(Math.max(value, this._lowValue()));
+                this._activeDragThumb.set('high');
+            }
+            this._emitChange();
+        }
+        this._attachPointerListeners(event.pointerId);
+    }
+    /**
+     * @private Attaches pointermove/end listeners on the window for drag tracking.
+     * During drag the thumb follows the pointer freely (no step snapping) while the
+     * emitted value snaps to the nearest step on every move. On pointer release the
+     * raw drag position is cleared so the thumb animates to the snapped position.
+     */
+    _attachPointerListeners(pointerId) {
+        let release = null;
+        const onMove = (e) => {
+            if (e.pointerId !== pointerId)
+                return;
+            const rawPercent = this._pointerToPercent(e);
+            const rawValue = this.min() + (rawPercent / 100) * (this.max() - this.min());
+            const snappedValue = this._snap(this._clamp(rawValue));
+            const thumb = this._activeDragThumb();
+            if (thumb === 'low') {
+                const maxPercent = this.range() ? this._highPercent() : 100;
+                const clampedPercent = Math.min(rawPercent, maxPercent);
+                this._lowDragPercent.set(clampedPercent);
+                this._setLowValue(this.range()
+                    ? Math.min(snappedValue, this._highValue())
+                    : snappedValue);
+            }
+            else if (thumb === 'high') {
+                const minPercent = this._lowPercent();
+                const clampedPercent = Math.max(rawPercent, minPercent);
+                this._highDragPercent.set(clampedPercent);
+                this._setHighValue(Math.max(snappedValue, this._lowValue()));
+            }
+            this._emitChange();
+        };
+        const onEnd = (e) => {
+            if (e.pointerId !== pointerId)
+                return;
+            this._lowDragPercent.set(null);
+            this._highDragPercent.set(null);
+            this._activeDragThumb.set(null);
+            // Drop the cached track geometry so the next drag re-measures.
+            this._dragTrackRect = null;
+            this._markTouched();
+            release?.();
+            release = null;
+        };
+        const moveDispose = this._renderer.listen('window', 'pointermove', onMove);
+        const upDispose = this._renderer.listen('window', 'pointerup', onEnd);
+        const cancelDispose = this._renderer.listen('window', 'pointercancel', onEnd);
+        release = () => {
+            moveDispose();
+            upDispose();
+            cancelDispose();
+        };
+        // Guarantee cleanup if the component is destroyed mid-drag — prevents
+        // stale window listeners against a detached host.
+        this._destroyRef.onDestroy(() => release?.());
+    }
+    // -------------------------------------------------------------------------
+    // Private utilities
+    // -------------------------------------------------------------------------
+    /**
+     * @private Converts a keyboard event into a new value, or null if unhandled.
+     */
+    _computeKeyValue(event, currentValue) {
+        const min = this.min();
+        const max = this.max();
+        const step = this.step();
+        const pageStep = Math.max(step, (max - min) * 0.1);
+        switch (this._rtlService.normalizeArrowKey(event) ?? event.key) {
+            case RIGHT_ARROW:
+            case UP_ARROW:
+                return this._clamp(currentValue + step);
+            case LEFT_ARROW:
+            case DOWN_ARROW:
+                return this._clamp(currentValue - step);
+            case 'Home':
+                return min;
+            case 'End':
+                return max;
+            case 'PageUp':
+                return this._clamp(currentValue + pageStep);
+            case 'PageDown':
+                return this._clamp(currentValue - pageStep);
+            default:
+                return null;
+        }
+    }
+    /**
+     * @private Converts a pointer event position to a clamped percentage (0–100).
+     * Horizontal: left → 0%, right → 100%.
+     * Vertical: bottom → 0%, top → 100% (inverted Y axis).
+     * Does not snap — use this for free drag tracking.
+     */
+    _pointerToPercent(event) {
+        // Reuse the rect cached at pointerdown; fall back to a fresh measurement of
+        // the `viewChild` track element if reached outside a drag sequence.
+        const rect = this._dragTrackRect ??
+            this._trackRef()?.nativeElement.getBoundingClientRect() ??
+            null;
+        if (!rect)
+            return this._valueToPercent(this._lowValue());
+        if (this._isVertical()) {
+            return Math.min(100, Math.max(0, (1 - (event.clientY - rect.top) / rect.height) * 100));
+        }
+        // 0% sits at the inline-start edge, which is the track's right edge in RTL.
+        const offset = this._direction() === 'rtl'
+            ? rect.right - event.clientX
+            : event.clientX - rect.left;
+        return Math.min(100, Math.max(0, (offset / rect.width) * 100));
+    }
+    /**
+     * @private Converts a pointer event's X position to a clamped, snapped slider value.
+     * Used for track clicks (immediate snap) — not for drag moves.
+     */
+    _pointerEventToValue(event) {
+        const percent = this._pointerToPercent(event);
+        const rawValue = this.min() + (percent / 100) * (this.max() - this.min());
+        return this._snap(this._clamp(rawValue));
+    }
+    /**
+     * @private Converts a value to a percentage between 0 and 100.
+     */
+    _valueToPercent(value) {
+        const range = this.max() - this.min();
+        if (range === 0)
+            return 0;
+        return ((value - this.min()) / range) * 100;
+    }
+    /**
+     * @private Clamps a value to [min, max].
+     */
+    _clamp(value) {
+        return clamp(value, this.min(), this.max());
+    }
+    /**
+     * @private Snaps a value to the nearest step.
+     */
+    _snap(value) {
+        const step = this.step();
+        if (step <= 0)
+            return value;
+        const snapped = Math.round((value - this.min()) / step) * step + this.min();
+        return this._clamp(snapped);
+    }
+    /** @private Writes the low/sole thumb while preserving the range shape. */
+    _setLowValue(value) {
+        if (this.range()) {
+            this.value.set([value, this._highValue()]);
+        }
+        else {
+            this.value.set(value);
+        }
+    }
+    /** @private Writes the high thumb while preserving the current low value. */
+    _setHighValue(value) {
+        this.value.set([this._lowValue(), value]);
+    }
+    /**
+     * @private Writes the current value through the signal-forms model.
+     */
+    _emitChange() {
+        if (this.range()) {
+            this.value.set([this._lowValue(), this._highValue()]);
+        }
+        else {
+            this.value.set(this._lowValue());
+        }
+    }
+    /** @protected Marks the control touched when either thumb loses focus. */
+    _onThumbBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSlider, isStandalone: true, selector: "mlv-slider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", 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 }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "pointerdown": "_onTrackPointerDown($event)" }, properties: { "class.mlv-slider--disabled": "computedDisabled()", "class.mlv-slider--range": "range()", "class.mlv-slider--has-ticks": "showTicks()", "class.mlv-slider--vertical": "_isVertical()", "class.mlv-slider--dragging": "_activeDragThumb() !== null", "style.--mlv-slider-fill-start": "_fillStart()", "style.--mlv-slider-fill-end": "_fillEnd()" }, classAttribute: "mlv-slider" }, providers: [
+            {
+                provide: MLV_DENSITY_ELEMENT,
+                useValue: 'slider',
+            },
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvSlider),
+            },
+        ], queries: [{ propertyName: "_tooltipDef", first: true, predicate: MlvSliderTooltipDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.MlvCompactComfortableDensity, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<div class=\"mlv-slider__track\" #track>\n  <div class=\"mlv-slider__fill\"></div>\n\n  @if (showTicks()) {\n  <div class=\"mlv-slider__ticks\" aria-hidden=\"true\">\n    @for (tick of _ticks(); track tick) {\n    <span\n      class=\"mlv-slider__tick\"\n      [style.left]=\"!_isVertical() ? tick + '%' : null\"\n      [style.bottom]=\"_isVertical() ? tick + '%' : null\"\n    ></span>\n    }\n  </div>\n  }\n</div>\n\n<div\n  class=\"mlv-slider__thumb mlv-slider__thumb--low\"\n  [class.mlv-slider__thumb--dragging]=\"_activeDragThumb() === 'low'\"\n  role=\"slider\"\n  [attr.data-thumb]=\"'low'\"\n  [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n  [attr.aria-valuenow]=\"_lowValue()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"range() ? _highValue() : max()\"\n  [attr.aria-label]=\"\n    range() ? _i18n().minValue : ariaLabel() || label() || _i18n().value\n  \"\n  [attr.aria-disabled]=\"computedDisabled() || null\"\n  [attr.aria-orientation]=\"orientation()\"\n  [style.left]=\"!_isVertical() ? _lowPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _lowPercent() + '%' : null\"\n  (keydown)=\"_onLowThumbKeydown($event)\"\n  (focus)=\"setFocused(true)\"\n  (blur)=\"_onThumbBlur()\"\n></div>\n\n@if (tooltip()) {\n<span\n  class=\"mlv-slider__tooltip mlv-slider__tooltip--low\"\n  aria-hidden=\"true\"\n  [style.left]=\"!_isVertical() ? _lowPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _lowPercent() + '%' : null\"\n>\n  @if (_tooltipDef(); as tooltipDef) {\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipDef.templateRef\"\n    [ngTemplateOutletContext]=\"_lowTooltipContext()\"\n  />\n  } @else { {{ _lowValue() }} }\n</span>\n} @if (range()) {\n<div\n  class=\"mlv-slider__thumb mlv-slider__thumb--high\"\n  [class.mlv-slider__thumb--dragging]=\"_activeDragThumb() === 'high'\"\n  role=\"slider\"\n  [attr.data-thumb]=\"'high'\"\n  [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n  [attr.aria-valuenow]=\"_highValue()\"\n  [attr.aria-valuemin]=\"_lowValue()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-label]=\"_i18n().maxValue\"\n  [attr.aria-disabled]=\"computedDisabled() || null\"\n  [attr.aria-orientation]=\"orientation()\"\n  [style.left]=\"!_isVertical() ? _highPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _highPercent() + '%' : null\"\n  (keydown)=\"_onHighThumbKeydown($event)\"\n  (focus)=\"setFocused(true)\"\n  (blur)=\"_onThumbBlur()\"\n></div>\n\n@if (tooltip()) {\n<span\n  class=\"mlv-slider__tooltip mlv-slider__tooltip--high\"\n  aria-hidden=\"true\"\n  [style.left]=\"!_isVertical() ? _highPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _highPercent() + '%' : null\"\n>\n  @if (_tooltipDef(); as tooltipDef) {\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipDef.templateRef\"\n    [ngTemplateOutletContext]=\"_highTooltipContext()\"\n  />\n  } @else { {{ _highValue() }} }\n</span>\n} }\n", styles: ["@layer mlv.components{.mlv-slider{--mlv-slider-track-height: .25rem;--mlv-slider-thumb-size: 1.25rem;--mlv-slider-thumb-border-width: .125rem;--mlv-slider-tooltip-gap: .5rem;--mlv-slider-tooltip-background: var(--mlv-palette-neutral-950);--mlv-slider-tooltip-color: var(--mlv-text-primary-on-accent-1);position:relative;display:flex;align-items:center;width:100%;min-height:2.75rem;padding-block:.75rem;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}[class*=--compact] .mlv-slider:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider[class*=--compact]{--mlv-slider-track-height: .1875rem;--mlv-slider-thumb-size: 1rem;min-height:2rem;padding-block:.5rem}.mlv-slider__track{position:relative;width:100%;height:var(--mlv-slider-track-height);background-color:var(--mlv-border-normal, rgba(0, 0, 0, .16));border-radius:var(--mlv-radius-full);overflow:visible}.mlv-slider__fill{position:absolute;top:0;inset-inline-start:var(--mlv-slider-fill-start, 0%);width:calc(var(--mlv-slider-fill-end, 0%) - var(--mlv-slider-fill-start, 0%));height:100%;background-color:var(--mlv-background-accent-1);border-radius:var(--mlv-radius-full);pointer-events:none;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),width var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-slider--dragging .mlv-slider__fill{transition:none}.mlv-slider__ticks{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}.mlv-slider__tick{position:absolute;top:calc(-.25rem - var(--mlv-slider-track-height) / 2);transform:translate(-50%);width:.0625rem;height:.5rem;background-color:var(--mlv-border-normal, rgba(0, 0, 0, .24));border-radius:var(--mlv-radius-xs)}[class*=--compact] .mlv-slider__tick:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider__tick[class*=--compact]{height:.375rem}.mlv-slider__thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--mlv-slider-thumb-size);height:var(--mlv-slider-thumb-size);background-color:var(--mlv-background-accent-1);border:var(--mlv-slider-thumb-border-width) solid var(--mlv-background-base);border-radius:var(--mlv-radius-full);box-shadow:var(--mlv-shadow-raised);cursor:grab;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default);outline:none;z-index:1}.mlv-slider--dragging .mlv-slider__thumb{transition:transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-slider__thumb:hover{box-shadow:0 0 0 4px var(--mlv-muted-primary-border-1),var(--mlv-shadow-floating);transform:translate(-50%,-50%) scale(1.1)}.mlv-slider__thumb:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-slider__thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.95)}.mlv-slider__thumb:hover,.mlv-slider__thumb:focus-visible,.mlv-slider__thumb--dragging{z-index:2}.mlv-slider__tooltip{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;max-width:15rem;padding:var(--mlv-padding-xs);color:var(--mlv-slider-tooltip-color);background-color:var(--mlv-slider-tooltip-background);border-radius:var(--mlv-radius-tooltip);box-shadow:var(--mlv-shadow-floating);font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height);text-align:center;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:var(--mlv-z-tooltip);transform:translate(-50%,calc(-50% - var(--mlv-slider-thumb-size) / 2 - var(--mlv-slider-tooltip-gap))) scale(.96);transform-origin:center bottom;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear var(--mlv-duration-fast)}.mlv-slider__tooltip:after{position:absolute;top:100%;left:50%;width:0;height:0;border-top:.25rem solid var(--mlv-slider-tooltip-background);border-inline-end:.25rem solid transparent;border-inline-start:.25rem solid transparent;content:\"\";transform:translate(-50%)}.mlv-slider__thumb:hover+.mlv-slider__tooltip,.mlv-slider__thumb:focus-visible+.mlv-slider__tooltip,.mlv-slider__thumb--dragging+.mlv-slider__tooltip{opacity:1;visibility:visible;transform:translate(-50%,calc(-50% - var(--mlv-slider-thumb-size) / 2 - var(--mlv-slider-tooltip-gap))) scale(1);transition-delay:var(--mlv-duration-instant)}.mlv-slider--dragging .mlv-slider__tooltip{transition:opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear}.mlv-slider--disabled{opacity:var(--mlv-disabled-opacity, .56);cursor:not-allowed;pointer-events:none}.mlv-slider--disabled .mlv-slider__thumb{cursor:not-allowed}.mlv-slider--disabled .mlv-slider__tooltip{opacity:0;visibility:hidden}.mlv-slider--vertical{flex-direction:column;width:auto;min-width:2.75rem;height:100%;min-height:10rem;padding-block:0;padding-inline:.75rem}[class*=--compact] .mlv-slider--vertical:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider--vertical[class*=--compact]{min-width:2rem;padding-inline:.5rem}.mlv-slider--vertical .mlv-slider__track{width:var(--mlv-slider-track-height);height:100%}.mlv-slider--vertical .mlv-slider__fill{top:auto;left:0;bottom:var(--mlv-slider-fill-start, 0%);width:100%;height:calc(var(--mlv-slider-fill-end, 0%) - var(--mlv-slider-fill-start, 0%));transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),height var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-slider--vertical .mlv-slider__ticks{top:0;left:50%;width:0;height:100%}.mlv-slider--vertical .mlv-slider__tick{top:auto;left:calc(var(--mlv-slider-track-height) / 2 + .25rem);transform:translateY(50%);width:.5rem;height:.0625rem}.mlv-slider--vertical .mlv-slider__thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-slider--vertical .mlv-slider__thumb:hover{transform:translate(-50%,50%) scale(1.1)}.mlv-slider--vertical .mlv-slider__thumb:active{transform:translate(-50%,50%) scale(.95)}.mlv-slider--vertical .mlv-slider__tooltip{top:auto;left:50%;transform:translate(calc(var(--mlv-slider-thumb-size) / 2 + var(--mlv-slider-tooltip-gap)),50%) scale(.96);transform-origin:left center;transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear var(--mlv-duration-fast)}.mlv-slider--vertical .mlv-slider__tooltip:after{top:50%;inset-inline-end:100%;inset-inline-start:auto;border-top:.25rem solid transparent;border-inline-end:.25rem solid var(--mlv-slider-tooltip-background);border-bottom:.25rem solid transparent;border-inline-start:0;transform:translateY(-50%)}.mlv-slider--vertical .mlv-slider__thumb:hover+.mlv-slider__tooltip,.mlv-slider--vertical .mlv-slider__thumb:focus-visible+.mlv-slider__tooltip,.mlv-slider--vertical .mlv-slider__thumb--dragging+.mlv-slider__tooltip{transform:translate(calc(var(--mlv-slider-thumb-size) / 2 + var(--mlv-slider-tooltip-gap)),50%) scale(1)}.mlv-slider--vertical.mlv-slider--dragging .mlv-slider__fill{transition:none}.mlv-slider--vertical.mlv-slider--dragging .mlv-slider__thumb{transition:transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}@media(prefers-reduced-motion:reduce){.mlv-slider,.mlv-slider *,.mlv-slider:before,.mlv-slider:after,[class^=mlv-slider__],[class*=\" mlv-slider__\"],[class^=mlv-slider--],[class*=\" mlv-slider--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-slider', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: MlvCompactComfortableDensity,
+                            inputs: ['mlvDensity'],
+                        },
+                    ], providers: [
+                        {
+                            provide: MLV_DENSITY_ELEMENT,
+                            useValue: 'slider',
+                        },
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvSlider),
+                        },
+                    ], host: {
+                        class: 'mlv-slider',
+                        '[class.mlv-slider--disabled]': 'computedDisabled()',
+                        '[class.mlv-slider--range]': 'range()',
+                        '[class.mlv-slider--has-ticks]': 'showTicks()',
+                        '[class.mlv-slider--vertical]': '_isVertical()',
+                        '[class.mlv-slider--dragging]': '_activeDragThumb() !== null',
+                        '[style.--mlv-slider-fill-start]': '_fillStart()',
+                        '[style.--mlv-slider-fill-end]': '_fillEnd()',
+                        '(pointerdown)': '_onTrackPointerDown($event)',
+                    }, template: "<div class=\"mlv-slider__track\" #track>\n  <div class=\"mlv-slider__fill\"></div>\n\n  @if (showTicks()) {\n  <div class=\"mlv-slider__ticks\" aria-hidden=\"true\">\n    @for (tick of _ticks(); track tick) {\n    <span\n      class=\"mlv-slider__tick\"\n      [style.left]=\"!_isVertical() ? tick + '%' : null\"\n      [style.bottom]=\"_isVertical() ? tick + '%' : null\"\n    ></span>\n    }\n  </div>\n  }\n</div>\n\n<div\n  class=\"mlv-slider__thumb mlv-slider__thumb--low\"\n  [class.mlv-slider__thumb--dragging]=\"_activeDragThumb() === 'low'\"\n  role=\"slider\"\n  [attr.data-thumb]=\"'low'\"\n  [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n  [attr.aria-valuenow]=\"_lowValue()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"range() ? _highValue() : max()\"\n  [attr.aria-label]=\"\n    range() ? _i18n().minValue : ariaLabel() || label() || _i18n().value\n  \"\n  [attr.aria-disabled]=\"computedDisabled() || null\"\n  [attr.aria-orientation]=\"orientation()\"\n  [style.left]=\"!_isVertical() ? _lowPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _lowPercent() + '%' : null\"\n  (keydown)=\"_onLowThumbKeydown($event)\"\n  (focus)=\"setFocused(true)\"\n  (blur)=\"_onThumbBlur()\"\n></div>\n\n@if (tooltip()) {\n<span\n  class=\"mlv-slider__tooltip mlv-slider__tooltip--low\"\n  aria-hidden=\"true\"\n  [style.left]=\"!_isVertical() ? _lowPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _lowPercent() + '%' : null\"\n>\n  @if (_tooltipDef(); as tooltipDef) {\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipDef.templateRef\"\n    [ngTemplateOutletContext]=\"_lowTooltipContext()\"\n  />\n  } @else { {{ _lowValue() }} }\n</span>\n} @if (range()) {\n<div\n  class=\"mlv-slider__thumb mlv-slider__thumb--high\"\n  [class.mlv-slider__thumb--dragging]=\"_activeDragThumb() === 'high'\"\n  role=\"slider\"\n  [attr.data-thumb]=\"'high'\"\n  [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n  [attr.aria-valuenow]=\"_highValue()\"\n  [attr.aria-valuemin]=\"_lowValue()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-label]=\"_i18n().maxValue\"\n  [attr.aria-disabled]=\"computedDisabled() || null\"\n  [attr.aria-orientation]=\"orientation()\"\n  [style.left]=\"!_isVertical() ? _highPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _highPercent() + '%' : null\"\n  (keydown)=\"_onHighThumbKeydown($event)\"\n  (focus)=\"setFocused(true)\"\n  (blur)=\"_onThumbBlur()\"\n></div>\n\n@if (tooltip()) {\n<span\n  class=\"mlv-slider__tooltip mlv-slider__tooltip--high\"\n  aria-hidden=\"true\"\n  [style.left]=\"!_isVertical() ? _highPercent() + '%' : null\"\n  [style.bottom]=\"_isVertical() ? _highPercent() + '%' : null\"\n>\n  @if (_tooltipDef(); as tooltipDef) {\n  <ng-container\n    [ngTemplateOutlet]=\"tooltipDef.templateRef\"\n    [ngTemplateOutletContext]=\"_highTooltipContext()\"\n  />\n  } @else { {{ _highValue() }} }\n</span>\n} }\n", styles: ["@layer mlv.components{.mlv-slider{--mlv-slider-track-height: .25rem;--mlv-slider-thumb-size: 1.25rem;--mlv-slider-thumb-border-width: .125rem;--mlv-slider-tooltip-gap: .5rem;--mlv-slider-tooltip-background: var(--mlv-palette-neutral-950);--mlv-slider-tooltip-color: var(--mlv-text-primary-on-accent-1);position:relative;display:flex;align-items:center;width:100%;min-height:2.75rem;padding-block:.75rem;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}[class*=--compact] .mlv-slider:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider[class*=--compact]{--mlv-slider-track-height: .1875rem;--mlv-slider-thumb-size: 1rem;min-height:2rem;padding-block:.5rem}.mlv-slider__track{position:relative;width:100%;height:var(--mlv-slider-track-height);background-color:var(--mlv-border-normal, rgba(0, 0, 0, .16));border-radius:var(--mlv-radius-full);overflow:visible}.mlv-slider__fill{position:absolute;top:0;inset-inline-start:var(--mlv-slider-fill-start, 0%);width:calc(var(--mlv-slider-fill-end, 0%) - var(--mlv-slider-fill-start, 0%));height:100%;background-color:var(--mlv-background-accent-1);border-radius:var(--mlv-radius-full);pointer-events:none;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),width var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-slider--dragging .mlv-slider__fill{transition:none}.mlv-slider__ticks{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}.mlv-slider__tick{position:absolute;top:calc(-.25rem - var(--mlv-slider-track-height) / 2);transform:translate(-50%);width:.0625rem;height:.5rem;background-color:var(--mlv-border-normal, rgba(0, 0, 0, .24));border-radius:var(--mlv-radius-xs)}[class*=--compact] .mlv-slider__tick:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider__tick[class*=--compact]{height:.375rem}.mlv-slider__thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--mlv-slider-thumb-size);height:var(--mlv-slider-thumb-size);background-color:var(--mlv-background-accent-1);border:var(--mlv-slider-thumb-border-width) solid var(--mlv-background-base);border-radius:var(--mlv-radius-full);box-shadow:var(--mlv-shadow-raised);cursor:grab;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default);outline:none;z-index:1}.mlv-slider--dragging .mlv-slider__thumb{transition:transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-slider__thumb:hover{box-shadow:0 0 0 4px var(--mlv-muted-primary-border-1),var(--mlv-shadow-floating);transform:translate(-50%,-50%) scale(1.1)}.mlv-slider__thumb:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}.mlv-slider__thumb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.95)}.mlv-slider__thumb:hover,.mlv-slider__thumb:focus-visible,.mlv-slider__thumb--dragging{z-index:2}.mlv-slider__tooltip{position:absolute;top:50%;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;max-width:15rem;padding:var(--mlv-padding-xs);color:var(--mlv-slider-tooltip-color);background-color:var(--mlv-slider-tooltip-background);border-radius:var(--mlv-radius-tooltip);box-shadow:var(--mlv-shadow-floating);font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height);text-align:center;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;z-index:var(--mlv-z-tooltip);transform:translate(-50%,calc(-50% - var(--mlv-slider-thumb-size) / 2 - var(--mlv-slider-tooltip-gap))) scale(.96);transform-origin:center bottom;transition:left var(--mlv-duration-normal) var(--mlv-ease-out),opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear var(--mlv-duration-fast)}.mlv-slider__tooltip:after{position:absolute;top:100%;left:50%;width:0;height:0;border-top:.25rem solid var(--mlv-slider-tooltip-background);border-inline-end:.25rem solid transparent;border-inline-start:.25rem solid transparent;content:\"\";transform:translate(-50%)}.mlv-slider__thumb:hover+.mlv-slider__tooltip,.mlv-slider__thumb:focus-visible+.mlv-slider__tooltip,.mlv-slider__thumb--dragging+.mlv-slider__tooltip{opacity:1;visibility:visible;transform:translate(-50%,calc(-50% - var(--mlv-slider-thumb-size) / 2 - var(--mlv-slider-tooltip-gap))) scale(1);transition-delay:var(--mlv-duration-instant)}.mlv-slider--dragging .mlv-slider__tooltip{transition:opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear}.mlv-slider--disabled{opacity:var(--mlv-disabled-opacity, .56);cursor:not-allowed;pointer-events:none}.mlv-slider--disabled .mlv-slider__thumb{cursor:not-allowed}.mlv-slider--disabled .mlv-slider__tooltip{opacity:0;visibility:hidden}.mlv-slider--vertical{flex-direction:column;width:auto;min-width:2.75rem;height:100%;min-height:10rem;padding-block:0;padding-inline:.75rem}[class*=--compact] .mlv-slider--vertical:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-slider--vertical[class*=--compact]{min-width:2rem;padding-inline:.5rem}.mlv-slider--vertical .mlv-slider__track{width:var(--mlv-slider-track-height);height:100%}.mlv-slider--vertical .mlv-slider__fill{top:auto;left:0;bottom:var(--mlv-slider-fill-start, 0%);width:100%;height:calc(var(--mlv-slider-fill-end, 0%) - var(--mlv-slider-fill-start, 0%));transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),height var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-slider--vertical .mlv-slider__ticks{top:0;left:50%;width:0;height:100%}.mlv-slider--vertical .mlv-slider__tick{top:auto;left:calc(var(--mlv-slider-track-height) / 2 + .25rem);transform:translateY(50%);width:.5rem;height:.0625rem}.mlv-slider--vertical .mlv-slider__thumb{top:auto;left:50%;transform:translate(-50%,50%);transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-slider--vertical .mlv-slider__thumb:hover{transform:translate(-50%,50%) scale(1.1)}.mlv-slider--vertical .mlv-slider__thumb:active{transform:translate(-50%,50%) scale(.95)}.mlv-slider--vertical .mlv-slider__tooltip{top:auto;left:50%;transform:translate(calc(var(--mlv-slider-thumb-size) / 2 + var(--mlv-slider-tooltip-gap)),50%) scale(.96);transform-origin:left center;transition:bottom var(--mlv-duration-normal) var(--mlv-ease-out),opacity var(--mlv-duration-fast) var(--mlv-ease-out),transform var(--mlv-duration-fast) var(--mlv-ease-out),visibility var(--mlv-duration-instant) linear var(--mlv-duration-fast)}.mlv-slider--vertical .mlv-slider__tooltip:after{top:50%;inset-inline-end:100%;inset-inline-start:auto;border-top:.25rem solid transparent;border-inline-end:.25rem solid var(--mlv-slider-tooltip-background);border-bottom:.25rem solid transparent;border-inline-start:0;transform:translateY(-50%)}.mlv-slider--vertical .mlv-slider__thumb:hover+.mlv-slider__tooltip,.mlv-slider--vertical .mlv-slider__thumb:focus-visible+.mlv-slider__tooltip,.mlv-slider--vertical .mlv-slider__thumb--dragging+.mlv-slider__tooltip{transform:translate(calc(var(--mlv-slider-thumb-size) / 2 + var(--mlv-slider-tooltip-gap)),50%) scale(1)}.mlv-slider--vertical.mlv-slider--dragging .mlv-slider__fill{transition:none}.mlv-slider--vertical.mlv-slider--dragging .mlv-slider__thumb{transition:transform var(--mlv-duration-fast) var(--mlv-ease-default),box-shadow var(--mlv-duration-fast) var(--mlv-ease-default)}@media(prefers-reduced-motion:reduce){.mlv-slider,.mlv-slider *,.mlv-slider:before,.mlv-slider:after,[class^=mlv-slider__],[class*=\" mlv-slider__\"],[class^=mlv-slider--],[class*=\" mlv-slider--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", 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 }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _tooltipDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSliderTooltipDef), { isSignal: true }] }], _trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvSlider, MlvSliderTooltipDef };
+//# sourceMappingURL=malva-ui-core-slider.mjs.map