@scania/tegel 0.0.5 → 0.0.7

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

@@ -4,14 +4,11 @@ export class Slider {
     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 = [];
@@ -81,33 +78,43 @@ export class Slider {
     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();
+    this.scrubberCore(event);
   }
   handleTouchMove(event) {
     event.preventDefault();
     if (!this.scrubberGrabbed) {
       return;
     }
+    this.scrubberCore(event);
+  }
+  scrubberCore(event) {
     const numTicks = parseInt(this.ticks);
     const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.touches[0].clientX - trackRect.left;
+    let localLeft = 0;
+    if (event.type === 'mousemove') {
+      localLeft = event.clientX - trackRect.left;
+    }
+    else if (event.type === 'touchmove') {
+      localLeft = event.touches[0].clientX - trackRect.left;
+    }
+    else
+      console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
+      const trackWidth = this.getTrackWidth();
+      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
+      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
+      let scrubberPositionPX = 0;
+      if (localLeft >= 0 && localLeft <= trackWidth) {
+        scrubberPositionPX = localLeft;
+      }
+      else if (localLeft > trackWidth) {
+        scrubberPositionPX = trackWidth;
+      }
+      else if (localLeft < 0) {
+        scrubberPositionPX = 0;
+      }
+      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
     }
     this.scrubberLeft = this.constrainScrubber(localLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
@@ -181,13 +188,10 @@ export class Slider {
       this.eventListenersAdded = true;
       this.scrubberElement.addEventListener('mousedown', (event) => {
         event.preventDefault();
-        this.grabScrubber(event.offsetX, event.offsetY);
+        this.grabScrubber();
       });
-      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);
+      this.scrubberElement.addEventListener('touchstart', () => {
+        this.grabScrubber();
       });
       if (this.useControls) {
         this.minusElement.addEventListener('click', () => {
@@ -220,14 +224,10 @@ export class Slider {
     this.calculateScrubberLeftFromValue(this.value);
     this.updateTrack();
   }
-  grabScrubber(xOffset, yOffset) {
+  grabScrubber() {
     if (this.readonlyState) {
       return;
     }
-    this.scrubberGrabPos = {
-      x: xOffset,
-      y: yOffset,
-    };
     this.scrubberGrabbed = true;
     this.scrubberInnerElement.classList.add('pressed');
   }
@@ -281,13 +281,13 @@ export class Slider {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled !== null) {
+    if (this.disabled) {
       this.disabledState = true;
     }
     else {
       this.disabledState = false;
     }
-    if (this.readOnly !== null) {
+    if (this.readOnly) {
       this.readonlyState = true;
     }
     else {
@@ -295,10 +295,10 @@ export class Slider {
     }
     this.useInput = false;
     this.useControls = false;
-    if (this.controls !== null) {
+    if (this.controls) {
       this.useControls = true;
     }
-    else if (this.input !== null) {
+    else if (this.input) {
       this.useInput = true;
     }
     this.useSmall = false;
@@ -306,7 +306,7 @@ export class Slider {
       this.useSmall = true;
     }
     this.useSnapping = false;
-    if (this.snap !== null) {
+    if (this.snap) {
       this.useSnapping = true;
     }
     const min = this.getMin();
@@ -317,21 +317,17 @@ export class Slider {
     }
   }
   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) => {
+    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
-      } }, this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "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) => {
+      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
         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.tooltip && (h("div", { class: "sdds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
         this.scrubberInnerElement = el;
       } })))), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
@@ -639,7 +635,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Id for the sliders input element, randomly generated if not specified."
+          "text": "ID for the sliders input element, randomly generated if not specified."
         },
         "attribute": "slider-id",
         "reflect": false,
@@ -652,11 +648,11 @@ export class Slider {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique checkbox identifier and value when the slider has a change in value."
+          "text": "Sends the value of the slider when changed."
         },
         "complexType": {
           "original": "{\n    value: string;\n  }",
@@ -719,4 +715,3 @@ export class Slider {
       }];
   }
 }
-//# sourceMappingURL=slider.js.map

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

@@ -197,39 +197,46 @@ export default {
   },
 };
 const sizeLookUp = {
-  'Large': 'lg',
-  'Small': 'sm',
+  Large: 'lg',
+  Small: 'sm',
 };
 const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, scrubberSize, readonly, disabled, }) => formatHtmlPreview(`
-    <sdds-slider id="sdds-slider"
-      min="${min}" 
-      max="${max}" 
-      ${showControls && step ? `step="${step}"` : ''}
-      value="${initialValue}" 
-      ${showTicks ? `ticks="${numTicks}"` : ''} 
-      ${showTickNumbers ? 'show-tick-numbers' : ''} 
-      ${snapToTicks ? 'snap' : ''} 
-      ${showLabel ? `label="${labelText}"` : ''} 
-      ${showTooltip ? 'tooltip' : ''} 
-      ${showControls ? 'controls' : ''} 
-      ${showInput ? 'input' : ''} 
-      ${disabled ? 'disabled' : ''} 
-      scrubber-size="${sizeLookUp[scrubberSize]}"
-      ${readonly ? 'read-only' : ''} 
-      >
+ <!-- Style code below is just for demo purposes -->
+    <style>
+      .demo-wrapper {
+          width: 500px;
+          margin-left: 150px;
+      }
+    </style>
 
-    </sdds-slider>
+   <div class="demo-wrapper">
+     <sdds-slider id="sdds-slider"
+        min="${min}"
+        max="${max}"
+        ${showControls && step ? `step="${step}"` : ''}
+        value="${initialValue}"
+        ${showTicks ? `ticks="${numTicks}"` : ''}
+        ${showTickNumbers ? 'show-tick-numbers' : ''}
+        ${snapToTicks ? 'snap' : ''}
+        ${showLabel ? `label="${labelText}"` : ''}
+        ${showTooltip ? 'tooltip' : ''}
+        ${showControls ? 'controls' : ''}
+        ${showInput ? 'input' : ''}
+        ${disabled ? 'disabled' : ''}
+        scrubber-size="${sizeLookUp[scrubberSize]}"
+        ${readonly ? 'read-only' : ''}
+        >
+      </sdds-slider>
+    </div>
 
-    <!-- Script tag for demo purposes -->
+     <!-- Script tag for demo purposes -->
     <script>
-    slider = document.querySelectorAll('sdds-slider')[0]
-
-    slider.removeEventListener('sddsChange', null)
-    slider.addEventListener('sddsChange', (event) => {
-      console.log('Slider changed, value:', event.detail.value);
-    });
+      slider = document.querySelectorAll('sdds-slider')[0]
 
+      slider.removeEventListener('sddsChange', null)
+      slider.addEventListener('sddsChange', (event) => {
+        console.log(event);
+      });
     </script>
   `);
 export const Default = Template.bind({});
-//# sourceMappingURL=slider.stories.js.map

package/dist/collection/components/spinner/spinner.js

@@ -59,4 +59,3 @@ export class Spinner {
     };
   }
 }
-//# sourceMappingURL=spinner.js.map

package/dist/collection/components/spinner/spinner.stories.js

@@ -63,4 +63,3 @@ export const Inverted = Template.bind({});
 Inverted.args = {
   variant: 'Inverted',
 };
-//# sourceMappingURL=spinner.stories.js.map

package/dist/collection/components/stepper/sdds-stepper.css

@@ -1,12 +1,20 @@
 :host [role=list] {
   display: flex;
   justify-content: space-evenly;
+  min-width: 100%;
+}
+:host [role=list]:not(.text-position-aside) {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  list-style: none;
 }
 :host [role=list].vertical {
   height: 100%;
+  display: flex;
   flex-direction: column;
   justify-content: unset;
-  gap: 48px;
+  gap: 52px;
 }
 :host [role=list].vertical.sm {
   gap: 36px;

package/dist/collection/components/stepper/sdds-stepper.js

@@ -1,32 +1,49 @@
 import { Host, h } from '@stencil/core';
 export class SddsStepper {
   constructor() {
-    this.direction = 'horizontal';
+    this.orientation = 'horizontal';
     this.labelPosition = 'below';
     this.size = 'lg';
     this.hideLabels = false;
-    this.width = 0;
+    this.stepperId = crypto.randomUUID();
   }
   componentWillLoad() {
     this.host.children[0].classList.add('first');
     this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.direction === 'vertical') {
+    if (this.orientation === '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));
-    }
+  handleDirectionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['orientation'],
+      orientation: this.orientation,
+    });
+  }
+  handleLabelPositionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['labelPosition'],
+      labelPosition: this.labelPosition,
+    });
+  }
+  handleSizeChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['size'],
+      size: this.size,
+    });
+  }
+  handleHideLabelsChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['hideLabels'],
+      hideLabels: this.hideLabels,
+    });
   }
   render() {
-    return (h(Host, null, h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
   }
   static get is() { return "sdds-stepper"; }
   static get encapsulation() { return "shadow"; }
@@ -42,7 +59,7 @@ export class SddsStepper {
   }
   static get properties() {
     return {
-      "direction": {
+      "orientation": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -54,9 +71,9 @@ export class SddsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The direction the children are layed out."
+          "text": "The orientation the children are layed out."
         },
-        "attribute": "direction",
+        "attribute": "orientation",
         "reflect": false,
         "defaultValue": "'horizontal'"
       },
@@ -113,14 +130,64 @@ export class SddsStepper {
         "attribute": "hide-labels",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "stepperId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time."
+        },
+        "attribute": "stepper-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
       }
     };
   }
-  static get states() {
-    return {
-      "width": {}
-    };
+  static get events() {
+    return [{
+        "method": "internalSddsPropsChange",
+        "name": "internalSddsPropsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalSddsStepperPropChange",
+          "resolved": "{ stepperId: string; changed: (keyof SddsStepperProps)[]; } & Partial<SddsStepperProps>",
+          "references": {
+            "InternalSddsStepperPropChange": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/stepper/sdds-stepper.tsx"
+            }
+          }
+        }
+      }];
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "orientation",
+        "methodName": "handleDirectionChange"
+      }, {
+        "propName": "labelPosition",
+        "methodName": "handleLabelPositionChange"
+      }, {
+        "propName": "size",
+        "methodName": "handleSizeChange"
+      }, {
+        "propName": "hideLabels",
+        "methodName": "handleHideLabelsChange"
+      }];
+  }
 }
-//# sourceMappingURL=sdds-stepper.js.map

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.css

@@ -1,5 +1,6 @@
 :host {
   position: relative;
+  display: table-cell;
 }
 :host sdds-icon {
   line-height: 1;
@@ -21,7 +22,7 @@
 }
 :host [role=listItem].lg .content-container {
   height: 30px;
-  width: 30px;
+  min-width: 30px;
 }
 :host [role=listItem].lg.vertical::after {
   content: " ";
@@ -41,7 +42,7 @@
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listItem].lg.horizontal::before {
   content: " ";
@@ -51,7 +52,7 @@
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
@@ -82,7 +83,7 @@
 }
 :host [role=listItem].sm .content-container {
   height: 24px;
-  width: 24px;
+  min-width: 24px;
 }
 :host [role=listItem].sm.vertical::after {
   content: " ";

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.js

@@ -1,27 +1,37 @@
 import { Host, h } from '@stencil/core';
 export class SddsStepper {
   constructor() {
-    this.labelText = '';
+    this.index = undefined;
     this.state = 'upcoming';
     this.hideLabel = undefined;
     this.size = undefined;
-    this.iconSize = undefined;
-    this.direction = undefined;
+    this.orientation = undefined;
     this.labelPosition = undefined;
   }
+  /* Needs to be onload to do this on any updates. */
   componentWillLoad() {
     this.stepperEl = this.el.closest('sdds-stepper');
-    this.direction = this.stepperEl.direction;
+    this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
     this.hideLabel = this.stepperEl.hideLabels;
+    this.stepperId = this.stepperEl.stepperId;
   }
-  /** 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`;
+  handlePropsChange(event) {
+    if (this.stepperId === event.detail.stepperId) {
+      event.detail.changed.forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
+          this.labelPosition = 'aside';
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
   }
   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)))));
+    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.orientation} 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' })) : (this.index)), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
   }
   static get is() { return "sdds-stepper-item"; }
   static get encapsulation() { return "shadow"; }
@@ -37,7 +47,7 @@ export class SddsStepper {
   }
   static get properties() {
     return {
-      "labelText": {
+      "index": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -49,11 +59,10 @@ export class SddsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label text for the stepper-item."
+          "text": "Index of the step. Will be displayed in the step if state is current/upcoming."
         },
-        "attribute": "label-text",
-        "reflect": false,
-        "defaultValue": "''"
+        "attribute": "index",
+        "reflect": false
       },
       "state": {
         "type": "string",
@@ -79,34 +88,18 @@ export class SddsStepper {
     return {
       "hideLabel": {},
       "size": {},
-      "iconSize": {},
-      "direction": {},
+      "orientation": {},
       "labelPosition": {}
     };
   }
-  static get methods() {
-    return {
-      "setWidth": {
-        "complexType": {
-          "signature": "(width: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to set the width if the stepper item based on its siblings widht, used by the parent element.",
-          "tags": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "internalSddsPropsChange",
+        "method": "handlePropsChange",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
-//# sourceMappingURL=sdds-stepper-item.js.map

package/dist/collection/components/stepper/stepper.stories.js

@@ -127,4 +127,3 @@ const Template = ({ size, style, iconType, hideLabels }) => {
 };
 export const Native = Template.bind({});
 Native.args = {};
-//# sourceMappingURL=stepper.stories.js.map