@scania/tegel 0.0.52 → 0.0.71-beta

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("slot", { name: "index" }))), !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/tabs/folder-tabs/folder-tab/sdds-folder-tab.css

@@ -0,0 +1,75 @@
+:host {
+  box-sizing: border-box;
+  position: relative;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host ::slotted(*) {
+  all: unset;
+  min-width: 142px;
+  display: block;
+  width: calc(100% - 32px);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  cursor: pointer;
+  padding: 16px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  border: none;
+  border-left: 1px solid;
+  border-left-color: transparent;
+}
+:host div:not(.selected) {
+  background-color: var(--sdds-folder-tab-background);
+}
+:host div:not(.selected) ::slotted(*) {
+  border-left-color: var(--sdds-folder-tab-divider-color);
+  border-top: 2px solid var(--sdds-folder-tab-background);
+  color: var(--sdds-folder-tab-item-color);
+}
+:host div:not(.selected):hover {
+  background-color: var(--sdds-folder-tab-background-hover);
+  cursor: pointer;
+}
+:host div:not(.selected):hover ::slotted(*) {
+  border-top-color: var(--sdds-folder-tab-background-hover);
+  color: var(--sdds-folder-tab-color);
+}
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .disabled {
+  pointer-events: none;
+}
+:host .disabled ::slotted(*) {
+  color: var(--sdds-folder-tab-item-color-disabled);
+}
+:host .disabled:focus-visible {
+  outline: none;
+}
+:host .selected {
+  background-color: var(--sdds-folder-tab-background-selected);
+  border-top: 2px solid var(--sdds-folder-tab-border-selected);
+}
+:host .selected::after {
+  content: " ";
+  background-color: var(--sdds-folder-tab-background-selected);
+  width: 1px;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+:host .selected ::slotted(*) {
+  color: var(--sdds-folder-tab-color);
+}
+
+:host(.first) :not(.selected) ::slotted(*) {
+  border-left-color: transparent;
+}

package/dist/collection/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js

@@ -0,0 +1,109 @@
+import { Host, h } from '@stencil/core';
+export class SddsFolderTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}
+                `, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
+  }
+  static get is() { return "sdds-folder-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-folder-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-folder-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {},
+      "tabWidth": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setTabWidth": {
+        "complexType": {
+          "signature": "(width: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the width of the tab. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      },
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the tab as selected. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -30,12 +30,46 @@ export class InlineTabs {
       });
       resizeObserver.observe(this.navWrapperElement);
     };
+    this.addEventListenerToTabs = () => {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+            }
+          }
+        });
+        return item;
+      });
+    };
     this.modeVariant = null;
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.buttonWidth = 0;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
-    this.selectedTabIndex = undefined;
+  }
+  /** Sets the passed tabindex as the selected tab. */
+  async selectTab(tabIndex) {
+    if (!this.children[tabIndex].disabled) {
+      this.children.forEach((element) => element.setSelected(false));
+      this.children = this.children.map((element, index) => {
+        if (index === tabIndex) {
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
+        }
+        return element;
+      });
+    }
+    return {
+      selectedTabIndex: this.selectedIndex,
+    };
   }
   calculateButtonWidth() {
     this.children = this.children.map((tab) => {
@@ -75,46 +109,29 @@ export class InlineTabs {
   }
   connectedCallback() {
     this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = item.innerHTML;
-          this.selectedTabIndex = index;
-        }
-      });
-      if (index === 0) {
-        item.classList.add('first');
-      }
-      if (index === this.children.length - 1) {
-        item.classList.add('last');
-      }
-      if (item.selected) {
-        this.selectedTab = item.innerHTML;
-        this.selectedTabIndex = index;
-      }
-      return item;
-    });
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
   }
   componentDidLoad() {
+    if (this.selectedIndex === undefined) {
+      this.addEventListenerToTabs();
+      this.children[this.defaultSelectedIndex].setSelected(true);
+      this.selectedIndex = this.defaultSelectedIndex;
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
+    else {
+      this.children[this.selectedIndex].setSelected(true);
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
     this.calculateButtonWidth();
   }
   componentDidUpdate() {
     this.calculateButtonWidth();
   }
-  componentWillRender() {
-    if (!this.selectedTab) {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        if (item.selected) {
-          this.selectedTab = item.innerHTML;
-          this.selectedTabIndex = index;
-        }
-        return item;
-      });
-    }
-  }
   componentDidRender() {
     if (this.buttonsWidth > this.componentWidth) {
       this.evaluateScrollButtons();
@@ -125,38 +142,10 @@ export class InlineTabs {
     }
     this.addResizeObserver();
   }
-  /** Sets the passed tabindex as the selected tab. */
-  async selectTab(tabIndex) {
-    if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = element.innerHTML;
-          this.selectedTabIndex = tabIndex;
-        }
-        return element;
-      });
-    }
-    return {
-      selectedTab: this.selectedTab,
-      selectedTabIndex: this.selectedTabIndex,
-    };
-  }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab);
-  }
-  handleSelectedTabIndexChange() {
-    this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-      selectedTabIndex: this.selectedTabIndex,
-    });
-  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      }, class: "wrapper", role: "list" }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
   }
   static get is() { return "sdds-folder-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -189,6 +178,41 @@ export class InlineTabs {
         "attribute": "mode-variant",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "defaultSelectedIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the default selected tab."
+        },
+        "attribute": "default-selected-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "selectedIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+        },
+        "attribute": "selected-index",
+        "reflect": true
       }
     };
   }
@@ -196,9 +220,7 @@ export class InlineTabs {
     return {
       "buttonWidth": {},
       "showLeftScroll": {},
-      "showRightScroll": {},
-      "selectedTab": {},
-      "selectedTabIndex": {}
+      "showRightScroll": {}
     };
   }
   static get events() {
@@ -210,11 +232,11 @@ export class InlineTabs {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Event emitted when the selected tab is changed."
         },
         "complexType": {
-          "original": "{\n    selectedTab: string;\n    selectedTabIndex: number;\n  }",
-          "resolved": "{ selectedTab: string; selectedTabIndex: number; }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
+          "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }
       }];
@@ -223,7 +245,7 @@ export class InlineTabs {
     return {
       "selectTab": {
         "complexType": {
-          "signature": "(tabIndex: number) => Promise<{ selectedTab: string; selectedTabIndex: number; }>",
+          "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -233,7 +255,7 @@ export class InlineTabs {
               "location": "global"
             }
           },
-          "return": "Promise<{ selectedTab: string; selectedTabIndex: number; }>"
+          "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
           "text": "Sets the passed tabindex as the selected tab.",
@@ -243,14 +265,4 @@ export class InlineTabs {
     };
   }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedTab",
-        "methodName": "handleSelectedTabChange"
-      }, {
-        "propName": "selectedTabIndex",
-        "methodName": "handleSelectedTabIndexChange"
-      }];
-  }
 }
-//# sourceMappingURL=folder-tabs.js.map

package/dist/collection/components/tabs/inline-tabs/inline-tab/sdds-inline-tab.css

@@ -0,0 +1,73 @@
+:host {
+  box-sizing: border-box;
+  z-index: 200;
+  display: block;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host ::slotted(*) {
+  all: unset;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-navigation-tabs-tab-color);
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out 0s;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  width: 100%;
+  margin: 20px 4px;
+}
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .inline-tab-item {
+  position: relative;
+  margin-right: 32px;
+}
+:host .inline-tab-item:hover {
+  cursor: pointer;
+}
+:host .inline-tab-item:hover::after {
+  width: 100%;
+}
+:host .inline-tab-item::after {
+  content: " ";
+  position: absolute;
+  bottom: -20px;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);
+  transition: width 0.15s ease-in-out 0s;
+  z-index: 1;
+}
+:host .selected ::slotted(*) {
+  color: var(--sdds-inline-tabs-tab-color-selected);
+}
+:host .selected::after {
+  width: 100%;
+  background-color: var(--sdds-inline-tabs-tab-indicator-background-active);
+}
+:host .disabled {
+  color: var(--sdds-inline-tabs-tab-color-disabled);
+  pointer-events: none;
+}
+:host .disabled ::slotted(*) {
+  opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);
+}
+
+:host(.first) {
+  margin-left: 32px;
+}
+
+:host(.last) {
+  margin-right: 32px;
+}