@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/esm/sdds-slider.entry.js

@@ -0,0 +1,355 @@
+import { r as registerInstance, c as createEvent, h } from './index-96563708.js';
+
+const sliderCss = ":root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-label-color-disabled:var(--sdds-grey-400);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-label-color-disabled:var(--sdds-grey-700);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider *{box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-grey-800);color:var(--sdds-white)}.sdds-slider .sdds-slider__value svg{position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>*{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-label-color-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-controls-color);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-track-fill-color)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background:var(--sdds-slider-track-color);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-controls-color)}";
+
+const Slider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sddsChange = createEvent(this, "sddsChange", 7);
+    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;
+    this.sliderId = crypto.randomUUID();
+  }
+  /** 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;
+    }
+  }
+  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.sddsChange.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 || 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;
+      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, disabled: this.disabled, id: this.sliderId }), 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("sdds-icon", { name: "minus", size: "16px" })))), 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: this.disabled ? '-1' : '0' }, 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" }, 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("sdds-icon", { name: "plus", size: "16px" })))))));
+  }
+};
+Slider.style = sliderCss;
+
+export { Slider as sdds_slider };
+
+//# sourceMappingURL=sdds-slider.entry.js.map

package/dist/esm/sdds-slider.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-slider.entry.js","mappings":"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","names":[],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n  @include sdds-box-sizing;\n\n  width: 100%;\n\n  input[type='range'].sdds-slider-native-element {\n    display: none;\n  }\n}\n\n.sdds-slider-wrapper {\n  width: 100%;\n\n  &.read-only {\n    pointer-events: none;\n  }\n}\n\n.sdds-slider {\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  padding-top: 65px;\n\n  .sdds-slider-inner {\n    width: 100%;\n    height: 20px;\n    position: relative;\n  }\n\n  .sdds-slider__controls {\n    position: relative;\n    top: -25px;\n\n    .sdds-slider__control {\n      cursor: pointer;\n\n      &.sdds-slider__control-minus {\n        padding: 18px 18px 18px 0;\n      }\n\n      &.sdds-slider__control-plus {\n        padding: 18px 0 18px 18px;\n      }\n    }\n  }\n\n  .sdds-slider__input-values {\n    position: relative;\n    top: -25px;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n\n    .sdds-slider__input-value {\n      user-select: none;\n      padding: 18px;\n      color: var(--sdds-grey-700);\n\n      //@include type-style('detail-02');\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    .sdds-slider__input-field-wrapper {\n      background-color: var(--sdds-slider-inputfield-background);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      input.sdds-slider__input-field {\n        // @include type-style('detail-02');\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        color: var(--sdds-slider-input-inputfield-color);\n        border: 0;\n        background-color: transparent;\n        text-align: center;\n        padding: 12px;\n        box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n        border-radius: 4px 4px 0 0;\n\n        &:hover {\n          box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n        }\n\n        &:focus {\n          box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n          outline: 0;\n        }\n      }\n    }\n  }\n\n  label {\n    // @include type-style('detail-05');\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    user-select: none;\n    position: absolute;\n    color: var(--sdds-slider-label-color);\n    top: -16px;\n    transform: translateY(-100%);\n\n    &.offset {\n      top: -35px;\n    }\n  }\n\n  .sdds-slider__value {\n    // @include type-style('detail-01');\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    user-select: none;\n    border-radius: 4px;\n    padding: 8px;\n    position: absolute;\n    transform: translate(-50%, -100%);\n    top: -24px;\n    background-color: var(--sdds-grey-800);\n    color: var(--sdds-white);\n\n    svg {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      top: 34px;\n    }\n  }\n\n  .sdds-slider__scrubber {\n    position: absolute;\n\n    .sdds-slider__scrubber-inner {\n      width: 20px;\n      height: 20px;\n      border-radius: 100%;\n      background-color: var(--sdds-slider-thumb-color);\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      cursor: pointer;\n\n      &::before {\n        content: ' ';\n        display: none;\n        width: 48px;\n        height: 48px;\n        background-color: var(--sdds-slider-thumb-color);\n        position: absolute;\n        border-radius: 100%;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      &:hover {\n        &::before {\n          display: block;\n          opacity: 0.08;\n        }\n      }\n\n      &.pressed {\n        width: 24px;\n        height: 24px;\n\n        &::before {\n          display: block;\n          opacity: 0.16 !important;\n        }\n      }\n    }\n  }\n\n  .sdds-slider__value-dividers-wrapper {\n    position: relative;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .sdds-slider__value-dividers {\n    pointer-events: none;\n    position: absolute;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    .sdds-slider__value-divider {\n      transform: translateY(-50%);\n      height: 16px;\n      background-color: var(--sdds-slider-divider-color);\n      color: var(--sdds-slider-divider-values-color);\n      width: 1px;\n\n      span {\n        display: block;\n        user-select: none;\n        color: var(-sdds-grey-700);\n\n        // @include type-style('detail-05');\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n        position: relative;\n        top: -7px;\n        left: 50%;\n        transform: translate(-50%, -100%);\n        width: 50px;\n        text-align: center;\n      }\n    }\n  }\n\n  .sdds-slider__track {\n    width: 100%;\n    height: 2px;\n    border-radius: 1px;\n    background-color: var(--sdds-slider-track-color);\n    position: relative;\n\n    &:focus {\n      outline: 0;\n\n      .sdds-slider__scrubber {\n        .sdds-slider__scrubber-inner {\n          width: 24px;\n          height: 24px;\n\n          &::before {\n            display: block;\n            opacity: 0.08;\n          }\n        }\n      }\n    }\n\n    .sdds-slider__track-fill {\n      background-color: var(--sdds-slider-track-fill-color);\n      border-radius: 2px;\n      height: 4px;\n      position: absolute;\n      left: 0;\n      top: -1px;\n    }\n  }\n\n  &.disabled {\n    // pointer-events: none;\n    cursor: not-allowed;\n\n    > * {\n      pointer-events: none;\n    }\n\n    label {\n      color: var(--sdds-slider-label-color-disabled);\n    }\n\n    .sdds-slider__controls {\n      .sdds-slider__control {\n        cursor: default;\n\n        &.sdds-slider__control-minus,\n        &.sdds-slider__control-plus {\n          svg {\n            fill: var(--sdds-slider-controls-color);\n          }\n        }\n      }\n    }\n\n    .sdds-slider__input-values {\n      .sdds-slider__input-value {\n        color: var(--sdds-slider-controls-color);\n      }\n\n      .sdds-slider__input-field-wrapper {\n        pointer-events: none;\n\n        input.sdds-slider__input-field {\n          color: var(--sdds-slider-controls-color);\n          pointer-events: none;\n        }\n      }\n    }\n\n    .sdds-slider__value {\n      display: none;\n    }\n\n    .sdds-slider__track {\n      .sdds-slider__track-fill {\n        background-color: var(--sdds-slider-track-fill-color);\n      }\n    }\n\n    .sdds-slider__value-dividers {\n      .sdds-slider__value-divider {\n        span {\n          color: var(--sdds-slider-track-fill-color);\n        }\n      }\n    }\n\n    .sdds-slider__scrubber {\n      pointer-events: none;\n\n      .sdds-slider__scrubber-inner {\n        background: var(--sdds-slider-track-color);\n        cursor: default;\n      }\n    }\n  }\n\n  &.sdds-slider-small {\n    .sdds-slider__scrubber {\n      .sdds-slider__scrubber-inner {\n        width: 16px;\n        height: 16px;\n\n        &::before {\n          width: 40px;\n          height: 40px;\n        }\n\n        &.pressed {\n          width: 20px;\n          height: 20px;\n        }\n      }\n    }\n  }\n}\n\n.sdds-slider__controls {\n  .sdds-slider__control {\n    cursor: default;\n\n    &.sdds-slider__control-minus,\n    &.sdds-slider__control-plus {\n      svg {\n        fill: var(--sdds-slider-controls-color);\n      }\n    }\n  }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-slider',\n  styleUrl: 'slider.scss',\n  shadow: false,\n})\nexport class Slider {\n  /** Text for label */\n  @Prop() label: string = '';\n\n  /** Initial value */\n  @Prop() value: string = '0';\n\n  /** Minimum value */\n  @Prop() min: string = '0';\n\n  /** Maximum value */\n  @Prop() max: string = '100';\n\n  /** Number of tick markers (tick for min- and max-value will be added automatically) */\n  @Prop() ticks: string = '0';\n\n  /** Decide to show numbers above the tick markers or not  */\n  @Prop() showTickNumbers: boolean = false;\n\n  /** Decide to show the tooltip or not */\n  @Prop() tooltip: boolean = null;\n\n  /** Sets the disabled state for the whole component  */\n  @Prop() disabled: boolean = null;\n\n  /** Sets the read only state for the whole component  */\n  @Prop() readOnly: boolean = null;\n\n  /** Decide to show the controls or not */\n  @Prop() controls: boolean = null;\n\n  /** Decide to show the input field or not */\n  @Prop() input: boolean = null;\n\n  /** Defines how much to increment/decrement the value when using controls */\n  @Prop() step: string = '1';\n\n  /** Name property (will be inherited by the native slider component) */\n  @Prop() name: string = '';\n\n  /** Sets the size of the scrubber */\n  @Prop() size: 'sm' | '' = '';\n\n  /** Snap to the ticks grid */\n  @Prop() snap: boolean = null;\n\n  /** Id for the sliders input element, randomly generated if not specified. */\n  @Prop() sliderId: string = crypto.randomUUID();\n\n  wrapperElement: HTMLElement = null;\n\n  scrubberElement: HTMLElement = null;\n\n  scrubberInnerElement: HTMLElement = null;\n\n  dividersElement: HTMLElement = null;\n\n  trackElement: HTMLElement = null;\n\n  trackFillElement: HTMLElement = null;\n\n  minusElement: HTMLElement = null;\n\n  plusElement: HTMLElement = null;\n\n  inputElement: HTMLInputElement = null;\n\n  nativeRangeInputElement: HTMLInputElement = null;\n\n  scrubberGrabPos: object = { x: 0, y: 0 };\n\n  scrubberGrabbed: boolean = false;\n\n  scrubberLeft: number = 0;\n\n  tickValues: Array<number> = [];\n\n  disabledState: boolean = false;\n\n  readonlyState: boolean = false;\n\n  useControls: boolean = false;\n\n  useInput: boolean = false;\n\n  useSmall: boolean = false;\n\n  useSnapping: boolean = false;\n\n  supposedValueSlot: number = -1;\n\n  eventListenersAdded: boolean = false;\n\n  resizeObserverAdded: boolean = false;\n\n  /** Sends unique checkbox identifier and value when the slider has a change in value. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    value: string;\n  }>;\n\n  /** Public method to re-initialise the slider if some configuration props are changed */\n  @Method() async reset() {\n    // @TODO: maybe refactor to use watch-decorators instead\n    this.componentWillLoad();\n    this.componentDidLoad();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.stepLeft();\n        break;\n\n      case 'ArrowRight':\n        this.stepRight();\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('touchend', { target: 'window' })\n  handleTouchEnd() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(event) {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.clientX - trackRect.left;\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  @Listen('touchmove', { target: 'window' })\n  handleTouchMove(event) {\n    event.preventDefault();\n\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.touches[0].clientX - trackRect.left;\n\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  updateTrack() {\n    const trackWidth = this.getTrackWidth();\n    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n    this.trackFillElement.style.width = `${percentageFilled}%`;\n  }\n\n  dispatchChangeEvent() {\n    this.sddsChange.emit({ value: this.value });\n  }\n\n  updateValue() {\n    const trackWidth = this.getTrackWidth();\n\n    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */\n    if (this.supposedValueSlot > 0) {\n      const supposedValue = this.tickValues[this.supposedValueSlot];\n      this.value = `${supposedValue}`;\n    } else {\n      const percentage = this.scrubberLeft / trackWidth;\n      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n    }\n\n    this.dispatchChangeEvent();\n  }\n\n  updateValueForced(value) {\n    this.value = value;\n    this.dispatchChangeEvent();\n  }\n\n  getMin() {\n    return parseFloat(this.min);\n  }\n\n  getMax() {\n    return parseFloat(this.max);\n  }\n\n  constrainScrubber(x) {\n    const width = this.getTrackWidth();\n\n    if (x < 0) {\n      return 0;\n    }\n\n    if (x > width) {\n      return width;\n    }\n\n    return x;\n  }\n\n  getTrackWidth() {\n    const trackRect = this.trackElement.getBoundingClientRect();\n    return trackRect.right - trackRect.left;\n  }\n\n  calculateScrubberLeftFromValue(value) {\n    const initValue = value;\n    const trackWidth = this.getTrackWidth();\n\n    const normalizedValue = initValue - this.getMin();\n    const normalizedMax = this.getMax() - this.getMin();\n\n    const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n    this.scrubberLeft = calculatedLeft;\n\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n  }\n\n  componentDidLoad() {\n    if (!this.resizeObserverAdded) {\n      this.resizeObserverAdded = true;\n\n      const resizeObserver = new ResizeObserver((/* entries */) => {\n        this.calculateScrubberLeftFromValue(this.value);\n        this.updateTrack();\n      });\n\n      resizeObserver.observe(this.wrapperElement);\n    }\n\n    if (!this.eventListenersAdded) {\n      this.eventListenersAdded = true;\n\n      this.scrubberElement.addEventListener('mousedown', (event) => {\n        event.preventDefault();\n        this.grabScrubber(event.offsetX, event.offsetY);\n      });\n\n      this.scrubberElement.addEventListener('touchstart', (event) => {\n        const rect = this.scrubberElement.getBoundingClientRect();\n        const x = event.targetTouches[0].pageX - rect.left;\n        const y = event.targetTouches[0].pageY - rect.top;\n        this.grabScrubber(x, y);\n      });\n\n      if (this.useControls) {\n        this.minusElement.addEventListener('click', () => {\n          this.stepLeft();\n        });\n\n        this.plusElement.addEventListener('click', () => {\n          this.stepRight();\n        });\n      }\n\n      if (this.inputElement) {\n        this.inputElement.addEventListener('keydown', (event) => {\n          event.stopPropagation();\n\n          if (event.key === 'Enter') {\n            let newValue = parseInt(this.inputElement.value);\n\n            if (newValue < this.getMin()) {\n              newValue = this.getMin();\n            } else if (newValue > this.getMax()) {\n              newValue = this.getMax();\n            }\n\n            this.calculateScrubberLeftFromValue(newValue);\n            this.updateValueForced(newValue);\n            this.updateTrack();\n\n            this.inputElement.blur();\n            this.wrapperElement.focus();\n          }\n        });\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(this.value);\n    this.updateTrack();\n  }\n\n  grabScrubber(xOffset, yOffset) {\n    if (this.readonlyState) {\n      return;\n    }\n\n    this.scrubberGrabPos = {\n      x: xOffset,\n      y: yOffset,\n    };\n\n    this.scrubberGrabbed = true;\n    this.scrubberInnerElement.classList.add('pressed');\n  }\n\n  calculateInputSizeFromMax() {\n    return this.max.length;\n  }\n\n  controlsStep(delta) {\n    if (this.readonlyState || this.disabled) {\n      return;\n    }\n\n    const trackWidth = this.getTrackWidth();\n    const percentage = this.scrubberLeft / trackWidth;\n    const numTicks = parseInt(this.ticks);\n\n    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n    currentValue += delta;\n\n    if (currentValue < this.getMin()) {\n      currentValue = this.getMin();\n    } else if (currentValue > this.getMax()) {\n      currentValue = this.getMax();\n    }\n\n    this.value = `${currentValue}`;\n\n    /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n    if (this.useSnapping && numTicks > 0) {\n      const stepDir = delta > 0 ? 1 : -1;\n      this.supposedValueSlot += stepDir;\n\n      if (this.supposedValueSlot < 0) {\n        this.supposedValueSlot = 0;\n      } else if (this.supposedValueSlot > numTicks + 1) {\n        this.supposedValueSlot = numTicks + 1;\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(currentValue);\n    this.updateTrack();\n    this.updateValue();\n  }\n\n  stepLeft() {\n    this.controlsStep(-parseInt(this.step));\n  }\n\n  stepRight() {\n    this.controlsStep(parseInt(this.step));\n  }\n\n  componentWillLoad() {\n    const numTicks = parseInt(this.ticks);\n\n    if (numTicks > 0) {\n      this.tickValues = [this.getMin()];\n\n      const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n      for (let i = 1; i < numTicks + 1; i++) {\n        this.tickValues.push(this.getMin() + Math.round(step * i));\n      }\n\n      this.tickValues.push(this.getMax());\n    }\n\n    if (this.disabled !== null) {\n      this.disabledState = true;\n    } else {\n      this.disabledState = false;\n    }\n\n    if (this.readOnly !== null) {\n      this.readonlyState = true;\n    } else {\n      this.readonlyState = false;\n    }\n\n    this.useInput = false;\n    this.useControls = false;\n\n    if (this.controls !== null) {\n      this.useControls = true;\n    } else if (this.input !== null) {\n      this.useInput = true;\n    }\n\n    this.useSmall = false;\n\n    if (this.size === 'sm') {\n      this.useSmall = true;\n    }\n\n    this.useSnapping = false;\n\n    if (this.snap !== null) {\n      this.useSnapping = true;\n    }\n\n    const min = this.getMin();\n    const max = this.getMax();\n\n    if (min > max) {\n      console.warn(\n        'min-prop must have a higher value than max-prop for the component to work correctly.',\n      );\n      this.disabledState = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n        <input\n          ref={(el) => {\n            this.nativeRangeInputElement = el as HTMLInputElement;\n          }}\n          class=\"sdds-slider-native-element\"\n          type=\"range\"\n          value={this.value}\n          name={this.name}\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n          id={this.sliderId}\n        ></input>\n\n        <div\n          class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n            this.useSmall ? 'sdds-slider-small' : ''\n          }`}\n          ref={(el) => {\n            this.wrapperElement = el as HTMLElement;\n          }}\n        >\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.min}\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.minusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-minus\"\n              >\n                <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n\n          <div class=\"sdds-slider-inner\">\n            <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n            {this.tickValues.length > 0 && (\n              <div class=\"sdds-slider__value-dividers-wrapper\">\n                <div\n                  ref={(el) => {\n                    this.dividersElement = el as HTMLElement;\n                  }}\n                  class=\"sdds-slider__value-dividers\"\n                >\n                  {this.tickValues.map((value) => (\n                    <div class=\"sdds-slider__value-divider\">\n                      {this.showTickNumbers && <span>{value}</span>}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div\n              class=\"sdds-slider__track\"\n              ref={(el) => {\n                this.trackElement = el as HTMLElement;\n              }}\n              tabindex={this.disabled ? '-1' : '0'}\n            >\n              <div\n                class=\"sdds-slider__track-fill\"\n                ref={(el) => {\n                  this.trackFillElement = el as HTMLElement;\n                }}\n              ></div>\n\n              <div\n                class=\"sdds-slider__scrubber\"\n                ref={(el) => {\n                  this.scrubberElement = el as HTMLElement;\n                }}\n              >\n                {this.tooltip !== null && (\n                  <div class=\"sdds-slider__value\">\n                    {this.value}\n                    <svg\n                      width=\"18\"\n                      height=\"14\"\n                      viewBox=\"0 0 18 14\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        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\"\n                        fill=\"#37414F\"\n                      />\n                    </svg>\n                  </div>\n                )}\n\n                <div\n                  class=\"sdds-slider__scrubber-inner\"\n                  ref={(el) => {\n                    this.scrubberInnerElement = el as HTMLElement;\n                  }}\n                ></div>\n              </div>\n            </div>\n          </div>\n\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.max}\n              </div>\n              <div class=\"sdds-slider__input-field-wrapper\">\n                <input\n                  onFocus={(e) => {\n                    if (this.readonlyState) {\n                      e.preventDefault();\n                      this.inputElement.blur();\n                    }\n                  }}\n                  size={this.calculateInputSizeFromMax()}\n                  class=\"sdds-slider__input-field\"\n                  value={this.value}\n                  ref={(el) => {\n                    this.inputElement = el as HTMLInputElement;\n                  }}\n                />\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.plusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-plus\"\n              >\n                <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-spinner.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-96563708.js';
+
+const spinnerCss = ":root,html{--sdds-spinner-background:var(--sdds-blue-400);--sdds-spinner-background-inverted:var(--sdds-white);--sdds-spinner-speed:1.8s;--sdds-spinner-speed-lg:2s;--sdds-spinner-radius-xs:8px;--sdds-spinner-radius-sm:12px;--sdds-spinner-radius-md:26px;--sdds-spinner-radius-lg:42px;--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width-xs:3px;--sdds-spinner-stroke-width-sm:4px;--sdds-spinner-stroke-width-md:6px;--sdds-spinner-stroke-width-lg:8px;--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-spinner-svg{width:calc(var(--sdds-spinner-radius) * 2);height:calc(var(--sdds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.sdds-spinner-svg-xs{--sdds-spinner-radius:var(--sdds-spinner-radius-xs);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-xs);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-sm{--sdds-spinner-radius:var(--sdds-spinner-radius-sm);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-sm);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-md{--sdds-spinner-radius:var(--sdds-spinner-radius-md);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-md);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-lg{--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--sdds-spinner-animation-speed:var(--sdds-spinner-speed-lg)}.sdds-spinner-circle{cx:var(--sdds-spinner-radius);cy:var(--sdds-spinner-radius);r:calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);stroke-width:var(--sdds-spinner-stroke-width);fill:none;--sdds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--sdds-spinner-radius));stroke-dasharray:var(--sdds-spinner-stroke-dash);stroke-width:var(--sdds-spinner-stroke-width);animation:dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.sdds-spinner-circle-standard{stroke:var(--sdds-spinner-background)}.sdds-spinner-circle-inverted{stroke:var(--sdds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--sdds-spinner-stroke-dash))}to{stroke-dashoffset:var(--sdds-spinner-stroke-dash)}}";
+
+const Spinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'lg';
+    this.variant = 'standard';
+  }
+  render() {
+    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
+  }
+};
+Spinner.style = spinnerCss;
+
+export { Spinner as sdds_spinner };
+
+//# sourceMappingURL=sdds-spinner.entry.js.map

package/dist/esm/sdds-spinner.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-spinner.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+wEAA+wE;;MCOrxE,OAAO;;;gBAEwB,IAAI;mBAGH,UAAU;;EAErD,MAAM;IACJ,QACE,wBAAe,WAAW,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS,IAC3D,WAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,IAAI,EAAE,iBAAc,MAAM,IAC9E,cAAQ,KAAK,EAAE,2CAA2C,IAAI,CAAC,OAAO,EAAE,GAAI,CACxE,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=sdds-spinner","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import './spinner-vars.scss';\n@import '../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-spinner-svg {\n  width: calc(var(--sdds-spinner-radius) * 2);\n  height: calc(var(--sdds-spinner-radius) * 2);\n  transform: scale(-1, 1) rotate(-90deg);\n\n  &-xs {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-xs);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-sm {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-sm);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-md {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-md);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-lg {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-lg);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);\n  }\n}\n\n.sdds-spinner-circle {\n  cx: var(--sdds-spinner-radius);\n  cy: var(--sdds-spinner-radius);\n  r: calc(var(--sdds-spinner-radius) - (var(--sdds-spinner-stroke-width) / 2));\n  stroke-width: var(--sdds-spinner-stroke-width);\n  fill: none;\n\n  //Calculation for lenght of dash\n  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));\n\n  stroke-dasharray: var(--sdds-spinner-stroke-dash);\n  stroke-width: var(--sdds-spinner-stroke-width);\n  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;\n\n  &-standard {\n    stroke: var(--sdds-spinner-background);\n  }\n\n  &-inverted {\n    stroke: var(--sdds-spinner-background-inverted);\n  }\n}\n\n@keyframes dash {\n  from {\n    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));\n  }\n\n  to {\n    stroke-dashoffset: var(--sdds-spinner-stroke-dash);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: false,\n})\nexport class Spinner {\n  /** Size of spinner */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Variant of spinner */\n  @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n  render() {\n    return (\n      <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n        <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n          <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n        </svg>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-stepper-item.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-96563708.js';
+
+const sddsStepperItemCss = ":host{position:relative}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;width:30px}:host [role=listItem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:16px}:host [role=listItem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:16px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;width:24px}:host [role=listItem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}";
+
+const SddsStepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.labelText = '';
+    this.state = 'upcoming';
+    this.hideLabel = undefined;
+    this.size = undefined;
+    this.iconSize = undefined;
+    this.direction = undefined;
+    this.labelPosition = undefined;
+  }
+  componentWillLoad() {
+    this.stepperEl = this.el.closest('sdds-stepper');
+    this.direction = this.stepperEl.direction;
+    this.labelPosition = this.stepperEl.labelPosition;
+    this.size = this.stepperEl.size;
+    this.hideLabel = this.stepperEl.hideLabels;
+  }
+  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */
+  async setWidth(width) {
+    this.el.style.width = `${width}px`;
+  }
+  render() {
+    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("div", { class: "number sdds-detail-05" }, h("slot", null)))), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, this.labelText)))));
+  }
+  get el() { return getElement(this); }
+};
+SddsStepper.style = sddsStepperItemCss;
+
+export { SddsStepper as sdds_stepper_item };
+
+//# sourceMappingURL=sdds-stepper-item.entry.js.map

package/dist/esm/sdds-stepper-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-stepper-item.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,ynIAAynI;;MCOvoI,WAAW;;;qBAEM,EAAE;iBAGgC,UAAU;;;;;;;EAgBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;GAC5C;;EAID,MAAM,QAAQ,CAAC,KAAK;IAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;GACpC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EACnC,EAAE,IAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAC/B,KAEb,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAa,CACT,CACP,CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,SAAS,CAAO,CACvE,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n  content: ' ';\n  position: absolute;\n  background-color: var(--sdds-stepper-icon-step-background-after);\n  opacity: 0.16;\n}\n\n:host {\n  position: relative;\n\n  sdds-icon {\n    line-height: 1;\n  }\n\n  [role='listItem'] {\n    display: flex;\n    justify-content: start;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &.text-below {\n      flex-direction: column;\n    }\n\n    &.lg {\n      padding: 0 20px;\n      font: var(--sdds-detail-01);\n      letter-spacing: var(--sdds-detail-01-ls);\n\n      .content-container {\n        height: 30px;\n        width: 30px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 36px;\n          width: 1px;\n          top: 40px;\n          left: 36px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 24px);\n          right: 0;\n          top: 16px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          right: calc(50% + 24px);\n          left: 0;\n          top: 16px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    &.sm {\n      padding: 0 20px;\n      font: var(--sdds-detail-05);\n      letter-spacing: var(--sdds-detail-05-ls);\n\n      .content-container {\n        height: 24px;\n        width: 24px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 16px + 8px);\n          right: 0;\n          top: 13px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          left: 0;\n          right: calc(50% + 24px);\n          top: 13px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .content-container {\n      border-radius: 100px;\n      border: 1px solid var(--sdds-stepper-icon-background);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n\n      &.error {\n        border-color: var(--sdds-negative);\n        color: var(--sdds-negative);\n      }\n\n      &.success {\n        background-color: var(--sdds-positive);\n        border-color: var(--sdds-positive);\n        color: var(--sdds-white);\n      }\n\n      &.upcoming {\n        background-color: transparent;\n        border-color: var(--sdds-stepper-label-border-color-upcoming);\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n\n    .label {\n      text-align: center;\n\n      &.lg {\n        font: var(--sdds-detail-01);\n        letter-spacing: var(--sdds-detail-01-ls);\n      }\n\n      &.sm {\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n      }\n\n      &.upcoming {\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n  }\n}\n\n:host(.last) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::after {\n        display: none;\n      }\n    }\n  }\n\n  [role='listItem'] {\n    &.sm {\n      &.vertical {\n        &::before {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.first) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::before {\n        display: none;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Label text for the stepper-item. */\n  @Prop() labelText: string = '';\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: string;\n\n  @State() iconSize: string;\n\n  @State() direction: string;\n\n  @State() labelPosition: string;\n\n  @Element() el: HTMLElement;\n\n  stepperEl: HTMLSddsStepperElement;\n\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.direction = this.stepperEl.direction;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n  }\n\n  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n  @Method()\n  async setWidth(width) {\n    this.el.style.width = `${width}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              <div class=\"number sdds-detail-05\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-stepper.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-96563708.js';
+
+const sddsStepperCss = ":host [role=list]{display:flex;justify-content:space-evenly}:host [role=list].vertical{height:100%;flex-direction:column;justify-content:unset;gap:48px}:host [role=list].vertical.sm{gap:36px}";
+
+const SddsStepper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.direction = 'horizontal';
+    this.labelPosition = 'below';
+    this.size = 'lg';
+    this.hideLabels = false;
+    this.width = 0;
+  }
+  componentWillLoad() {
+    this.host.children[0].classList.add('first');
+    this.host.children[this.host.children.length - 1].classList.add('last');
+    if (this.direction === 'vertical') {
+      this.labelPosition = 'aside';
+    }
+  }
+  componentDidLoad() {
+    if (this.labelPosition === 'below') {
+      this.children = Array.from(this.host.children);
+      this.children.forEach((item) => {
+        if (item.offsetWidth > this.width) {
+          this.width = item.offsetWidth;
+        }
+      });
+      this.children.forEach((item) => item.setWidth(this.width));
+    }
+  }
+  render() {
+    return (h(Host, null, h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+SddsStepper.style = sddsStepperCss;
+
+export { SddsStepper as sdds_stepper };
+
+//# sourceMappingURL=sdds-stepper.entry.js.map

package/dist/esm/sdds-stepper.entry.js.map

@@ -0,0 +1 @@
+{"file":"sdds-stepper.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,iMAAiM;;MCQ3M,WAAW;;;qBAEyB,YAAY;yBAGhB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;iBAEV,CAAC;;EAM1B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;GACF;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;MAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAsC,CAAC;MACpF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI;QACzB,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;UACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/B;OACF,CAAC,CAAC;MACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC5D;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,+BAA+B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,IAExF,eAAa,CACV,CACA,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n  [role='list'] {\n    display: flex;\n    justify-content: space-evenly;\n\n    &.vertical {\n      height: 100%;\n      flex-direction: column;\n      justify-content: unset;\n      gap: 48px;\n    }\n\n    &.vertical.sm {\n      gap: 36px;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** The direction the children are layed out. */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  @State() width: number = 0;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsStepperItemElement>;\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.direction === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  componentDidLoad() {\n    if (this.labelPosition === 'below') {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n      this.children.forEach((item) => {\n        if (item.offsetWidth > this.width) {\n          this.width = item.offsetWidth;\n        }\n      });\n      this.children.forEach((item) => item.setWidth(this.width));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ol\n          role=\"list\"\n          class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n}\n"],"version":3}