@scania/tegel 0.0.5 → 0.0.7

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

@@ -0,0 +1,80 @@
+import { Host, h } from '@stencil/core';
+export class SddsInlineTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-inline-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-inline-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-inline-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the tab as selected. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}

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

@@ -30,121 +30,60 @@ export class InlineTabsFullbleed {
       });
       resizeObserver.observe(this.navWrapperElement);
     };
+    this.addEventListenerToTabs = () => {
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
     this.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
     this.buttonWidth = 0;
   }
   /** Selects a tab based on tabindex, will not select a disabled tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
+      this.children.forEach((element) => element.setSelected(false));
       this.children = this.children.map((element, index) => {
         if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
+          this.sddsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+          });
         }
         return element;
       });
     }
     return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
+      selectedTabIndex: this.selectedIndex,
     };
   }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  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 = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-  }
-  componentWillRender() {
-    if (!this.selectedTab) {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        if (item.selected) {
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-        return item;
-      });
-    }
-  }
-  componentDidRender() {
-    if (this.buttonsWidth > this.componentWidth) {
-      this.evaluateScrollButtons();
-    }
-    else {
-      this.showLeftScroll = false;
-      this.showRightScroll = false;
-    }
-    this.addResizeObserver();
-  }
   scrollRight() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + 95;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   scrollLeft() {
     const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - 10;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
     this.evaluateScrollButtons();
   }
   evaluateScrollButtons() {
@@ -162,8 +101,39 @@ export class InlineTabsFullbleed {
       this.showLeftScroll = true;
     }
   }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
+  }
+  componentDidLoad() {
+    if (this.selectedIndex === undefined) {
+      this.addEventListenerToTabs();
+      this.children[this.defaultSelectedIndex].setSelected(true);
+      this.selectedIndex = this.defaultSelectedIndex;
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
+    else {
+      this.children[this.selectedIndex].setSelected(true);
+      this.sddsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
+  }
+  componentDidRender() {
+    if (this.buttonsWidth > this.componentWidth) {
+      this.evaluateScrollButtons();
+    }
+    else {
+      this.showLeftScroll = false;
+      this.showRightScroll = false;
+    }
+    this.addResizeObserver();
+  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
       } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
   }
@@ -198,6 +168,41 @@ export class InlineTabsFullbleed {
         "attribute": "mode-variant",
         "reflect": false,
         "defaultValue": "'primary'"
+      },
+      "defaultSelectedIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the default selected tab."
+        },
+        "attribute": "default-selected-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "selectedIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+        },
+        "attribute": "selected-index",
+        "reflect": true
       }
     };
   }
@@ -205,7 +210,6 @@ export class InlineTabsFullbleed {
     return {
       "showLeftScroll": {},
       "showRightScroll": {},
-      "selectedTab": {},
       "buttonWidth": {}
     };
   }
@@ -221,8 +225,8 @@ export class InlineTabsFullbleed {
           "text": ""
         },
         "complexType": {
-          "original": "{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }",
-          "resolved": "{ selectedTab: { tab: string; tabIndex: number; }; }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
+          "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }
       }];
@@ -231,7 +235,7 @@ export class InlineTabsFullbleed {
     return {
       "selectTab": {
         "complexType": {
-          "signature": "(tabIndex: number) => Promise<{ selectedTab: string; selectedTabIndex: number; }>",
+          "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -241,7 +245,7 @@ export class InlineTabsFullbleed {
               "location": "global"
             }
           },
-          "return": "Promise<{ selectedTab: string; selectedTabIndex: number; }>"
+          "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
           "text": "Selects a tab based on tabindex, will not select a disabled tab.",
@@ -251,11 +255,4 @@ export class InlineTabsFullbleed {
     };
   }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedTab",
-        "methodName": "handleSelectedTabChange"
-      }];
-  }
 }
-//# sourceMappingURL=inline-tabs.js.map

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

@@ -1,14 +1,12 @@
 import { formatHtmlPreview } from '../../../utils/utils';
 import readme from './readme.md';
-import readmeLink from './inline-tabs-link/readme.md';
-import readmeButton from './inline-tabs-button/readme.md';
+import readmeTab from './inline-tab/readme.md';
 export default {
   title: 'Components/Tabs',
   parameters: {
     notes: {
       'Inline tabs': readme,
-      'Inline tabs button': readmeButton,
-      'Inline tabs link': readmeLink,
+      'Inline tab': readmeTab,
     },
     design: [
       {
@@ -35,75 +33,66 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    tabType: {
-      name: 'Tab type',
-      description: 'Type of child element, button/link.',
+    defaultSelectedIndex: {
+      name: 'Default selected index',
+      description: 'Sets the default selected tab, if this is used the tab changes will be done automatically.',
       control: {
         type: 'radio',
       },
-      options: ['Button', 'Link'],
+      options: ['None', 0, 1, 2, 3],
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    selectedIndex: {
+      name: 'Selected index',
+      description: 'Sets the selected tab, if this is used the tab changes has to be handled by the user.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      if: { arg: 'defaultSelectedIndex', eq: 'None' },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
-    tabType: 'Link',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
   <sdds-inline-tabs
+    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
     ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      ${tabType === 'Link'
-  ? `
-        <sdds-inline-tabs-link href="#">
-          First tab
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link href="#">
-          Second tab is longer
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link selected href="#">
-          Third tab
-        </sdds-inline-tabs-link>
-        <sdds-inline-tabs-link disabled href="#">
-          Fourth tab
-        </sdds-inline-tabs-link>
-        `
-  : ''}
-      ${tabType === 'Button'
-  ? `
-        <sdds-inline-tabs-button>
-          First tab
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button>
-          Second tab is longer
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button selected>
-          Third tab
-        </sdds-inline-tabs-button>
-        <sdds-inline-tabs-button disabled>
-          Fourth tab
-        </sdds-inline-tabs-button>
-        `
-  : ''}
+      <sdds-inline-tab>
+        <button>First tab</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab>
+        <button>Second tab is much longer</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab>
+        <button>Third tab</button>
+      </sdds-inline-tab>
+      <sdds-inline-tab disabled>
+        <button>Fourth tab</button>
+      </sdds-inline-tab>
    </sdds-inline-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-inline-tabs');
    
    tabs.addEventListener('sddsChange', (event) => {
-      console.log(event)
-     selectedTab.innerHTML = event.detail.selectedTab.tab
-     selectedTabIndex.innerHTML = event.detail.selectedTab.tabIndex
-   })
+     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+     console.log(event)
+    })
    </script>
 `);
 export const InlineTabs = Template.bind({});
-//# sourceMappingURL=inline-tabs.stories.js.map

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

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

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

@@ -0,0 +1,80 @@
+import { Host, h } from '@stencil/core';
+export class SddsNavigationTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-navigation-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-navigation-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-navigation-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the tab as selected. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}