@telesign/boreal-web-components 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/cjs/bds-slider.cjs.entry.js

@@ -0,0 +1,655 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var internals = require('./internals-D8x7GMfR.js');
+
+/**
+ * Available tooltip types for the slider component.
+ * Used to control the visibility of the tooltip.
+ */
+const SLIDER_TOOLTIP = {
+    NEVER: 'never',
+    FOCUS: 'focus',
+};
+/**
+ * Available slider types for the slider component.
+ * Used to control the behavior of the slider.
+ */
+const SLIDER_TYPE = {
+    SINGLE: 'single',
+    RANGE: 'range',
+};
+
+/**
+ * Parses any valid `values` input into a clean `number[]`.
+ * This is the single source of truth for value normalization.
+ *
+ * Handles:
+ * - `number[]` → `[10, 50, 80]` (passthrough, filtered for NaN)
+ * - `"[10, 50, 80]"` → `[10, 50, 80]`
+ * - anything malformed → `[this.min]` as safe fallback
+ */
+function parseValues(raw, fallback = [0]) {
+    if (Array.isArray(raw)) {
+        const result = raw.map(Number).filter(n => !isNaN(n));
+        return result.length > 0 ? result : fallback;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        const arr = Array.isArray(parsed) ? parsed : [parsed];
+        const result = arr.map(Number).filter(n => !isNaN(n));
+        return result.length > 0 ? result : fallback;
+    }
+    catch {
+        const n = Number(raw);
+        return isNaN(n) ? fallback : [n];
+    }
+}
+/**
+ * Serialize the value for the form: a single number → "10", multiple → "10,20,30"
+ * FormData does not support arrays natively, so we use CSV.
+ */
+function serializeFormValue(values) {
+    return values.join(',');
+}
+function resolveValues(raw, min, max, type) {
+    const parsed = parseValues(raw, [Number(min)]);
+    if (type === SLIDER_TYPE.RANGE) {
+        if (parsed.length >= 2) {
+            return [parsed[0] ?? Number(min), parsed[1] ?? Number(max)];
+        }
+        return [parsed[0] ?? Number(min), Number(max)];
+    }
+    return [parsed[0] ?? Number(min)];
+}
+
+class SliderService {
+    constructor(options) {
+        this.options = options;
+    }
+    /**
+     * Clamps a value between min and max.
+     */
+    clamp(value) {
+        return Math.min(Math.max(value, this.options.min), this.options.max);
+    }
+    /**
+     * Rounds a value to the nearest step.
+     */
+    snapToStep(value) {
+        const stepped = Math.round((value - this.options.min) / this.options.step) * this.options.step + this.options.min;
+        return this.clamp(stepped);
+    }
+    /**
+     * Applies collision prevention for range mode.
+     * Ensures handles never overlap — always at least 1 step apart.
+     */
+    applyCollision(values, changedIndex) {
+        const result = [...values];
+        const margin = this.options.step;
+        if (this.options.type !== SLIDER_TYPE.RANGE || result.length < 2)
+            return result;
+        if (changedIndex === 0) {
+            // Min handle cannot exceed max handle - margin
+            const maxVal = result[1] ?? this.options.max;
+            result[0] = Math.min(result[0] ?? this.options.min, maxVal - margin);
+        }
+        else {
+            // Max handle cannot go below min handle + margin
+            const minVal = result[0] ?? this.options.min;
+            result[1] = Math.max(result[1] ?? this.options.max, minVal + margin);
+        }
+        return result;
+    }
+    /**
+     * Calculates the percentage position of a value along the track.
+     */
+    toPercent(value) {
+        const range = this.options.max - this.options.min;
+        if (range === 0)
+            return 0;
+        return ((value - this.options.min) / range) * 100;
+    }
+    /**
+     * Returns connect segments for the track.
+     * single: [left=0, width=percent of value]
+     * range:  [left=percent of min, width=percent of (max - min)]
+     */
+    getConnectSegment(values) {
+        if (this.options.type === SLIDER_TYPE.SINGLE) {
+            return {
+                left: 0,
+                width: this.toPercent(values[0] ?? this.options.min),
+            };
+        }
+        const val0 = values[0] ?? this.options.min;
+        const val1 = values[1] ?? this.options.max;
+        return {
+            left: this.toPercent(val0),
+            width: this.toPercent(val1 - val0 + this.options.min),
+        };
+    }
+    /**
+     * Returns pip positions as percentages, excluding min and max.
+     */
+    getPipPositions() {
+        const { min, max, step } = this.options;
+        const positions = [];
+        const total = (max - min) / step;
+        for (let i = 1; i < total; i++) {
+            const value = min + i * step;
+            positions.push(this.toPercent(value));
+        }
+        return positions;
+    }
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param value - The value of the slider at the given clientX position.
+     * @param trackWidth - The width of the track element.
+     * @param thumbSize - The size of the thumb element.
+     * @returns The position of the thumb in pixels.
+     */
+    getThumbCSSPosition(value, trackWidth, thumbSize) {
+        const percent = this.toPercent(value) / 100;
+        const usableWidth = trackWidth - thumbSize;
+        return percent * usableWidth + thumbSize / 2;
+    }
+}
+
+class SliderDOMController {
+    /**
+     * Adds the necessary classes to show the tooltip when a handle is focused or active.
+     * This is used in both focus and active states to ensure the tooltip remains visible.
+     * @param inputEl - The input element to add the states to.
+     * @param blockClass - The block class of the slider.
+     */
+    static addTooltipsStates(inputEl, blockClass) {
+        if (inputEl === undefined)
+            return;
+        inputEl.classList.add(`${blockClass}__tooltip--visible`, `${blockClass}__tooltip--active`);
+    }
+    /**
+     * Removes the necessary classes to hide the tooltip when a handle is blurred or inactive.
+     * @param inputEl - The input element to remove the states from.
+     * @param blockClass - The block class of the slider.
+     */
+    static removeTooltipsStates(inputEl, blockClass) {
+        if (inputEl === undefined)
+            return;
+        inputEl.classList.remove(`${blockClass}__tooltip--visible`, `${blockClass}__tooltip--active`);
+    }
+    /**
+     * Syncs the tooltips with the given values and inputs.
+     * @param values - The values to sync the tooltips with.
+     * @param inputsEl - The inputs to sync the tooltips with.
+     */
+    static syncTooltips(values, inputsEl) {
+        values.forEach((value, index) => {
+            const input = inputsEl[index];
+            if (input === undefined)
+                return;
+            input.value = String(value);
+            input.setAttribute('value', String(value));
+            input.setAttribute('aria-valuenow', String(value));
+        });
+    }
+    /**
+     * Moves the connect element to the given percentage position.
+     * @param connectEl - The connect element to move.
+     * @param segment - The percentage position to move the connect element to.
+     */
+    static moveConnect(connectEl, segment) {
+        connectEl.style.left = `${segment.left}%`;
+        connectEl.style.width = `${segment.width}%`;
+    }
+    /**
+     * Returns the CSS position of the thumb in pixels based on the track and percent.
+     * @param percent - The percentage of the track that the thumb should be positioned at.
+     * @returns The position of the thumb in pixels.
+     */
+    static getThumbCSSPosition(percent) {
+        const thumbSize = 'var(--handle-size, 16px)';
+        return `calc(${percent}% + (${thumbSize} / 2) - (${percent} * ${thumbSize} / 100))`;
+    }
+    static updateInputValue(inputEl, value) {
+        inputEl.value = String(value);
+        inputEl.setAttribute('value', String(value));
+        inputEl.setAttribute('aria-valuenow', String(value));
+    }
+}
+
+const bdsSliderCss = () => `@charset "UTF-8";.bds-slider{display:block;width:100%;--handle-size:16px}.bds-slider--range .bds-slider__input{pointer-events:none}.bds-slider--tooltip{margin-top:var(--boreal-spacing-xl)}.bds-slider--tooltip.bds-slider--label{margin-top:var(--boreal-spacing-ml)}.bds-slider--disabled .bds-slider__tooltip{display:none}.bds-slider--disabled .bds-slider__wrapper{cursor:auto}.bds-slider--disabled .bds-slider__connect{background:var(--boreal-ui-primary-light)}.bds-slider__label{margin-bottom:var(--boreal-spacing-3xs)}.bds-slider__wrapper{position:relative;width:100%;height:var(--handle-size);overflow:visible;cursor:pointer}.bds-slider__track-base{position:absolute;left:0;right:0;top:50%;height:var(--boreal-spacing-2xs);-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--boreal-base-light);border-radius:var(--boreal-radius-full);pointer-events:none;z-index:1}.bds-slider__connect{position:absolute;top:50%;height:4px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--boreal-ui-primary-base);border-radius:var(--boreal-radius-full);pointer-events:none;z-index:2}.bds-slider__input{position:absolute;left:0;top:50%;width:100%;height:var(--handle-size);-webkit-transform:translateY(-50%);transform:translateY(-50%);margin:0;padding:0;background:transparent;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;pointer-events:none;z-index:5}.bds-slider__input::-webkit-slider-runnable-track{height:var(--handle-size);background:transparent;border:none;appearance:none;-webkit-appearance:none}.bds-slider__input::-webkit-slider-thumb{width:var(--handle-size);height:var(--handle-size);margin-top:0;border-radius:var(--boreal-radius-full);background:var(--boreal-ui-inverse);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs);cursor:-webkit-grab;cursor:grab;pointer-events:auto;appearance:none;-webkit-appearance:none}.bds-slider__input::-moz-range-track{height:var(--handle-size);background:transparent;border:none}.bds-slider__input::-moz-range-thumb{width:var(--handle-size);height:var(--handle-size);border-radius:var(--boreal-radius-full);background:var(--boreal-ui-inverse);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);box-shadow:var(--boreal-depth-box-shadow-xs);cursor:grab;pointer-events:auto}.bds-slider__input:focus-visible::-webkit-slider-thumb,.bds-slider__input:active::-webkit-slider-thumb{-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-slider__input:focus-visible::-webkit-slider-thumb .bds-slider__tooltip--active,.bds-slider__input:active::-webkit-slider-thumb .bds-slider__tooltip--active{-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-slider__input:focus-visible::-moz-range-thumb,.bds-slider__input:active::-moz-range-thumb{box-shadow:var(--boreal-depth-box-shadow-active)}.bds-slider__input:focus-visible::-moz-range-thumb .bds-slider__tooltip--active,.bds-slider__input:active::-moz-range-thumb .bds-slider__tooltip--active{box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-slider__input:active::-webkit-slider-thumb{cursor:-webkit-grabbing;cursor:grabbing}.bds-slider__input:active::-moz-range-thumb{cursor:grabbing}.bds-slider__input:disabled{pointer-events:none}.bds-slider__input:disabled.bds-slider__connect{background:var(--boreal-ui-disabled)}.bds-slider__input:disabled::-webkit-slider-thumb{background:var(--boreal-ui-disabled);border-color:var(--boreal-base-light);-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.bds-slider__input:disabled::-moz-range-thumb{background:var(--boreal-ui-disabled);border-color:var(--boreal-base-light);box-shadow:none;cursor:not-allowed}.bds-slider__pips{position:absolute;left:0;right:0;top:50%;height:var(--boreal-spacing-2xs);-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;z-index:3}.bds-slider__pip{position:absolute;top:0;width:var(--boreal-spacing-3xs);height:100%;background:var(--boreal-ui-inverse);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.bds-slider__limits{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--boreal-spacing-3xs)}.bds-slider__tooltip{position:absolute;bottom:calc(100% + 10px);-webkit-transform:translateX(-50%);transform:translateX(-50%);color:var(--boreal-text-default);background:var(--boreal-ui-inverse);border-radius:var(--boreal-radius-xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-2xs);font-size:var(--boreal-typography-font-size-xs);font-family:var(--boreal-typography-font-family-primary);white-space:nowrap;cursor:auto;pointer-events:fill;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-slider__tooltip--active{-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-slider__tooltip--never{opacity:0}.bds-slider__tooltip--focus{opacity:0;-webkit-transition:opacity 0.15s ease;transition:opacity 0.15s ease}.bds-slider__tooltip--focus.bds-slider__tooltip--visible{opacity:1}`;
+
+const BdsSlider = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.bdsClick = index.createEvent(this, "bdsClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.blockClass = 'bds-slider';
+        /** Active input elements, one per handle */
+        this.inputEls = [];
+        /** Active tooltip elements, one per handle */
+        this.tooltipEls = [];
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Minimum selectable value. Defaults to `0`. */
+        this.min = 0;
+        /** Maximum selectable value. Defaults to `100`. */
+        this.max = 100;
+        /** Slider type that defines the slider behavior. Defaults to `single`. */
+        this.type = SLIDER_TYPE.SINGLE;
+        /** Label for the slider. Defaults to `""`. */
+        this.label = '';
+        /**
+         * Step size for each increment/decrement.
+         * Must be a positive number. Defaults to `1`.
+         */
+        this.step = 1;
+        /**
+         * Shows the min and max values of the slider.
+         * Defaults to `false`.
+         */
+        this.showLimits = false;
+        /**
+         * Current value(s) of the slider.
+         * Accepts `number`, `number[]`, or a JSON string for HTML vanilla usage.
+         * - Single handle: `50` or `"50"`
+         * - Multi-handle:  `[10, 50, 80]` or `"[10, 50, 80]"`
+         * - Defaults to `0`.
+         */
+        this.value = [0];
+        /** Disables the slider, preventing all user interaction. Defaults to `false`. */
+        this.disabled = false;
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /**
+         * JSON string array of handle values that should be individually disabled.
+         * Each number must match a value present in the `value` prop.
+         * Accepts `number`, `number[]`, or JSON string: `"[5, 30]"`.
+         * Defaults to `"[]"`.
+         */
+        this.disabledHandlers = '[]';
+        /**
+         * When `true`, renders discrete tick marks along the track
+         * at every step position between `min` and `max`.
+         * Defaults to `false`.
+         */
+        this.discrete = false;
+        /**
+         * Controls tooltip visibility on each handle.
+         * - `"never"`  — tooltip is hidden.
+         * - `"focus"`  — tooltip appears only when the handle is active/focused.
+         * Defa ults to `"focus"`.
+         */
+        this.tooltip = SLIDER_TOOLTIP.FOCUS;
+        // ---------------------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------------------
+        /** Internal mirror of `disabled`, kept in sync via `@Watch`. */
+        this.isDisabled = false;
+        /** Internal mirror of `discrete`, kept in sync via `@Watch`. */
+        this.isDiscrete = false;
+        /**
+         * Internal mirror of `values` normalized to `number[]`.
+         * All internal logic reads from here; never from `values` directly.
+         * Updated via `parseValues()` whenever `values` prop changes.
+         */
+        this.internalValues = [0];
+        this.handleClick = (event) => {
+            const target = event.target;
+            this.bdsClick.emit({ target, value: [...this.internalValues] });
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    onDisabledChange(next) {
+        this.isDisabled = next;
+        this.syncDOMUpdates();
+    }
+    onDisabledHandlersChange() {
+        this.syncDOMUpdates();
+    }
+    onValueChange(next) {
+        this.internalValues = this.resolveValues(next);
+        this.syncDOMUpdates();
+    }
+    onConfigChange() {
+        this.isDiscrete = this.discrete;
+        this.internalValues = this.resolveValues(this.value);
+        this.buildAdapter();
+        this.syncDOMUpdates();
+    }
+    onRangeChange() {
+        this.buildAdapter();
+        this.syncDOMUpdates();
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        const initial = this.resolveValues(this.value);
+        this.updateValues(initial, false);
+        this.syncDOMUpdates();
+        this.emitChange(initial);
+    }
+    formStateRestoreCallback(state, _mode) {
+        if (typeof state !== 'string')
+            return;
+        const parsed = state
+            .split(',')
+            .map(value => parseFloat(value))
+            .filter(value => !Number.isNaN(value));
+        if (parsed.length === 0)
+            return;
+        this.updateValues(parsed, false);
+        this.syncDOMUpdates();
+        internals.setFormValue(this.internals, state);
+    }
+    syncFormValue() {
+        internals.setFormValue(this.internals, serializeFormValue(this.internalValues));
+    }
+    // ---------------------------------------------------------------------------
+    // Public methods
+    // ---------------------------------------------------------------------------
+    /**
+     * Returns the current value(s) of the slider.
+     * - Single-handle → `number`
+     * - Multi-handle  → `number[]`
+     */
+    async getValues() {
+        return [...this.internalValues];
+    }
+    /**
+     * Programmatically sets the slider value(s).
+     * @param next - A single `number` or an array of `number[]` matching the number of handles.
+     */
+    async setValues(next) {
+        const parsed = this.resolveValues(next);
+        this.updateValues(parsed, false);
+        this.syncDOMUpdates();
+        this.syncFormValue();
+        this.emitChange(parsed);
+    }
+    // ---------------------------------------------------------------------------
+    // Private — slider lifecycle
+    // ---------------------------------------------------------------------------
+    buildAdapter() {
+        this.service = new SliderService({
+            min: Number(this.min),
+            max: Number(this.max),
+            step: Number(this.step),
+            type: this.type,
+            value: this.internalValues,
+            disabledHandlers: parseValues(this.disabledHandlers, []),
+            discrete: this.isDiscrete,
+            disabled: this.isDisabled,
+            name: String(this.name ?? ''),
+        });
+    }
+    syncDOMUpdates() {
+        this.syncInputsToValues();
+        this.updateProgress();
+        this.syncTooltips();
+    }
+    // ---------------------------------------------------------------------------
+    // Private — helpers
+    // ---------------------------------------------------------------------------
+    handleInputEvent(handleIndex, event) {
+        const input = event?.target;
+        const targetInput = input ?? this.inputEls[handleIndex];
+        if (targetInput === undefined)
+            return;
+        let value = this.service.snapToStep(parseFloat(targetInput.value));
+        const nextValues = [...this.internalValues];
+        nextValues[handleIndex] = value;
+        const corrected = this.service.applyCollision(nextValues, handleIndex);
+        value = corrected[handleIndex] ?? value;
+        this.internalValues = corrected;
+        SliderDOMController.updateInputValue(targetInput, value);
+        this.updateProgress();
+        this.syncTooltip(handleIndex, value);
+        this.syncFormValue();
+    }
+    handleChangeEvent(handleIndex, event) {
+        this.handleInputEvent(handleIndex, event);
+        if (this.isDisabled)
+            return;
+        this.emitChange([...this.internalValues]);
+    }
+    onHandleFocus(handleIndex) {
+        SliderDOMController.addTooltipsStates(this.tooltipEls[handleIndex], this.blockClass);
+    }
+    onHandleBlur(handleIndex) {
+        SliderDOMController.removeTooltipsStates(this.tooltipEls[handleIndex], this.blockClass);
+    }
+    onHandleInactive(handleIndex) {
+        const input = this.inputEls[handleIndex];
+        SliderDOMController.removeTooltipsStates(input, this.blockClass);
+        input.blur();
+    }
+    syncInputsToValues() {
+        SliderDOMController.syncTooltips(this.internalValues, this.inputEls);
+    }
+    updateProgress() {
+        if (this.connectEl === undefined || this.service === undefined)
+            return;
+        const segment = this.service.getConnectSegment(this.internalValues);
+        SliderDOMController.moveConnect(this.connectEl, segment);
+    }
+    syncTooltip(handleIndex, value) {
+        const tooltip = this.tooltipEls[handleIndex];
+        if (tooltip === undefined)
+            return;
+        tooltip.textContent = String(value);
+        tooltip.style.left = `${this.getThumbPosition(value)}px`;
+    }
+    syncTooltips() {
+        this.internalValues.forEach((value, index) => {
+            this.syncTooltip(index, value);
+        });
+    }
+    resolveValues(raw) {
+        const service = this.service;
+        return resolveValues(raw, this.min, this.max, this.type).map(value => service.clamp(value));
+    }
+    updateValues(next, shouldEmit = true) {
+        this.internalValues = next;
+        if (shouldEmit) {
+            this.emitChange(next);
+        }
+    }
+    emitChange(values) {
+        if (this.isDisabled)
+            return;
+        const payload = { value: values };
+        this.bdsChange.emit(payload);
+        this.valueChange.emit(values);
+        this.syncFormValue();
+    }
+    isHandleDisabled(value) {
+        const disabledValues = parseValues(this.disabledHandlers, []);
+        return this.isDisabled || disabledValues.includes(value);
+    }
+    getPipPositions() {
+        if (this.service === undefined)
+            return [];
+        return this.service.getPipPositions();
+    }
+    /**
+     * Returns the CSS modifier class map for the slider component.
+     *
+     * Includes visual state modifiers such as disabled,
+     * discrete mode, and tooltip behavior.
+     */
+    get classMap() {
+        const blockClass = 'bds-slider';
+        return {
+            [blockClass]: true,
+            [`${blockClass}--disabled`]: this.isDisabled,
+            [`${blockClass}--discrete`]: this.isDiscrete,
+            [`${blockClass}--label`]: Boolean(this.label.trim()),
+            [`${blockClass}--tooltip`]: Boolean(this.tooltip) && this.tooltip !== SLIDER_TOOLTIP.NEVER && this.isDisabled === false,
+            [`${blockClass}--tooltip-never`]: this.tooltip === SLIDER_TOOLTIP.NEVER,
+            [`${blockClass}--tooltip-focus`]: this.tooltip === SLIDER_TOOLTIP.FOCUS,
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Private — Render helpers
+    // ---------------------------------------------------------------------------
+    getThumbPosition(value) {
+        if (this.trackEl === undefined || this.service === undefined)
+            return 0;
+        const trackWidth = this.trackEl.getBoundingClientRect().width;
+        const thumbSize = parseFloat(getComputedStyle(this.el).getPropertyValue('--handle-size')) || 16;
+        return this.service.getThumbCSSPosition(value, trackWidth, thumbSize);
+    }
+    getThumbCSSPosition(percent) {
+        return SliderDOMController.getThumbCSSPosition(percent);
+    }
+    renderInput(handleIndex, value) {
+        const isDisabled = this.isHandleDisabled(value);
+        return (index.h("input", { class: `${this.blockClass}__input`, type: "range", min: this.min, max: this.max, step: this.step, value: value, disabled: isDisabled, "data-handle": handleIndex, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": value, "aria-disabled": isDisabled ? 'true' : undefined, "aria-describedby": `bds-slider-tooltip-${handleIndex}`, onInput: event => this.handleInputEvent(handleIndex, event), onChange: event => this.handleChangeEvent(handleIndex, event), onFocus: () => this.onHandleFocus(handleIndex), onBlur: () => this.onHandleBlur(handleIndex), onPointerUp: () => this.onHandleInactive(handleIndex), ref: el => {
+                if (el !== undefined) {
+                    this.inputEls[handleIndex] = el;
+                }
+            } }));
+    }
+    renderMinMax() {
+        if (this.showLimits === false)
+            return null;
+        return (index.h("div", { class: `${this.blockClass}__limits` }, index.h("bds-typography", { variant: "helper" }, this.min), index.h("bds-typography", { variant: "helper" }, this.max)));
+    }
+    handleTrackClick(event) {
+        if (this.isDisabled || this.trackEl === undefined)
+            return;
+        const target = event.target;
+        if (target.classList.contains(`${this.blockClass}__input`))
+            return;
+        const rect = this.trackEl.getBoundingClientRect();
+        const percent = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
+        const rawValue = Number(this.min) + percent * (Number(this.max) - Number(this.min));
+        const value = this.service.snapToStep(rawValue);
+        const nextValues = [...this.internalValues];
+        if (this.type === SLIDER_TYPE.SINGLE) {
+            if (this.isHandleDisabled(nextValues[0]))
+                return;
+            nextValues[0] = value;
+            this.internalValues = nextValues;
+        }
+        else {
+            const [minValue, maxValue] = nextValues;
+            const distanceToMin = Math.abs(value - minValue);
+            const distanceToMax = Math.abs(value - maxValue);
+            const targetHandle = distanceToMin <= distanceToMax ? 0 : 1;
+            if (this.isHandleDisabled(nextValues[targetHandle]))
+                return;
+            nextValues[targetHandle] = value;
+            this.internalValues = this.service.applyCollision(nextValues, targetHandle);
+        }
+        this.syncDOMUpdates();
+        this.emitChange([...this.internalValues]);
+    }
+    renderTooltip(handleIndex, value) {
+        if (this.tooltip === SLIDER_TOOLTIP.NEVER)
+            return null;
+        return (index.h("div", { id: `bds-slider-tooltip-${handleIndex}`, class: {
+                [`${this.blockClass}__tooltip`]: true,
+                [`${this.blockClass}__tooltip--${this.tooltip}`]: true,
+            }, role: "tooltip", onClick: event => {
+                event.stopPropagation();
+            }, style: {
+                left: `${this.service?.toPercent(value) ?? 0}%`,
+            }, ref: el => {
+                if (el !== undefined) {
+                    this.tooltipEls[handleIndex] = el;
+                }
+            } }, value));
+    }
+    renderPips() {
+        if (!this.isDiscrete)
+            return null;
+        return (index.h("div", { class: `${this.blockClass}__pips` }, this.getPipPositions().map((percent, index$1) => (index.h("div", { key: `pip-${index$1}`, class: `${this.blockClass}__pip`, style: { left: this.getThumbCSSPosition(percent) } })))));
+    }
+    renderLabel() {
+        if (this.label.trim() === '' || this.label === undefined)
+            return null;
+        return (index.h("bds-typography", { class: `${this.blockClass}__label`, htmlFor: this.el.id, variant: "label" }, this.label));
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+        this.isDiscrete = this.discrete;
+        this.buildAdapter();
+        this.internalValues = this.resolveValues(this.value);
+    }
+    componentDidLoad() {
+        this.syncDOMUpdates();
+    }
+    componentDidUpdate() {
+        this.syncDOMUpdates();
+    }
+    disconnectedCallback() {
+        this.inputEls = [];
+        this.tooltipEls = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    render() {
+        return (index.h(index.Host, { key: 'd883f67c2dfc80f8b97f2d7394b99ad6c30798fa', class: this.classMap, "aria-disabled": this.isDisabled ? 'true' : undefined, onClick: this.handleClick }, this.renderLabel(), index.h("div", { key: '2704c76fbc751029ca89519950dfb90c3294d5e7', class: `${this.blockClass}__wrapper`, onClick: event => this.handleTrackClick(event) }, index.h("div", { key: 'db67ea023a4f200069e68e02281539378e9e39db', class: `${this.blockClass}__track-base`, ref: el => {
+                if (el !== undefined)
+                    this.trackEl = el;
+            } }), index.h("div", { key: '02163060bb531de138aae3ad1a4e7f221e7c127f', class: `${this.blockClass}__connect`, ref: el => {
+                if (el !== undefined)
+                    this.connectEl = el;
+            } }), this.renderPips(), this.internalValues.map((value, index) => this.renderInput(index, value)), this.internalValues.map((value, index) => this.renderTooltip(index, value))), this.renderMinMax()));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "disabledHandlers": [{
+                "onDisabledHandlersChange": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }],
+        "type": [{
+                "onConfigChange": 0
+            }],
+        "discrete": [{
+                "onConfigChange": 0
+            }],
+        "min": [{
+                "onRangeChange": 0
+            }],
+        "max": [{
+                "onRangeChange": 0
+            }],
+        "step": [{
+                "onRangeChange": 0
+            }]
+    }; }
+};
+BdsSlider.style = bdsSliderCss();
+
+exports.bds_slider = BdsSlider;