@scania/tegel
Version:
Tegel Design System
488 lines (483 loc) • 30.6 kB
JavaScript
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$2 } from './p-b390ece5.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-wrapper:focus-within{outline:2px solid var(--tds-blue-400);outline-offset:2px;border-radius:var(--tds-spacing-element-4)}.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__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 input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-inputfield-number-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button{appearance:none;margin:0}.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;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 .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;opacity:0.08}.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;opacity:0.16 !important}.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:default}.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.resetEventListenerAdded = false;
this.ariaLiveElement = null;
this.announcementDebounceTimeout = 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) {
if (!this.thumbGrabbed) {
const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
if (clickedOnTrack) {
this.thumbCore(event);
this.trackElement.focus();
}
return;
}
this.thumbGrabbed = false;
this.thumbInnerElement.classList.remove('pressed');
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-grabbed', 'false');
}
this.updateValue(event);
this.trackElement.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) {
const numTicks = parseInt(this.ticks);
const trackRect = this.trackElement.getBoundingClientRect();
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);
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(() => {
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 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() {
if (this.readOnly) {
return;
}
this.thumbGrabbed = true;
this.thumbInnerElement.classList.add('pressed');
if (this.thumbElement) {
this.thumbElement.setAttribute('aria-grabbed', 'true');
}
}
calculateInputSizeFromMax() {
return 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() {
if (!this.resizeObserverAdded) {
this.resizeObserverAdded = true;
const resizeObserver = new ResizeObserver(() => {
this.calculateThumbLeftFromValue(this.value);
this.updateTrack();
});
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: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
'tds-slider-wrapper': true,
'read-only': this.readOnly,
} }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', 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: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
this.ariaLiveElement = el;
} }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', 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: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', 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: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', 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: '0c99475a8bdb1fdec04358421ec34630111a63b8', 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: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
this.trackFillElement = el;
} }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', 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: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', 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: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
this.thumbInnerElement = el;
} })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', 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: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', 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"];
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$2();
}
break;
} });
}
defineCustomElement$1();
const TdsSlider = TdsSlider$1;
const defineCustomElement = defineCustomElement$1;
export { TdsSlider, defineCustomElement };