@scania/tegel 1.3.3 → 1.4.0

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

@@ -3,260 +3,261 @@ import { Host, h, } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
 export class TdsNavigationTabs {
-  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);
-            navButton.classList.add('tds-navigation-tabs-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);
-    };
-    this.addEventListenerToTabs = () => {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        item.addEventListener('click', () => {
-          if (!item.disabled) {
-            const tdsChangeEvent = this.tdsChange.emit({
-              selectedTabIndex: this.children.indexOf(item),
+    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);
+                        navButton.classList.add('tds-navigation-tabs-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);
+        };
+        this.addEventListenerToTabs = () => {
+            this.children = Array.from(this.host.children);
+            this.children = this.children.map((item, index) => {
+                item.addEventListener('click', () => {
+                    if (!item.disabled) {
+                        const tdsChangeEvent = this.tdsChange.emit({
+                            selectedTabIndex: this.children.indexOf(item),
+                        });
+                        if (!tdsChangeEvent.defaultPrevented) {
+                            this.children.forEach((element) => element.setSelected(false));
+                            item.setSelected(true);
+                            this.selectedIndex = index;
+                        }
+                    }
+                });
+                return item;
             });
-            if (!tdsChangeEvent.defaultPrevented) {
-              this.children.forEach((element) => element.setSelected(false));
-              item.setSelected(true);
-              this.selectedIndex = index;
+        };
+        this.componentDidLoad = () => {
+            if (this.selectedIndex === undefined) {
+                this.addEventListenerToTabs();
+                this.children[this.defaultSelectedIndex].setSelected(true);
+                this.selectedIndex = this.defaultSelectedIndex;
+                this.tdsChange.emit({
+                    selectedTabIndex: this.selectedIndex,
+                });
             }
-          }
-        });
-        return item;
-      });
-    };
-    this.componentDidLoad = () => {
-      if (this.selectedIndex === undefined) {
-        this.addEventListenerToTabs();
-        this.children[this.defaultSelectedIndex].setSelected(true);
-        this.selectedIndex = this.defaultSelectedIndex;
-        this.tdsChange.emit({
-          selectedTabIndex: this.selectedIndex,
+            else {
+                this.children[this.selectedIndex].setSelected(true);
+                this.tdsChange.emit({
+                    selectedTabIndex: this.selectedIndex,
+                });
+            }
+        };
+        this.modeVariant = 'primary';
+        this.defaultSelectedIndex = 0;
+        this.selectedIndex = undefined;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
+    }
+    /** Sets the passed tabindex as the selected Tab. */
+    async selectTab(tabIndex) {
+        if (!this.children[tabIndex].disabled) {
+            this.children.forEach((element) => element.setSelected(false));
+            this.children = this.children.map((element, index) => {
+                if (index === tabIndex) {
+                    element.setSelected(true);
+                    this.selectedIndex = tabIndex;
+                }
+                return element;
+            });
+        }
+        return {
+            selectedTabIndex: this.selectedIndex,
+        };
+    }
+    handleSelectedIndexUpdate() {
+        this.children = Array.from(this.host.children).map((tabElement) => {
+            tabElement.setSelected(false);
+            return tabElement;
         });
-      }
-      else {
         this.children[this.selectedIndex].setSelected(true);
-        this.tdsChange.emit({
-          selectedTabIndex: this.selectedIndex,
-        });
-      }
-    };
-    this.modeVariant = 'primary';
-    this.defaultSelectedIndex = 0;
-    this.selectedIndex = undefined;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  /** Sets the passed tabindex as the selected Tab. */
-  async selectTab(tabIndex) {
-    if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.setSelected(false));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setSelected(true);
-          this.selectedIndex = tabIndex;
+    }
+    scrollRight() {
+        const scroll = this.navWrapperElement.scrollLeft;
+        this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
+        this.evaluateScrollButtons();
+    }
+    scrollLeft() {
+        const scroll = this.navWrapperElement.scrollLeft;
+        this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
+        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;
         }
-        return element;
-      });
     }
-    return {
-      selectedTabIndex: this.selectedIndex,
-    };
-  }
-  handleSelectedIndexUpdate() {
-    this.children = Array.from(this.host.children).map((tabElement) => {
-      tabElement.setSelected(false);
-      return tabElement;
-    });
-    this.children[this.selectedIndex].setSelected(true);
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
+    connectedCallback() {
+        this.children = Array.from(this.host.children);
+        this.children[0].classList.add('first');
+        this.children[this.children.length - 1].classList.add('last');
     }
-    else {
-      this.showRightScroll = true;
+    componentDidRender() {
+        this.addResizeObserver();
     }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
+    render() {
+        return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-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("tds-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("tds-icon", { name: "chevron_right", size: "20px" })))));
     }
-    else {
-      this.showLeftScroll = true;
+    static get is() { return "tds-navigation-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navigation-tabs.scss"]
+        };
     }
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidRender() {
-    this.addResizeObserver();
-  }
-  render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-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("tds-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("tds-icon", { name: "chevron_right", size: "20px" })))));
-  }
-  static get is() { return "tds-navigation-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["navigation-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["navigation-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": "'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 need to be handled by the user."
-        },
-        "attribute": "selected-index",
-        "reflect": true
-      }
-    };
-  }
-  static get states() {
-    return {
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsChange",
-        "name": "tdsChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when the selected Tab is changed."
-        },
-        "complexType": {
-          "original": "{\n    selectedTabIndex: number;\n  }",
-          "resolved": "{ selectedTabIndex: number; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "selectTab": {
-        "complexType": {
-          "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get styleUrls() {
+        return {
+            "$": ["navigation-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": "'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 need to be handled by the user."
+                },
+                "attribute": "selected-index",
+                "reflect": true
             }
-          },
-          "return": "Promise<{ selectedTabIndex: number; }>"
-        },
-        "docs": {
-          "text": "Sets the passed tabindex as the selected Tab.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedIndex",
-        "methodName": "handleSelectedIndexUpdate"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "showLeftScroll": {},
+            "showRightScroll": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsChange",
+                "name": "tdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the selected Tab is changed."
+                },
+                "complexType": {
+                    "original": "{\n    selectedTabIndex: number;\n  }",
+                    "resolved": "{ selectedTabIndex: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "selectTab": {
+                "complexType": {
+                    "signature": "(tabIndex: number) => Promise<{ selectedTabIndex: number; }>",
+                    "parameters": [{
+                            "name": "tabIndex",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ selectedTabIndex: number; }>"
+                },
+                "docs": {
+                    "text": "Sets the passed tabindex as the selected Tab.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedIndex",
+                "methodName": "handleSelectedIndexUpdate"
+            }];
+    }
 }

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

@@ -3,63 +3,63 @@ import readme from "./readme.md";
 import readmeTab from "./navigation-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Tabs`,
-  parameters: {
-    notes: {
-      'Navigation Tabs': readme,
-      'Navigation Tab': readmeTab,
+    title: `${ComponentsFolder}/Tabs`,
+    parameters: {
+        notes: {
+            'Navigation Tabs': readme,
+            'Navigation Tab': readmeTab,
+        },
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&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' },
-      },
+    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' },
+            },
+        },
+        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: ['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' },
+        },
     },
-    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: ['None', 0, 1, 2, 3],
-      table: {
-        defaultValue: { summary: '0' },
-      },
+    args: {
+        modeVariant: 'Inherit from parent',
+        defaultSelectedIndex: 'None',
+        selectedIndex: 'None',
     },
-    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',
-    defaultSelectedIndex: 'None',
-    selectedIndex: 'None',
-  },
 };
 const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
     <tds-navigation-tabs