@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/collection/components/wm-flyout/wm-flyout.js

@@ -0,0 +1,449 @@
+import { h, Host } from "@stencil/core";
+import { csvToArray, debounce, getLastFocusableDescendant } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Flyout {
+    constructor() {
+        this.debouncedCheckBreadcrumbOverflow = debounce(this.checkBreadcrumbOverflow, 30);
+        this.eyebrow = undefined;
+        this.heading = undefined;
+        this.subheading = undefined;
+        this.flyoutWidth = "45rem";
+        this.primaryText = undefined;
+        this.secondaryText = undefined;
+        this.infoText = undefined;
+        this.breadcrumb = undefined;
+        this.elementToFocus = "";
+        this.open = false;
+        this.returnFocusEl = undefined;
+        this.isBreadcrumbsOverflowing = false;
+    }
+    get lastFocusableEl() {
+        if (this.primaryText) {
+            return this.el.shadowRoot.querySelector("#primary-button");
+        }
+        if (this.secondaryText) {
+            return this.el.shadowRoot.querySelector("#secondary-button");
+        }
+        let lastFocusableDescendant = null;
+        if (this.el.firstElementChild) {
+            lastFocusableDescendant = getLastFocusableDescendant(this.el.firstElementChild);
+        }
+        if (lastFocusableDescendant) {
+            return lastFocusableDescendant;
+        }
+        return this.closeButtonEl; // fallback
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            customElementToFocus = this.el.shadowRoot.querySelector(`#${this.elementToFocus}-button`);
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector(`#${this.elementToFocus}`);
+            if (!customElementToFocus) {
+                console.warn(`wm-flyout: The component couldn't find an element matching the id you passed for 'elementToFocus' (${this.elementToFocus}). It will fall back to the default and focus the close button when the flyout opens.`);
+            }
+        }
+        return customElementToFocus || this.closeButtonEl;
+    }
+    componentWillLoad() {
+        if (!this.heading) {
+            console.error("wm-flyout: heading is a required property");
+        }
+        this.el.focus = () => {
+            this.focusOnOpenEl.focus();
+        };
+        this.el.style.setProperty("--flyout-width", this.flyoutWidth);
+    }
+    componentDidLoad() {
+        // Initialize and attach resize observer
+        this.resizeObserver = new ResizeObserver(() => {
+            this.debouncedCheckBreadcrumbOverflow();
+        });
+        this.resizeObserver.observe(this.dialogEl);
+        if (this.open) {
+            this.showFlyout();
+        }
+    }
+    checkBreadcrumbOverflow() {
+        if (this.breadcrumbsMeasureEl && this.breadcrumbsEl && this.open) {
+            this.isBreadcrumbsOverflowing = this.breadcrumbsMeasureEl.offsetWidth > this.breadcrumbsEl.offsetWidth;
+        }
+    }
+    handleOpenChange(newValue) {
+        if (newValue && !this.dialogEl.open) {
+            this.showFlyout();
+        }
+        else if (!newValue && this.dialogEl.open) {
+            this.hideFlyout();
+        }
+    }
+    setFlyoutWidth() {
+        this.el.style.setProperty("--flyout-width", this.flyoutWidth);
+    }
+    async focusHeading() {
+        this.headingEl.focus();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.wmFlyoutCloseTriggered.emit();
+        }
+    }
+    handleEndBookendFocus() {
+        const firstBreadcrumbButton = this.el.shadowRoot.querySelector(".breadcrumb-button");
+        if (firstBreadcrumbButton) {
+            firstBreadcrumbButton.focus();
+        }
+        else {
+            this.closeButtonEl.focus();
+        }
+    }
+    showFlyout() {
+        this.dialogEl.classList.add("slide-in");
+        this.returnFocusEl = document.activeElement;
+        this.initialBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden"; // Prevents background scrolling
+        this.dialogEl.showModal();
+        requestAnimationFrame(() => {
+            this.checkBreadcrumbOverflow();
+            this.focusOnOpenEl.focus();
+        });
+        setTimeout(() => {
+            this.dialogEl.classList.remove("slide-in");
+        }, 300);
+    }
+    hideFlyout() {
+        this.dialogEl.classList.add("slide-out");
+        setTimeout(() => {
+            // Wait for slide out animation to complete before closing
+            this.dialogEl.classList.remove("slide-out");
+            document.body.style.overflow = this.initialBodyOverflow; // TypeScript doesn't like that this can be undefined, but we do want to assign undefined if that's what initialBodyOverFlow is set to.
+            this.dialogEl.close();
+            setTimeout(() => {
+                if (this.returnFocusEl && document.activeElement === document.body) {
+                    if (this.returnFocusEl.tagName === "WM-MENUITEM") {
+                        this.returnFocusEl = this.returnFocusEl.parentElement;
+                    }
+                    this.returnFocusEl.focus();
+                }
+            }, 20);
+        }, 250);
+    }
+    renderBreadcrumbList() {
+        if (this.breadcrumb) {
+            const breadcrumbNames = csvToArray(this.breadcrumb);
+            const shouldTruncate = this.isBreadcrumbsOverflowing && breadcrumbNames.length > 2;
+            const breadcrumbsToRender = shouldTruncate ? breadcrumbNames.slice(-2) : breadcrumbNames;
+            return (h("div", { class: "breadcrumbs" }, h("div", { class: "breadcrumbs-measure", ref: (el) => (this.breadcrumbsMeasureEl = el) }, breadcrumbNames.map((name, idx) => (h("span", { class: "breadcrumb-item" }, h("span", null, name), idx < breadcrumbNames.length - 1 && h("span", { class: "separator" }, ">"))))), h("div", { class: "breadcrumbs-container", ref: (el) => (this.breadcrumbsEl = el) }, shouldTruncate && (h("span", { class: "breadcrumb-item" }, h("span", { class: "ellipsis" }, "..."), h("span", { class: "separator" }, ">"))), breadcrumbsToRender.map((breadcrumbName, idx) => this.renderBreadcrumb(breadcrumbName, shouldTruncate ? idx === 1 : idx === breadcrumbNames.length - 1)))));
+        }
+    }
+    renderBreadcrumb(breadcrumbName, isLast) {
+        return (h("span", { class: "breadcrumb-item" }, isLast ? (h("span", { class: "current" }, breadcrumbName)) : (h("wm-button", { class: "breadcrumb-button", "button-type": "textonly", onClick: () => this.wmFlyoutBreadcrumbClicked.emit({
+                breadcrumb: breadcrumbName,
+                index: csvToArray(this.breadcrumb).indexOf(breadcrumbName),
+            }) }, breadcrumbName)), !isLast && h("span", { class: "separator" }, ">")));
+    }
+    renderHeader() {
+        return (h("div", { class: "flyout-header" }, h("div", { class: "header-left" }, this.renderBreadcrumbList(), this.eyebrow && h("div", { class: "eyebrow" }, this.eyebrow), h("h2", { id: "heading", class: "heading", tabIndex: -1, ref: (el) => (this.headingEl = el) }, this.heading), this.subheading && h("p", { class: "subheading" }, this.subheading)), h("div", { class: "header-right" }, h("wm-button", { ref: (el) => (this.closeButtonEl = el), class: "close-button", "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, onClick: () => this.wmFlyoutCloseTriggered.emit() }))));
+    }
+    renderFooter() {
+        const hasFooter = this.primaryText || this.secondaryText || this.infoText;
+        if (hasFooter) {
+            return (h("div", { class: `flyout-footer ${this.infoText ? "has-info" : ""}` }, this.infoText && h("div", { class: "info-text" }, this.infoText), h("div", { class: "button-group" }, this.secondaryText && (h("wm-button", { id: "secondary-button", "button-type": "secondary", onClick: () => this.wmFlyoutSecondaryTriggered.emit() }, this.secondaryText)), this.primaryText && (h("wm-button", { id: "primary-button", "button-type": "primary", onClick: () => this.wmFlyoutPrimaryTriggered.emit() }, this.primaryText)))));
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c1546402148e441545a292d9ac795adfac725fe3' }, h("dialog", { key: '0ac428de73ee5ddc2ca3d539c247d2d548f51101', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'b38a16a9e97a98ce84b6a09522cca6dce7f8837f', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '270b3b0ed4e59ba61a74202a96b4f75fce4a8c94', class: "flyout-content" }, h("slot", { key: '765d86ef84594c4b0a713d4ef8df3649c3152067' })), this.renderFooter(), h("div", { key: '7c3fb50b72a44852964eac51db31192af176c54c', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+    }
+    static get is() { return "wm-flyout"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-flyout.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-flyout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eyebrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "eyebrow",
+                "reflect": false
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading",
+                "reflect": false
+            },
+            "flyoutWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "flyout-width",
+                "reflect": false,
+                "defaultValue": "\"45rem\""
+            },
+            "primaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-text",
+                "reflect": false
+            },
+            "secondaryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-text",
+                "reflect": false
+            },
+            "infoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "info-text",
+                "reflect": false
+            },
+            "breadcrumb": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "breadcrumb",
+                "reflect": false
+            },
+            "elementToFocus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "element-to-focus",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "returnFocusEl": {},
+            "isBreadcrumbsOverflowing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmFlyoutCloseTriggered",
+                "name": "wmFlyoutCloseTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutPrimaryTriggered",
+                "name": "wmFlyoutPrimaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutSecondaryTriggered",
+                "name": "wmFlyoutSecondaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "wmFlyoutBreadcrumbClicked",
+                "name": "wmFlyoutBreadcrumbClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ breadcrumb: string; index: number }",
+                    "resolved": "{ breadcrumb: string; index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusHeading": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "flyoutWidth",
+                "methodName": "setFlyoutWidth"
+            }];
+    }
+}