@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -0,0 +1,80 @@
+import { Host, h } from '@stencil/core';
+export class TdsInlineTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the Tab as selected. Used by the <tds-inline-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "tds-inline-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["inline-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["inline-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": {}
+    };
+  }
+  static get methods() {
+    return {
+      "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 <tds-inline-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}

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

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: flex;
-  background-color: var(--sdds-inline-tabs-background);
+  background-color: var(--tds-inline-tabs-background);
   position: relative;
 }
 :host * {
@@ -10,8 +10,8 @@
 :host::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);
-  opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);
+  border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
+  opacity: var(--tds-inline-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,11 +38,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  color: var(--sdds-folder-tabs-scroll-btn-color);
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--sdds-inline-tabs-scroll-btn-background);
+  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -59,18 +59,18 @@
 }
 :host .scroll-right-button:hover,
 :host .scroll-left-button:hover {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
 }
 :host .scroll-right-button:active,
 :host .scroll-left-button:active {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {
-  fill: var(--sdds-folder-tabs-scroll-btn-color);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

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

@@ -1,5 +1,5 @@
 import { Host, h } from '@stencil/core';
-export class InlineTabsFullbleed {
+export class TdsInlineTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
     this.componentWidth = 0; // visible width of this component
@@ -33,15 +33,15 @@ export class InlineTabsFullbleed {
     this.addEventListenerToTabs = () => {
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const sddsChangeEvent = this.sddsChange.emit({
+          const tdsChangeEvent = this.tdsChange.emit({
             selectedTabIndex: this.children.indexOf(item),
           });
-          if (!sddsChangeEvent.defaultPrevented) {
+          if (!tdsChangeEvent.defaultPrevented) {
             if (!item.disabled) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.sddsChange.emit({
+              this.tdsChange.emit({
                 selectedTabIndex: this.selectedIndex,
               });
             }
@@ -57,7 +57,7 @@ export class InlineTabsFullbleed {
     this.showRightScroll = false;
     this.buttonWidth = 0;
   }
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  /** Selects a Tab based on tabindex, will not select a disabled Tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
       this.children.forEach((element) => element.setSelected(false));
@@ -65,7 +65,7 @@ export class InlineTabsFullbleed {
         if (index === tabIndex) {
           element.setSelected(true);
           this.selectedIndex = tabIndex;
-          this.sddsChange.emit({
+          this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
           });
         }
@@ -111,13 +111,13 @@ export class InlineTabsFullbleed {
       this.addEventListenerToTabs();
       this.children[this.defaultSelectedIndex].setSelected(true);
       this.selectedIndex = this.defaultSelectedIndex;
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         selectedTabIndex: this.selectedIndex,
       });
     }
     else {
       this.children[this.selectedIndex].setSelected(true);
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         selectedTabIndex: this.selectedIndex,
       });
     }
@@ -133,11 +133,11 @@ export class InlineTabsFullbleed {
     this.addResizeObserver();
   }
   render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
   }
-  static get is() { return "sdds-inline-tabs"; }
+  static get is() { return "tds-inline-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -163,7 +163,7 @@ export class InlineTabsFullbleed {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+          "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -181,7 +181,7 @@ export class InlineTabsFullbleed {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the default selected tab."
+          "text": "Sets the default selected Tab."
         },
         "attribute": "default-selected-index",
         "reflect": false,
@@ -199,7 +199,7 @@ export class InlineTabsFullbleed {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -215,8 +215,8 @@ export class InlineTabsFullbleed {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -248,7 +248,7 @@ export class InlineTabsFullbleed {
           "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
-          "text": "Selects a tab based on tabindex, will not select a disabled tab.",
+          "text": "Selects a Tab based on tabindex, will not select a disabled Tab.",
           "tags": []
         }
       }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-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(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-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: 26px 4px;
+}
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .navigation-tab-item {
+  position: relative;
+  margin-right: 32px;
+}
+:host .navigation-tab-item:hover {
+  cursor: pointer;
+}
+:host .navigation-tab-item:hover::after {
+  width: 100%;
+}
+:host .navigation-tab-item::after {
+  content: " ";
+  position: absolute;
+  bottom: -26px;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  width: 0%;
+  margin-right: auto;
+  height: 2px;
+  background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
+  transition: width 0.15s ease-in-out 0s;
+  z-index: 1;
+}
+:host .selected ::slotted(*) {
+  color: var(--tds-navigation-tabs-tab-color-selected);
+}
+:host .selected::after {
+  width: 100%;
+  background-color: var(--tds-navigation-tabs-tab-indicator-background-active);
+}
+:host .disabled {
+  color: var(--tds-navigation-tabs-tab-color-disabled);
+  pointer-events: none;
+}
+:host .disabled ::slotted(*) {
+  opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
+}
+
+:host(.first) {
+  margin-left: 32px;
+}
+
+:host(.last) {
+  margin-right: 32px;
+}

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -0,0 +1,80 @@
+import { Host, h } from '@stencil/core';
+export class TdsNavigationTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the Tab as selected. Used by the <tds-navigation-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "tds-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["navigation-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["navigation-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": {}
+    };
+  }
+  static get methods() {
+    return {
+      "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 <tds-navigation-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -1,7 +1,7 @@
 :host {
   box-sizing: border-box;
   display: flex;
-  background-color: var(--sdds-inline-tabs-background);
+  background-color: var(--tds-inline-tabs-background);
   position: relative;
 }
 :host * {
@@ -10,8 +10,8 @@
 :host::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);
-  opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);
+  border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
+  opacity: var(--tds-inline-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,11 +38,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  color: var(--sdds-folder-tabs-scroll-btn-color);
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--sdds-inline-tabs-scroll-btn-background);
+  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -59,18 +59,18 @@
 }
 :host .scroll-right-button:hover,
 :host .scroll-left-button:hover {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
 }
 :host .scroll-right-button:active,
 :host .scroll-left-button:active {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {
-  fill: var(--sdds-folder-tabs-scroll-btn-color);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

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

@@ -1,5 +1,5 @@
 import { Host, h, } from '@stencil/core';
-export class NavigationTabs {
+export class TdsNavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
     this.componentWidth = 0; // visible width of this component
@@ -15,7 +15,7 @@ export class NavigationTabs {
             const style = window.getComputedStyle(navButton);
             buttonsWidth +=
               navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-            navButton.classList.add('sdds-navigation-tabs-tab');
+            navButton.classList.add('tds-navigation-tabs-tab');
           });
           this.componentWidth = componentWidth;
           this.buttonsWidth = buttonsWidth;
@@ -35,15 +35,15 @@ export class NavigationTabs {
       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)
+          const tdsChangeEvent = this.tdsChange.emit({
+            selectedTabIndex: this.children.indexOf(item),
           });
-          if (!sddsChangeEvent.defaultPrevented) {
+          if (!tdsChangeEvent.defaultPrevented) {
             if (!item.disabled) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.sddsChange.emit({
+              this.tdsChange.emit({
                 selectedTabIndex: this.selectedIndex,
               });
             }
@@ -57,13 +57,13 @@ export class NavigationTabs {
         this.addEventListenerToTabs();
         this.children[this.defaultSelectedIndex].setSelected(true);
         this.selectedIndex = this.defaultSelectedIndex;
-        this.sddsChange.emit({
+        this.tdsChange.emit({
           selectedTabIndex: this.selectedIndex,
         });
       }
       else {
         this.children[this.selectedIndex].setSelected(true);
-        this.sddsChange.emit({
+        this.tdsChange.emit({
           selectedTabIndex: this.selectedIndex,
         });
       }
@@ -74,7 +74,7 @@ export class NavigationTabs {
     this.showLeftScroll = false;
     this.showRightScroll = false;
   }
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
       this.children.forEach((element) => element.setSelected(false));
@@ -124,11 +124,11 @@ export class NavigationTabs {
     this.addResizeObserver();
   }
   render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
   }
-  static get is() { return "sdds-navigation-tabs"; }
+  static get is() { return "tds-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -154,7 +154,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+          "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -172,7 +172,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the default selected tab."
+          "text": "Sets the default selected Tab."
         },
         "attribute": "default-selected-index",
         "reflect": false,
@@ -190,7 +190,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -205,14 +205,14 @@ export class NavigationTabs {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event emitted when the selected tab is changed."
+          "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
           "original": "{\n    selectedTabIndex: number;\n  }",
@@ -238,7 +238,7 @@ export class NavigationTabs {
           "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
-          "text": "Sets the passed tabindex as the selected tab.",
+          "text": "Sets the passed tabindex as the selected Tab.",
           "tags": []
         }
       }