@watermarkinsights/ripple 5.16.0-alpha.1 → 5.16.0-alpha.2

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

@@ -1,448 +0,0 @@
-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;
-        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 = "visible";
-            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", { 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: '0eeee311c251933d5f3d7aa2ab65558011668c3d' }, h("dialog", { key: '11876657f5bfd7e1bda8937e886198320731b5b2', ref: (el) => (this.dialogEl = el), class: "flyout", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '7535397d18ca997953cf6d5be82c68500d733c84', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '96ee05df3eaf54bc78ff2f002024b42c3c11d50b', class: "flyout-content" }, h("slot", { key: '2883623f6062eade04c5c9dedb6e5a6a1e8ffd41' })), this.renderFooter(), h("div", { key: 'b3188ebad66c7228ad6611f182263bdfa9deff8f', 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"
-            }];
-    }
-}