@scania/tegel 1.3.3 → 1.5.0

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

@@ -3,267 +3,268 @@ import { Host, h, } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
 export class TdsInlineTabs {
-  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.addEventListenerToTabs = () => {
-      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);
+                    });
+                    this.componentWidth = componentWidth;
+                    this.buttonsWidth = buttonsWidth;
+                    this.scrollWidth = buttonsWidth - componentWidth;
+                    if (this.buttonsWidth > this.componentWidth) {
+                        this.evaluateScrollButtons();
+                    }
+                    else {
+                        this.showLeftScroll = false;
+                        this.showRightScroll = false;
+                    }
+                });
             });
-            if (!tdsChangeEvent.defaultPrevented) {
-              this.children.forEach((element) => element.setSelected(false));
-              item.setSelected(true);
-              this.selectedIndex = index;
-            }
-          }
+            resizeObserver.observe(this.navWrapperElement);
+        };
+        this.addEventListenerToTabs = () => {
+            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;
+            });
+        };
+        this.modeVariant = 'primary';
+        this.defaultSelectedIndex = 0;
+        this.selectedIndex = undefined;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
+        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.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;
         });
-        return item;
-      });
-    };
-    this.modeVariant = 'primary';
-    this.defaultSelectedIndex = 0;
-    this.selectedIndex = undefined;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-    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.setSelected(false));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setSelected(true);
-          this.selectedIndex = tabIndex;
+        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;
+        }
+        else {
+            this.showRightScroll = true;
+        }
+        if (scroll <= 0) {
+            this.showLeftScroll = false;
         }
-        return element;
-      });
+        else {
+            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');
     }
-    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;
+    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,
+            });
+        }
     }
-    else {
-      this.showRightScroll = true;
+    componentDidRender() {
+        if (this.buttonsWidth > this.componentWidth) {
+            this.evaluateScrollButtons();
+        }
+        else {
+            this.showLeftScroll = false;
+            this.showRightScroll = false;
+        }
+        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-inline-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["inline-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');
-  }
-  componentDidLoad() {
-    if (this.selectedIndex === undefined) {
-      this.addEventListenerToTabs();
-      this.children[this.defaultSelectedIndex].setSelected(true);
-      this.selectedIndex = this.defaultSelectedIndex;
-      this.tdsChange.emit({
-        selectedTabIndex: this.selectedIndex,
-      });
+    static get styleUrls() {
+        return {
+            "$": ["inline-tabs.css"]
+        };
     }
-    else {
-      this.children[this.selectedIndex].setSelected(true);
-      this.tdsChange.emit({
-        selectedTabIndex: this.selectedIndex,
-      });
+    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
+            }
+        };
     }
-  }
-  componentDidRender() {
-    if (this.buttonsWidth > this.componentWidth) {
-      this.evaluateScrollButtons();
+    static get states() {
+        return {
+            "showLeftScroll": {},
+            "showRightScroll": {},
+            "buttonWidth": {}
+        };
     }
-    else {
-      this.showLeftScroll = false;
-      this.showRightScroll = false;
+    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": {}
+                }
+            }];
     }
-    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-inline-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["inline-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["inline-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": {},
-      "buttonWidth": {}
-    };
-  }
-  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 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": "Selects a Tab based on tabindex, will not select a disabled Tab.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<{ selectedTabIndex: number; }>"
-        },
-        "docs": {
-          "text": "Selects a Tab based on tabindex, will not select a disabled Tab.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "selectedIndex",
-        "methodName": "handleSelectedIndexUpdate"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedIndex",
+                "methodName": "handleSelectedIndexUpdate"
+            }];
+    }
 }