@scania/tegel 0.0.4 → 0.0.5

package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js

@@ -0,0 +1,100 @@
+import { Host, h } from '@stencil/core';
+export class SddsFolderTabsButton {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("button", { style: { width: `${this.tabWidth}px` }, class: `${this.selected ? 'selected' : ''}
+          ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", null)))));
+  }
+  static get is() { return "sdds-folder-tabs-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-folder-tabs-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-folder-tabs-button.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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabWidth": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setTabWidth": {
+        "complexType": {
+          "signature": "(width: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the width of the tab. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-folder-tabs-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-folder-tabs-button.js","sourceRoot":"","sources":["../../../../../src/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,oBAAoB;;oBAEH,KAAK;oBAGL,KAAK;;;EAIjC,mFAAmF;EAEnF,KAAK,CAAC,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,cACE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EACtC,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EACnC,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, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs-button',\n  styleUrl: 'sdds-folder-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsFolderTabsButton {\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  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          style={{ width: `${this.tabWidth}px` }}\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/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.css

@@ -0,0 +1,77 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  z-index: 200;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host a {
+  min-width: 142px;
+  display: block;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  cursor: pointer;
+  padding: 16px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  border: none;
+  border-right: 1px solid;
+  border-right-color: transparent;
+  color: var(--sdds-folder-tab-color);
+  border-top: 2px solid var(--sdds-folder-tab-background);
+  background-color: var(--sdds-folder-tab-background);
+}
+:host a .label {
+  opacity: var(--sdds-folder-tab-color-opacity);
+}
+:host a.selected {
+  background-color: var(--sdds-folder-tab-background-selected);
+  border-top: 2px solid var(--sdds-folder-tab-border-selected);
+}
+:host a.selected::before {
+  content: " ";
+  background-color: var(--sdds-folder-tab-background-selected);
+  width: 1px;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  display: block;
+  position: absolute;
+}
+:host a.selected .label {
+  opacity: var(--sdds-folder-tab-color-opacity-selected);
+}
+:host a:not(.selected) {
+  border-right-color: var(--sdds-folder-tab-divider-color);
+}
+:host a:not(.selected):hover {
+  background-color: var(--sdds-folder-tab-background-hover);
+}
+:host a:not(.selected):hover .label {
+  opacity: var(--sdds-folder-tab-color-opacity-hover);
+}
+:host a.disabled {
+  pointer-events: none;
+}
+:host a.disabled .label {
+  opacity: var(--sdds-folder-tab-color-opacity-disabled);
+}
+:host a.disabled:focus-visible {
+  outline: none;
+}
+:host a.disabled:focus-visible .label {
+  opacity: var(--sdds-folder-tab-color-opacity-disabled);
+}
+:host a:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+  opacity: var(--sdds-folder-tab-color-opacity-focus);
+}
+
+:host(.last) a:not(.selected) {
+  border-right-color: transparent;
+}

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

@@ -0,0 +1,158 @@
+import { Host, h } from '@stencil/core';
+export class SddsFolderTabsLink {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("a", { style: { width: `${this.tabWidth}px` }, 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-folder-tabs-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-folder-tabs-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-folder-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'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabWidth": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setTabWidth": {
+        "complexType": {
+          "signature": "(width: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the width of the tab. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-folder-tabs-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-folder-tabs-link.js","sourceRoot":"","sources":["../../../../../src/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,kBAAkB;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;;EAIhC,mFAAmF;EAEnF,KAAK,CAAC,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,SACE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EACtC,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, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs-link',\n  styleUrl: 'sdds-folder-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsFolderTabsLink {\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  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          style={{ width: `${this.tabWidth}px` }}\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/folder-tabs/folder-tabs.css

@@ -0,0 +1,64 @@
+:host {
+  box-sizing: border-box;
+  overflow: hidden;
+  outline: 0;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .wrapper {
+  display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  position: relative;
+}
+:host .wrapper::-webkit-scrollbar {
+  display: none;
+}
+:host .scroll-right-button {
+  z-index: 201;
+  right: 0;
+}
+:host .scroll-left-button {
+  z-index: 201;
+  left: 0;
+}
+:host .scroll-right-button,
+:host .scroll-left-button {
+  height: 50px;
+  color: var(--sdds-folder-tabs-scroll-btn-color);
+  cursor: pointer;
+  border: 0;
+  width: 0;
+  background-color: var(--sdds-folder-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);
+}

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

@@ -0,0 +1,256 @@
+import { Host, h, } from '@stencil/core';
+export class InlineTabs {
+  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.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);
+          });
+          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.modeVariant = null;
+    this.buttonWidth = 0;
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+    this.selectedTab = undefined;
+    this.selectedTabIndex = undefined;
+  }
+  calculateButtonWidth() {
+    this.children = this.children.map((tab) => {
+      if (tab.offsetWidth > this.buttonWidth) {
+        this.buttonWidth = tab.offsetWidth;
+      }
+      return tab;
+    });
+    this.children.forEach((tab) => {
+      tab.setTabWidth(this.buttonWidth);
+    });
+  }
+  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;
+    }
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children = this.children.map((item, index) => {
+      item.addEventListener('click', () => {
+        if (!item.disabled) {
+          this.children.forEach((element) => element.removeAttribute('selected'));
+          item.setAttribute('selected', '');
+          this.selectedTab = item.innerHTML;
+          this.selectedTabIndex = index;
+        }
+      });
+      if (index === 0) {
+        item.classList.add('first');
+      }
+      if (index === this.children.length - 1) {
+        item.classList.add('last');
+      }
+      if (item.selected) {
+        this.selectedTab = item.innerHTML;
+        this.selectedTabIndex = index;
+      }
+      return item;
+    });
+  }
+  componentDidLoad() {
+    this.calculateButtonWidth();
+  }
+  componentDidUpdate() {
+    this.calculateButtonWidth();
+  }
+  componentWillRender() {
+    if (!this.selectedTab) {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        if (item.selected) {
+          this.selectedTab = item.innerHTML;
+          this.selectedTabIndex = index;
+        }
+        return item;
+      });
+    }
+  }
+  componentDidRender() {
+    if (this.buttonsWidth > this.componentWidth) {
+      this.evaluateScrollButtons();
+    }
+    else {
+      this.showLeftScroll = false;
+      this.showRightScroll = false;
+    }
+    this.addResizeObserver();
+  }
+  /** Sets the passed tabindex as the selected tab. */
+  async selectTab(tabIndex) {
+    if (!this.children[tabIndex].disabled) {
+      this.children.forEach((element) => element.removeAttribute('selected'));
+      this.children = this.children.map((element, index) => {
+        if (index === tabIndex) {
+          element.setAttribute('selected', '');
+          this.selectedTab = element.innerHTML;
+          this.selectedTabIndex = tabIndex;
+        }
+        return element;
+      });
+    }
+    return {
+      selectedTab: this.selectedTab,
+      selectedTabIndex: this.selectedTabIndex,
+    };
+  }
+  handleSelectedTabChange() {
+    this.host.setAttribute('selected-tab', this.selectedTab);
+  }
+  handleSelectedTabIndexChange() {
+    this.host.setAttribute('selected-tab-index', `${this.selectedTabIndex}`);
+    this.sddsChange.emit({
+      selectedTab: this.selectedTab,
+      selectedTabIndex: this.selectedTabIndex,
+    });
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { ref: (el) => {
+        this.navWrapperElement = el;
+      }, class: "wrapper", role: "list" }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+  }
+  static get is() { return "sdds-folder-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["folder-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["folder-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "buttonWidth": {},
+      "showLeftScroll": {},
+      "showRightScroll": {},
+      "selectedTab": {},
+      "selectedTabIndex": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    selectedTab: string;\n    selectedTabIndex: number;\n  }",
+          "resolved": "{ selectedTab: string; selectedTabIndex: number; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "selectTab": {
+        "complexType": {
+          "signature": "(tabIndex: number) => Promise<{ selectedTab: string; selectedTabIndex: number; }>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ selectedTab: string; selectedTabIndex: number; }>"
+        },
+        "docs": {
+          "text": "Sets the passed tabindex as the selected tab.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedTab",
+        "methodName": "handleSelectedTabChange"
+      }, {
+        "propName": "selectedTabIndex",
+        "methodName": "handleSelectedTabIndexChange"
+      }];
+  }
+}
+//# sourceMappingURL=folder-tabs.js.map