@scania/tegel 0.0.72 → 1.0.1

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

@@ -1,18 +1,18 @@
-import { h } from '@stencil/core';
-export class Slider {
+import { h } from "@stencil/core";
+import { generateUniqueId } from "../../utils/utils";
+export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
-    this.scrubberElement = null;
-    this.scrubberInnerElement = null;
+    this.thumbElement = null;
+    this.thumbInnerElement = null;
     this.trackElement = null;
     this.trackFillElement = null;
     this.minusElement = null;
     this.plusElement = null;
     this.inputElement = null;
-    this.scrubberGrabbed = false;
-    this.scrubberLeft = 0;
+    this.thumbGrabbed = false;
+    this.thumbLeft = 0;
     this.tickValues = [];
-    this.disabledState = false;
     this.readonlyState = false;
     this.useControls = false;
     this.useInput = false;
@@ -34,9 +34,9 @@ export class Slider {
     this.input = false;
     this.step = '1';
     this.name = '';
-    this.scrubberSize = 'lg';
+    this.thumbSize = 'lg';
     this.snap = false;
-    this.sliderId = crypto.randomUUID();
+    this.sliderId = generateUniqueId();
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
   async reset() {
@@ -47,9 +47,13 @@ export class Slider {
   handleKeydown(event) {
     switch (event.key) {
       case 'ArrowLeft':
+      case 'ArrowDown':
+      case '-':
         this.stepLeft();
         break;
       case 'ArrowRight':
+      case 'ArrowUp':
+      case '+':
         this.stepRight();
         break;
       default:
@@ -57,37 +61,55 @@ export class Slider {
     }
   }
   handleMouseUp() {
-    if (!this.scrubberGrabbed) {
+    if (!this.thumbGrabbed) {
       return;
     }
-    this.scrubberGrabbed = false;
-    this.scrubberInnerElement.classList.remove('pressed');
+    this.thumbGrabbed = false;
+    this.thumbInnerElement.classList.remove('pressed');
     this.updateValue();
     this.trackElement.focus();
   }
   handleTouchEnd() {
-    if (!this.scrubberGrabbed) {
+    if (!this.thumbGrabbed) {
       return;
     }
-    this.scrubberGrabbed = false;
-    this.scrubberInnerElement.classList.remove('pressed');
+    this.thumbGrabbed = false;
+    this.thumbInnerElement.classList.remove('pressed');
     this.updateValue();
     this.trackElement.focus();
   }
   handleMouseMove(event) {
-    if (!this.scrubberGrabbed) {
+    if (!this.thumbGrabbed) {
       return;
     }
-    this.scrubberCore(event);
+    this.thumbCore(event);
   }
   handleTouchMove(event) {
     event.preventDefault();
-    if (!this.scrubberGrabbed) {
+    if (!this.thumbGrabbed) {
       return;
     }
-    this.scrubberCore(event);
+    this.thumbCore(event);
   }
-  scrubberCore(event) {
+  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;
@@ -101,45 +123,34 @@ export class Slider {
       console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const trackWidth = this.getTrackWidth();
-      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
-      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
-      let scrubberPositionPX = 0;
-      if (localLeft >= 0 && localLeft <= trackWidth) {
-        scrubberPositionPX = localLeft;
-      }
-      else if (localLeft > trackWidth) {
-        scrubberPositionPX = trackWidth;
-      }
-      else if (localLeft < 0) {
-        scrubberPositionPX = 0;
-      }
-      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
+      localLeft = this.updateSupposedValueSlot(localLeft);
     }
-    this.scrubberLeft = this.constrainScrubber(localLeft);
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+    this.thumbLeft = this.constrainThumb(localLeft);
+    this.thumbElement.style.left = `${this.thumbLeft}px`;
     this.updateValue();
-    this.updateTrack();
   }
   updateTrack() {
     const trackWidth = this.getTrackWidth();
-    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;
+    const percentageFilled = (this.thumbLeft / trackWidth) * 100;
     this.trackFillElement.style.width = `${percentageFilled}%`;
   }
   dispatchChangeEvent() {
-    this.sddsChange.emit({ value: this.value });
+    this.tdsChange.emit({ value: this.value });
   }
   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.supposedValueSlot > 0) {
+    if (this.useSnapping && numTicks) {
       const supposedValue = this.tickValues[this.supposedValueSlot];
       this.value = `${supposedValue}`;
+      this.calculateThumbLeftFromValue(supposedValue);
     }
     else {
-      const percentage = this.scrubberLeft / trackWidth;
+      const percentage = this.thumbLeft / trackWidth;
       this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
     }
+    this.updateTrack();
     this.dispatchChangeEvent();
   }
   updateValueForced(value) {
@@ -152,7 +163,7 @@ export class Slider {
   getMax() {
     return parseFloat(this.max);
   }
-  constrainScrubber(x) {
+  constrainThumb(x) {
     const width = this.getTrackWidth();
     if (x < 0) {
       return 0;
@@ -166,32 +177,33 @@ export class Slider {
     const trackRect = this.trackElement.getBoundingClientRect();
     return trackRect.right - trackRect.left;
   }
-  calculateScrubberLeftFromValue(value) {
+  calculateThumbLeftFromValue(value) {
     const initValue = value;
     const trackWidth = this.getTrackWidth();
     const normalizedValue = initValue - this.getMin();
     const normalizedMax = this.getMax() - this.getMin();
     const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;
-    this.scrubberLeft = calculatedLeft;
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
+    this.thumbLeft = calculatedLeft;
+    this.updateSupposedValueSlot(this.thumbLeft);
+    this.thumbElement.style.left = `${this.thumbLeft}px`;
   }
   componentDidLoad() {
     if (!this.resizeObserverAdded) {
       this.resizeObserverAdded = true;
       const resizeObserver = new ResizeObserver(( /* entries */) => {
-        this.calculateScrubberLeftFromValue(this.value);
+        this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
       });
       resizeObserver.observe(this.wrapperElement);
     }
     if (!this.eventListenersAdded) {
       this.eventListenersAdded = true;
-      this.scrubberElement.addEventListener('mousedown', (event) => {
+      this.thumbElement.addEventListener('mousedown', (event) => {
         event.preventDefault();
-        this.grabScrubber();
+        this.grabThumb();
       });
-      this.scrubberElement.addEventListener('touchstart', () => {
-        this.grabScrubber();
+      this.thumbElement.addEventListener('touchstart', () => {
+        this.grabThumb();
       });
       if (this.useControls) {
         this.minusElement.addEventListener('click', () => {
@@ -212,7 +224,7 @@ export class Slider {
             else if (newValue > this.getMax()) {
               newValue = this.getMax();
             }
-            this.calculateScrubberLeftFromValue(newValue);
+            this.calculateThumbLeftFromValue(newValue);
             this.updateValueForced(newValue);
             this.updateTrack();
             this.inputElement.blur();
@@ -221,15 +233,15 @@ export class Slider {
         });
       }
     }
-    this.calculateScrubberLeftFromValue(this.value);
+    this.calculateThumbLeftFromValue(this.value);
     this.updateTrack();
   }
-  grabScrubber() {
+  grabThumb() {
     if (this.readonlyState) {
       return;
     }
-    this.scrubberGrabbed = true;
-    this.scrubberInnerElement.classList.add('pressed');
+    this.thumbGrabbed = true;
+    this.thumbInnerElement.classList.add('pressed');
   }
   calculateInputSizeFromMax() {
     return this.max.length;
@@ -238,18 +250,7 @@ export class Slider {
     if (this.readonlyState || this.disabled) {
       return;
     }
-    const trackWidth = this.getTrackWidth();
-    const percentage = this.scrubberLeft / trackWidth;
     const numTicks = parseInt(this.ticks);
-    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
-    currentValue += delta;
-    if (currentValue < this.getMin()) {
-      currentValue = this.getMin();
-    }
-    else if (currentValue > this.getMax()) {
-      currentValue = this.getMax();
-    }
-    this.value = `${currentValue}`;
     /* 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;
@@ -260,10 +261,25 @@ export class Slider {
       else if (this.supposedValueSlot > numTicks + 1) {
         this.supposedValueSlot = numTicks + 1;
       }
+      this.updateValue();
+    }
+    else {
+      const trackWidth = this.getTrackWidth();
+      const percentage = this.thumbLeft / trackWidth;
+      let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());
+      currentValue += delta;
+      currentValue = Math.round(currentValue);
+      if (currentValue < this.getMin()) {
+        currentValue = this.getMin();
+      }
+      else if (currentValue > this.getMax()) {
+        currentValue = this.getMax();
+      }
+      this.value = `${currentValue}`;
+      this.calculateThumbLeftFromValue(this.value);
+      this.updateValueForced(currentValue);
+      this.updateTrack();
     }
-    this.calculateScrubberLeftFromValue(currentValue);
-    this.updateTrack();
-    this.updateValue();
   }
   stepLeft() {
     this.controlsStep(-parseInt(this.step));
@@ -281,18 +297,7 @@ export class Slider {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled) {
-      this.disabledState = true;
-    }
-    else {
-      this.disabledState = false;
-    }
-    if (this.readOnly) {
-      this.readonlyState = true;
-    }
-    else {
-      this.readonlyState = false;
-    }
+    this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
     if (this.controls) {
@@ -301,46 +306,48 @@ export class Slider {
     else if (this.input) {
       this.useInput = true;
     }
-    this.useSmall = false;
-    if (this.scrubberSize === 'sm') {
-      this.useSmall = true;
-    }
-    this.useSnapping = false;
-    if (this.snap) {
-      this.useSnapping = true;
-    }
+    this.useSmall = this.thumbSize === 'sm';
+    this.useSnapping = this.snap;
     const min = this.getMin();
     const max = this.getMax();
     if (min > max) {
       console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
-      this.disabledState = true;
+      this.disabled = true;
     }
   }
   render() {
-    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, 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: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
+      }, class: "tds-slider__control tds-slider__control-minus" }, 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: "sdds-slider__track-fill", ref: (el) => {
+      }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
-      } }), h("div", { class: "sdds-slider__scrubber", ref: (el) => {
-        this.scrubberElement = el;
-      } }, this.tooltip && (h("div", { class: "sdds-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: "sdds-slider__scrubber-inner", ref: (el) => {
-        this.scrubberInnerElement = el;
-      } })))), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }), h("div", { class: "tds-slider__thumb", ref: (el) => {
+        this.thumbElement = el;
+      } }, 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", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value" }, this.max), h("div", { class: "sdds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
+      }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
         if (this.readonlyState) {
           e.preventDefault();
           this.inputElement.blur();
         }
-      }, size: this.calculateInputSizeFromMax(), class: "sdds-slider__input-field", value: this.value, ref: (el) => {
+      }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
         this.inputElement = el;
-      } })))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.plusElement = el), class: "sdds-slider__control sdds-slider__control-plus" }, h("sdds-icon", { name: "plus", size: "16px" })))))));
+      } })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
+        this.plusElement = el;
+      }, class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
   }
-  static get is() { return "sdds-slider"; }
+  static get is() { return "tds-slider"; }
   static get originalStyleUrls() {
     return {
       "$": ["slider.scss"]
@@ -587,7 +594,7 @@ export class Slider {
         "reflect": false,
         "defaultValue": "''"
       },
-      "scrubberSize": {
+      "thumbSize": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -599,9 +606,9 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the size of the scrubber"
+          "text": "Sets the size of the thumb"
         },
-        "attribute": "scrubber-size",
+        "attribute": "thumb-size",
         "reflect": false,
         "defaultValue": "'lg'"
       },
@@ -617,7 +624,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Snap to the ticks grid"
+          "text": "Snap to the tick's grid"
         },
         "attribute": "snap",
         "reflect": false,
@@ -635,18 +642,18 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID for the sliders input element, randomly generated if not specified."
+          "text": "ID for the Slider's input element, randomly generated if not specified."
         },
         "attribute": "slider-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
@@ -669,7 +676,8 @@ export class Slider {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"