@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,256 +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
+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

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

@@ -1,64 +1,64 @@
-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',
-  },
-};
+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'
+      ${tabType === 'Link'
   ? `
       <sdds-folder-tabs-link href="#">
         <div slot="label">First tab</div>
@@ -72,9 +72,9 @@ const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
       <sdds-folder-tabs-link disabled href="#">
         <div slot="label">Fourth tab</div>
       </sdds-folder-tabs-link>
-      `
+      `
   : ''}
-      ${tabType === 'Button'
+      ${tabType === 'Button'
   ? `
       <sdds-folder-tabs-button>
         <div slot="label">First tab</div>
@@ -88,7 +88,7 @@ const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
       <sdds-folder-tabs-button disabled>
         <div slot="label">Fourth tab</div>
       </sdds-folder-tabs-button>
-      `
+      `
   : ''}
     </sdds-folder-tabs>
 
@@ -109,6 +109,6 @@ const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
       selectedTabIndex.innerHTML = event.detail.selectedTabIndex
     })
     </script>
-`);
-export const FolderTabs = Template.bind({});
-//# sourceMappingURL=folder-tabs.stories.js.map
+`);
+export const FolderTabs = Template.bind({});
+//# sourceMappingURL=folder-tabs.stories.js.map

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

@@ -11,7 +11,7 @@
   all: unset;
   font: var(--sdds-headline-07);
   letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-navigation-tabs-tab-color);
+  color: var(--sdds-inline-tabs-tab-color);
   padding: 8px 4px;
   margin-right: 32px;
   text-decoration: none;