@scania/tegel 0.0.2 → 0.0.32

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

@@ -2,244 +2,247 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const inlineTabsCss = ":host{outline:0 !important;box-sizing:border-box}:host *{box-sizing:border-box}.sdds-inline-tabs{overflow:hidden;outline:0}.sdds-inline-tabs-header{position:relative}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background);padding:24px 24px 48px}.sdds-inline-tabs-wrapper{display:flex;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs--forward,.sdds-inline-tabs--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;top:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs--forward__show,.sdds-inline-tabs--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs--forward:hover,.sdds-inline-tabs--back:hover{background-color:var(--sdds-inline-tabs-scroll-btn-background-hover)}.sdds-inline-tabs--forward:active,.sdds-inline-tabs--back:active{background-color:var(--sdds-inline-tabs-scroll-btn-background-active)}.sdds-inline-tabs--forward:focus,.sdds-inline-tabs--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--forward svg,.sdds-inline-tabs--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs--back{left:0}.sdds-inline-tabs--forward{right:0}.sdds-inline-tabs--tab{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;border:0;color:var(--sdds-inline-tabs-tab-color);background-color:var(--sdds-inline-tabs-tab-background);padding:16px;min-width:142px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out;white-space:nowrap;flex-shrink:0;text-align:left;outline:none}.sdds-inline-tabs--tab>*{opacity:0.6}.sdds-inline-tabs--tab:not(:last-child){border-right:1px solid var(--sdds-inline-tabs-tab-border-color)}.sdds-inline-tabs--tab::after{content:\" \";position:absolute;top:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background);transition:width 0.15s ease-in-out}.sdds-inline-tabs--tab:hover{background-color:var(--sdds-inline-tabs-tab-background-hover);color:var(--sdds-inline-tabs-tab-color-hover);text-decoration:none}.sdds-inline-tabs--tab:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active);color:var(--sdds-inline-tabs-tab-color-active);cursor:initial;border-right:1px solid transparent !important}.sdds-inline-tabs--tab__active>*{opacity:1}.sdds-inline-tabs--tab__active:hover{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs--tab__active::after{width:calc(100% + 2px);left:-1px;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}.sdds-inline-tabs--tab__active::before{content:\" \";background-color:var(--sdds-inline-tabs-tab-background-active);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}.sdds-inline-tabs--tab__active:first-child:focus::before{left:0}.sdds-inline-tabs--tab:disabled,.sdds-inline-tabs--tab__disabled{cursor:initial;color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}.sdds-inline-tabs--tab:disabled>*,.sdds-inline-tabs--tab__disabled>*{opacity:0.16}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background)}";
 
-function generateKeyFromName(name) {
-  return name
-    .replace(/\s/g, '-')
-    .replace(/[^a-z0-9-]/gi, '')
-    .toLowerCase();
-}
-const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.tabWrapperElement = null; // reference to container with slotted children
-    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.useAutoHeight = false; // set height for slotted children or not
-    this.defaultTab = '';
-    this.autoHeight = false;
-    this.modeVariant = null;
-    this.tabs = [];
-    this.buttonWidth = 0;
-    this.tabHeight = 0;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  /** used for switching to a tab programmatically */
-  async showTab(key) {
-    this.switchToTab(key);
-  }
-  componentWillLoad() {
-    this.initComponent();
-  }
-  initComponent(createInitialState = true) {
-    if (this.autoHeight) {
-      this.useAutoHeight = true;
-    }
-    this.tabs = Array.from(this.host.children).map((item, index) => {
-      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;
-      const key = generateKeyFromName(name);
-      if (item.default) {
-        this.startingTab = key;
-      }
-      let disabled = false;
-      if (item.disabled) {
-        disabled = true;
-      }
-      return {
-        name,
-        key,
-        element: item,
-        disabled,
-        visible: true,
-        initialDisplay: window.getComputedStyle(item).display,
-      };
-    });
-    if (createInitialState) {
-      this.setInitialState();
-    }
-    this.tabs = Array.from(this.tabs);
-  }
-  calculateButtonWidth() {
-    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
-    let best = 0;
-    Array.from(navButtons).forEach((navButton) => {
-      const oldStyle = navButton.style.width;
-      // eslint-disable-next-line no-param-reassign
-      navButton.style.width = '';
-      const width = navButton.clientWidth;
-      // eslint-disable-next-line no-param-reassign
-      navButton.style.width = oldStyle;
-      if (navButton.clientWidth > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  calculateTabHeight() {
-    let best = 0;
-    this.tabs.forEach((_, tabIndex) => {
-      const tab = this.tabs[tabIndex];
-      // TODO: add comment on what this does
-      const oldStyle = tab.element.style.display;
-      tab.element.style.display = '';
-      const height = tab.element.clientHeight;
-      tab.element.style.display = oldStyle;
-      if (height > best) {
-        best = height;
-      }
-    });
-    this.tabHeight = best;
-  }
-  componentDidRender() {
-    this.calculateTabHeight();
-    this.calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
-      const visibleTab = this.tabs.find((tab) => tab.visible);
-      this.initComponent(false);
-      this.calculateTabHeight();
-      this.calculateButtonWidth();
-      if (visibleTab) {
-        this.switchToTab(visibleTab.key);
-      }
-    });
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
-        Array.from(navButtons).forEach((navButton) => {
-          buttonsWidth += navButton.clientWidth;
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-        this.calculateTabHeight();
-      });
-    });
-    mutationObserver.observe(this.host, {
-      childList: true,
-      attributes: true,
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this.calculateButtonWidth();
-    this.calculateTabHeight();
-  }
-  setInitialState() {
-    if (this.defaultTab) {
-      this.startingTab = this.defaultTab;
-    }
-    this.tabs.forEach((tab, index) => {
-      if (this.startingTab) {
-        if (tab.key !== this.startingTab) {
-          this.hideTab(index);
-        }
-      }
-      else {
-        if (index > 0) {
-          this.hideTab(index);
-        }
-      }
-    });
-  }
-  unhideTab(tabIndex) {
-    const tab = this.tabs[tabIndex];
-    tab.element.style.display = '';
-    tab.visible = true;
-  }
-  hideTab(tabIndex) {
-    const tab = this.tabs[tabIndex];
-    tab.element.style.display = 'none';
-    tab.visible = false;
-  }
-  switchToTab(key) {
-    this.tabs.forEach((tab, index) => {
-      if (tab.key === key) {
-        this.unhideTab(index);
-      }
-      else {
-        this.hideTab(index);
-      }
-    });
-    this.tabs = Array.from(this.tabs);
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    const style = {};
-    if (this.useAutoHeight) {
-      style.height = `${this.tabHeight}px`;
-    }
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs sdds-inline-tabs` }, h("nav", { class: "sdds-inline-tabs-header" }, h("div", { ref: (el) => {
-        this.navWrapperElement = el;
-      }, class: "sdds-inline-tabs-wrapper" }, this.tabs.map((tab) => (h("button", { style: { width: `${this.buttonWidth}px` }, disabled: tab.disabled, class: `sdds-inline-tabs--tab ${tab.visible ? 'sdds-inline-tabs--tab__active' : ''}`, onClick: () => this.switchToTab(tab.key) }, h("span", null, tab.name))))), h("div", { class: "sdds-inline-tabs-header-navigation" }, h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, 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" }))), h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, 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" }))))), h("div", { ref: (el) => {
-        this.tabWrapperElement = el;
-      }, class: "sdds-inline-tabs-main", style: style }, h("slot", null)))));
-  }
-  get host() { return this; }
-  static get style() { return inlineTabsCss; }
-}, [1, "sdds-inline-tabs", {
-    "defaultTab": [1, "default-tab"],
-    "autoHeight": [4, "auto-height"],
-    "modeVariant": [1, "mode-variant"],
-    "tabs": [32],
-    "buttonWidth": [32],
-    "tabHeight": [32],
-    "showLeftScroll": [32],
-    "showRightScroll": [32],
-    "showTab": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tabs"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InlineTabs);
-      }
-      break;
-  } });
+function generateKeyFromName(name) {
+  return name
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9-]/gi, '')
+    .toLowerCase();
 }
+const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.tabWrapperElement = null; // reference to container with slotted children
+    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.useAutoHeight = false; // set height for slotted children or not
+    this.defaultTab = '';
+    this.autoHeight = false;
+    this.modeVariant = null;
+    this.tabs = [];
+    this.buttonWidth = 0;
+    this.tabHeight = 0;
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+  }
+  /** used for switching to a tab programmatically */
+  async showTab(key) {
+    this.switchToTab(key);
+  }
+  componentWillLoad() {
+    this.initComponent();
+  }
+  initComponent(createInitialState = true) {
+    if (this.autoHeight) {
+      this.useAutoHeight = true;
+    }
+    this.tabs = Array.from(this.host.children).map((item, index) => {
+      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;
+      const key = generateKeyFromName(name);
+      if (item.default) {
+        this.startingTab = key;
+      }
+      let disabled = false;
+      if (item.disabled) {
+        disabled = true;
+      }
+      return {
+        name,
+        key,
+        element: item,
+        disabled,
+        visible: true,
+        initialDisplay: window.getComputedStyle(item).display,
+      };
+    });
+    if (createInitialState) {
+      this.setInitialState();
+    }
+    this.tabs = Array.from(this.tabs);
+  }
+  calculateButtonWidth() {
+    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
+    let best = 0;
+    Array.from(navButtons).forEach((navButton) => {
+      const oldStyle = navButton.style.width;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = '';
+      const width = navButton.clientWidth;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = oldStyle;
+      if (navButton.clientWidth > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  calculateTabHeight() {
+    let best = 0;
+    this.tabs.forEach((_, tabIndex) => {
+      const tab = this.tabs[tabIndex];
+      // TODO: add comment on what this does
+      const oldStyle = tab.element.style.display;
+      tab.element.style.display = '';
+      const height = tab.element.clientHeight;
+      tab.element.style.display = oldStyle;
+      if (height > best) {
+        best = height;
+      }
+    });
+    this.tabHeight = best;
+  }
+  componentDidRender() {
+    this.calculateTabHeight();
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
+      const visibleTab = this.tabs.find((tab) => tab.visible);
+      this.initComponent(false);
+      this.calculateTabHeight();
+      this.calculateButtonWidth();
+      if (visibleTab) {
+        this.switchToTab(visibleTab.key);
+      }
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
+        Array.from(navButtons).forEach((navButton) => {
+          buttonsWidth += navButton.clientWidth;
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+        this.calculateTabHeight();
+      });
+    });
+    mutationObserver.observe(this.host, {
+      childList: true,
+      attributes: true,
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+    this.calculateTabHeight();
+  }
+  setInitialState() {
+    if (this.defaultTab) {
+      this.startingTab = this.defaultTab;
+    }
+    this.tabs.forEach((tab, index) => {
+      if (this.startingTab) {
+        if (tab.key !== this.startingTab) {
+          this.hideTab(index);
+        }
+      }
+      else {
+        if (index > 0) {
+          this.hideTab(index);
+        }
+      }
+    });
+  }
+  unhideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = '';
+    tab.visible = true;
+  }
+  hideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = 'none';
+    tab.visible = false;
+  }
+  switchToTab(key) {
+    this.tabs.forEach((tab, index) => {
+      if (tab.key === key) {
+        this.unhideTab(index);
+      }
+      else {
+        this.hideTab(index);
+      }
+    });
+    this.tabs = Array.from(this.tabs);
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  evaluateScrollButtons() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    if (scroll >= this.scrollWidth) {
+      this.showRightScroll = false;
+    }
+    else {
+      this.showRightScroll = true;
+    }
+    if (scroll <= 0) {
+      this.showLeftScroll = false;
+    }
+    else {
+      this.showLeftScroll = true;
+    }
+  }
+  render() {
+    const style = {};
+    if (this.useAutoHeight) {
+      style.height = `${this.tabHeight}px`;
+    }
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs sdds-inline-tabs` }, h("nav", { class: "sdds-inline-tabs-header" }, h("div", { ref: (el) => {
+        this.navWrapperElement = el;
+      }, class: "sdds-inline-tabs-wrapper" }, this.tabs.map((tab) => (h("button", { style: { width: `${this.buttonWidth}px` }, disabled: tab.disabled, class: `sdds-inline-tabs--tab ${tab.visible ? 'sdds-inline-tabs--tab__active' : ''}`, onClick: () => this.switchToTab(tab.key) }, h("span", null, tab.name))))), h("div", { class: "sdds-inline-tabs-header-navigation" }, h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, 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" }))), h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, 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" }))))), h("div", { ref: (el) => {
+        this.tabWrapperElement = el;
+      }, class: "sdds-inline-tabs-main", style: style }, h("slot", null)))));
+  }
+  get host() { return this; }
+  static get style() { return inlineTabsCss; }
+}, [1, "sdds-inline-tabs", {
+    "defaultTab": [1, "default-tab"],
+    "autoHeight": [4, "auto-height"],
+    "modeVariant": [1, "mode-variant"],
+    "tabs": [32],
+    "buttonWidth": [32],
+    "tabHeight": [32],
+    "showLeftScroll": [32],
+    "showRightScroll": [32],
+    "showTab": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-inline-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-inline-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InlineTabs);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const SddsInlineTabs = InlineTabs;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsInlineTabs, defineCustomElement };
+
+//# sourceMappingURL=sdds-inline-tabs.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-inline-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n:host {\n  outline: 0 !important;\n  @include sdds-box-sizing;\n}\n\n.sdds-inline-tabs {\n  overflow: hidden;\n  outline: 0;\n\n  &-header {\n    position: relative;\n  }\n\n  &-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n    padding: 24px 24px 48px;\n  }\n\n  &-wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &--back {\n    left: 0;\n  }\n\n  &--forward {\n    right: 0;\n  }\n\n  &--tab {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    border: 0;\n    color: var(--sdds-inline-tabs-tab-color);\n    background-color: var(--sdds-inline-tabs-tab-background);\n    padding: 16px;\n    min-width: 142px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n    white-space: nowrap;\n    flex-shrink: 0;\n    text-align: left;\n    outline: none;\n\n    & > * {\n      opacity: 0.6;\n    }\n\n    &:not(:last-child) {\n      border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      top: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background);\n      transition: width 0.15s ease-in-out;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-tab-background-hover);\n      color: var(--sdds-inline-tabs-tab-color-hover);\n      text-decoration: none;\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &__active {\n      background-color: var(--sdds-inline-tabs-tab-background-active);\n      color: var(--sdds-inline-tabs-tab-color-active);\n      cursor: initial;\n      border-right: 1px solid transparent !important;\n\n      & > * {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n      }\n\n      &::after {\n        width: calc(100% + 2px);\n        left: -1px;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n\n      &::before {\n        content: ' ';\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n        width: 1px;\n        top: 0;\n        bottom: 0;\n        left: -1px;\n        display: block;\n        position: absolute;\n      }\n\n      &:first-child {\n        &:focus {\n          &::before {\n            left: 0;\n          }\n        }\n      }\n    }\n\n    &:disabled,\n    &__disabled {\n      cursor: initial;\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      & > * {\n        opacity: 0.16;\n      }\n    }\n  }\n}\n\n  .sdds-inline-tabs--tab__active {\n    background-color: var(--sdds-inline-tabs-tab-background-active);\n  }\n\n  .sdds-inline-tabs-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n  }\n","import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n  return name\n    .replace(/\\s/g, '-')\n    .replace(/[^a-z0-9-]/gi, '')\n    .toLowerCase();\n}\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n  @Prop() defaultTab: string = '';\n\n  /** different height settings. right now only supports \"auto\", otherwise ignored */\n  @Prop() autoHeight: boolean = false;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** array with metadata for slotted children */\n  @State() tabs: Array<any> = [];\n\n  /** current calculated width of each nav button (calculated from the largest one) */\n  @State() buttonWidth: number = 0;\n\n  /** current calculated tab height (calculated from the one with the most height) */\n  @State() tabHeight: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  /** used for switching to a tab programmatically */\n  @Method()\n  async showTab(key: string) {\n    this.switchToTab(key);\n  }\n\n  startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  tabWrapperElement: HTMLElement = null; // reference to container with slotted children\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  useAutoHeight: boolean = false; // set height for slotted children or not\n\n  componentWillLoad() {\n    this.initComponent();\n  }\n\n  initComponent(createInitialState = true) {\n    if (this.autoHeight) {\n      this.useAutoHeight = true;\n    }\n\n    this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n      const key = generateKeyFromName(name);\n      if (item.default) {\n        this.startingTab = key;\n      }\n      let disabled = false;\n      if (item.disabled) {\n        disabled = true;\n      }\n      return {\n        name,\n        key,\n        element: item,\n        disabled,\n        visible: true,\n        initialDisplay: window.getComputedStyle(item).display,\n      };\n    });\n\n    if (createInitialState) {\n      this.setInitialState();\n    }\n    this.tabs = Array.from(this.tabs);\n  }\n\n  calculateButtonWidth() {\n    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n    let best = 0;\n    Array.from(navButtons).forEach((navButton: HTMLElement) => {\n      const oldStyle = navButton.style.width;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = '';\n      const width = navButton.clientWidth;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = oldStyle;\n\n      if (navButton.clientWidth > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  calculateTabHeight() {\n    let best = 0;\n    this.tabs.forEach((_, tabIndex) => {\n      const tab = this.tabs[tabIndex];\n      // TODO: add comment on what this does\n      const oldStyle = tab.element.style.display;\n      tab.element.style.display = '';\n      const height = tab.element.clientHeight;\n      tab.element.style.display = oldStyle;\n\n      if (height > best) {\n        best = height;\n      }\n    });\n\n    this.tabHeight = best;\n  }\n\n  componentDidRender() {\n    this.calculateTabHeight();\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n      const visibleTab = this.tabs.find((tab) => tab.visible);\n      this.initComponent(false);\n      this.calculateTabHeight();\n      this.calculateButtonWidth();\n      if (visibleTab) {\n        this.switchToTab(visibleTab.key);\n      }\n    });\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n        Array.from(navButtons).forEach((navButton: HTMLElement) => {\n          buttonsWidth += navButton.clientWidth;\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        this.calculateTabHeight();\n      });\n    });\n\n    mutationObserver.observe(this.host, {\n      childList: true,\n      attributes: true,\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n    this.calculateTabHeight();\n  }\n\n  setInitialState() {\n    if (this.defaultTab) {\n      this.startingTab = this.defaultTab;\n    }\n\n    this.tabs.forEach((tab, index) => {\n      if (this.startingTab) {\n        if (tab.key !== this.startingTab) {\n          this.hideTab(index);\n        }\n      } else {\n        if (index > 0) {\n          this.hideTab(index);\n        }\n      }\n    });\n  }\n\n  unhideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = '';\n    tab.visible = true;\n  }\n\n  hideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = 'none';\n    tab.visible = false;\n  }\n\n  switchToTab(key: string) {\n    this.tabs.forEach((tab, index) => {\n      if (tab.key === key) {\n        this.unhideTab(index);\n      } else {\n        this.hideTab(index);\n      }\n    });\n\n    this.tabs = Array.from(this.tabs);\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    const style: Record<string, string> = {};\n    if (this.useAutoHeight) {\n      style.height = `${this.tabHeight}px`;\n    }\n\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n          <nav class=\"sdds-inline-tabs-header\">\n            <div\n              ref={(el) => {\n                this.navWrapperElement = el as HTMLDivElement;\n              }}\n              class=\"sdds-inline-tabs-wrapper\"\n            >\n              {this.tabs.map((tab) => (\n                <button\n                  style={{ width: `${this.buttonWidth}px` }}\n                  disabled={tab.disabled}\n                  class={`sdds-inline-tabs--tab ${\n                    tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n                  }`}\n                  onClick={() => this.switchToTab(tab.key)}\n                >\n                  <span>{tab.name}</span>\n                </button>\n              ))}\n            </div>\n            <div class=\"sdds-inline-tabs-header-navigation\">\n              <button\n                class={`sdds-inline-tabs--forward ${\n                  this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showRightScroll}\n                onClick={() => this.scrollRight()}\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                  />\n                </svg>\n              </button>\n              <button\n                class={`sdds-inline-tabs--back ${\n                  this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showLeftScroll}\n                onClick={() => this.scrollLeft()}\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                  />\n                </svg>\n              </button>\n            </div>\n          </nav>\n          <div\n            ref={(el) => {\n              this.tabWrapperElement = el as HTMLElement;\n            }}\n            class=\"sdds-inline-tabs-main\"\n            style={style}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-link.js

@@ -4,3 +4,5 @@ const SddsLink = SddsLink$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsLink, defineCustomElement };
+
+//# sourceMappingURL=sdds-link.js.map

package/dist/components/sdds-link.js.map

@@ -0,0 +1 @@
+{"file":"sdds-link.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-link2.js

@@ -2,43 +2,46 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 const sddsLinkCss = "a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";
 
-const SddsLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.href = undefined;
-    this.target = '_self';
-    this.disabled = false;
-    this.underline = true;
-    this.rel = 'noopener';
-  }
-  render() {
+const SddsLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.href = undefined;
+    this.target = '_self';
+    this.disabled = false;
+    this.underline = true;
+    this.rel = 'noopener';
+  }
+  render() {
     return (h("a", { class: `
         ${this.disabled ? 'disabled' : ''}
         ${this.underline ? '' : 'no-underline'}
         
-        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
-  }
-  static get style() { return sddsLinkCss; }
-}, [4, "sdds-link", {
-    "href": [1],
-    "target": [1],
-    "disabled": [4],
-    "underline": [4],
-    "rel": [1]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsLink);
-      }
-      break;
-  } });
+        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
+  }
+  static get style() { return sddsLinkCss; }
+}, [4, "sdds-link", {
+    "href": [1],
+    "target": [1],
+    "disabled": [4],
+    "underline": [4],
+    "rel": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsLink);
+      }
+      break;
+  } });
 }
+defineCustomElement();
 
 export { SddsLink as S, defineCustomElement as d };
+
+//# sourceMappingURL=sdds-link2.js.map

package/dist/components/sdds-link2.js.map

@@ -0,0 +1 @@
+{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}