@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/components/p-3daf3627.js

@@ -0,0 +1,869 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-88af3744.js';
+import { a as debounce } from './p-64ec8edd.js';
+import { a as getRemSize } from './p-165a8492.js';
+import { d as defineCustomElement$3 } from './p-7e8270ec.js';
+import { d as defineCustomElement$2 } from './p-a9b1c410.js';
+import { d as defineCustomElement$1 } from './p-2426d691.js';
+
+const tetRangeSliderCss = "@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Medium.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Medium.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Semibold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Semibold.woff\") format(\"woff\")}@font-face{font-family:\"Gilroy\";font-style:normal;font-weight:700;font-display:swap;src:url(\"assets/fonts/Gilroy-W05-Bold.woff2\") format(\"woff2\"), url(\"assets/fonts/Gilroy-W05-Bold.woff\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:400;font-display:swap;src:url(\"assets/fonts/Inter-Regular.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Regular.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:500;font-display:swap;src:url(\"assets/fonts/Inter-Medium.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-Medium.woff?v=3.19\") format(\"woff\")}@font-face{font-family:\"Inter\";font-style:normal;font-weight:600;font-display:swap;src:url(\"assets/fonts/Inter-SemiBold.woff2?v=3.19\") format(\"woff2\"), url(\"assets/fonts/Inter-SemiBold.woff?v=3.19\") format(\"woff\")}:host{--slider-height:6rem;--slider-track-height:0.5rem;--slider-track-border-radius:0.25rem;--slider-track-background-color:var(--tc-border-quaternary);--slider-track-progress-color:var(--tc-yellow-40);--slider-thumb-color:var(--tc-yellow-30);--slider-thumb-shadow:var(--tc-elevation-two);--slider-thumb-active-shadow:0 0 0 0.25rem rgba(254, 213, 127, 0.4);--slider-thumb-size:1.5rem;--slider-thumb-border-radius:0.75rem;--slider-tick-primary-type-color:var(--tc-border-quaternary);--slider-tick-secondary-type-color:var(--tc-border-secondary);--slider-tick-width:0.125rem;--slider-tick-height:0.25rem;--slider-tick-border-radius:0.063rem;--slider-control-left-margin:0;--slider-control-right-margin:0;--slider-control-icon-color:var(--tc-button-icon-primary);--slider-tooltip-background-color:var(--tc-grey-80);--slider-tooltip-text-color:var(--tc-grey-10);--slider-step-counter-background-color:var(--tc-layer-secondary);--slider-step-counter-text-color:var(--tc-text-primary);--slider-data-label-text-color:var(--tc-text-secondary)}.range-slider{display:flex;width:100%;gap:1rem;height:var(--slider-height);position:relative}.range-slider.dark{--slider-track-background-color:var(--tc-border-quaternary-dark);--slider-track-progress-color:var(--tc-yellow-40-dark);--slider-thumb-color:var(--tc-yellow-30-dark);--slider-thumb-shadow:var(--tc-elevation-two-dark);--slider-thumb-active-shadow:0 0 0 0.25rem rgba(247, 212, 135, 0.4);--slider-tick-primary-type-color:var(--tc-border-quaternary-dark);--slider-tick-secondary-type-color:var(--tc-border-secondary-dark);--slider-control-icon-color:var(--tc-button-icon-primary-dark);--slider-tooltip-background-color:var(--tc-grey-80-dark);--slider-tooltip-text-color:var(--tc-grey-10-dark);--slider-step-counter-background-color:var(--tc-layer-secondary-dark);--slider-step-counter-text-color:var(--tc-text-primary-dark);--slider-data-label-text-color:var(--tc-text-secondary-dark)}.range-slider.dark .range-slider__slider-container:has(.range-slider__slider-wrapper input:focus-visible)~.range-slider__tooltip-handle{outline:0.125rem solid var(--tc-blue-40);outline:0.125rem solid var(--tc-blue-40-dark);outline-offset:0.125rem;transition:outline 0s}.range-slider--large{flex-direction:column}.range-slider--no-controls{flex-direction:row-reverse}.range-slider *{box-sizing:border-box}.range-slider__container{display:flex;flex-direction:column;align-items:baseline;gap:1rem;position:relative;width:100%}.range-slider--large .range-slider__container{flex-direction:row}.range-slider__slider{appearance:none;-webkit-appearance:none;width:100%;height:var(--slider-track-height);background:transparent;outline:none;margin:0.313rem 0;z-index:1}.range-slider--small.range-slider--secondary .range-slider__slider{pointer-events:none;z-index:-1}.range-slider__slider:focus{outline:none}.range-slider__slider::-moz-focus-outer{border:0}.range-slider__slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:transparent;border-radius:var(--slider-thumb-border-radius);cursor:pointer}.range-slider__slider::-moz-range-thumb{appearance:none;-webkit-appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--slider-thumb-color);border-radius:var(--slider-thumb-border-radius);cursor:pointer;border:none}.range-slider__slider::-webkit-slider-runnable-track,.range-slider__slider::-moz-range-track{width:100%;height:var(--slider-track-height);cursor:pointer;background:none;border-radius:var(--slider-track-border-radius)}.range-slider__slider:focus::-webkit-slider-runnable-track{background:none}.range-slider__slider:active::-webkit-slider-runnable-track{background:none}.range-slider__slider-container{width:100%;position:relative;height:calc(var(--slider-thumb-size) + 0.5rem);padding-top:0.625rem;scrollbar-width:none}.range-slider__slider-container::-webkit-scrollbar{display:none}.range-slider__slider-container:has(.range-slider__slider-wrapper input:focus-visible)~.range-slider__tooltip-handle{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s}.range-slider__slider-wrapper{display:flex;width:100%}.range-slider--secondary.range-slider--small .range-slider__slider-wrapper{margin-left:100%}.range-slider__input{--input-padding:0.75rem;--input-border-radius:0.625rem;max-height:3.125rem;max-width:12.5rem;margin:0 auto !important;appearance:textfield;-moz-appearance:textfield}.range-slider--large .range-slider__input{text-align:center;--input-padding:0.5rem}.range-slider__input::-webkit-outer-spin-button,.range-slider__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.range-slider__input-container{display:flex;flex-direction:column;position:absolute;top:calc(var(--slider-track-height) + 3.25rem);width:100%;z-index:1}.range-slider--large .range-slider__input-container{position:relative;max-width:3.125rem;margin-left:auto;margin-right:0;top:0}.range-slider--large.range-slider--no-controls .range-slider__input-container{top:-0.5rem}.range-slider__track{position:absolute;top:1rem;left:0;height:var(--slider-track-height);pointer-events:none;border-radius:var(--slider-track-border-radius)}.range-slider--small.range-slider--secondary .range-slider__track{border-radius:0}.range-slider__track--background{width:100%;background-color:var(--slider-track-background-color)}.range-slider--small.range-slider--secondary .range-slider__track--background{width:300%}.range-slider__track--progress{background-color:var(--slider-track-progress-color)}.range-slider--secondary .range-slider__track--progress{background-color:transparent}.range-slider__data-label{position:absolute;width:3rem;text-align:center;color:var(--slider-data-label-text-color);display:none}.range-slider__data-label:first-of-type{display:block}.range-slider__data-label:last-of-type{display:block}.range-slider--large .range-slider__data-label,.range-slider--medium .range-slider__data-label{display:block}.range-slider__current-step{font:500 0.75rem/1rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:0;font-weight:500;color:var(--slider-step-counter-text-color);width:5.5rem;margin:0 auto;display:flex;justify-content:center;align-items:center;padding:0.25rem 1rem;background-color:var(--slider-step-counter-background-color);border-radius:1rem}.range-slider__data-label-container,.range-slider__current-step-container{font:400 0.75rem/1rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:0;position:absolute;display:flex;height:1.5rem;width:calc(100% - var(--slider-thumb-size));left:calc(var(--slider-thumb-size) / 2);margin:0 auto}.range-slider__data-label-container{top:calc(var(--slider-track-height) + 1.5rem)}.range-slider--secondary.range-slider--small .range-slider__data-label-container{margin-left:100%}.range-slider__current-step-container{top:calc(var(--slider-track-height) + 2.375rem)}.range-slider--large .range-slider__current-step-container,.range-slider--medium .range-slider__current-step-container{top:calc(var(--slider-track-height) + 3.25rem)}.range-slider__tick{width:var(--slider-tick-width);height:var(--slider-tick-height);border-radius:var(--slider-tick-border-radius);background-color:var(--slider-tick-primary-type-color)}.range-slider--secondary .range-slider__tick{width:0.25rem;height:0.25rem;border-radius:0.125rem;background-color:var(--slider-tick-secondary-type-color)}.range-slider__tick-container{position:absolute;width:calc(100% - var(--slider-thumb-size));left:calc(var(--slider-thumb-size) / 2);top:calc(var(--slider-track-height) + 1.188rem);display:flex;justify-content:space-between;align-items:center}.range-slider--secondary .range-slider__tick-container{top:calc(var(--slider-track-height) + 0.625rem)}.range-slider--secondary.range-slider--small .range-slider__tick-container{margin-left:100%}.range-slider__tooltip-handle{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);top:0.438rem;border-radius:var(--slider-thumb-border-radius);pointer-events:none;box-shadow:var(--slider-thumb-shadow);background:var(--slider-thumb-color)}.range-slider__tooltip-handle--active{box-shadow:var(--slider-thumb-active-shadow)}.range-slider__tooltip{--tooltip-offset:0;font:400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;letter-spacing:-0.003125rem;position:absolute;display:flex;justify-content:center;align-items:center;left:calc(-2.25rem + var(--tooltip-offset));height:2rem;width:5.75rem;padding:0.5rem 1rem;border-radius:0.5rem;z-index:2;color:var(--slider-tooltip-text-color);background-color:var(--slider-tooltip-background-color);white-space:nowrap;top:-2.625rem;transition:top 150ms ease-in-out 0s}.range-slider__tooltip-handle--active .range-slider__tooltip{transition:top 150ms ease-in-out 150ms;top:-3.25rem}.range-slider__tooltip::before{content:\"\";position:absolute;left:calc(50% - var(--tooltip-offset));width:0.75rem;height:0.75rem;background:var(--slider-tooltip-background-color);bottom:0;transform:rotate(45deg);border-radius:0.125rem;margin:-0.25rem}.range-slider__control{--button-padding:0.25rem;display:flex;justify-content:center;align-items:center;z-index:1;position:absolute;top:calc(var(--slider-track-height) + 3.5rem)}.range-slider__control:focus-visible{outline:0.125rem solid var(--tc-blue-40);outline-offset:0.125rem;transition:outline 0s}.range-slider--large .range-slider__control{position:static}.range-slider--secondary .range-slider__control{top:calc(var(--slider-track-height) + 2rem)}.range-slider--secondary.range-slider--medium .range-slider__control{top:calc(var(--slider-track-height) + 2.75rem)}.range-slider__control--left{margin:var(--slider-control-left-margin);left:0}.range-slider--medium .range-slider__control--left{left:unset;right:calc(50% + 8rem)}.range-slider--no-input .range-slider--medium .range-slider__control--left{right:calc(50% + 4.25rem)}.range-slider__control--right{margin:var(--slider-control-right-margin);right:0}.range-slider--medium .range-slider__control--right{right:unset;left:calc(50% + 8rem)}.range-slider--no-input .range-slider--medium .range-slider__control--right{left:calc(50% + 4.25rem)}.range-slider__control--icon{--icon-color:var(--slider-control-icon-color)}.range-slider .hidden{display:none}";
+const TetRangeSliderStyle0 = tetRangeSliderCss;
+
+const TetRangeSlider = /*@__PURE__*/ proxyCustomElement(class TetRangeSlider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sliderInput = createEvent(this, "slider-input", 7);
+        this.sliderChange = createEvent(this, "slider-change", 7);
+        this.parentContainer = null;
+        this.minValue = 1;
+        this.maxValue = 500;
+        this.inputMaxValue = 1000;
+        this.defaultValue = 0;
+        this.step = 1;
+        this.dataPoints = [];
+        this.displayDataPoints = [];
+        this.lockToDataPoint = true;
+        this.type = 'secondary';
+        this.withControls = true;
+        this.withInput = true;
+        this.withCurrentStepCounter = false;
+        this.dataUnits = '';
+        this.size = 'auto';
+        this.reduceButtonAccessibilityLabel = '';
+        this.addButtonAccessibilityLabel = '';
+        this.numberInputAccessibilityLabel = '';
+        this.sliderInputAccessibilityLabel = '';
+        this.theme = 'light';
+        this.currentValue = 0;
+        this.dataSet = [];
+        this.containerSize = 'large';
+        this.tooltipOffset = 0;
+        this.isSliding = false;
+        this.isPointerDown = false;
+        this.positions = { scrollLeft: 0, mouseX: 0 };
+    }
+    inputRef;
+    sliderRef;
+    sliderContainerRef;
+    dataLabelRef;
+    tickContainerRef;
+    progressTrackRef;
+    tooltipHandleRef;
+    sliderResizeObserver;
+    get element() { return this; }
+    /** The event that is emitted on slider input. */
+    sliderInput;
+    /** The event that is emitted on slider change. */
+    sliderChange;
+    /**
+     * Watches for `dataPoints` mutations and updates `dataSet` and re-renders data labels.
+     */
+    onDataPointsChange() {
+        this.calculateDataSet();
+        this.renderDataLabels();
+    }
+    /**
+     * Watches for `type` mutations and re-renders ticks and data labels.
+     */
+    onTypeChange() {
+        this.renderDataLabels();
+    }
+    /**
+     * Watches for `currentValue` mutations and emits it in `slider-input` event.
+     */
+    onCurrentValueChange() {
+        this.sliderInput.emit(this.currentValue);
+    }
+    /**
+     * Window resize listener. Sets `containerSize` state.
+     */
+    onWindowResize() {
+        this.autoSetContainerSize();
+    }
+    /**
+     * The `size` prop change listener.
+     */
+    onSizeChange(size) {
+        if (size === 'auto') {
+            this.autoSetContainerSize();
+        }
+        else {
+            this.containerSize = size;
+        }
+    }
+    /**
+     * Slider event handler.
+     * Updates progress bar.
+     * Calculates `currentValue`.
+     *
+     * @param event input event.
+     */
+    onSliderInput = (event) => {
+        this.updateProgress();
+        const inputValue = parseFloat(event.target.value);
+        const closestDataPoint = this.getClosestOriginalDataPoint(inputValue);
+        const closestValueIndex = this.dataSet.indexOf(closestDataPoint);
+        const originalValue = parseFloat(Object.keys(closestDataPoint)[0]);
+        const overrideValue = closestDataPoint[originalValue];
+        if (inputValue === originalValue) {
+            this.currentValue = overrideValue;
+            return;
+        }
+        const range = [closestDataPoint];
+        if (inputValue < originalValue) {
+            range.unshift(this.dataSet[closestValueIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[closestValueIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        let currentValue = (inputValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
+        if (currentValue > this.maxValue) {
+            currentValue = this.maxValue;
+        }
+        else if (currentValue < this.minValue) {
+            currentValue = this.minValue;
+        }
+        const decimals = this.getStepDecimals(this.step);
+        let snappedValue = Math.round(currentValue / this.step) * this.step;
+        snappedValue = parseFloat(snappedValue.toFixed(decimals));
+        this.currentValue = snappedValue;
+    };
+    /**
+     * Manual value input event handler.
+     * Updates slider position.
+     * @param event input event.
+     */
+    onInputChange = (event) => {
+        let inputValue = parseFloat(event.target.value);
+        if (Number.isNaN(inputValue)) {
+            inputValue = 0;
+        }
+        if (inputValue > this.inputMaxValue) {
+            inputValue = this.inputMaxValue;
+            event.target.value = this.inputMaxValue;
+        }
+        this.setSliderValue(inputValue);
+        this.currentValue = inputValue;
+        this.updateProgress();
+    };
+    /** Input keydown event listener.
+     *  Limits the input range to the defined `minValue` and `maxValue` values when using keyboard to increment values.
+     * @param {KeyboardEvent} event
+     */
+    onInputKeyDown = (event, ignoreHorizontalArrows = false) => {
+        const incrementKeyCodes = ['PageUp', 'ArrowUp', 'ArrowRight'];
+        const decrementKeyCodes = ['PageDown', 'ArrowDown', 'ArrowLeft'];
+        const keycode = event.code;
+        if (ignoreHorizontalArrows) {
+            incrementKeyCodes.pop();
+            decrementKeyCodes.pop();
+        }
+        if (incrementKeyCodes.includes(keycode)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (this.lockToDataPoint || keycode === 'PageUp') {
+                this.onControlNextClick();
+            }
+            else {
+                this.handleSliderArrowKeys('increment');
+            }
+        }
+        if (decrementKeyCodes.includes(keycode)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (this.lockToDataPoint || keycode === 'PageDown') {
+                this.onControlPreviousClick();
+            }
+            else {
+                this.handleSliderArrowKeys('decrement');
+            }
+        }
+        const keyCodes = incrementKeyCodes.concat(decrementKeyCodes);
+        if (keyCodes.includes(keycode)) {
+            setTimeout(() => this.sliderChange.emit(this.currentValue));
+        }
+    };
+    /**
+     * `sliderContainerRef` scroll listener.
+     * Updates slider values relative to the container scroll amount.
+     */
+    onContainerScroll = () => {
+        if (this.isSliding) {
+            return;
+        }
+        this.onSliderChangeDebounce();
+        let currentScroll = this.sliderContainerRef.scrollLeft;
+        const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
+        const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
+        if (currentScroll < minScrollLeft) {
+            currentScroll = minScrollLeft;
+        }
+        if (currentScroll > maxScrollLeft) {
+            currentScroll = maxScrollLeft;
+        }
+        currentScroll = Math.round(currentScroll * 100) / 100;
+        this.sliderContainerRef.scrollLeft = currentScroll;
+        const scrollRange = maxScrollLeft - minScrollLeft;
+        const sliderRange = this.maxValue - this.minValue;
+        const currentScrollInRange = currentScroll - minScrollLeft;
+        const currentScrollPercent = Math.round((currentScrollInRange / scrollRange) * 1000) / 1000;
+        const sliderValue = sliderRange * currentScrollPercent + this.minValue;
+        const closestDataPoint = this.getClosestOriginalDataPoint(sliderValue);
+        const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
+        if (dataSetIndex === 0 && sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
+            this.currentValue = Object.values(closestDataPoint)[0];
+            this.setSliderValue(this.currentValue);
+            return;
+        }
+        if (sliderValue === parseFloat(Object.keys(closestDataPoint)[0])) {
+            this.currentValue = Object.values(closestDataPoint)[0];
+            this.setSliderValue(this.currentValue);
+            return;
+        }
+        const range = [closestDataPoint];
+        if (sliderValue < parseFloat(Object.keys(closestDataPoint)[0])) {
+            range.unshift(this.dataSet[dataSetIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[dataSetIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        const currentValue = (sliderValue - originalRangeStart) * (overrideRange / originalRange) + overrideRangeStart;
+        this.currentValue = Math.round(currentValue);
+        this.setSliderValue(this.currentValue);
+    };
+    /**
+     * Manual value input blur event handler.
+     * Checks whether the input is within the range of the slider.
+     * Updates the slider position and input value if the entered value is out of range.
+     * @param event blur event.
+     */
+    onInputBlur = (event) => {
+        let inputValue = parseFloat(event.target.value);
+        if (Number.isNaN(inputValue)) {
+            inputValue = this.minValue;
+        }
+        const dataSet = JSON.parse(JSON.stringify(this.dataSet));
+        const firstDataPoint = dataSet.shift();
+        const lastDataPoint = dataSet.pop();
+        if (inputValue < firstDataPoint[this.minValue]) {
+            this.currentValue = firstDataPoint[this.minValue];
+            this.sliderRef.value = Object.keys(firstDataPoint)[0];
+            this.setInputValue(firstDataPoint[this.minValue]);
+        }
+        const maxInputValue = Math.max(this.inputMaxValue, lastDataPoint[this.maxValue]);
+        if (inputValue > maxInputValue) {
+            this.currentValue = maxInputValue;
+            this.sliderRef.value = Object.keys(lastDataPoint)[0];
+            this.setInputValue(maxInputValue);
+        }
+        this.updateProgress();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Slider change event handler.
+     * Depending on `lockToDataPoint` flag changes the slider value to the closest data point or emits `slider-change` event.
+     */
+    onSliderChange = () => {
+        if (this.lockToDataPoint) {
+            this.slideToClosestDataPoint();
+        }
+        else {
+            this.sliderChange.emit(this.currentValue);
+        }
+    };
+    /** Debounced slider change event. */
+    onSliderChangeDebounce = debounce(this.onSliderChange, 50);
+    /**
+     * Control previous button handler.
+     */
+    onControlPreviousClick = () => {
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
+        let previousDataPoint = this.dataSet[dataPointIndex - 1];
+        if (dataPointIndex === 0) {
+            previousDataPoint = closestDataPoint;
+        }
+        if (this.currentValue > closestDataPointValue) {
+            previousDataPoint = closestDataPoint;
+        }
+        const previousDataPointValue = Object.values(previousDataPoint)[0];
+        this.currentValue = previousDataPointValue;
+        this.setSliderValue(previousDataPointValue);
+        this.updateProgress();
+        this.scrollToThumbCenter();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Control next button handler.
+     */
+    onControlNextClick = () => {
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        const dataPointIndex = this.dataSet.indexOf(closestDataPoint);
+        let nextDataPoint = this.dataSet[dataPointIndex + 1];
+        if (dataPointIndex + 1 === this.dataSet.length) {
+            nextDataPoint = closestDataPoint;
+        }
+        if (this.currentValue < closestDataPointValue) {
+            nextDataPoint = closestDataPoint;
+        }
+        const nextDataPointValue = Object.values(nextDataPoint)[0];
+        this.currentValue = nextDataPointValue;
+        this.setSliderValue(nextDataPointValue);
+        this.updateProgress();
+        this.scrollToThumbCenter();
+        this.sliderChange.emit(this.currentValue);
+    };
+    /**
+     * Slider pointer down event handler.
+     */
+    onSliderPointerDown = () => {
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Slider pointer up event handler.
+     */
+    onSliderPointerUp = () => {
+        this.animateSliderThumb('reverse');
+    };
+    /**
+     * Container touch start event handler.
+     */
+    onContainerTouchStart = () => {
+        this.isPointerDown = true;
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Container touch end event handler.
+     */
+    onContainerTouchEnd = () => {
+        this.isPointerDown = false;
+        this.animateSliderThumb('reverse');
+        this.onSliderChangeDebounce();
+    };
+    /**
+     * Initialises the mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseDown = (e) => {
+        if (this.type !== 'secondary' || this.containerSize !== 'small') {
+            return;
+        }
+        this.isPointerDown = true;
+        this.positions = {
+            scrollLeft: this.sliderContainerRef.scrollLeft,
+            mouseX: e.clientX,
+        };
+        this.element.addEventListener('mousemove', this.onContainerMouseMove);
+        this.element.addEventListener('mouseup', this.onContainerMouseUp);
+        this.element.addEventListener('mouseleave', this.onContainerMouseUp);
+        this.animateSliderThumb('normal');
+    };
+    /**
+     * Scrolls the `sliderContainerRef` on mouse drag.
+     * @param {MouseEvent} e Current mouse event.
+     */
+    onContainerMouseMove = (e) => {
+        e.preventDefault();
+        const mouseButton = e.buttons;
+        this.isPointerDown = mouseButton === 1;
+        if (!this.isPointerDown) {
+            this.onContainerMouseUp();
+            return;
+        }
+        const deltaX = e.clientX - this.positions.mouseX;
+        this.sliderContainerRef.scrollTo(this.positions.scrollLeft - deltaX, 0);
+    };
+    /**
+     * Removes mouse drag events.
+     */
+    onContainerMouseUp = () => {
+        this.isPointerDown = false;
+        this.element.removeEventListener('mousemove', this.onContainerMouseMove);
+        this.element.removeEventListener('mouseup', this.onContainerMouseUp);
+        this.element.removeEventListener('mouseleave', this.onContainerMouseUp);
+        this.animateSliderThumb('reverse');
+        this.onSliderChangeDebounce();
+    };
+    /**
+     * Initialises `dataSet` state from the provided `dataPoints`.
+     */
+    componentWillLoad() {
+        if (this.parentContainer === null) {
+            this.parentContainer = this.element;
+        }
+        this.calculateDataSet();
+        this.currentValue = this.defaultValue;
+        this.sliderResizeObserver = new ResizeObserver(this.updateTooltipHandlePosition);
+    }
+    /**
+     * Adds input event listeners.
+     * Creates tick marks and data labels.
+     * Initialises slider position.
+     */
+    componentDidLoad() {
+        this.autoSetContainerSize();
+        if (this.size !== 'auto') {
+            this.containerSize = this.size;
+        }
+        this.inputRef.addEventListener('focusout', this.onInputBlur);
+        this.sliderContainerRef.addEventListener('scroll', this.updateTooltipHandlePosition);
+        this.sliderResizeObserver.observe(this.sliderRef);
+        this.renderDataLabels();
+        this.setSliderValue(this.currentValue);
+        this.updateProgress();
+    }
+    /**
+     * Updates the progress track of the slider.
+     */
+    updateProgress = () => {
+        const progressTrack = this.progressTrackRef;
+        if (progressTrack === undefined) {
+            return;
+        }
+        let percent = this.getSliderPercent();
+        if (percent < 50) {
+            percent += 0.5;
+        }
+        progressTrack.style.width = percent + '%';
+        this.updateTooltipHandlePosition();
+    };
+    /**
+     * Updates the `tooltipHandleRef` position to mimick the sliders thumb position.
+     */
+    updateTooltipHandlePosition = () => {
+        const percent = this.getSliderPercent();
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const tooltipHandleWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const positionLeft = (sliderWidth - tooltipHandleWidth) * (percent / 100) +
+            this.sliderRef.getBoundingClientRect().left -
+            this.element.getBoundingClientRect().left;
+        this.tooltipHandleRef.style.left = `${positionLeft}px`;
+        const handlePosition = this.tooltipHandleRef.getBoundingClientRect().x;
+        const handlePositionLeftRem = handlePosition / getRemSize();
+        const windowWidth = window.innerWidth;
+        const handlePositionRight = (windowWidth - handlePosition - tooltipHandleWidth) / getRemSize();
+        let tooltipOffset = 0;
+        if (handlePositionLeftRem < 1) {
+            tooltipOffset = 2;
+        }
+        else if (handlePositionLeftRem < 3) {
+            tooltipOffset = 3 - handlePositionLeftRem;
+        }
+        else if (handlePositionRight < 1) {
+            tooltipOffset = -2;
+        }
+        else if (handlePositionRight < 3) {
+            tooltipOffset = (3 - handlePositionRight) * -1;
+        }
+        this.tooltipOffset = tooltipOffset;
+    };
+    /**
+     * Determines how many decimal places are present in the specified step value.
+     *
+     * @param step The step size.
+     * @returns Number of decimal places.
+     */
+    getStepDecimals(step) {
+        const stepString = step.toString();
+        if (stepString.indexOf('.') >= 0) {
+            return stepString.split('.')[1].length;
+        }
+        return 0;
+    }
+    /**
+     * Handles keyboard arrow key events to increment or decrement the slider value,
+     * and updates the slider position accordingly.
+     * @param direction The direction to adjust the slider value.
+     */
+    handleSliderArrowKeys(direction) {
+        let value = this.currentValue + this.step;
+        if (direction === 'decrement') {
+            value = this.currentValue - this.step;
+        }
+        if (value > this.maxValue) {
+            value = this.maxValue;
+        }
+        if (value < this.minValue) {
+            value = this.minValue;
+        }
+        const decimals = this.getStepDecimals(this.step);
+        value = parseFloat(value.toFixed(decimals));
+        this.currentValue = value;
+        this.setSliderValue(value);
+        this.updateProgress();
+    }
+    /**
+     * Gets the closest display value from the `dataSet`.
+     * @param value the value to check against. `currentValue` by default.
+     */
+    getClosestOverrideDataPoint = (value = this.currentValue) => {
+        return this.dataSet.reduce(function (prev, curr) {
+            return Math.abs(Object.values(curr)[0] - value) < Math.abs(Object.values(prev)[0] - value) ? curr : prev;
+        });
+    };
+    /**
+     * Gets the closest slider value from the `dataSet`.
+     * @param value the value to check against.
+     */
+    getClosestOriginalDataPoint = (value) => {
+        return this.dataSet.reduce(function (prev, curr) {
+            return Math.abs(parseFloat(Object.keys(curr)[0]) - value) < Math.abs(parseFloat(Object.keys(prev)[0]) - value)
+                ? curr
+                : prev;
+        });
+    };
+    /**
+     * Gets the current percent of the thumb position relative to the slider width.
+     * @returns {number}
+     */
+    getSliderPercent = () => {
+        const slider = this.sliderRef;
+        if (slider === null) {
+            return 0;
+        }
+        const range = this.maxValue - this.minValue;
+        const absoluteValue = parseFloat(slider.value) - this.minValue;
+        const sliderPercent = (absoluteValue / range) * 100;
+        return sliderPercent;
+    };
+    /**
+     * Gets the current display value for the toolip.
+     * @returns The display value for the tooltip.
+     */
+    getTooltipValue = () => {
+        if (this.type === 'secondary') {
+            return `${Object.values(this.getClosestOverrideDataPoint())[0]} ${this.dataUnits}`;
+        }
+        let tooltipValue = this.currentValue;
+        if (this.currentValue < this.minValue) {
+            tooltipValue = this.minValue;
+        }
+        if (this.currentValue > this.maxValue) {
+            tooltipValue = this.maxValue;
+        }
+        return `${tooltipValue} ${this.dataUnits}`;
+    };
+    /**
+     * Converts the display value of the slider to a slider value and updates slider position.
+     * @param value the display value.
+     */
+    setSliderValue = (value) => {
+        if (Number.isNaN(value)) {
+            value = this.minValue;
+        }
+        const dataSet = JSON.parse(JSON.stringify(this.dataSet));
+        const firstDataPoint = dataSet.shift();
+        const lastDataPoint = dataSet.pop();
+        if (value < firstDataPoint[this.minValue]) {
+            this.sliderRef.value = this.minValue.toString();
+            return;
+        }
+        if (value > lastDataPoint[this.maxValue]) {
+            this.sliderRef.value = this.maxValue.toString();
+            return;
+        }
+        const closestDataPoint = this.getClosestOverrideDataPoint(value);
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        if (value === closestDataPointValue) {
+            this.sliderRef.value = Object.keys(closestDataPoint)[0];
+            return;
+        }
+        const dataSetIndex = this.dataSet.indexOf(closestDataPoint);
+        const range = [closestDataPoint];
+        if (value < closestDataPointValue) {
+            range.unshift(this.dataSet[dataSetIndex - 1]);
+        }
+        else {
+            range.push(this.dataSet[dataSetIndex + 1]);
+        }
+        const originalRangeStart = parseFloat(Object.keys(range[0])[0]);
+        const originalRangeEnd = parseFloat(Object.keys(range[1])[0]);
+        const originalRange = originalRangeEnd - originalRangeStart;
+        const overrideRangeStart = range[0][originalRangeStart];
+        const overrideRangeEnd = range[1][originalRangeEnd];
+        const overrideRange = overrideRangeEnd - overrideRangeStart;
+        const sliderValue = (value - overrideRangeStart) * (originalRange / overrideRange) + originalRangeStart;
+        this.sliderRef.value = sliderValue.toString();
+    };
+    /**
+     * Sets `containerSize` state depending on `element` width.
+     * Sets `sliderContainerRef` overflow style depending on `type` and `containerSize` states.
+     */
+    autoSetContainerSize = () => {
+        if (this.size !== 'auto') {
+            return;
+        }
+        let containerWidth = 0;
+        if (this.parentContainer.hasOwnProperty('innerWidth')) {
+            containerWidth = this.parentContainer.innerWidth;
+        }
+        else {
+            containerWidth = this.parentContainer.getBoundingClientRect().width;
+        }
+        if (containerWidth >= 1024) {
+            this.containerSize = 'large';
+        }
+        else if (containerWidth >= 768) {
+            this.containerSize = 'medium';
+        }
+        else {
+            this.containerSize = 'small';
+        }
+        if (this.sliderContainerRef === undefined) {
+            return;
+        }
+        if (this.type === 'secondary' && this.containerSize === 'small') {
+            this.sliderContainerRef.style.overflowX = 'scroll';
+            setTimeout(this.scrollToThumbCenter, 50);
+        }
+        else {
+            this.sliderContainerRef.style.overflowX = 'unset';
+        }
+    };
+    /**
+     * Sets the manual input value.
+     * @param value number to be displayed in the input.
+     */
+    setInputValue = (value) => {
+        this.inputRef.value = value.toString();
+    };
+    /**
+     * Gradually sets the slider value until it matches the closest `dataPoint` entry.
+     * Sets `isSliding` state.
+     */
+    slideToClosestDataPoint = () => {
+        if (this.isPointerDown) {
+            return;
+        }
+        const closestDataPoint = this.getClosestOverrideDataPoint();
+        const closestDataPointValue = Object.values(closestDataPoint)[0];
+        this.isSliding = true;
+        const interval = setInterval(() => {
+            const valueDelta = Math.abs(closestDataPointValue - this.currentValue);
+            this.scrollToThumbCenter();
+            if (!valueDelta) {
+                clearInterval(interval);
+                this.sliderChange.emit(this.currentValue);
+                setTimeout(() => {
+                    this.isSliding = false;
+                }, 50);
+            }
+            if (valueDelta < 5) {
+                this.currentValue = closestDataPointValue;
+                this.setSliderValue(closestDataPointValue);
+                this.updateProgress();
+                return;
+            }
+            let changeBy = 5;
+            if (valueDelta > 100) {
+                changeBy = 10;
+            }
+            if (this.currentValue > closestDataPointValue) {
+                this.currentValue = this.currentValue - changeBy;
+                this.setSliderValue(this.currentValue);
+            }
+            if (this.currentValue < closestDataPointValue) {
+                this.currentValue = this.currentValue + changeBy;
+                this.setSliderValue(this.currentValue);
+            }
+            this.updateProgress();
+        }, 1);
+    };
+    /**
+     * Calculates the `dataSet` state from the provided `dataPoints`.
+     */
+    calculateDataSet = () => {
+        const dataSteps = this.dataPoints.length ? this.dataPoints.length : 2;
+        const dataPoints = this.dataPoints.length ? this.dataPoints : [this.minValue, this.maxValue];
+        const inputRange = this.maxValue - this.minValue;
+        const increment = inputRange / (dataSteps - 1);
+        this.dataSet.length = 0;
+        for (let index = 0; index < dataSteps; index++) {
+            this.dataSet.push({ [increment * index + this.minValue]: dataPoints[index] });
+        }
+    };
+    /**
+     * Scrolls `sliderContainerRef` to place slider thumb in the center of the screen.
+     */
+    scrollToThumbCenter = () => {
+        if (this.type !== 'secondary' || this.containerSize !== 'small') {
+            return;
+        }
+        const sliderWidth = this.sliderRef.getBoundingClientRect().width;
+        const thumbWidth = this.tooltipHandleRef.getBoundingClientRect().width;
+        const minScrollLeft = sliderWidth / 2 + thumbWidth / 2;
+        const maxScrollLeft = minScrollLeft + sliderWidth - thumbWidth;
+        const scrollRange = maxScrollLeft - minScrollLeft;
+        const sliderPercent = this.getSliderPercent();
+        this.sliderContainerRef.scrollLeft = minScrollLeft + (scrollRange * sliderPercent) / 100;
+    };
+    /**
+     * Animates the shadows of the slider thumb.
+     * @param {PlaybackDirection} direction sets the animation direction.
+     */
+    animateSliderThumb = (direction) => {
+        const shadowDefault = getComputedStyle(this.element).getPropertyValue('--slider-thumb-shadow');
+        const shadowActive = getComputedStyle(this.element).getPropertyValue('--slider-thumb-active-shadow');
+        if (direction === 'normal') {
+            this.tooltipHandleRef.classList.add('range-slider__tooltip-handle--active');
+        }
+        else {
+            this.tooltipHandleRef.classList.remove('range-slider__tooltip-handle--active');
+        }
+        this.tooltipHandleRef.animate([{ boxShadow: shadowDefault }, { boxShadow: 'none' }, { boxShadow: shadowActive }], {
+            duration: 300,
+            direction,
+        });
+    };
+    /** Renders a tick mark. */
+    renderTick = () => {
+        let tick = document.createElement('span');
+        tick.className = 'range-slider__tick';
+        this.tickContainerRef.appendChild(tick);
+    };
+    /** Renders data labels. */
+    renderDataLabels = () => {
+        const inputRange = this.maxValue - this.minValue;
+        this.dataLabelRef.innerHTML = '';
+        this.tickContainerRef.innerHTML = '';
+        for (const dataLabel of this.dataSet) {
+            const position = parseFloat(Object.keys(dataLabel)[0]);
+            const label = Object.values(dataLabel)[0];
+            const absolutePosition = position - this.minValue;
+            const relativePosition = (absolutePosition / inputRange) * 100;
+            this.renderTick();
+            if (this.displayDataPoints.length && !this.displayDataPoints.includes(label)) {
+                continue;
+            }
+            this.dataLabelRef.appendChild(this.renderDataLabel(label.toString(), relativePosition));
+        }
+    };
+    /**
+     * Creates a data label node.
+     * @param label data label to be displayed.
+     * @param position position relative to the slider container.
+     * @returns {HTMLElement} representing data label.
+     */
+    renderDataLabel = (label, position) => {
+        const dataListItem = document.createElement('span');
+        const valueNode = document.createTextNode(label);
+        dataListItem.appendChild(valueNode);
+        dataListItem.classList.add('range-slider__data-label');
+        dataListItem.style.left = `calc(${position}% - 1.5rem)`;
+        return dataListItem;
+    };
+    render() {
+        return (h(Host, { key: 'fe4d87f523c54b6d3bde6a4aeb062d3903571091' }, h("div", { key: 'c07051d59b5534b32df81830d998d874ed14fd8f', class: {
+                'range-slider': true,
+                [`range-slider--${this.containerSize}`]: true,
+                [`range-slider--${this.type}`]: true,
+                'range-slider--no-controls': !this.withControls,
+                'range-slider--no-input': !this.withInput,
+                [this.theme]: true,
+            } }, h("div", { key: '6cf218ba806685aa060f835562f02c5b6cf9ace5', class: {
+                'range-slider__input-container': true,
+                'hidden': !this.withInput,
+            } }, h("tet-input", { key: '16067f25184f3b4a4a2dec1d3246b6f602e05985', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: 'ec4bd9cb5b732089c8b3a02f1892aef4a3af7a89', class: "range-slider__container" }, h("tet-button", { key: '02061d179102586b3518bb8e47b561311e82b9c2', theme: this.theme, iconMode: true, class: {
+                'range-slider__control': true,
+                'range-slider__control--left': true,
+                'hidden': !this.withControls,
+            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: 'f69c0f996709d6d4ee780b3b3601da2aecb0ef53', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '163bc4c424eb02a14f4aa5af3cb8dc15a95e8323', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '87faebff4efc96466b045cb30e2195aca1e7b125', class: "range-slider__slider-wrapper" }, h("input", { key: '395e6b19348b9db47c6a01e5e62d38540e15b631', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: 'ce03add3fa4235f1dc1dec6ee4c2249b7c6ab411', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'b5fbdc67265f9bc567f193994f8d5bd8000a3cec', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'c7144b949d09573c4e2f446f80b54f0ba28ba854', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '576ed7c7f3e9d892eb19e74f61f229ea62383c63', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+                'range-slider__data-label-container': true,
+                'hidden': this.type === 'secondary' && this.containerSize === 'small',
+            } })), h("div", { key: 'a479431596824a05d55a8775f73c9e7071950e3a', class: {
+                'range-slider__current-step-container': true,
+                'hidden': !this.withCurrentStepCounter,
+            } }, h("div", { key: 'e2c0a91402037601d8865476ae2d25623d0083bd', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'cf187a5376842141b09291db7029842e1b14577c', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '0a41fc6a3c162e1a2eb907551f592c58865c9836', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '06d21777945c8f42f83179546a35e6a3112d6bca', theme: this.theme, iconMode: true, class: {
+                'range-slider__control': true,
+                'range-slider__control--right': true,
+                'hidden': !this.withControls,
+            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: '35a49113a21c71b1f79f871597c2feeb7ae112e1', name: "add", class: "range-slider__control--icon" }))))));
+    }
+    static get watchers() { return {
+        "dataPoints": ["onDataPointsChange"],
+        "type": ["onTypeChange"],
+        "currentValue": ["onCurrentValueChange"],
+        "size": ["onSizeChange"]
+    }; }
+    static get style() { return TetRangeSliderStyle0; }
+}, [1, "tet-range-slider", {
+        "parentContainer": [1040],
+        "minValue": [2, "min-value"],
+        "maxValue": [2, "max-value"],
+        "inputMaxValue": [2, "input-max-value"],
+        "defaultValue": [2, "default-value"],
+        "step": [2],
+        "dataPoints": [16],
+        "displayDataPoints": [16],
+        "lockToDataPoint": [4, "lock-to-data-point"],
+        "type": [1],
+        "withControls": [4, "with-controls"],
+        "withInput": [4, "with-input"],
+        "withCurrentStepCounter": [4, "with-current-step-counter"],
+        "dataUnits": [1, "data-units"],
+        "size": [1],
+        "reduceButtonAccessibilityLabel": [1, "reduce-button-accessibility-label"],
+        "addButtonAccessibilityLabel": [1, "add-button-accessibility-label"],
+        "numberInputAccessibilityLabel": [1, "number-input-accessibility-label"],
+        "sliderInputAccessibilityLabel": [1, "slider-input-accessibility-label"],
+        "theme": [1],
+        "currentValue": [32],
+        "dataSet": [32],
+        "containerSize": [32],
+        "tooltipOffset": [32],
+        "isSliding": [32],
+        "isPointerDown": [32],
+        "positions": [32]
+    }, [[9, "resize", "onWindowResize"]], {
+        "dataPoints": ["onDataPointsChange"],
+        "type": ["onTypeChange"],
+        "currentValue": ["onCurrentValueChange"],
+        "size": ["onSizeChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tet-range-slider", "tet-button", "tet-icon", "tet-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tet-range-slider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TetRangeSlider);
+            }
+            break;
+        case "tet-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "tet-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { TetRangeSlider as T, defineCustomElement as d };