@scania/tegel 0.0.4 → 0.0.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"folder-tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/folder-tabs/folder-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  State,\n  Element,\n  Prop,\n  h,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() buttonWidth: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: string;\n\n  @State() selectedTabIndex: number;\n\n  @Element() host: HTMLElement;\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  children: Array<HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement>;\n\n  calculateButtonWidth() {\n    this.children = this.children.map(\n      (tab: HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement) => {\n        if (tab.offsetWidth > this.buttonWidth) {\n          this.buttonWidth = tab.offsetWidth;\n        }\n        return tab;\n      },\n    );\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\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  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\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 = item.innerHTML;\n          this.selectedTabIndex = index;\n        }\n      });\n      if (index === 0) {\n        item.classList.add('first');\n      }\n      if (index === this.children.length - 1) {\n        item.classList.add('last');\n      }\n      if (item.selected) {\n        this.selectedTab = item.innerHTML;\n        this.selectedTabIndex = index;\n      }\n      return item;\n    });\n  }\n\n  componentDidLoad() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentWillRender() {\n    if (!this.selectedTab) {\n      this.children = Array.from(this.host.children) as Array<\n        HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n      >;\n      this.children = this.children.map((item, index) => {\n        if (item.selected) {\n          this.selectedTab = item.innerHTML;\n          this.selectedTabIndex = index;\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  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: string;\n    selectedTabIndex: number;\n  }>;\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.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = element.innerHTML;\n          this.selectedTabIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab,\n      selectedTabIndex: this.selectedTabIndex,\n    };\n  }\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab);\n  }\n\n  @Watch('selectedTabIndex')\n  handleSelectedTabIndexChange() {\n    this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n      selectedTabIndex: this.selectedTabIndex,\n    });\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLDivElement;\n          }}\n          class=\"wrapper\"\n          role=\"list\"\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\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/folder-tabs/folder-tabs.stories.js

@@ -0,0 +1,114 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeLink from './folder-tabs-link/readme.md';
+import readmeButton from './folder-tabs-button/readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: {
+      'Folder tabs': readme,
+      'Folder tabs button': readmeButton,
+      'Folder tabs link': readmeLink,
+    },
+    backgrounds: { default: 'white' },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    tabType: {
+      name: 'Tab type',
+      description: 'Type of child element, button/link.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Link'],
+    },
+    backgrounds: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    tabType: 'Button',
+  },
+};
+const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
+    <sdds-folder-tabs
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      ${tabType === 'Link'
+  ? `
+      <sdds-folder-tabs-link href="#">
+        First tab
+      </sdds-folder-tabs-link>
+      <sdds-folder-tabs-link href="#">
+        Second tab is much longer
+      </sdds-folder-tabs-link>
+      <sdds-folder-tabs-link selected href="#">
+        Third tab
+      </sdds-folder-tabs-link>
+      <sdds-folder-tabs-link disabled href="#">
+        Fourth tab
+      </sdds-folder-tabs-link>
+      `
+  : ''}
+      ${tabType === 'Button'
+  ? `
+      <sdds-folder-tabs-button>
+        First tab
+      </sdds-folder-tabs-button>
+      <sdds-folder-tabs-button>
+      Second tab is much longer
+      </sdds-folder-tabs-button>
+      <sdds-folder-tabs-button selected>
+        Third tab
+      </sdds-folder-tabs-button>
+      <sdds-folder-tabs-button disabled>
+        Fourth tab
+      </sdds-folder-tabs-button>
+      `
+  : ''}
+    </sdds-folder-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-folder-tabs');
+  
+    tabs.addEventListener('sddsChange', (event) => {
+      selectedTab.innerHTML = event.detail.selectedTab
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+    })
+    </script>
+`);
+export const FolderTabs = Template.bind({});
+//# sourceMappingURL=folder-tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"folder-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/folder-tabs/folder-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,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;IACjC,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;IACD,WAAW,EAAE;MACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,QAAQ;GAClB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CAAC;;QAEZ,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;QAE1F,OAAO,KAAK,MAAM;EAChB,CAAC,CAAC;;;;;;;;;;;;;OAaL;EACG,CAAC,CAAC,EACN;QAEE,OAAO,KAAK,QAAQ;EAClB,CAAC,CAAC;;;;;;;;;;;;;OAaL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;CAoBL,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 './folder-tabs-link/readme.md';\nimport readmeButton from './folder-tabs-button/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Folder tabs': readme,\n      'Folder tabs button': readmeButton,\n      'Folder tabs link': readmeLink,\n    },\n    backgrounds: { default: 'white' },\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    backgrounds: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tabType: 'Button',\n  },\n};\n\nconst Template = ({ modeVariant, tabType }) =>\n  formatHtmlPreview(`\n    <sdds-folder-tabs\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}>\n      ${\n        tabType === 'Link'\n          ? `\n      <sdds-folder-tabs-link href=\"#\">\n        First tab\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link href=\"#\">\n        Second tab is much longer\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link selected href=\"#\">\n        Third tab\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link disabled href=\"#\">\n        Fourth tab\n      </sdds-folder-tabs-link>\n      `\n          : ''\n      }\n      ${\n        tabType === 'Button'\n          ? `\n      <sdds-folder-tabs-button>\n        First tab\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button>\n      Second tab is much longer\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button selected>\n        Third tab\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button disabled>\n        Fourth tab\n      </sdds-folder-tabs-button>\n      `\n          : ''\n      }\n    </sdds-folder-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-folder-tabs');\n  \n    tabs.addEventListener('sddsChange', (event) => {\n      selectedTab.innerHTML = event.detail.selectedTab\n      selectedTabIndex.innerHTML = event.detail.selectedTabIndex\n    })\n    </script>\n`);\n\nexport const FolderTabs = Template.bind({});\n"]}

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

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

package/dist/collection/components/tabs/{inline-tabs-default/inline-tab/inline-tab.js → inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js}

@@ -1,44 +1,27 @@
 import { Host, h } from '@stencil/core';
-export class InlineTabsChild {
+export class SddsInlineTabsButton {
   constructor() {
-    this.label = undefined;
     this.disabled = false;
-    this.default = false;
+    this.selected = false;
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
+        ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", null)))));
   }
-  static get is() { return "sdds-inline-tab"; }
+  static get is() { return "sdds-inline-tabs-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["inline-tab.scss"]
+      "$": ["sdds-inline-tabs-button.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["inline-tab.css"]
+      "$": ["sdds-inline-tabs-button.css"]
     };
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -51,13 +34,13 @@ export class InlineTabsChild {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Disables the tab."
         },
         "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "default": {
+      "selected": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -69,13 +52,13 @@ export class InlineTabsChild {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Marks the tab as the selected one."
         },
-        "attribute": "default",
+        "attribute": "selected",
         "reflect": false,
         "defaultValue": "false"
       }
     };
   }
 }
-//# sourceMappingURL=inline-tab.js.map
+//# sourceMappingURL=sdds-inline-tabs-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-inline-tabs-button.js","sourceRoot":"","sources":["../../../../../src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,oBAAoB;;oBAEH,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UACzC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QAEvB,WAAK,KAAK,EAAC,OAAO;UAChB,eAAa,CACT,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-button',\n  styleUrl: 'sdds-inline-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,122 @@
+import { Host, h } from '@stencil/core';
+export class SddsInlineTabsLink {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("a", { class: `
+        ${this.selected ? 'selected' : ''}
+        ${this.disabled ? 'disabled' : ''}
+        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", null)))));
+  }
+  static get is() { return "sdds-inline-tabs-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-inline-tabs-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-inline-tabs-link.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"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Marks the tab as the selected one."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href for the link"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-inline-tabs-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-inline-tabs-link.js","sourceRoot":"","sources":["../../../../../src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;QAEb,WAAK,KAAK,EAAC,OAAO;UAChB,eAAa,CACT,CACJ,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-link',\n  styleUrl: 'sdds-inline-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href 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  /** '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      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+:host {
+  box-sizing: border-box;
+  display: flex;
+  background-color: var(--sdds-inline-tabs-background);
+  position: relative;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host::after {
+  content: " ";
+  display: block;
+  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;
+}
+:host .wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+:host .wrapper::-webkit-scrollbar {
+  display: none;
+}
+:host .scroll-right-button {
+  right: 0;
+  z-index: 201;
+}
+:host .scroll-left-button {
+  left: 0;
+  z-index: 201;
+}
+:host .scroll-right-button,
+:host .scroll-left-button {
+  color: var(--sdds-folder-tabs-scroll-btn-color);
+  cursor: pointer;
+  border: 0;
+  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;
+}
+:host .scroll-right-button.show,
+:host .scroll-left-button.show {
+  min-width: 48px;
+  display: block;
+  opacity: 1;
+  pointer-events: all;
+}
+:host .scroll-right-button:hover,
+:host .scroll-left-button:hover {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
+}
+:host .scroll-right-button:active,
+:host .scroll-left-button:active {
+  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
+}
+:host .scroll-right-button:focus,
+:host .scroll-left-button:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .scroll-right-button svg,
+:host .scroll-left-button svg {
+  fill: var(--sdds-folder-tabs-scroll-btn-color);
+}