@scania/tegel 0.0.1-beta.2 → 0.0.1-beta.3

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

@@ -1,682 +0,0 @@
-import { h } from '@stencil/core';
-export class Slider {
-  constructor() {
-    this.wrapperElement = null;
-    this.scrubberElement = null;
-    this.scrubberInnerElement = null;
-    this.dividersElement = null;
-    this.trackElement = null;
-    this.trackFillElement = null;
-    this.minusElement = null;
-    this.plusElement = null;
-    this.inputElement = null;
-    this.nativeRangeInputElement = null;
-    this.scrubberGrabPos = { x: 0, y: 0 };
-    this.scrubberGrabbed = false;
-    this.scrubberLeft = 0;
-    this.tickValues = [];
-    this.disabledState = false;
-    this.readonlyState = false;
-    this.useControls = false;
-    this.useInput = false;
-    this.useSmall = false;
-    this.useSnapping = false;
-    this.supposedValueSlot = -1;
-    this.eventListenersAdded = false;
-    this.resizeObserverAdded = false;
-    this.label = '';
-    this.value = '0';
-    this.min = '0';
-    this.max = '100';
-    this.ticks = '0';
-    this.showTickNumbers = false;
-    this.tooltip = null;
-    this.disabled = null;
-    this.readOnly = null;
-    this.controls = null;
-    this.input = null;
-    this.step = '1';
-    this.name = '';
-    this.size = '';
-    this.snap = null;
-  }
-  /** Public method to re-initialise the slider if some configuration props are changed */
-  async reset() {
-    // @TODO: maybe refactor to use watch-decorators instead
-    this.componentWillLoad();
-    this.componentDidLoad();
-  }
-  handleKeydown(event) {
-    switch (event.key) {
-      case 'ArrowLeft':
-        this.stepLeft();
-        break;
-      case 'ArrowRight':
-        this.stepRight();
-        break;
-      default:
-        break;
-    }
-  }
-  handleMouseUp() {
-    if (!this.scrubberGrabbed) {
-      return;
-    }
-    this.scrubberGrabbed = false;
-    this.scrubberInnerElement.classList.remove('pressed');
-    this.updateValue();
-    this.trackElement.focus();
-  }
-  handleTouchEnd() {
-    if (!this.scrubberGrabbed) {
-      return;
-    }
-    this.scrubberGrabbed = false;
-    this.scrubberInnerElement.classList.remove('pressed');
-    this.updateValue();
-    this.trackElement.focus();
-  }
-  handleMouseMove(event) {
-    if (!this.scrubberGrabbed) {
-      return;
-    }
-    const numTicks = parseInt(this.ticks);
-    const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.clientX - trackRect.left;
-    this.supposedValueSlot = -1;
-    if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
-    }
-    this.scrubberLeft = this.constrainScrubber(localLeft);
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
-    this.updateValue();
-    this.updateTrack();
-  }
-  handleTouchMove(event) {
-    event.preventDefault();
-    if (!this.scrubberGrabbed) {
-      return;
-    }
-    const numTicks = parseInt(this.ticks);
-    const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.touches[0].clientX - trackRect.left;
-    this.supposedValueSlot = -1;
-    if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
-    }
-    this.scrubberLeft = this.constrainScrubber(localLeft);
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
-    this.updateValue();
-    this.updateTrack();
-  }
-  updateTrack() {
-    const trackWidth = this.getTrackWidth();
-    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;
-    this.trackFillElement.style.width = `${percentageFilled}%`;
-  }
-  dispatchChangeEvent() {
-    this.sliderChangeEmitter.emit({ value: this.value });
-  }
-  updateValue() {
-    const trackWidth = this.getTrackWidth();
-    /* 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) {
-      const supposedValue = this.tickValues[this.supposedValueSlot];
-      this.value = `${supposedValue}`;
-    }
-    else {
-      const percentage = this.scrubberLeft / trackWidth;
-      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;
-    }
-    this.dispatchChangeEvent();
-  }
-  updateValueForced(value) {
-    this.value = value;
-    this.dispatchChangeEvent();
-  }
-  getMin() {
-    return parseFloat(this.min);
-  }
-  getMax() {
-    return parseFloat(this.max);
-  }
-  constrainScrubber(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;
-  }
-  calculateScrubberLeftFromValue(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`;
-  }
-  componentDidLoad() {
-    if (!this.resizeObserverAdded) {
-      this.resizeObserverAdded = true;
-      const resizeObserver = new ResizeObserver(( /* entries */) => {
-        this.calculateScrubberLeftFromValue(this.value);
-        this.updateTrack();
-      });
-      resizeObserver.observe(this.wrapperElement);
-    }
-    if (!this.eventListenersAdded) {
-      this.eventListenersAdded = true;
-      this.scrubberElement.addEventListener('mousedown', event => {
-        event.preventDefault();
-        this.grabScrubber(event.offsetX, event.offsetY);
-      });
-      this.scrubberElement.addEventListener('touchstart', event => {
-        const rect = this.scrubberElement.getBoundingClientRect();
-        const x = event.targetTouches[0].pageX - rect.left;
-        const y = event.targetTouches[0].pageY - rect.top;
-        this.grabScrubber(x, y);
-      });
-      if (this.useControls) {
-        this.minusElement.addEventListener('click', () => {
-          this.stepLeft();
-        });
-        this.plusElement.addEventListener('click', () => {
-          this.stepRight();
-        });
-      }
-      if (this.inputElement) {
-        this.inputElement.addEventListener('keydown', event => {
-          event.stopPropagation();
-          if (event.key === 'Enter') {
-            let newValue = parseInt(this.inputElement.value);
-            if (newValue < this.getMin()) {
-              newValue = this.getMin();
-            }
-            else if (newValue > this.getMax()) {
-              newValue = this.getMax();
-            }
-            this.calculateScrubberLeftFromValue(newValue);
-            this.updateValueForced(newValue);
-            this.updateTrack();
-            this.inputElement.blur();
-            this.wrapperElement.focus();
-          }
-        });
-      }
-    }
-    this.calculateScrubberLeftFromValue(this.value);
-    this.updateTrack();
-  }
-  grabScrubber(xOffset, yOffset) {
-    if (this.readonlyState) {
-      return;
-    }
-    this.scrubberGrabPos = {
-      x: xOffset,
-      y: yOffset,
-    };
-    this.scrubberGrabbed = true;
-    this.scrubberInnerElement.classList.add('pressed');
-  }
-  calculateInputSizeFromMax() {
-    return this.max.length;
-  }
-  controlsStep(delta) {
-    if (this.readonlyState) {
-      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;
-      this.supposedValueSlot += stepDir;
-      if (this.supposedValueSlot < 0) {
-        this.supposedValueSlot = 0;
-      }
-      else if (this.supposedValueSlot > numTicks + 1) {
-        this.supposedValueSlot = numTicks + 1;
-      }
-    }
-    this.calculateScrubberLeftFromValue(currentValue);
-    this.updateTrack();
-    this.updateValue();
-  }
-  stepLeft() {
-    this.controlsStep(-parseInt(this.step));
-  }
-  stepRight() {
-    this.controlsStep(parseInt(this.step));
-  }
-  componentWillLoad() {
-    const numTicks = parseInt(this.ticks);
-    if (numTicks > 0) {
-      this.tickValues = [this.getMin()];
-      const step = (this.getMax() - this.getMin()) / (numTicks + 1);
-      for (let i = 1; i < numTicks + 1; i++) {
-        this.tickValues.push(this.getMin() + Math.round(step * i));
-      }
-      this.tickValues.push(this.getMax());
-    }
-    if (this.disabled !== null) {
-      this.disabledState = true;
-    }
-    else {
-      this.disabledState = false;
-    }
-    if (this.readOnly !== null) {
-      this.readonlyState = true;
-    }
-    else {
-      this.readonlyState = false;
-    }
-    this.useInput = false;
-    this.useControls = false;
-    if (this.controls !== null) {
-      this.useControls = true;
-    }
-    else if (this.input !== null) {
-      this.useInput = true;
-    }
-    this.useSmall = false;
-    if (this.size === 'sm') {
-      this.useSmall = true;
-    }
-    this.useSnapping = false;
-    if (this.snap !== null) {
-      this.useSnapping = true;
-    }
-    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;
-    }
-  }
-  render() {
-    return (h("div", { class: 'sdds-slider-wrapper ' + (this.readonlyState && 'read-only') }, h("input", { ref: el => (this.nativeRangeInputElement = el), class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: el => (this.wrapperElement = el) }, this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: el => (this.minusElement = el), class: "sdds-slider__input-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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.98975 8.00005C1.98975 8.27619 2.2136 8.50005 2.48975 8.50005H13.5104C13.7866 8.50005 14.0104 8.27619 14.0104 8.00005C14.0104 7.72391 13.7866 7.50005 13.5104 7.50005L2.48975 7.50005C2.2136 7.50005 1.98975 7.72391 1.98975 8.00005Z", fill: "#0D0F13" }))))), h("div", { class: "sdds-slider-inner" }, h("label", { class: this.tickValues.length > 0 && 'offset' }, this.label), this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { ref: el => (this.dividersElement = el), 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 => (this.trackElement = el), tabindex: "1" }, h("div", { class: "sdds-slider__track-fill", ref: el => (this.trackFillElement = el) }), h("div", { class: "sdds-slider__scrubber", ref: el => (this.scrubberElement = el) }, this.tooltip !== null && (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: "#37414F" })))), 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 => (this.minusElement = el), class: "sdds-slider__input-value", tabindex: "2" }, this.max), h("div", { class: "sdds-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 => (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("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.50005 13.5104C8.50005 13.7865 8.27619 14.0104 8.00005 14.0104C7.7239 14.0104 7.50005 13.7865 7.50005 13.5104V8.5H2.48975C2.2136 8.5 1.98975 8.27614 1.98975 8C1.98975 7.72386 2.2136 7.5 2.48975 7.5H7.50005V2.48965C7.50005 2.21351 7.7239 1.98965 8.00005 1.98965C8.27619 1.98965 8.50005 2.21351 8.50005 2.48965V7.5H13.5104C13.7866 7.5 14.0104 7.72386 14.0104 8C14.0104 8.27614 13.7866 8.5 13.5104 8.5H8.50005V13.5104Z", fill: "#0D0F13" }))))))));
-  }
-  static get is() { return "sdds-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": false,
-        "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": "null"
-      },
-      "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": "null"
-      },
-      "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": "null"
-      },
-      "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": "null"
-      },
-      "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": "null"
-      },
-      "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": "''"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | ''",
-          "resolved": "\"\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the size of the scrubber"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "snap": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Snap to the ticks grid"
-        },
-        "attribute": "snap",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sliderChangeEmitter",
-        "name": "sliderChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Change event for the textfield"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "reset": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Public method to re-initialise the slider if some configuration props are changed",
-          "tags": []
-        }
-      }
-    };
-  }
-  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
-      }];
-  }
-}