@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

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

@@ -0,0 +1,357 @@
+import { h, Host } from "@stencil/core";
+import { debounce, intl } from "../../../global/functions";
+export class TabList {
+    constructor() {
+        this.debouncedUpdateContainerState = debounce(() => {
+            this.updateContainerFade();
+            this.updateArrowVisibility();
+        }, 16);
+        this.customBackground = undefined;
+        this.selectedTab = undefined;
+        this.announcement = "";
+        this.containerFadeLeft = false;
+        this.containerFadeRight = false;
+        this.scrollArrowsVisible = false;
+    }
+    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));
+    }
+    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));
+        }
+        this.handleTabFocused(this.selectedTabItem);
+    }
+    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({ preventScroll: true });
+        };
+    }
+    componentDidLoad() {
+        const selectedTab = this.selectedTab || this.tabItems[0].tabId;
+        this.setSelected(selectedTab);
+        this.updateArrowVisibility();
+        this.tabContainerEl.addEventListener("scroll", this.debouncedUpdateContainerState);
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdateContainerState());
+        resizeObserver.observe(this.el);
+        requestAnimationFrame(() => {
+            // Wait for layout to complete before measuring and scrolling initial tab into view
+            this.handleTabFocused(this.selectedTabItem);
+        });
+    }
+    tabItemLoaded(ev) {
+        this.setAriaOnPanelAndTab(ev.target);
+    }
+    wmTabFocused(ev) {
+        this.handleTabFocused(ev.detail.tabItem);
+    }
+    setAriaOnPanelAndTab(tab) {
+        const panel = this.panels.find((p) => p.tabId === 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;
+        let index = this.tabItems.indexOf(ev.detail.tabItem);
+        // focusing panel on down arrow
+        if (key === "ArrowDown") {
+            const activePanel = this.panels.filter((p) => p.active)[0];
+            activePanel && activePanel.focus();
+        }
+        else if (key === "ArrowLeft" || key === "ArrowRight") {
+            // focusing prev/next tab item on right/left arrow
+            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({ preventScroll: true });
+        }
+    }
+    handleTabFocused(tabItem, alignment = "auto") {
+        // Calculate and apply scroll position
+        const targetScrollLeft = this.calculateScrollPositionForTab(tabItem, alignment);
+        this.tabContainerEl.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
+    }
+    calculateScrollPositionForTab(tabItem, alignment = "auto") {
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerScrollLeft = this.tabContainerEl.scrollLeft;
+        const tabRect = tabItem.getBoundingClientRect();
+        const tabLeft = containerScrollLeft + (tabRect.left - containerRect.left);
+        const tabRight = tabLeft + tabRect.width;
+        // Explicit alignment
+        if (alignment === "left") {
+            return tabLeft; // Snap to left edge
+        }
+        if (alignment === "right") {
+            return Math.max(0, tabRight - containerRect.width); // Snap to right edge
+        }
+        // Auto alignment
+        const firstTab = this.tabItems[0];
+        const lastTab = this.tabItems[this.tabItems.length - 1];
+        if (tabItem === firstTab) {
+            return 0;
+        }
+        if (tabItem === lastTab) {
+            return Math.max(0, this.tabContainerEl.scrollWidth - containerRect.width);
+        }
+        if (tabLeft < containerScrollLeft) {
+            return tabLeft; // Left edge cut off, align left
+        }
+        if (tabRight > containerScrollLeft + containerRect.width) {
+            return tabRight - containerRect.width; // Right edge cut off, align right
+        }
+        return containerScrollLeft; // Fully visible, no scroll needed
+    }
+    updateContainerFade() {
+        const tolerance = 1; // 1px tolerance for floating-point precision
+        // Check if there's content scrolled out of view on each side
+        let shouldFadeLeft = this.tabContainerEl.scrollLeft > tolerance;
+        let shouldFadeRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth < this.tabContainerEl.scrollWidth - tolerance;
+        const focusedTab = this.tabItems.find((tab) => tab.matches(":focus-within"));
+        if (focusedTab) {
+            const containerRect = this.tabContainerEl.getBoundingClientRect();
+            const tabRect = focusedTab.getBoundingClientRect();
+            const isAtOrOverlappingLeft = tabRect.left <= containerRect.left + tolerance;
+            const isAtOrOverlappingRight = tabRect.right >= containerRect.right - tolerance;
+            if (isAtOrOverlappingLeft) {
+                shouldFadeLeft = false; // Don't fade left if focused tab is at/beyond left edge
+            }
+            if (isAtOrOverlappingRight) {
+                shouldFadeRight = false; // Don't fade right if focused tab is at/beyond right edge
+            }
+        }
+        this.containerFadeLeft = shouldFadeLeft;
+        this.containerFadeRight = shouldFadeRight;
+    }
+    updateArrowVisibility() {
+        const leftArrowEl = this.el.shadowRoot.querySelector(".left-arrow");
+        const rightArrowEl = this.el.shadowRoot.querySelector(".right-arrow");
+        const isScrollable = this.tabContainerEl.scrollWidth > this.tabContainerEl.clientWidth;
+        this.scrollArrowsVisible = isScrollable;
+        requestAnimationFrame(() => {
+            // Let arrows render before checking if they should be disabled
+            if (this.scrollArrowsVisible) {
+                const tolerance = 1; // 1px tolerance for floating-point precision
+                const canScrollLeft = this.tabContainerEl.scrollLeft > tolerance;
+                const canScrollRight = this.tabContainerEl.scrollLeft + this.tabContainerEl.clientWidth <
+                    this.tabContainerEl.scrollWidth - tolerance;
+                leftArrowEl.classList.toggle("disabled", !canScrollLeft);
+                rightArrowEl.classList.toggle("disabled", !canScrollRight);
+            }
+        });
+    }
+    handleLeftArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            // If the arrow is disabled, take no action and announce reason
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollLeft",
+                defaultMessage: "No more tabs to the left",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the left
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerLeft = containerRect.left;
+        let tabToFocus = null;
+        const reversedTabItems = this.tabItems.reverse();
+        reversedTabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.left < containerLeft - 1) {
+                    tabToFocus = tab;
+                }
+            }
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "right"); // Snap to right edge for page-scroll behavior
+        }
+    }
+    handleRightArrowClick(ev) {
+        const buttonEl = ev.target;
+        if (buttonEl.classList.contains("disabled")) {
+            this.announce(intl.formatMessage({
+                id: "tabs.cannotScrollRight",
+                defaultMessage: "No more tabs to the right",
+                description: "Announcement for button scrolling tab group.",
+            }));
+            return;
+        }
+        // Find the first tab that's partially or completely obscured on the right
+        const containerRect = this.tabContainerEl.getBoundingClientRect();
+        const containerRight = containerRect.right;
+        let tabToFocus = null;
+        this.tabItems.forEach((tab) => {
+            if (!tabToFocus) {
+                const tabRect = tab.getBoundingClientRect();
+                if (tabRect.right > containerRight + 1) {
+                    tabToFocus = tab;
+                }
+            }
+        });
+        if (tabToFocus) {
+            this.handleTabFocused(tabToFocus, "left"); // Snap to left edge for page-scroll behavior
+        }
+    }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
+    render() {
+        return (h(Host, { key: 'b9ad28e5f95356c3563be850e2c138c9ef15785f' }, h("div", { key: 'cefebd37c1de1c70a6a8b458398ebde182800658', class: "component-wrapper" }, h("wm-button", { key: 'ba39a280147b31c044c587d4cc1e1459a6566ca8', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+                id: "tabs.showPreviousTabs",
+                defaultMessage: "Show previous tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '2718d4671d8f901415646d5d89476a5b0a2646d0', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '81a1dbdbb0c81c942c4e404e92c1dcf573a30067' })), h("wm-button", { key: '4f928cc980a030abf23fba8fa061bcf034350f1a', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+                id: "tabs.showNextTabs",
+                defaultMessage: "Show next tabs",
+                description: "Tooltip for button scrolling tab group.",
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '374a648cc8e379ef70ac7d037ee17f2bae7dd685', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+    }
+    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
+            },
+            "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 states() {
+        return {
+            "announcement": {},
+            "containerFadeLeft": {},
+            "containerFadeRight": {},
+            "scrollArrowsVisible": {}
+        };
+    }
+    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": "wmIntTabFocused",
+                "method": "wmTabFocused",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydownOnTabItem",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}