@scania/tegel 0.0.52 → 0.0.71-beta

package/dist/collection/components/side-menu/webcomponent/side-menu.js

@@ -0,0 +1,266 @@
+import { h, Host, } from '@stencil/core';
+import { dfs, isFocusable } from '../../../utils/utils';
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+export class SddsSideMenu {
+  constructor() {
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isCollapsed = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+    this.isCollapsed = this.collapsed;
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    /** Emits the internal collapse event when the prop has changed. */
+    this.internalSddsSideMenuPropChange.emit({
+      changed: ['collapsed'],
+      collapsed: newVal,
+    });
+    this.isCollapsed = newVal;
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = dfs(this.host, isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (h(Host, { role: "navigation" }, h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "sdds-side-menu-wrapper" }, h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+  }
+  static get is() { return "sdds-side-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Applicable only for mobile. If the side menu is open or not."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "persistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Applicable only for desktop. If the side menu should always be shown."
+        },
+        "attribute": "persistent",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the sddsCollapse event."
+        },
+        "attribute": "collapsed",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isUpperSlotEmpty": {},
+      "isClosed": {},
+      "isOpen": {},
+      "isClosing": {},
+      "isCollapsed": {},
+      "isOpening": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsCollapse",
+        "name": "sddsCollapse",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is emitted when the side menu is collapsed."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "local",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "internalSddsCollapse",
+        "name": "internalSddsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts collapsed state to child components."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "local",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "internalSddsSideMenuPropChange",
+        "name": "internalSddsSideMenuPropChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts collapsed state to child components."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalSddsSideMenuPropChange",
+          "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
+          "references": {
+            "InternalSddsSideMenuPropChange": {
+              "location": "local",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "onOpenChange"
+      }, {
+        "propName": "collapsed",
+        "methodName": "onCollapsedChange"
+      }, {
+        "propName": "isOpening",
+        "methodName": "onIsOpenChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "internalSddsCollapse",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/slider/slider.css

@@ -1,38 +1,3 @@
-:root,
-.sdds-mode-light {
-  --sdds-slider-label-color: var(--sdds-grey-958);
-  --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-slider-disabled: var(--sdds-grey-400);
-  --sdds-slider-value-tooltip-background: var(--sdds-grey-800);
-  --sdds-slider-value-tooltip-color: var(--sdds-white);
-}
-
-.sdds-mode-dark {
-  --sdds-slider-label-color: var(--sdds-grey-100);
-  --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-disabled: var(--sdds-grey-700);
-  --sdds-slider-value-tooltip-background: var(--sdds-grey-200);
-  --sdds-slider-value-tooltip-color: var(--sdds-grey-958);
-}
-
 sdds-slider {
   box-sizing: border-box;
   width: 100%;
@@ -89,11 +54,15 @@ sdds-slider input[type=range].sdds-slider-native-element {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
 }
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-value.min-value {
+  padding-left: 0;
+}
 .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;
+  border-radius: 4px 4px 0 0;
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
   font: var(--sdds-detail-02);
@@ -119,11 +88,11 @@ sdds-slider input[type=range].sdds-slider-native-element {
   user-select: none;
   position: absolute;
   color: var(--sdds-slider-label-color);
-  top: -16px;
+  padding-bottom: 16px;
   transform: translateY(-100%);
 }
 .sdds-slider label.offset {
-  top: -35px;
+  padding-bottom: 34px;
 }
 .sdds-slider .sdds-slider__value {
   font: var(--sdds-detail-01);

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');
   }
@@ -317,15 +317,11 @@ 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 }), 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;
@@ -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,7 +648,7 @@ export class Slider {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -719,4 +715,3 @@ export class Slider {
       }];
   }
 }
-//# sourceMappingURL=slider.js.map

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

@@ -59,4 +59,3 @@ export class Spinner {
     };
   }
 }
-//# sourceMappingURL=spinner.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/martin.jarsater/Documents/scania/tegel/core/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