@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/collection/components/slider/slider.js

@@ -1,690 +1,692 @@
 import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
-  constructor() {
-    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.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.sliderId = generateUniqueId();
-  }
-  /** 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();
-        break;
-      case 'ArrowRight':
-      case 'ArrowUp':
-      case '+':
-        this.stepRight();
-        break;
-      default:
-        break;
-    }
-  }
-  handleMouseUp() {
-    if (!this.thumbGrabbed) {
-      return;
-    }
-    this.thumbGrabbed = false;
-    this.thumbInnerElement.classList.remove('pressed');
-    this.updateValue();
-    this.trackElement.focus();
-  }
-  handleTouchEnd() {
-    if (!this.thumbGrabbed) {
-      return;
-    }
-    this.thumbGrabbed = false;
-    this.thumbInnerElement.classList.remove('pressed');
-    this.updateValue();
-    this.trackElement.focus();
-  }
-  handleMouseMove(event) {
-    if (!this.thumbGrabbed) {
-      return;
-    }
-    this.thumbCore(event);
-  }
-  handleTouchMove(event) {
-    event.preventDefault();
-    if (!this.thumbGrabbed) {
-      return;
-    }
-    this.thumbCore(event);
-  }
-  handleValueUpdate(newValue) {
-    this.forceValueUpdate(newValue);
-  }
-  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') {
-      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();
-  }
-  updateTrack() {
-    const trackWidth = this.getTrackWidth();
-    const percentageFilled = (this.thumbLeft / trackWidth) * 100;
-    this.trackFillElement.style.width = `${percentageFilled}%`;
-  }
-  updateValue() {
-    const trackWidth = this.getTrackWidth();
-    const numTicks = parseInt(this.ticks);
-    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */
-    if (this.useSnapping && numTicks) {
-      const supposedValue = this.tickValues[this.supposedValueSlot];
-      this.value = `${supposedValue}`;
-      this.calculateThumbLeftFromValue(supposedValue);
-    }
-    else {
-      const percentage = this.thumbLeft / trackWidth;
-      this.value = `${Math.trunc(parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)))}`;
-    }
-    this.updateTrack();
-    this.tdsChange.emit({ value: this.value });
-  }
-  forceValueUpdate(newValue) {
-    this.calculateThumbLeftFromValue(newValue);
-    this.value = newValue;
-    this.tdsChange.emit({ value: this.value });
-    this.updateTrack();
-  }
-  constrainThumb(x) {
-    const width = this.getTrackWidth();
-    if (x < 0) {
-      return 0;
-    }
-    if (x > width) {
-      return width;
-    }
-    return x;
-  }
-  getTrackWidth() {
-    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);
-    this.thumbElement.style.left = `${this.thumbLeft}px`;
-  }
-  /** Updates the slider value based on the current input value */
-  updateSliderValueOnInputChange(event) {
-    const inputElement = event.target;
-    let newValue = parseInt(inputElement.value);
-    if (newValue < parseFloat(this.min)) {
-      newValue = parseFloat(this.min);
-    }
-    else if (newValue > parseFloat(this.max)) {
-      newValue = parseFloat(this.max);
-    }
-    this.forceValueUpdate(String(newValue));
-  }
-  /** 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');
-  }
-  calculateInputSizeFromMax() {
-    return this.max.length;
-  }
-  controlsStep(delta) {
-    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();
-    }
-    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 = Math.round(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() {
-    this.controlsStep(-parseInt(this.step));
-  }
-  stepRight() {
-    this.controlsStep(parseInt(this.step));
-  }
-  componentWillLoad() {
-    const numTicks = parseInt(this.ticks);
-    if (numTicks > 0) {
-      this.tickValues = [parseFloat(this.min)];
-      const step = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
-      for (let i = 1; i < numTicks + 1; i++) {
-        this.tickValues.push(parseFloat(this.min) + Math.round(step * i));
-      }
-      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);
+    constructor() {
+        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.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.sliderId = generateUniqueId();
+    }
+    /** 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();
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+            case '+':
+                this.stepRight();
+                break;
+            default:
+                break;
+        }
+    }
+    handleMouseUp() {
+        if (!this.thumbGrabbed) {
+            return;
+        }
+        this.thumbGrabbed = false;
+        this.thumbInnerElement.classList.remove('pressed');
+        this.updateValue();
+        this.trackElement.focus();
+    }
+    handleTouchEnd() {
+        if (!this.thumbGrabbed) {
+            return;
+        }
+        this.thumbGrabbed = false;
+        this.thumbInnerElement.classList.remove('pressed');
+        this.updateValue();
+        this.trackElement.focus();
+    }
+    handleMouseMove(event) {
+        if (!this.thumbGrabbed) {
+            return;
+        }
+        this.thumbCore(event);
+    }
+    handleTouchMove(event) {
+        event.preventDefault();
+        if (!this.thumbGrabbed) {
+            return;
+        }
+        this.thumbCore(event);
+    }
+    handleValueUpdate(newValue) {
+        this.calculateThumbLeftFromValue(newValue);
+        this.value = newValue;
         this.updateTrack();
-      });
-      resizeObserver.observe(this.wrapperElement);
-    }
-    this.calculateThumbLeftFromValue(this.value);
-    this.updateTrack();
-  }
-  render() {
-    return (h("div", { class: {
-        'tds-slider-wrapper': true,
-        'read-only': this.readOnly,
-      } }, h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { class: {
-        'tds-slider': true,
-        'disabled': this.disabled,
-        'tds-slider-small': this.useSmall,
-      }, ref: (el) => {
-        this.wrapperElement = el;
-      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
-        this.trackElement = el;
-      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
-        this.trackFillElement = el;
-      } }), h("div", { class: "tds-slider__thumb", ref: (el) => {
-        this.thumbElement = el;
-      }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { class: "tds-slider__thumb-inner", ref: (el) => {
-        this.thumbInnerElement = el;
-      } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, h("tds-icon", { name: "plus", size: "16px" })))))));
-  }
-  static get is() { return "tds-slider"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["slider.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["slider.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text for label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Initial value"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "'0'"
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimum value"
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "'0'"
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Maximum value"
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "'100'"
-      },
-      "ticks": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Number of tick markers (tick for min- and max-value will be added automatically)"
-        },
-        "attribute": "ticks",
-        "reflect": false,
-        "defaultValue": "'0'"
-      },
-      "showTickNumbers": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decide to show numbers above the tick markers or not"
-        },
-        "attribute": "show-tick-numbers",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tooltip": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decide to show the tooltip or not"
-        },
-        "attribute": "tooltip",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the disabled state for the whole component"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "readOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the read only state for the whole component"
-        },
-        "attribute": "read-only",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "controls": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decide to show the controls or not"
-        },
-        "attribute": "controls",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "input": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decide to show the input field or not"
-        },
-        "attribute": "input",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "step": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Defines how much to increment/decrement the value when using controls"
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "'1'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name property (will be inherited by the native slider component)"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "thumbSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'lg'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the size of the thumb"
-        },
-        "attribute": "thumb-size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "snap": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Snap to the tick's grid"
-        },
-        "attribute": "snap",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "sliderId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID for the Slider's input element, randomly generated if not specified."
-        },
-        "attribute": "slider-id",
-        "reflect": false,
-        "defaultValue": "generateUniqueId()"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsChange",
-        "name": "tdsChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends the value of the slider when changed."
-        },
-        "complexType": {
-          "original": "{\n    value: string;\n  }",
-          "resolved": "{ value: string; }",
-          "references": {}
+    }
+    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') {
+            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();
+    }
+    updateTrack() {
+        const trackWidth = this.getTrackWidth();
+        const percentageFilled = (this.thumbLeft / trackWidth) * 100;
+        this.trackFillElement.style.width = `${percentageFilled}%`;
+    }
+    updateValue() {
+        const trackWidth = this.getTrackWidth();
+        const numTicks = parseInt(this.ticks);
+        /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */
+        if (this.useSnapping && numTicks) {
+            const supposedValue = this.tickValues[this.supposedValueSlot];
+            this.value = `${supposedValue}`;
+            this.calculateThumbLeftFromValue(supposedValue);
+        }
+        else {
+            const percentage = this.thumbLeft / trackWidth;
+            this.value = `${Math.trunc(parseFloat(this.min) + percentage * (parseFloat(this.max) - parseFloat(this.min)))}`;
+        }
+        this.updateTrack();
+        this.tdsChange.emit({ value: this.value });
+    }
+    forceValueUpdate(newValue) {
+        this.calculateThumbLeftFromValue(newValue);
+        this.value = newValue;
+        this.tdsChange.emit({ value: this.value });
+        this.updateTrack();
+    }
+    constrainThumb(x) {
+        const width = this.getTrackWidth();
+        if (x < 0) {
+            return 0;
+        }
+        if (x > width) {
+            return width;
+        }
+        return x;
+    }
+    getTrackWidth() {
+        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);
+        this.thumbElement.style.left = `${this.thumbLeft}px`;
+    }
+    /** Updates the slider value based on the current input value */
+    updateSliderValueOnInputChange(event) {
+        const inputElement = event.target;
+        let newValue = parseInt(inputElement.value);
+        if (newValue < parseFloat(this.min)) {
+            newValue = parseFloat(this.min);
+        }
+        else if (newValue > parseFloat(this.max)) {
+            newValue = parseFloat(this.max);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        this.forceValueUpdate(String(newValue));
+    }
+    /** 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');
+    }
+    calculateInputSizeFromMax() {
+        return this.max.length;
+    }
+    controlsStep(delta) {
+        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;
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Public method to re-initialise the slider if some configuration props are changed",
-          "tags": []
+            else if (this.supposedValueSlot > numTicks + 1) {
+                this.supposedValueSlot = numTicks + 1;
+            }
+            this.updateValue();
+        }
+        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 = Math.round(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() {
+        this.controlsStep(-parseInt(this.step));
+    }
+    stepRight() {
+        this.controlsStep(parseInt(this.step));
+    }
+    componentWillLoad() {
+        const numTicks = parseInt(this.ticks);
+        if (numTicks > 0) {
+            this.tickValues = [parseFloat(this.min)];
+            const step = (parseFloat(this.max) - parseFloat(this.min)) / (numTicks + 1);
+            for (let i = 1; i < numTicks + 1; i++) {
+                this.tickValues.push(parseFloat(this.min) + Math.round(step * i));
+            }
+            this.tickValues.push(parseFloat(this.max));
+        }
+        this.useInput = false;
+        this.useControls = false;
+        if (this.controls) {
+            this.useControls = true;
         }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "handleValueUpdate"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mouseup",
-        "method": "handleMouseUp",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "touchend",
-        "method": "handleTouchEnd",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mousemove",
-        "method": "handleMouseMove",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "touchmove",
-        "method": "handleTouchMove",
-        "target": "window",
-        "capture": false,
-        "passive": 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();
+    }
+    render() {
+        return (h("div", { class: {
+                'tds-slider-wrapper': true,
+                'read-only': this.readOnly,
+            } }, h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { class: {
+                'tds-slider': true,
+                'disabled': this.disabled,
+                'tds-slider-small': this.useSmall,
+            }, ref: (el) => {
+                this.wrapperElement = el;
+            } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
+                this.trackElement = el;
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
+                this.trackFillElement = el;
+            } }), h("div", { class: "tds-slider__thumb", ref: (el) => {
+                this.thumbElement = el;
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { class: "tds-slider__thumb-inner", ref: (el) => {
+                this.thumbInnerElement = el;
+            } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, h("tds-icon", { name: "plus", size: "16px" })))))));
+    }
+    static get is() { return "tds-slider"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for label"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "'0'"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value"
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "'0'"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value"
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "'100'"
+            },
+            "ticks": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of tick markers (tick for min- and max-value will be added automatically)"
+                },
+                "attribute": "ticks",
+                "reflect": false,
+                "defaultValue": "'0'"
+            },
+            "showTickNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decide to show numbers above the tick markers or not"
+                },
+                "attribute": "show-tick-numbers",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decide to show the tooltip or not"
+                },
+                "attribute": "tooltip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the disabled state for the whole component"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the read only state for the whole component"
+                },
+                "attribute": "read-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "controls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decide to show the controls or not"
+                },
+                "attribute": "controls",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "input": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decide to show the input field or not"
+                },
+                "attribute": "input",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "step": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines how much to increment/decrement the value when using controls"
+                },
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "'1'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name property (will be inherited by the native slider component)"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "thumbSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the size of the thumb"
+                },
+                "attribute": "thumb-size",
+                "reflect": false,
+                "defaultValue": "'lg'"
+            },
+            "snap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Snap to the tick's grid"
+                },
+                "attribute": "snap",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "sliderId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID for the Slider's input element, randomly generated if not specified."
+                },
+                "attribute": "slider-id",
+                "reflect": false,
+                "defaultValue": "generateUniqueId()"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsChange",
+                "name": "tdsChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sends the value of the slider when changed."
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n  }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Public method to re-initialise the slider if some configuration props are changed",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueUpdate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mouseup",
+                "method": "handleMouseUp",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "handleTouchEnd",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mousemove",
+                "method": "handleMouseMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchmove",
+                "method": "handleTouchMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }