@scania/tegel 1.47.2 → 1.48.0

package/dist/components/tds-slider.js

@@ -1,545 +1 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$5 } from './p-f086ba26.js';
-import { d as defineCustomElement$4 } from './p-e62ed985.js';
-import { d as defineCustomElement$3 } from './p-5bb5f233.js';
-import { d as defineCustomElement$2 } from './p-4f672d4f.js';
-
-const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-slider-input-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px 11px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb:hover .tds-slider__value{display:block}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;background-color:var(--tds-slider-thumb-hover)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;background-color:var(--tds-slider-thumb-pressed)}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-thumb-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-disabled)}";
-const TdsSliderStyle0 = sliderCss;
-
-const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tdsChange = createEvent(this, "tdsChange", 6);
-        this.tdsInput = createEvent(this, "tdsInput", 6);
-        this.wrapperElement = null;
-        this.thumbElement = null;
-        this.thumbInnerElement = null;
-        this.trackElement = null;
-        this.trackFillElement = null;
-        this.thumbGrabbed = false;
-        this.thumbLeft = 0;
-        this.tickValues = [];
-        this.useControls = false;
-        this.useInput = false;
-        this.useSmall = false;
-        this.useSnapping = false;
-        this.supposedValueSlot = -1;
-        this.resizeObserverAdded = false;
-        this.initialValue = '0';
-        this.resetEventListenerAdded = false;
-        this.formElement = null;
-        this.ariaLiveElement = null;
-        this.resetToInitialValue = () => {
-            this.forceValueUpdate(this.initialValue);
-            this.reset();
-        };
-        this.label = '';
-        this.value = '0';
-        this.min = '0';
-        this.max = '100';
-        this.ticks = '0';
-        this.showTickNumbers = false;
-        this.tooltip = false;
-        this.disabled = false;
-        this.readOnly = false;
-        this.controls = false;
-        this.input = false;
-        this.step = '1';
-        this.name = '';
-        this.thumbSize = 'lg';
-        this.snap = false;
-        this.tdsAriaLabel = '';
-        this.sliderId = generateUniqueId();
-        this.tdsReadOnlyAriaLabel = '';
-    }
-    roundToStep(val) {
-        const stepNum = parseFloat(this.step);
-        if (!stepNum) {
-            return parseFloat(val.toFixed());
-        }
-        const rounded = Math.round(val / stepNum) * stepNum;
-        const precision = (stepNum.toString().split('.')[1] || '').length;
-        return parseFloat(rounded.toFixed(precision));
-    }
-    /** Public method to re-initialise the slider if some configuration props are changed */
-    async reset() {
-        this.componentWillLoad();
-        this.componentDidLoad();
-    }
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'ArrowLeft':
-            case 'ArrowDown':
-            case '-':
-                this.stepLeft(event);
-                this.announceValueChange();
-                break;
-            case 'ArrowRight':
-            case 'ArrowUp':
-            case '+':
-                this.stepRight(event);
-                this.announceValueChange();
-                break;
-            case 'Home':
-                this.setToMinValue();
-                this.announceValueChange();
-                break;
-            case 'End':
-                this.setToMaxValue();
-                this.announceValueChange();
-                break;
-        }
-    }
-    handleRelease(event) {
-        var _a, _b, _c;
-        if (!this.thumbGrabbed) {
-            const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
-            if (clickedOnTrack) {
-                this.thumbCore(event);
-                (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            return;
-        }
-        this.thumbGrabbed = false;
-        (_b = this.thumbInnerElement) === null || _b === void 0 ? void 0 : _b.classList.remove('pressed');
-        if (this.thumbElement) {
-            this.thumbElement.setAttribute('aria-grabbed', 'false');
-        }
-        this.updateValue(event);
-        (_c = this.trackElement) === null || _c === void 0 ? void 0 : _c.focus();
-    }
-    handleMove(event) {
-        if (!this.thumbGrabbed) {
-            return;
-        }
-        this.thumbCore(event);
-    }
-    handleValueUpdate(newValue) {
-        this.calculateThumbLeftFromValue(newValue);
-        this.value = newValue;
-        this.updateTrack();
-    }
-    setToMinValue() {
-        if (this.readOnly || this.disabled) {
-            return;
-        }
-        this.forceValueUpdate(this.min);
-    }
-    setToMaxValue() {
-        if (this.readOnly || this.disabled) {
-            return;
-        }
-        this.forceValueUpdate(this.max);
-    }
-    updateSupposedValueSlot(localLeft) {
-        const numTicks = parseInt(this.ticks);
-        const trackWidth = this.getTrackWidth();
-        const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
-        const snappedLocalLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
-        let thumbPositionPX = 0;
-        if (snappedLocalLeft >= 0 && snappedLocalLeft <= trackWidth) {
-            thumbPositionPX = snappedLocalLeft;
-        }
-        else if (snappedLocalLeft > trackWidth) {
-            thumbPositionPX = trackWidth;
-        }
-        else if (snappedLocalLeft < 0) {
-            thumbPositionPX = 0;
-        }
-        this.supposedValueSlot = Math.round(thumbPositionPX / distanceBetweenTicks);
-        return snappedLocalLeft;
-    }
-    thumbCore(event) {
-        var _a;
-        const numTicks = parseInt(this.ticks);
-        const trackRect = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!trackRect)
-            return;
-        let localLeft = 0;
-        if (event.type === 'mousemove' || event.type === 'mouseup') {
-            localLeft = event.clientX - trackRect.left;
-        }
-        else if (event.type === 'touchmove') {
-            localLeft = event.touches[0].clientX - trackRect.left;
-        }
-        else
-            console.warn('Slider component: Unsupported event!');
-        this.supposedValueSlot = -1;
-        if (this.useSnapping && numTicks > 0) {
-            localLeft = this.updateSupposedValueSlot(localLeft);
-        }
-        this.thumbLeft = this.constrainThumb(localLeft);
-        if (this.thumbElement) {
-            this.thumbElement.style.left = `${this.thumbLeft}px`;
-        }
-        this.updateValue(event);
-    }
-    updateTrack() {
-        const trackWidth = this.getTrackWidth();
-        const percentageFilled = (this.thumbLeft / trackWidth) * 100;
-        if (this.trackFillElement) {
-            this.trackFillElement.style.width = `${percentageFilled}%`;
-        }
-    }
-    announceValueChange() {
-        if (!this.ariaLiveElement)
-            return;
-        // Debounce announcements to prevent too many rapid announcements
-        clearTimeout(this.announcementDebounceTimeout);
-        this.announcementDebounceTimeout = setTimeout(() => {
-            if (!this.ariaLiveElement)
-                return;
-            this.ariaLiveElement.textContent = `${this.label ? this.label + ' ' : ''}${this.value} of ${this.max}`;
-        }, 50);
-    }
-    updateValue(event) {
-        const trackWidth = this.getTrackWidth();
-        const min = parseFloat(this.min);
-        const max = parseFloat(this.max);
-        // If snapping is enabled and a valid supposedValueSlot is available,
-        // snap the value to the closest tick. Use the snapped value to update
-        // the slider's thumb position and internal value.
-        if (this.useSnapping && this.supposedValueSlot >= 0) {
-            const snappedValue = this.tickValues[this.supposedValueSlot];
-            this.value = snappedValue.toString();
-            this.calculateThumbLeftFromValue(snappedValue);
-        }
-        else {
-            const percentage = this.thumbLeft / trackWidth;
-            const calculatedValue = min + percentage * (max - min);
-            this.value = this.roundToStep(calculatedValue).toString();
-        }
-        this.updateTrack();
-        // Update ARIA attributes
-        if (this.thumbElement) {
-            this.thumbElement.setAttribute('aria-valuenow', this.value);
-            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
-        }
-        this.tdsInput.emit({ value: this.value });
-        /* Emit event after user has finished dragging the thumb */
-        if (event.type === 'touchend' || event.type === 'mouseup') {
-            this.tdsChange.emit({ value: this.value });
-            this.announceValueChange();
-        }
-    }
-    forceValueUpdate(newValue) {
-        this.calculateThumbLeftFromValue(newValue);
-        this.value = newValue;
-        // Update ARIA attributes
-        if (this.thumbElement) {
-            this.thumbElement.setAttribute('aria-valuenow', this.value);
-            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
-        }
-        this.tdsChange.emit({ value: this.value });
-        this.updateTrack();
-        this.announceValueChange();
-    }
-    constrainThumb(x) {
-        const width = this.getTrackWidth();
-        if (x < 0) {
-            return 0;
-        }
-        if (x > width) {
-            return width;
-        }
-        return x;
-    }
-    getTrackWidth() {
-        if (!this.trackElement) {
-            return 0;
-        }
-        const trackRect = this.trackElement.getBoundingClientRect();
-        return trackRect.right - trackRect.left;
-    }
-    calculateThumbLeftFromValue(value) {
-        const initValue = value;
-        const trackWidth = this.getTrackWidth();
-        const normalizedValue = initValue - parseFloat(this.min);
-        const normalizedMax = parseFloat(this.max) - parseFloat(this.min);
-        const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
-        this.thumbLeft = calculatedLeft;
-        this.updateSupposedValueSlot(this.thumbLeft);
-        if (this.thumbElement) {
-            this.thumbElement.style.left = `${this.thumbLeft}px`;
-            this.thumbElement.setAttribute('aria-valuenow', this.value);
-        }
-    }
-    /** Updates the slider value based on the current input value */
-    updateSliderValueOnInputChange(event) {
-        const inputElement = event.target;
-        let newValue = parseFloat(inputElement.value);
-        // Check if the new value is different from the current value
-        if (newValue === parseFloat(this.value)) {
-            return; // Exit the function if the new value is the same as the current value
-        }
-        const minNum = parseFloat(this.min);
-        const maxNum = parseFloat(this.max);
-        if (newValue < minNum) {
-            newValue = minNum;
-        }
-        else if (newValue > maxNum) {
-            newValue = maxNum;
-        }
-        const rounded = this.roundToStep(newValue);
-        this.forceValueUpdate(rounded.toString());
-    }
-    /** Updates the slider value when using tds-text-field (reads value from host element) */
-    updateSliderValueFromTextField(event) {
-        const hostEl = event.target; // tds-text-field host element exposes a value prop
-        const raw = hostEl && typeof hostEl.value !== 'undefined' ? hostEl.value : '';
-        let newValue = parseFloat(raw);
-        if (Number.isNaN(newValue)) {
-            return;
-        }
-        const minNum = parseFloat(this.min);
-        const maxNum = parseFloat(this.max);
-        if (newValue < minNum) {
-            newValue = minNum;
-        }
-        else if (newValue > maxNum) {
-            newValue = maxNum;
-        }
-        const rounded = this.roundToStep(newValue);
-        this.forceValueUpdate(rounded.toString());
-    }
-    /** Updates the slider value based on the current input value when enter is pressed */
-    handleInputFieldEnterPress(event) {
-        event.stopPropagation();
-        if (event.key === 'Enter') {
-            this.updateSliderValueOnInputChange(event);
-            const inputElement = event.target;
-            inputElement.blur();
-        }
-    }
-    grabThumb() {
-        var _a;
-        if (this.readOnly) {
-            return;
-        }
-        this.thumbGrabbed = true;
-        (_a = this.thumbInnerElement) === null || _a === void 0 ? void 0 : _a.classList.add('pressed');
-        if (this.thumbElement) {
-            this.thumbElement.setAttribute('aria-grabbed', 'true');
-        }
-    }
-    calculateInputSizeFromMax() {
-        const input = this.host.querySelector('tds-text-field input[type="number"]');
-        if (input) {
-            if (this.readOnly) {
-                // explicit size to fit suffix icon
-                input.style.width = `${52 + this.max.length * 8}px`;
-            }
-            else {
-                input.setAttribute('size', `${this.max.length}`);
-            }
-        }
-    }
-    controlsStep(delta, event) {
-        if (this.readOnly || this.disabled) {
-            return;
-        }
-        const numTicks = parseInt(this.ticks);
-        /* if snapping is enabled, instead just increment or decrement the current "fixed" value from our ticknumber array */
-        if (this.useSnapping && numTicks > 0) {
-            const stepDir = delta > 0 ? 1 : -1;
-            this.supposedValueSlot += stepDir;
-            if (this.supposedValueSlot < 0) {
-                this.supposedValueSlot = 0;
-            }
-            else if (this.supposedValueSlot > numTicks + 1) {
-                this.supposedValueSlot = numTicks + 1;
-            }
-            this.updateValue(event);
-        }
-        else {
-            const trackWidth = this.getTrackWidth();
-            const percentage = this.thumbLeft / trackWidth;
-            let currentValue = parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min));
-            currentValue += delta;
-            currentValue = this.roundToStep(currentValue);
-            if (currentValue < parseFloat(this.min)) {
-                currentValue = parseFloat(this.min);
-            }
-            else if (currentValue > parseFloat(this.max)) {
-                currentValue = parseFloat(this.max);
-            }
-            this.value = `${currentValue}`;
-            this.forceValueUpdate(this.value);
-        }
-    }
-    stepLeft(event) {
-        this.controlsStep(-parseFloat(this.step), event);
-    }
-    stepRight(event) {
-        this.controlsStep(parseFloat(this.step), event);
-    }
-    componentWillLoad() {
-        const numTicks = parseInt(this.ticks);
-        if (numTicks > 0) {
-            this.tickValues = [parseFloat(this.min)];
-            const interval = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
-            const precision = (parseFloat(this.step).toString().split('.')[1] || '').length;
-            for (let i = 1; i <= numTicks; i++) {
-                const raw = parseFloat(this.min) + interval * i;
-                this.tickValues.push(parseFloat(raw.toFixed(precision)));
-            }
-            this.tickValues.push(parseFloat(this.max));
-        }
-        this.useInput = false;
-        this.useControls = false;
-        if (this.controls) {
-            this.useControls = true;
-        }
-        else if (this.input) {
-            this.useInput = true;
-        }
-        this.useSmall = this.thumbSize === 'sm';
-        this.useSnapping = this.snap;
-        const min = parseFloat(this.min);
-        const max = parseFloat(this.max);
-        if (min > max) {
-            console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
-            this.disabled = true;
-        }
-    }
-    componentDidLoad() {
-        this.calculateInputSizeFromMax();
-        if (!this.resizeObserverAdded) {
-            this.resizeObserverAdded = true;
-            const resizeObserver = new ResizeObserver(() => {
-                this.calculateThumbLeftFromValue(this.value);
-                this.updateTrack();
-            });
-            if (this.wrapperElement)
-                resizeObserver.observe(this.wrapperElement);
-        }
-        this.calculateThumbLeftFromValue(this.value);
-        this.updateTrack();
-        // Only set the initial value once:
-        if (!this.initialValue) {
-            this.initialValue = this.value;
-        }
-        // Set initial aria attributes
-        if (this.thumbElement) {
-            this.thumbElement.setAttribute('aria-valuenow', this.value);
-            this.thumbElement.setAttribute('aria-valuetext', `${this.value} of ${this.max}`);
-            // Ensure the thumb can receive focus via keyboard
-            this.thumbElement.tabIndex = this.disabled ? -1 : 0;
-        }
-    }
-    componentDidRender() {
-        // Only add the event listener once:
-        if (!this.resetEventListenerAdded) {
-            this.formElement = this.host.closest('form');
-            if (this.formElement) {
-                this.formElement.addEventListener('reset', this.resetToInitialValue);
-                this.resetEventListenerAdded = true;
-            }
-        }
-    }
-    connectedCallback() {
-        if (this.readOnly && !this.tdsReadOnlyAriaLabel) {
-            console.warn('tds-slider: tdsAriaLabel is reccomended when readonly is true');
-        }
-        if (this.resetEventListenerAdded && this.formElement) {
-            this.formElement.removeEventListener('reset', this.resetToInitialValue);
-            this.resetEventListenerAdded = false;
-        }
-    }
-    render() {
-        const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '1d089e5942bf7e4872b68bc46a269e975a4957a7', class: {
-                'tds-slider-wrapper': true,
-                'read-only': this.readOnly,
-            } }, h("input", { key: 'cf47a9ec5545aa0dd064b4e900578204ec9865c9', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '1867645432d81580de1cb345ad68e55f9c004c28', class: "sr-only", "aria-live": "assertive", ref: (el) => {
-                this.ariaLiveElement = el;
-            } }), h("div", { key: '39c628693700a11cda5f9536c6cfc8d4fcad70b6', class: {
-                'tds-slider': true,
-                'disabled': this.disabled,
-                'tds-slider-small': this.useSmall,
-            }, ref: (el) => {
-                this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '8e0a61a0a9c872eda41f0d38efd9056cdf34906e', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '04a9887058c3f4ff2a6cd86a0e351b581becba74', class: "tds-slider__input-values" }, h("div", { key: 'eefa61151c058767d3293bad2ecd0e9878aa3b16', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '241854ca030c62361240e98b112f7ec490cf6570', class: "tds-slider__controls" }, h("div", { key: '9ee83bb2be85b0813abf53d593059c3f8867175b', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '80351eb5648c3032cc6356c8494c7fdc38a105a0', name: "minus", size: "16px" })))), h("div", { key: '5abdde18e7e8131b9b3f85d18cbbcc5583d18a52', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '364212a676b02719c87cce1135b11aa295753f46', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'ae1e63e6d45760ca582814ed1e72c3d8db43ef44', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'f3be603d4b0c9e30988265361d6b2c9f8b550483', class: "tds-slider__track", ref: (el) => {
-                this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
-                if (this.thumbElement) {
-                    this.thumbElement.focus();
-                }
-            } }, h("div", { key: 'cd786e1d47f5ab9a3f4b824f00849fda01064915', class: "tds-slider__track-fill", ref: (el) => {
-                this.trackFillElement = el;
-            } }), h("div", { key: '36be5f7f9bb51d138e4a2b5e66dd9116c14260f8', class: "tds-slider__thumb", ref: (el) => {
-                this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '0ccf5661d2ed49474040b964f3c31c9144effdc1', class: "tds-slider__value" }, this.value, h("svg", { key: 'c93653b56ab7759af24ed4ca9c32af758d51266d', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f02dd0b4b9274dc9ea36aeb30059aed4bd81007f', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '688f3d350bb7175d08b017e804edac1ddde08ee6', class: "tds-slider__thumb-inner", ref: (el) => {
-                this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '3f85a89df94fe531b1e9a3aa052cae465493aab0', class: "tds-slider__input-values" }, h("div", { key: 'd6f72ceb11a9305485712fed72831257ba3e47ce', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'd694e8f0bab9e97be10720bcef2f7d218a997103', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '50e55ae9e12d7bac3b1bee5132130b57db6082de', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '328e507a5ff8c40d01b1eb5769914a07dceb436c', class: "tds-slider__controls" }, h("div", { key: 'f43b7c31a4e5c38c650a24e6b622b84e32e358c2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '707af22bfa42a1e9212199d372edf46db26eead1', name: "plus", size: "16px" })))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "value": ["handleValueUpdate"]
-    }; }
-    static get style() { return TdsSliderStyle0; }
-}, [0, "tds-slider", {
-        "label": [1],
-        "value": [1025],
-        "min": [1],
-        "max": [1],
-        "ticks": [1],
-        "showTickNumbers": [4, "show-tick-numbers"],
-        "tooltip": [4],
-        "disabled": [4],
-        "readOnly": [4, "read-only"],
-        "controls": [4],
-        "input": [4],
-        "step": [1],
-        "name": [1],
-        "thumbSize": [1, "thumb-size"],
-        "snap": [4],
-        "tdsAriaLabel": [1, "tds-aria-label"],
-        "sliderId": [1, "slider-id"],
-        "tdsReadOnlyAriaLabel": [1, "tds-read-only-aria-label"],
-        "reset": [64]
-    }, [[0, "keydown", "handleKeydown"], [9, "mouseup", "handleRelease"], [9, "touchend", "handleRelease"], [9, "mousemove", "handleMove"], [9, "touchmove", "handleMove"]], {
-        "value": ["handleValueUpdate"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tds-slider", "tds-icon", "tds-popover-core", "tds-text-field", "tds-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tds-slider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TdsSlider$1);
-            }
-            break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "tds-popover-core":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "tds-text-field":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "tds-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const TdsSlider = TdsSlider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsSlider, defineCustomElement };
+import{t as s,p as t,H as e,c as i,h as d}from"./index.js";import{g as r}from"./p-Cn4f8w1e.js";import{d as l}from"./p-C0fx1H4h.js";import{d as a}from"./p-BrDlXJ4P.js";import{d as o}from"./p-9AbeYlK8.js";import{d as n}from"./p-DC6RGvDS.js";const h=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.tdsChange=i(this,"tdsChange",6),this.tdsInput=i(this,"tdsInput",6),this.label="",this.value="0",this.min="0",this.max="100",this.ticks="0",this.showTickNumbers=!1,this.tooltip=!1,this.disabled=!1,this.readOnly=!1,this.controls=!1,this.input=!1,this.step="1",this.name="",this.thumbSize="lg",this.snap=!1,this.tdsAriaLabel="",this.sliderId=r(),this.tdsReadOnlyAriaLabel="",this.wrapperElement=null,this.thumbElement=null,this.thumbInnerElement=null,this.trackElement=null,this.trackFillElement=null,this.thumbGrabbed=!1,this.thumbLeft=0,this.tickValues=[],this.useControls=!1,this.useInput=!1,this.useSmall=!1,this.useSnapping=!1,this.supposedValueSlot=-1,this.resizeObserverAdded=!1,this.initialValue="0",this.resetEventListenerAdded=!1,this.formElement=null,this.ariaLiveElement=null,this.resetToInitialValue=()=>{this.forceValueUpdate(this.initialValue),this.reset()}}roundToStep(s){const t=parseFloat(this.step);return parseFloat(t?(Math.round(s/t)*t).toFixed(((""+t).split(".")[1]||"").length):s.toFixed())}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s),this.announceValueChange();break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s),this.announceValueChange();break;case"Home":this.setToMinValue(),this.announceValueChange();break;case"End":this.setToMaxValue(),this.announceValueChange()}}handleRelease(s){var t,e,i;this.thumbGrabbed?(this.thumbGrabbed=!1,null===(e=this.thumbInnerElement)||void 0===e||e.classList.remove("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","false"),this.updateValue(s),null===(i=this.trackElement)||void 0===i||i.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),null===(t=this.trackElement)||void 0===t||t.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}setToMinValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.min)}setToMaxValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.max)}updateSupposedValueSlot(s){const t=parseInt(this.ticks),e=this.getTrackWidth(),i=Math.round(e/(t+1)),d=Math.round(s/i)*i;let r=0;return d>=0&&d<=e?r=d:d>e?r=e:d<0&&(r=0),this.supposedValueSlot=Math.round(r/i),d}thumbCore(s){var t;const e=parseInt(this.ticks),i=null===(t=this.trackElement)||void 0===t?void 0:t.getBoundingClientRect();if(!i)return;let d=0;"mousemove"===s.type||"mouseup"===s.type?d=s.clientX-i.left:"touchmove"===s.type?d=s.touches[0].clientX-i.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&e>0&&(d=this.updateSupposedValueSlot(d)),this.thumbLeft=this.constrainThumb(d),this.thumbElement&&(this.thumbElement.style.left=this.thumbLeft+"px"),this.updateValue(s)}updateTrack(){const s=this.getTrackWidth();this.trackFillElement&&(this.trackFillElement.style.width=this.thumbLeft/s*100+"%")}announceValueChange(){this.ariaLiveElement&&(clearTimeout(this.announcementDebounceTimeout),this.announcementDebounceTimeout=setTimeout((()=>{this.ariaLiveElement&&(this.ariaLiveElement.textContent=`${this.label?this.label+" ":""}${this.value} of ${this.max}`)}),50))}updateValue(s){const t=this.getTrackWidth(),e=parseFloat(this.min),i=parseFloat(this.max);if(this.useSnapping&&this.supposedValueSlot>=0){const s=this.tickValues[this.supposedValueSlot];this.value=""+s,this.calculateThumbLeftFromValue(s)}else this.value=""+this.roundToStep(e+this.thumbLeft/t*(i-e));this.updateTrack(),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||(this.tdsChange.emit({value:this.value}),this.announceValueChange())}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsChange.emit({value:this.value}),this.updateTrack(),this.announceValueChange()}constrainThumb(s){const t=this.getTrackWidth();return s<0?0:s>t?t:s}getTrackWidth(){if(!this.trackElement)return 0;const s=this.trackElement.getBoundingClientRect();return s.right-s.left}calculateThumbLeftFromValue(s){const t=s,e=this.getTrackWidth();this.thumbLeft=(t-parseFloat(this.min))/(parseFloat(this.max)-parseFloat(this.min))*e,this.updateSupposedValueSlot(this.thumbLeft),this.thumbElement&&(this.thumbElement.style.left=this.thumbLeft+"px",this.thumbElement.setAttribute("aria-valuenow",this.value))}updateSliderValueOnInputChange(s){let t=parseFloat(s.target.value);if(t===parseFloat(this.value))return;const e=parseFloat(this.min),i=parseFloat(this.max);t<e?t=e:t>i&&(t=i);const d=this.roundToStep(t);this.forceValueUpdate(""+d)}updateSliderValueFromTextField(s){const t=s.target;let e=parseFloat(t&&void 0!==t.value?t.value:"");if(Number.isNaN(e))return;const i=parseFloat(this.min),d=parseFloat(this.max);e<i?e=i:e>d&&(e=d);const r=this.roundToStep(e);this.forceValueUpdate(""+r)}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){var s;this.readOnly||(this.thumbGrabbed=!0,null===(s=this.thumbInnerElement)||void 0===s||s.classList.add("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","true"))}calculateInputSizeFromMax(){const s=this.host.querySelector('tds-text-field input[type="number"]');s&&(this.readOnly?s.style.width=52+8*this.max.length+"px":s.setAttribute("size",""+this.max.length))}controlsStep(s,t){if(this.readOnly||this.disabled)return;const e=parseInt(this.ticks);if(this.useSnapping&&e>0)this.supposedValueSlot+=s>0?1:-1,this.supposedValueSlot<0?this.supposedValueSlot=0:this.supposedValueSlot>e+1&&(this.supposedValueSlot=e+1),this.updateValue(t);else{const t=this.getTrackWidth(),e=this.thumbLeft/t;let i=parseFloat(this.min)+e*(parseFloat(this.max)-parseFloat(this.min));i+=s,i=this.roundToStep(i),i<parseFloat(this.min)?i=parseFloat(this.min):i>parseFloat(this.max)&&(i=parseFloat(this.max)),this.value=""+i,this.forceValueUpdate(this.value)}}stepLeft(s){this.controlsStep(-parseFloat(this.step),s)}stepRight(s){this.controlsStep(parseFloat(this.step),s)}componentWillLoad(){const s=parseInt(this.ticks);if(s>0){this.tickValues=[parseFloat(this.min)];const t=(parseFloat(this.max)-parseFloat(this.min))/(s+1),e=((""+parseFloat(this.step)).split(".")[1]||"").length;for(let i=1;i<=s;i++)this.tickValues.push(parseFloat((parseFloat(this.min)+t*i).toFixed(e)));this.tickValues.push(parseFloat(this.max))}this.useInput=!1,this.useControls=!1,this.controls?this.useControls=!0:this.input&&(this.useInput=!0),this.useSmall="sm"===this.thumbSize,this.useSnapping=this.snap,parseFloat(this.min)>parseFloat(this.max)&&(console.warn("min-prop must have a higher value than max-prop for the component to work correctly."),this.disabled=!0)}componentDidLoad(){if(this.calculateInputSizeFromMax(),!this.resizeObserverAdded){this.resizeObserverAdded=!0;const s=new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()}));this.wrapperElement&&s.observe(this.wrapperElement)}this.calculateThumbLeftFromValue(this.value),this.updateTrack(),this.initialValue||(this.initialValue=this.value),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`),this.thumbElement.tabIndex=this.disabled?-1:0)}componentDidRender(){this.resetEventListenerAdded||(this.formElement=this.host.closest("form"),this.formElement&&(this.formElement.addEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!0))}connectedCallback(){this.readOnly&&!this.tdsReadOnlyAriaLabel&&console.warn("tds-slider: tdsAriaLabel is reccomended when readonly is true"),this.resetEventListenerAdded&&this.formElement&&(this.formElement.removeEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!1)}render(){const s=this.readOnly?this.tdsReadOnlyAriaLabel:this.label||this.tdsAriaLabel;return d("div",{key:"1d089e5942bf7e4872b68bc46a269e975a4957a7",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},d("input",{key:"cf47a9ec5545aa0dd064b4e900578204ec9865c9",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled}),d("div",{key:"1867645432d81580de1cb345ad68e55f9c004c28",class:"sr-only","aria-live":"assertive",ref:s=>{this.ariaLiveElement=s}}),d("div",{key:"39c628693700a11cda5f9536c6cfc8d4fcad70b6",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s},"aria-disabled":this.disabled?"true":"false"},d("label",{key:"8e0a61a0a9c872eda41f0d38efd9056cdf34906e",id:this.sliderId+"-label",class:{offset:this.showTickNumbers}},this.label),this.useInput&&d("div",{key:"04a9887058c3f4ff2a6cd86a0e351b581becba74",class:"tds-slider__input-values"},d("div",{key:"eefa61151c058767d3293bad2ecd0e9878aa3b16",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&d("div",{key:"241854ca030c62361240e98b112f7ec490cf6570",class:"tds-slider__controls"},d("div",{key:"9ee83bb2be85b0813abf53d593059c3f8867175b",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s),role:"button","aria-label":"Decrease value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"80351eb5648c3032cc6356c8494c7fdc38a105a0",name:"minus",size:"16px"}))),d("div",{key:"5abdde18e7e8131b9b3f85d18cbbcc5583d18a52",class:"tds-slider-inner",tabIndex:-1},this.tickValues.length>0&&d("div",{key:"364212a676b02719c87cce1135b11aa295753f46",class:"tds-slider__value-dividers-wrapper"},d("div",{key:"ae1e63e6d45760ca582814ed1e72c3d8db43ef44",class:"tds-slider__value-dividers"},this.tickValues.map((s=>d("div",{class:"tds-slider__value-divider"},this.showTickNumbers&&d("span",null,s)))))),d("div",{key:"f3be603d4b0c9e30988265361d6b2c9f8b550483",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0",role:"presentation",onFocus:()=>{this.thumbElement&&this.thumbElement.focus()}},d("div",{key:"cd786e1d47f5ab9a3f4b824f00849fda01064915",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),d("div",{key:"36be5f7f9bb51d138e4a2b5e66dd9116c14260f8",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb(),role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":`${this.value} of ${this.max}`,"aria-labelledby":this.sliderId+"-label","aria-grabbed":this.thumbGrabbed?"true":"false","aria-label":s,tabindex:this.disabled?"-1":"0"},this.tooltip&&d("div",{key:"0ccf5661d2ed49474040b964f3c31c9144effdc1",class:"tds-slider__value"},this.value,d("svg",{key:"c93653b56ab7759af24ed4ca9c32af758d51266d",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},d("path",{key:"f02dd0b4b9274dc9ea36aeb30059aed4bd81007f",d:"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z",fill:"currentColor"}))),d("div",{key:"688f3d350bb7175d08b017e804edac1ddde08ee6",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&d("div",{key:"3f85a89df94fe531b1e9a3aa052cae465493aab0",class:"tds-slider__input-values"},d("div",{key:"d6f72ceb11a9305485712fed72831257ba3e47ce",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),d("div",{key:"d694e8f0bab9e97be10720bcef2f7d218a997103",class:"tds-slider__input-field-wrapper"},d("tds-text-field",{key:"50e55ae9e12d7bac3b1bee5132130b57db6082de",noMinWidth:!0,size:"sm",type:"number",value:this.value,min:this.min,max:this.max,readOnly:this.readOnly,disabled:this.disabled,onTdsChange:s=>console.log(s),tdsAriaLabel:this.readOnly?this.tdsReadOnlyAriaLabel:void 0,onTdsBlur:s=>this.updateSliderValueFromTextField(s),onKeyDown:s=>this.handleInputFieldEnterPress(s)}))),this.useControls&&d("div",{key:"328e507a5ff8c40d01b1eb5769914a07dceb436c",class:"tds-slider__controls"},d("div",{key:"f43b7c31a4e5c38c650a24e6b622b84e32e358c2",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s),role:"button","aria-label":"Increase value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"707af22bfa42a1e9212199d372edf46db26eead1",name:"plus",size:"16px"})))))}get host(){return this}static get watchers(){return{value:[{handleValueUpdate:0}]}}static get style(){return'tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-slider-input-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px 11px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb:hover .tds-slider__value{display:block}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;background-color:var(--tds-slider-thumb-hover)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;background-color:var(--tds-slider-thumb-pressed)}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-thumb-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-disabled)}'}},[0,"tds-slider",{label:[1],value:[1025],min:[1],max:[1],ticks:[1],showTickNumbers:[4,"show-tick-numbers"],tooltip:[4],disabled:[4],readOnly:[4,"read-only"],controls:[4],input:[4],step:[1],name:[1],thumbSize:[1,"thumb-size"],snap:[4],tdsAriaLabel:[1,"tds-aria-label"],sliderId:[1,"slider-id"],tdsReadOnlyAriaLabel:[1,"tds-read-only-aria-label"],reset:[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{value:[{handleValueUpdate:0}]}]);function c(){"undefined"!=typeof customElements&&["tds-slider","tds-icon","tds-popover-core","tds-text-field","tds-tooltip"].forEach((t=>{switch(t){case"tds-slider":customElements.get(s(t))||customElements.define(s(t),h);break;case"tds-icon":customElements.get(s(t))||l();break;case"tds-popover-core":customElements.get(s(t))||a();break;case"tds-text-field":customElements.get(s(t))||o();break;case"tds-tooltip":customElements.get(s(t))||n()}}))}c();const u=h,p=c;export{u as TdsSlider,p as defineCustomElement}