@scania/tegel 0.0.5 → 0.0.6

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

@@ -30,121 +30,60 @@ export class InlineTabsFullbleed {
       });
       resizeObserver.observe(this.navWrapperElement);
     };
+    this.addEventListenerToTabs = () => {
+      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;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
     this.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
     this.buttonWidth = 0;
   }
   /** 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.removeAttribute('selected'));
+      this.children.forEach((element) => element.setSelected(false));
       this.children = this.children.map((element, index) => {
         if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
+          this.sddsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+          });
         }
         return element;
       });
     }
     return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
+      selectedTabIndex: this.selectedIndex,
     };
   }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  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 = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-  }
-  componentWillRender() {
-    if (!this.selectedTab) {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        if (item.selected) {
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-        return item;
-      });
-    }
-  }
-  componentDidRender() {
-    if (this.buttonsWidth > this.componentWidth) {
-      this.evaluateScrollButtons();
-    }
-    else {
-      this.showLeftScroll = false;
-      this.showRightScroll = false;
-    }
-    this.addResizeObserver();
-  }
   scrollRight() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + 95;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   scrollLeft() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - 10;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   evaluateScrollButtons() {
@@ -162,8 +101,39 @@ export class InlineTabsFullbleed {
       this.showLeftScroll = true;
     }
   }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    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,
+      });
+    }
+  }
+  componentDidRender() {
+    if (this.buttonsWidth > this.componentWidth) {
+      this.evaluateScrollButtons();
+    }
+    else {
+      this.showLeftScroll = false;
+      this.showRightScroll = false;
+    }
+    this.addResizeObserver();
+  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-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" })))));
   }
@@ -198,6 +168,41 @@ export class InlineTabsFullbleed {
         "attribute": "mode-variant",
         "reflect": false,
         "defaultValue": "'primary'"
+      },
+      "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
       }
     };
   }
@@ -205,7 +210,6 @@ export class InlineTabsFullbleed {
     return {
       "showLeftScroll": {},
       "showRightScroll": {},
-      "selectedTab": {},
       "buttonWidth": {}
     };
   }
@@ -221,8 +225,8 @@ export class InlineTabsFullbleed {
           "text": ""
         },
         "complexType": {
-          "original": "{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }",
-          "resolved": "{ selectedTab: { tab: string; tabIndex: number; }; }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
+          "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }
       }];
@@ -231,7 +235,7 @@ export class InlineTabsFullbleed {
     return {
       "selectTab": {
         "complexType": {
-          "signature": "(tabIndex: number) => Promise<{ selectedTab: string; selectedTabIndex: number; }>",
+          "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -241,7 +245,7 @@ export class InlineTabsFullbleed {
               "location": "global"
             }
           },
-          "return": "Promise<{ selectedTab: string; selectedTabIndex: number; }>"
+          "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
           "text": "Selects a tab based on tabindex, will not select a disabled tab.",
@@ -251,11 +255,5 @@ export class InlineTabsFullbleed {
     };
   }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedTab",
-        "methodName": "handleSelectedTabChange"
-      }];
-  }
 }
 //# sourceMappingURL=inline-tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"inline-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs/inline-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Element, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  @Element() host: HostElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: {\n    tab: string;\n    tabIndex: number;\n  };\n\n  @State() buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement>;\n\n  /** Selects a tab based on tabindex, will not select a disabled tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: element.innerText,\n            tabIndex: index,\n          };\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab.tab,\n      selectedTabIndex: this.selectedTab.tabIndex,\n    };\n  }\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }>;\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab.tab);\n    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n    });\n  }\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n    >;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        if (!item.disabled) {\n          this.children.forEach((element) => element.removeAttribute('selected'));\n          item.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n      });\n      if (item.selected) {\n        this.selectedTab = {\n          tab: item.innerText,\n          tabIndex: index,\n        };\n      }\n      return item;\n    });\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  }\n\n  componentWillRender() {\n    if (!this.selectedTab) {\n      this.children = Array.from(this.host.children) as Array<\n        HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n      >;\n      this.children = this.children.map((item, index) => {\n        if (item.selected) {\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n        return item;\n      });\n    }\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + 95;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - 10;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          role=\"list\"\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"inline-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs/inline-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAe,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAO7D,MAAM,OAAO,mBAAmB;;IAmBtB,sBAAiB,GAAgB,IAAI,CAAC,CAAC,0CAA0C;IAEjF,mBAAc,GAAW,CAAC,CAAC,CAAC,kCAAkC;IAE9D,iBAAY,GAAW,CAAC,CAAC,CAAC,wCAAwC;IAElE,gBAAW,GAAW,CAAC,CAAC,CAAC,6DAA6D;IA+D9F,sBAAiB,GAAG,GAAG,EAAE;MACvB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QACpD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;UACxB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;UAC/C,IAAI,YAAY,GAAG,CAAC,CAAC;UAErB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;UAClD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAsB,EAAE,EAAE;YAC5C,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;YACjD,YAAY;cACV,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;UACzF,CAAC,CAAC,CAAC;UAEH,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;UACrC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;UACjC,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;UAEjD,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;YAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;WAC9B;eAAM;YACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;WAC9B;QACH,CAAC,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;MAEH,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,2BAAsB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAChD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;UAClC,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;WAC9C,CAAC,CAAC;UACH,IAAG,CAAC,eAAe,CAAC,gBAAgB,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;cAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;cAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;cACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;cAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;eACrC,CAAC,CAAC;aACJ;WACF;QACH,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;MACd,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;uBAtI6C,SAAS;gCAGjB,CAAC;;0BAQL,KAAK;2BAEJ,KAAK;uBAEV,CAAC;;EAsBhC,uEAAuE;EAEvE,KAAK,CAAC,SAAS,CAAC,QAAgB;IAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;MACrC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;MAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QACnD,IAAI,KAAK,KAAK,QAAQ,EAAE;UACtB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;UAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;UAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;WACrC,CAAC,CAAC;SACJ;QACD,OAAO,OAAO,CAAC;MACjB,CAAC,CAAC,CAAC;KACJ;IACD,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,aAAa;KACrC,CAAC;EACJ,CAAC;EAED,WAAW;IACT,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;IAC/D,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED,UAAU;IACR,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;IAC/D,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED,qBAAqB;IACnB,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAEjD,IAAI,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;IAED,IAAI,MAAM,IAAI,CAAC,EAAE;MACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;EACH,CAAC;EAoDD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoC,CAAC;IAClF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;EAChE,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;MACpC,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAC3D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;MAC/C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;OACrC,CAAC,CAAC;KACJ;SAAM;MACL,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MACpD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;OACrC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;MAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;MAE3E,WACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;UACV,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC;QAC7C,CAAC;QAED,cACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc;UAE9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD;QACT,eAAQ;QACR,cACE,KAAK,EAAE,uBAAuB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe;UAE/B,iBAAW,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAa,CACjD,CACL,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, State, Element, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @Element() host: HostElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsInlineTabElement>;\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  /** Selects a tab based on tabindex, will not select a disabled tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n          this.sddsChange.emit({\n            selectedTabIndex: this.selectedIndex,\n          });\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        const sddsChangeEvent = this.sddsChange.emit({\n          selectedTabIndex: this.children.indexOf(item)\n        });\n        if(!sddsChangeEvent.defaultPrevented) {\n          if (!item.disabled) {\n            this.children.forEach((element) => element.setSelected(false));\n            item.setSelected(true);\n            this.selectedIndex = index;\n            this.sddsChange.emit({\n              selectedTabIndex: this.selectedIndex,\n            });\n          }\n        }\n      });\n      return item;\n    });\n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsInlineTabElement>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,14 +1,12 @@
 import { formatHtmlPreview } from '../../../utils/utils';
 import readme from './readme.md';
-import readmeLink from './inline-tabs-link/readme.md';
-import readmeButton from './inline-tabs-button/readme.md';
+import readmeTab from './inline-tab/readme.md';
 export default {
   title: 'Components/Tabs',
   parameters: {
     notes: {
       'Inline tabs': readme,
-      'Inline tabs button': readmeButton,
-      'Inline tabs link': readmeLink,
+      'Inline tab': readmeTab,
     },
     design: [
       {
@@ -35,74 +33,66 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    tabType: {
-      name: 'Tab type',
-      description: 'Type of child element, button/link.',
+    defaultSelectedIndex: {
+      name: 'Default selected index',
+      description: 'Sets the default selected tab, if this is used the tab changes will be done automatically.',
       control: {
         type: 'radio',
       },
-      options: ['Button', 'Link'],
+      options: ['None', 0, 1, 2, 3],
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    selectedIndex: {
+      name: 'Selected index',
+      description: 'Sets the selected tab, if this is used the tab changes has to be handled by the user.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      if: { arg: 'defaultSelectedIndex', eq: 'None' },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
-    tabType: 'Link',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
   <sdds-inline-tabs
+    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
     ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      ${tabType === 'Link'
-  ? `
-        <sdds-inline-tabs-link href="#">
-          First tab
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link href="#">
-          Second tab is longer
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link selected href="#">
-          Third tab
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link disabled href="#">
-          Fourth tab
-        </sdds-inline-tabs-link>
-        `
-  : ''}
-      ${tabType === 'Button'
-  ? `
-        <sdds-inline-tabs-button>
-          First tab
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button>
-          Second tab is longer
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button selected>
-          Third tab
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button disabled>
-          Fourth tab
-        </sdds-inline-tabs-button>
-        `
-  : ''}
+      <sdds-inline-tab>
+        <button>First tab</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab>
+        <button>Second tab is much longer</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab>
+        <button>Third tab</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab disabled>
+        <button>Fourth tab</button>
+      </sdds-inline-tab>
    </sdds-inline-tabs>
 
    <!-- Demo container. -->
    <div class="demo-container">
-     <h4 class="sdds-headline-04">Selected tab: <span class="selectedTab"></span></h4>
      <h4 class="sdds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
    </div>
 
    <!-- Script tag with eventlistener for demo purposes. -->
    <script>
-   selectedTab = document.getElementsByClassName('selectedTab')[0]
    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
    tabs = document.querySelector('sdds-inline-tabs');
    
    tabs.addEventListener('sddsChange', (event) => {
-      console.log(event)
-     selectedTab.innerHTML = event.detail.selectedTab.tab
-     selectedTabIndex.innerHTML = event.detail.selectedTab.tabIndex
-   })
+     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+     console.log(event)
+    })
    </script>
 `);
 export const InlineTabs = Template.bind({});

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

@@ -1 +1 @@
-{"version":3,"file":"inline-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs/inline-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAE1D,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE;MACL,aAAa,EAAE,MAAM;MACrB,oBAAoB,EAAE,YAAY;MAClC,kBAAkB,EAAE,UAAU;KAC/B;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,4GAA4G;MAC9G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC5B;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,MAAM;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CAAC;;MAEd,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;QAExF,OAAO,KAAK,MAAM;EAChB,CAAC,CAAC;;;;;;;;;;;;;SAaH;EACC,CAAC,CAAC,EACN;QAEE,OAAO,KAAK,QAAQ;EAClB,CAAC,CAAC;;;;;;;;;;;;;SAaH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;CAqBL,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeLink from './inline-tabs-link/readme.md';\nimport readmeButton from './inline-tabs-button/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Inline tabs': readme,\n      'Inline tabs button': readmeButton,\n      'Inline tabs link': readmeLink,\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variation adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    tabType: {\n      name: 'Tab type',\n      description: 'Type of child element, button/link.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Link'],\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tabType: 'Link',\n  },\n};\n\nconst Template = ({ modeVariant, tabType }) =>\n  formatHtmlPreview(`\n  <sdds-inline-tabs\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}>\n      ${\n        tabType === 'Link'\n          ? `\n        <sdds-inline-tabs-link href=\"#\">\n          First tab\n        </sdds-inline-tabs-link>\n        <sdds-inline-tabs-link href=\"#\">\n          Second tab is longer\n        </sdds-inline-tabs-link>\n        <sdds-inline-tabs-link selected href=\"#\">\n          Third tab\n        </sdds-inline-tabs-link>\n        <sdds-inline-tabs-link disabled href=\"#\">\n          Fourth tab\n        </sdds-inline-tabs-link>\n        `\n          : ''\n      }\n      ${\n        tabType === 'Button'\n          ? `\n        <sdds-inline-tabs-button>\n          First tab\n        </sdds-inline-tabs-button>\n        <sdds-inline-tabs-button>\n          Second tab is longer\n        </sdds-inline-tabs-button>\n        <sdds-inline-tabs-button selected>\n          Third tab\n        </sdds-inline-tabs-button>\n        <sdds-inline-tabs-button disabled>\n          Fourth tab\n        </sdds-inline-tabs-button>\n        `\n          : ''\n      }\n   </sdds-inline-tabs>\n\n   <!-- Demo container. -->\n   <div class=\"demo-container\">\n     <h4 class=\"sdds-headline-04\">Selected tab: <span class=\"selectedTab\"></span></h4>\n     <h4 class=\"sdds-headline-04\">Selected tabindex: <span class=\"selectedTabIndex\"></span></h4>\n   </div>\n\n   <!-- Script tag with eventlistener for demo purposes. -->\n   <script>\n   selectedTab = document.getElementsByClassName('selectedTab')[0]\n   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]\n   tabs = document.querySelector('sdds-inline-tabs');\n   \n   tabs.addEventListener('sddsChange', (event) => {\n      console.log(event)\n     selectedTab.innerHTML = event.detail.selectedTab.tab\n     selectedTabIndex.innerHTML = event.detail.selectedTab.tabIndex\n   })\n   </script>\n`);\n\nexport const InlineTabs = Template.bind({});\n"]}
+{"version":3,"file":"inline-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs/inline-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE;MACL,aAAa,EAAE,MAAM;MACrB,YAAY,EAAE,SAAS;KACxB;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,4GAA4G;MAC9G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,oBAAoB,EAAE;MACpB,IAAI,EAAE,wBAAwB;MAC9B,WAAW,EACT,4FAA4F;MAC9F,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;OAC/B;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,uFAAuF;MACzF,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,EAAE,EAAE,MAAM,EAAE;KAChD;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,oBAAoB,EAAE,MAAM;IAC5B,aAAa,EAAE,MAAM;GACtB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,oBAAoB,EAAE,EAAE,EAAE,CACxE,iBAAiB,CAAC;;MAEd,oBAAoB,KAAK,MAAM,CAAC,CAAC,CAAC,2BAA2B,oBAAoB,GAAG,CAAC,CAAC,CAAC,EAAE;MACzF,aAAa,IAAI,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE;MACpF,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B/F,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeTab from './inline-tab/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Inline tabs': readme,\n      'Inline tab': readmeTab,\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variation adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    defaultSelectedIndex: {\n      name: 'Default selected index',\n      description:\n        'Sets the default selected tab, if this is used the tab changes will be done automatically.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 0, 1, 2, 3],\n      table: {\n        defaultValue: { summary: '0' },\n      },\n    },\n    selectedIndex: {\n      name: 'Selected index',\n      description:\n        'Sets the selected tab, if this is used the tab changes has to be handled by the user.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 0, 1, 2, 3],\n      if: { arg: 'defaultSelectedIndex', eq: 'None' },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    defaultSelectedIndex: 'None',\n    selectedIndex: 'None',\n  },\n};\n\nconst Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) =>\n  formatHtmlPreview(`\n  <sdds-inline-tabs\n    ${defaultSelectedIndex !== 'None' ? `default-selected-index=\"${defaultSelectedIndex}\"` : ''}\n    ${selectedIndex && selectedIndex !== 'None' ? `selected-index=\"${selectedIndex}\"` : ''}\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}>\n      <sdds-inline-tab>\n        <button>First tab</button>\n      </sdds-inline-tab>\n      <sdds-inline-tab>\n        <button>Second tab is much longer</button>\n      </sdds-inline-tab>\n      <sdds-inline-tab>\n        <button>Third tab</button>\n      </sdds-inline-tab>\n      <sdds-inline-tab disabled>\n        <button>Fourth tab</button>\n      </sdds-inline-tab>\n   </sdds-inline-tabs>\n\n   <!-- Demo container. -->\n   <div class=\"demo-container\">\n     <h4 class=\"sdds-headline-04\">Selected tabindex: <span class=\"selectedTabIndex\"></span></h4>\n   </div>\n\n   <!-- Script tag with eventlistener for demo purposes. -->\n   <script>\n   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]\n   tabs = document.querySelector('sdds-inline-tabs');\n   \n   tabs.addEventListener('sddsChange', (event) => {\n     selectedTabIndex.innerHTML = event.detail.selectedTabIndex\n     console.log(event)\n    })\n   </script>\n`);\n\nexport const InlineTabs = Template.bind({});\n"]}

package/dist/collection/components/tabs/navigation-tabs/{navigation-tabs-link/sdds-navigation-tabs-link.css → navigation-tab/sdds-navigation-tab.css}

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