@watermarkinsights/ripple 5.14.0-alpha.0 → 5.14.0-alpha.3

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

@@ -0,0 +1,273 @@
+import { forceUpdate, h, Host } from "@stencil/core";
+import { debounce, intl } from "../../../global/functions";
+export class TabList {
+    constructor() {
+        this.selectLabel = intl.formatMessage({
+            id: "tab.selectLabel",
+            defaultMessage: "Choose a tab",
+            description: "Tab refers to a tab UI element",
+        });
+        this.debouncedSetLayout = debounce(() => {
+            if (!this.listWidth) {
+                this.setListWidth();
+            }
+            forceUpdate(this.el);
+        }, 10);
+        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
+        }
+        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();
+        };
+        const resizeObserver = new ResizeObserver(() => this.debouncedSetLayout());
+        resizeObserver.observe(this.el);
+    }
+    componentDidLoad() {
+        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]);
+            }
+        }
+        else {
+            // Otherwise, set attributes on each tab item that loads and its associated panel
+            this.setAttributesOnPanel(panel, tab);
+            this.setAttributesOnTab(tab, panel);
+        }
+    }
+    setAttributesOnTab(tab, panel) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            link.setAttribute("href", `#${panel.id}`);
+        }
+    }
+    removeAttributesOnTab(tab) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            link.removeAttribute("href");
+        }
+    }
+    setAttributesOnPanel(panel, tab) {
+        const link = this.getLinkEl(tab);
+        if (link) {
+            panel.setAttribute("aria-labelledby", link.id);
+            panel.setAttribute("tab-id", tab.tabId);
+        }
+    }
+    handleKeydown(ev) {
+        const key = ev.detail.key;
+        const index = this.tabItems.indexOf(ev.detail.tabItem);
+        if (key === "ArrowLeft" || key === "ArrowRight") {
+            this.handleLeftRightArrow(index, key);
+        }
+    }
+    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();
+    }
+    renderMenuOrTabs() {
+        if (this.menuLayout) {
+            this.hideItems();
+            return (h("wm-select", { label: this.selectLabel, "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)));
+        }
+    }
+    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, { key: '457d95719d7ab99677336d44c5bff02f5780a6af', 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
+            }];
+    }
+}