@watermarkinsights/ripple 4.2.0-0 → 4.2.0

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -1,281 +1,281 @@
 import { forceUpdate, h, Host } from "@stencil/core";
 import { debounce } from "../../../global/functions";
 export class TabList {
-    constructor() {
-        this.debouncedSetLayout = debounce(() => {
-            if (!this.listWidth) {
-                this.setListWidth();
-            }
-            forceUpdate(this.el);
-        }, 250);
-        this.customBackground = undefined;
-        this.customPadding = undefined;
-        this.selectedTab = undefined;
+  constructor() {
+    this.debouncedSetLayout = debounce(() => {
+      if (!this.listWidth) {
+        this.setListWidth();
+      }
+      forceUpdate(this.el);
+    }, 250);
+    this.customBackground = undefined;
+    this.customPadding = undefined;
+    this.selectedTab = undefined;
+  }
+  /**
+   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
+   */
+  get menuLayout() {
+    if (this.listWidth) {
+      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
     }
-    /**
-     * Set to true when the tab list exceeds the parent width. Component will render the menu layout.
-     */
-    get menuLayout() {
-        if (this.listWidth) {
-            return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul
-        }
-        else {
-            return false; // in case listWidth couldn't get computed, we render regular tabs
-        }
-    }
-    get tabItems() {
-        return Array.from(this.el.querySelectorAll("wm-tab-item"));
-    }
-    get selectedTabItem() {
-        return this.tabItems.filter((t) => t.selected)[0];
-    }
-    getLinkEl(tab) {
-        return tab.shadowRoot.querySelector("a");
-    }
-    get panels() {
-        const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
-        const tabIds = this.tabItems.map((t) => t.tabId);
-        return allPanels.filter((p) => tabIds.includes(p.tabId));
-    }
-    getPanel(tabId) {
-        return this.panels.find((p) => p.tabId === tabId);
-    }
-    setListWidth() {
-        let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
-        this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
-    }
-    setSelected(id) {
-        this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
-        const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
-        if (singlePanel) {
-            /**
-             * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
-             */
-            this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
-            this.panels[0].active = true;
-        }
-        else {
-            this.panels.map((panel) => (panel.active = panel.tabId === id));
-        }
-    }
-    showItems() {
-        this.tabItems.map((t) => (t.show = true));
-    }
-    hideItems() {
-        this.tabItems.map((t) => (t.show = false));
-    }
-    componentWillLoad() {
-        this.el.focus = () => {
-            // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
-            this.selectedTabItem && this.selectedTabItem.focus();
-        };
-    }
-    componentDidLoad() {
-        this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
-        const selectedTab = this.selectedTab || this.tabItems[0].tabId;
-        this.setSelected(selectedTab);
-    }
-    tabItemLoaded(ev) {
-        this.setAriaOnPanelAndTab(ev.target);
+    else {
+      return false; // in case listWidth couldn't get computed, we render regular tabs
     }
-    setAriaOnPanelAndTab(tab) {
-        const panel = this.getPanel(tab.tabId);
-        // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
-        if (!panel) {
-            if (this.panels.length === 1) {
-                this.setAttributesOnTab(tab, this.panels[0]);
-            }
-        }
-        else {
-            // Otherwise, set attributes on each tab item that loads and its associated panel
-            this.setAttributesOnPanel(panel, tab);
-            this.setAttributesOnTab(tab, panel);
-        }
+  }
+  get tabItems() {
+    return Array.from(this.el.querySelectorAll("wm-tab-item"));
+  }
+  get selectedTabItem() {
+    return this.tabItems.filter((t) => t.selected)[0];
+  }
+  getLinkEl(tab) {
+    return tab.shadowRoot.querySelector("a");
+  }
+  get panels() {
+    const allPanels = Array.from(document.querySelectorAll("wm-tab-panel"));
+    const tabIds = this.tabItems.map((t) => t.tabId);
+    return allPanels.filter((p) => tabIds.includes(p.tabId));
+  }
+  getPanel(tabId) {
+    return this.panels.find((p) => p.tabId === tabId);
+  }
+  setListWidth() {
+    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);
+    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value
+  }
+  setSelected(id) {
+    this.tabItems.map((tab) => (tab.selected = tab.tabId === id));
+    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;
+    if (singlePanel) {
+      /**
+       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.
+       */
+      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);
+      this.panels[0].active = true;
     }
-    setAttributesOnTab(tab, panel) {
-        const link = this.getLinkEl(tab);
-        if (link) {
-            link.setAttribute("aria-controls", panel.id);
-            link.setAttribute("href", `#${panel.id}`);
-        }
+    else {
+      this.panels.map((panel) => (panel.active = panel.tabId === id));
     }
-    removeAttributesOnTab(tab) {
-        const link = this.getLinkEl(tab);
-        if (link) {
-            link.removeAttribute("aria-controls");
-            link.removeAttribute("href");
-        }
+  }
+  showItems() {
+    this.tabItems.map((t) => (t.show = true));
+  }
+  hideItems() {
+    this.tabItems.map((t) => (t.show = false));
+  }
+  componentWillLoad() {
+    this.el.focus = () => {
+      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item
+      this.selectedTabItem && this.selectedTabItem.focus();
+    };
+  }
+  componentDidLoad() {
+    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint
+    const selectedTab = this.selectedTab || this.tabItems[0].tabId;
+    this.setSelected(selectedTab);
+  }
+  tabItemLoaded(ev) {
+    this.setAriaOnPanelAndTab(ev.target);
+  }
+  setAriaOnPanelAndTab(tab) {
+    const panel = this.getPanel(tab.tabId);
+    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.
+    if (!panel) {
+      if (this.panels.length === 1) {
+        this.setAttributesOnTab(tab, this.panels[0]);
+      }
     }
-    setAttributesOnPanel(panel, tab) {
-        const link = this.getLinkEl(tab);
-        if (link) {
-            panel.setAttribute("aria-labelledby", link.id);
-            panel.setAttribute("tab-id", tab.tabId);
-        }
+    else {
+      // Otherwise, set attributes on each tab item that loads and its associated panel
+      this.setAttributesOnPanel(panel, tab);
+      this.setAttributesOnTab(tab, panel);
     }
-    handleKeydown(ev) {
-        const key = ev.detail.key;
-        const index = this.tabItems.indexOf(ev.detail.tabItem);
-        if (key === "ArrowLeft" || key === "ArrowRight") {
-            this.handleLeftRightArrow(index, key);
-        }
+  }
+  setAttributesOnTab(tab, panel) {
+    const link = this.getLinkEl(tab);
+    if (link) {
+      link.setAttribute("aria-controls", panel.id);
+      link.setAttribute("href", `#${panel.id}`);
     }
-    handleLeftRightArrow(index, key) {
-        if (key) {
-            index = key === "ArrowLeft" ? index - 1 : index + 1;
-        }
-        if (index < 0) {
-            index = this.tabItems.length - 1;
-        }
-        else if (index === this.tabItems.length) {
-            index = 0;
-        }
-        const tabToFocus = this.tabItems[index];
-        this.getLinkEl(tabToFocus).focus();
+  }
+  removeAttributesOnTab(tab) {
+    const link = this.getLinkEl(tab);
+    if (link) {
+      link.removeAttribute("aria-controls");
+      link.removeAttribute("href");
     }
-    /**
-     * Change layout if parent size drops below tab list width
-     */
-    setLayout() {
-        this.debouncedSetLayout();
+  }
+  setAttributesOnPanel(panel, tab) {
+    const link = this.getLinkEl(tab);
+    if (link) {
+      panel.setAttribute("aria-labelledby", link.id);
+      panel.setAttribute("tab-id", tab.tabId);
     }
-    renderMenuOrTabs() {
-        if (this.menuLayout) {
-            this.hideItems();
-            return (h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
-        }
-        else {
-            this.showItems();
-            let margins = {};
-            if (this.customPadding) {
-                margins = {
-                    "margin-left": "-" + this.customPadding,
-                };
-            }
-            return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
-        }
+  }
+  handleKeydown(ev) {
+    const key = ev.detail.key;
+    const index = this.tabItems.indexOf(ev.detail.tabItem);
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      this.handleLeftRightArrow(index, key);
     }
-    renderOptions() {
-        return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
-                ev.preventDefault();
-                this.wmTabSelected.emit({ tabId: t.tabId });
-            } }, t.textContent)));
+  }
+  handleLeftRightArrow(index, key) {
+    if (key) {
+      index = key === "ArrowLeft" ? index - 1 : index + 1;
     }
-    render() {
-        return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+    if (index < 0) {
+      index = this.tabItems.length - 1;
     }
-    static get is() { return "wm-tab-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-tab-list.scss"]
-        };
+    else if (index === this.tabItems.length) {
+      index = 0;
     }
-    static get styleUrls() {
-        return {
-            "$": ["wm-tab-list.css"]
-        };
+    const tabToFocus = this.tabItems[index];
+    this.getLinkEl(tabToFocus).focus();
+  }
+  /**
+   * Change layout if parent size drops below tab list width
+   */
+  setLayout() {
+    this.debouncedSetLayout();
+  }
+  renderMenuOrTabs() {
+    if (this.menuLayout) {
+      this.hideItems();
+      return (h("wm-select", { label: "Tab Selection", "label-position": "none" }, this.renderOptions()));
     }
-    static get properties() {
-        return {
-            "customBackground": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"dark\" | \"\"",
-                    "resolved": "\"\" | \"dark\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "custom-background",
-                "reflect": false
-            },
-            "customPadding": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "custom-padding",
-                "reflect": false
-            },
-            "selectedTab": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "selected-tab",
-                "reflect": false
-            }
+    else {
+      this.showItems();
+      let margins = {};
+      if (this.customPadding) {
+        margins = {
+          "margin-left": "-" + this.customPadding,
         };
+      }
+      return (h("ul", { class: `tabcontainer ${this.customBackground || ""}`, style: margins, role: "tablist" }, h("slot", null)));
     }
-    static get events() {
-        return [{
-                "method": "wmTabSelected",
-                "name": "wmTabSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted by wm-select options when tabs have the menu format"
-                },
-                "complexType": {
-                    "original": "{ tabId: string }",
-                    "resolved": "{ tabId: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selectedTab",
-                "methodName": "setSelected"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "tabItemLoaded",
-                "method": "tabItemLoaded",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydownOnTabItem",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "resize",
-                "method": "setLayout",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
+  }
+  renderOptions() {
+    return this.tabItems.map((t) => (h("wm-option", { id: `tab-link-${t.tabId}`, selected: t.tabId === this.selectedTab, onClick: (ev) => {
+        ev.preventDefault();
+        this.wmTabSelected.emit({ tabId: t.tabId });
+      } }, t.textContent)));
+  }
+  render() {
+    return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+  }
+  static get is() { return "wm-tab-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tab-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tab-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "customBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"dark\" | \"\"",
+          "resolved": "\"\" | \"dark\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-background",
+        "reflect": false
+      },
+      "customPadding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-padding",
+        "reflect": false
+      },
+      "selectedTab": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-tab",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTabSelected",
+        "name": "wmTabSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted by wm-select options when tabs have the menu format"
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedTab",
+        "methodName": "setSelected"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "tabItemLoaded",
+        "method": "tabItemLoaded",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydownOnTabItem",
+        "method": "handleKeydown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "setLayout",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }