@scania/tegel
Version:
Tegel Design System
501 lines (497 loc) • 31.7 kB
JavaScript
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-9xxNGlso.js';
import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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 TdsSlider = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsChange = createEvent(this, "tdsChange", 6);
this.tdsInput = createEvent(this, "tdsInput", 6);
/** Text for label */
this.label = '';
/** Initial value */
this.value = '0';
/** Minimum value */
this.min = '0';
/** Maximum value */
this.max = '100';
/** Number of tick markers (tick for min- and max-value will be added automatically) */
this.ticks = '0';
/** Decide to show numbers above the tick markers or not */
this.showTickNumbers = false;
/** Decide to show the tooltip or not */
this.tooltip = false;
/** Sets the disabled state for the whole component */
this.disabled = false;
/** Sets the read only state for the whole component */
this.readOnly = false;
/** Decide to show the controls or not */
this.controls = false;
/** Decide to show the input field or not */
this.input = false;
/** Defines how much to increment/decrement the value when using controls */
this.step = '1';
/** Name property (will be inherited by the native slider component) */
this.name = '';
/** Sets the size of the thumb */
this.thumbSize = 'lg';
/** Snap to the tick's grid */
this.snap = false;
/** Sets the aria-label for the slider control. */
this.tdsAriaLabel = '';
/** ID for the Slider's input element, randomly generated if not specified. */
this.sliderId = generateUniqueId();
/** Sets the read only aria label for the input field */
this.tdsReadOnlyAriaLabel = '';
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();
};
}
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: 'b292fb88725097524b908a920eec96c87a242685', class: {
'tds-slider-wrapper': true,
'read-only': this.readOnly,
} }, h("input", { key: '93df885ffdb69b5b9261877f3489f4e0a27de114', 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: '730c20f6adf2cb8b00222ece8c553240fca9fc6a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
this.ariaLiveElement = el;
} }), h("div", { key: '0d7a1a204e4893cb451e00976825ed69b297d36f', 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: '8e02adb2e59e5425b8a2695e04d1de0c0db22808', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '3e1c8b9d0403536479a68c40dd30bae04203fb23', class: "tds-slider__input-values" }, h("div", { key: '9fc1090387cfeb4d4e7b6bad0676df1b49057ede', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '996317c2a48374311a2b654994dc99d5d62555dd', class: "tds-slider__controls" }, h("div", { key: '07aeeabdcd75d6238ac7ee458aee91ca951bc748', 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: 'e42b57eb0db364ad919398201fffe34fb167eb2f', name: "minus", size: "16px" })))), h("div", { key: '6ece66a7e5b6058cc2c9991b3625c2ae7f474fa7', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'ceb9140f2bf24827913ae5adfc911827f6e487d1', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'd0b6cb025543e7de8d68d86b9d3b7ac91ec4782a', 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: '40355beb56539ade6aadc6b75aa8a5444ddeb512', 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: '91f7514a2f8533a91b90af108fe5a7559019c387', class: "tds-slider__track-fill", ref: (el) => {
this.trackFillElement = el;
} }), h("div", { key: 'e25e3f91631040ce0b2aea1ae5007a9b989f239c', 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: 'f21169a0dc0df70287c680e3f5ba32c4ae8e263f', class: "tds-slider__value" }, this.value, h("svg", { key: '1cf441da18bfc2d8b55a009073dea7ef948ddcad', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '050ac1177f3b4526f94a1ff4418b746c56463009', 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: '8817050cc1ead7468139f7d166b61ca3d977c578', class: "tds-slider__thumb-inner", ref: (el) => {
this.thumbInnerElement = el;
} })))), this.useInput && (h("div", { key: 'b3132b32773468761ead8f3f3e035df8b51fe319', class: "tds-slider__input-values" }, h("div", { key: 'faa0e4b8e5c60430d90902bb97c80e621407cca5', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '05f9d258e85202769af4cc8c1a665bb08af9d8bd', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: 'cb5eda3e508e4bae438e1e282543fc20e2ff4b84', 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: '0e0f1d2d1ee7630b9b802291395581add2324b7d', class: "tds-slider__controls" }, h("div", { key: 'b9675d90ec44b9a2b0b9880b19c1abd5d02ad98e', 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: '6af836d67b5fdf5c5c7c2c5de68acb6781d4e020', name: "plus", size: "16px" })))))));
}
get host() { return getElement(this); }
static get watchers() { return {
"value": [{
"handleValueUpdate": 0
}]
}; }
};
TdsSlider.style = sliderCss();
export { TdsSlider as tds_slider };