@scania/tegel 0.0.4 → 0.0.6

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

@@ -0,0 +1,81 @@
+import { Host, h } from '@stencil/core';
+export class SddsNavigationTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @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: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-navigation-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-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 <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-navigation-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-navigation-tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,iBAAiB;;oBAEA,KAAK;oBAEJ,KAAK;;EAElC,kFAAkF;EAElF,KAAK,CAAC,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WACE,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;aAC3D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;QAEpC,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tab',\n  styleUrl: 'sdds-navigation-tab.scss',\n  shadow: true,\n})\nexport class SddsNavigationTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`navigation-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,157 +1,76 @@
-.sdds-navigation-tabs {
+:host {
   box-sizing: border-box;
-  background-color: var(--sdds-navigation-tabs-background);
-  position: relative;
   display: flex;
-  /* tab */
-  /* tab states */
+  background-color: var(--sdds-inline-tabs-background);
+  position: relative;
 }
-.sdds-navigation-tabs * {
+:host * {
   box-sizing: border-box;
 }
-.sdds-navigation-tabs::after {
+:host::after {
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);
-  opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);
+  border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);
+  opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);
   left: 0;
   right: 0;
   bottom: 0;
   position: absolute;
 }
-.sdds-navigation-tabs-wrapper {
+:host .wrapper {
   display: flex;
   flex-wrap: nowrap;
+  white-space: nowrap;
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
 }
-.sdds-navigation-tabs-wrapper::-webkit-scrollbar {
+:host .wrapper::-webkit-scrollbar {
   display: none;
 }
-.sdds-navigation-tabs-forward {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
+:host .scroll-right-button {
   right: 0;
-  top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-navigation-tabs-forward__show {
-  opacity: 1;
-  pointer-events: all;
+  z-index: 201;
 }
-.sdds-navigation-tabs-forward:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
-  text-decoration: none;
-}
-.sdds-navigation-tabs-forward:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
-}
-.sdds-navigation-tabs-forward:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
+:host .scroll-left-button {
+  left: 0;
+  z-index: 201;
 }
-.sdds-navigation-tabs-back {
+:host .scroll-right-button,
+:host .scroll-left-button {
+  color: var(--sdds-folder-tabs-scroll-btn-color);
   cursor: pointer;
-  width: 48px;
-  height: 100%;
   border: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
-  display: flex;
+  width: 0;
+  background-color: var(--sdds-inline-tabs-scroll-btn-background);
+  display: none;
   justify-content: center;
   align-items: center;
   opacity: 0;
   pointer-events: none;
+  position: sticky;
 }
-.sdds-navigation-tabs-back__show {
+:host .scroll-right-button.show,
+:host .scroll-left-button.show {
+  min-width: 48px;
+  display: block;
   opacity: 1;
   pointer-events: all;
 }
-.sdds-navigation-tabs-back:hover {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
-}
-.sdds-navigation-tabs-back:active {
-  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
-}
-.sdds-navigation-tabs-back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-::slotted(.sdds-navigation-tabs-tab) {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-navigation-tabs-tab-color);
-  opacity: 0.6;
-  padding: 26px 0;
-  margin-right: 32px;
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-}
-::slotted(.sdds-navigation-tabs-tab)::after {
-  content: " ";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0;
-  margin-right: auto;
-  height: 2px;
-  background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out;
-  z-index: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:first-child) {
-  margin-left: 32px;
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
 }
-::slotted(.sdds-navigation-tabs-tab:last-child) {
-  margin-right: 32px;
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
 }
-::slotted(.sdds-navigation-tabs-tab:hover) {
-  color: var(--sdds-navigation-tabs-tab-color-hover);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:hover)::after {
-  width: 100%;
-}
-::slotted(.sdds-navigation-tabs-tab:focus) {
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
-  color: var(--sdds-navigation-tabs-tab-color-focus);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab:focus)::after {
-  width: 0;
 }
-::slotted(.sdds-navigation-tabs-tab-active) {
-  color: var(--sdds-navigation-tabs-tab-color-active);
-  opacity: 1;
-}
-::slotted(.sdds-navigation-tabs-tab-active)::after {
-  width: 100%;
-  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
-}
-::slotted(.sdds-navigation-tabs-tab-active:focus)::after {
-  width: 100%;
-}
-::slotted(.sdds-navigation-tabs-tab-disabled) {
-  color: var(--sdds-navigation-tabs-tab-color-disabled);
-  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
-  pointer-events: none;
+:host .scroll-right-button svg,
+:host .scroll-left-button svg {
+  fill: var(--sdds-folder-tabs-scroll-btn-color);
 }

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

@@ -1,66 +1,103 @@
-import { Host, h } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 export class NavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
     this.componentWidth = 0; // visible width of this component
     this.buttonsWidth = 0; // total width of all nav items combined
     this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.tabs = [];
+    this.addResizeObserver = () => {
+      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-navigation-tabs-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);
+    };
+    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;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
+    this.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.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.modeVariant = null;
   }
-  componentDidRender() {
-    this.calculateButtonWidth();
-  }
-  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-navigation-tabs-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;
+  /** 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;
       });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this.calculateButtonWidth();
-  }
-  calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
+    }
+    return {
+      selectedTabIndex: this.selectedIndex,
+    };
   }
   scrollRight() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   scrollLeft() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   evaluateScrollButtons() {
@@ -78,10 +115,18 @@ export class NavigationTabs {
       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');
+  }
+  componentDidRender() {
+    this.addResizeObserver();
+  }
   render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "sdds-navigation-tabs" }, h("div", { class: "sdds-navigation-tabs-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("slot", null)), h("div", { class: "sdds-navigation-tabs-navigation" }, h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
+      } }, 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" })))));
   }
   static get is() { return "sdds-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
@@ -113,17 +158,92 @@ export class NavigationTabs {
         },
         "attribute": "mode-variant",
         "reflect": false,
-        "defaultValue": "null"
+        "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
       }
     };
   }
   static get states() {
     return {
-      "tabs": {},
       "showLeftScroll": {},
       "showRightScroll": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when the selected tab is changed."
+        },
+        "complexType": {
+          "original": "{\n    selectedTabIndex: number;\n  }",
+          "resolved": "{ selectedTabIndex: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "selectTab": {
+        "complexType": {
+          "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ selectedTabIndex: number; }>"
+        },
+        "docs": {
+          "text": "Sets the passed tabindex as the selected tab.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=navigation-tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n  \n   /** Variant of the tabs, primary= on white, secondary= on grey50 */\n   @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\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-navigation-tabs-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    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\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  render() {\n    return (\n      <Host  class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class=\"sdds-navigation-tabs\">\n          <div\n            class=\"sdds-navigation-tabs-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-navigation-tabs-navigation\">\n            <button\n              class={`sdds-navigation-tabs-forward ${\n                this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-navigation-tabs-back ${\n                this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"navigation-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  State,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\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: HTMLElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\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<HTMLSddsNavigationTabElement>;\n\n  /** Sets the passed tabindex as the selected 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        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n\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          navButton.classList.add('sdds-navigation-tabs-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    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsNavigationTabElement>;\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<any>;\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    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"]}