@watermarkinsights/ripple 5.13.0 → 5.13.1-alpha.0

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

@@ -0,0 +1,356 @@
+import { h } from "@stencil/core";
+import { generateId } from "../../global/functions";
+export class Modal {
+    constructor() {
+        this.open = false;
+        this.elementToFocus = ""; // primary and secondary point to the corresponding buttons, otherwise focus based on element id
+        this.modalType = "modal";
+    }
+    get closeButtonEl() {
+        return this.el.querySelector(`#wm-modal-close-${this.uid}`);
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
+        }
+        else if (this.elementToFocus) {
+            customElementToFocus = this.el.querySelector("#" + this.elementToFocus);
+            !customElementToFocus &&
+                console.warn(`Ripple Component Library: The modal 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 modal opens.`);
+        }
+        return customElementToFocus;
+    }
+    get hasBrowserPopoverSupport() {
+        // for browsers without popover support, render an additional tooltip in the top-layer so that it can be displayed above the dialog element
+        const tooltipEl = document.getElementById("wm-tooltip");
+        //@ts-ignore
+        return tooltipEl ? !!tooltipEl.showPopover : false;
+    }
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
+    }
+    handleDialogClose() {
+        if (this.open) {
+            // if this.open = false, dialog close was prompted by user. Otherwise, dialog close was prompted by dialog element itself
+            // if dialog element was closed by built-in functionality (escape key), make sure closeTriggered event is emitted to keep app state in sync
+            this.wmModalCloseTriggered.emit();
+        }
+        this.open = false;
+    }
+    showModal() {
+        this.returnFocusEl = document.activeElement;
+        this.setAriaDescribedbyOnModal();
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        this.dialogEl.showModal();
+        if (this.focusOnOpenEl) {
+            this.focusOnOpenEl.focus();
+        }
+    }
+    hideModal() {
+        document.body.style.overflow = "visible";
+        this.dialogEl.close();
+        // if focus is lost, bring focus to the element which was in focus when modal opened
+        setTimeout(() => {
+            if (this.returnFocusEl && document.activeElement === document.body) {
+                if (this.returnFocusEl.tagName === "WM-MENUITEM") {
+                    this.returnFocusEl = this.returnFocusEl.parentElement;
+                }
+                this.returnFocusEl.focus();
+            }
+        }, 20);
+    }
+    componentWillLoad() {
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (!this.el.id) {
+                console.error("For accessibility purposes you need to set the modal content wrapper's id to 'content-[id of wm-modal]'.");
+            }
+        }
+        this.el.focus = () => {
+            if (this.focusOnOpenEl) {
+                this.focusOnOpenEl.focus();
+            }
+            else {
+                this.closeButtonEl.focus();
+            }
+        };
+        this.uid = this.el.id ? this.el.id : generateId();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
+        }
+        this.dialogEl.addEventListener("close", () => this.handleDialogClose());
+    }
+    async emitCloseEvent() {
+        this.wmModalCloseTriggered.emit();
+    }
+    async emitPrimaryEvent() {
+        this.wmModalPrimaryTriggered.emit();
+    }
+    async emitSecondaryEvent() {
+        this.wmModalSecondaryTriggered.emit();
+    }
+    handleKeyDown(ev) {
+        if (ev.key == "Escape") {
+            ev.stopPropagation();
+        }
+    }
+    setAriaDescribedbyOnModal() {
+        const modalBody = document.getElementById(`content-${this.uid}`);
+        if (!modalBody) {
+            console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.");
+        }
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+        }
+    }
+    render() {
+        return (h("dialog", { key: '6e922556c88e5eb0bebc59264dddaaa08c899df6', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '27b1e5ab577d061836a3e3e2d6b7fb01fedc96db', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+                const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
+                // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
+                focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: '113b03cdb98de4c9f29b515fa7c6b91fb443ada8', class: "wm-tooltip" }), h("slot", { key: 'a82dbd2e8b1018a2f06db0f30995e6f0ec45d359' }), h("div", { key: '272478190ff26a0e7777ea64ab20f26f1fb260e1', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+                this.focusFirstElement.emit();
+            } })));
+    }
+    static get is() { return "wm-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "elementToFocus": {
+                "type": "string",
+                "attribute": "element-to-focus",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "modalType": {
+                "type": "string",
+                "attribute": "modal-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"modal\" | \"dialog\"",
+                    "resolved": "\"dialog\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"modal\""
+            },
+            "uid": {
+                "type": "string",
+                "attribute": "uid",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "returnFocusEl": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "focusLastElement",
+                "name": "focusLastElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "focusFirstElement",
+                "name": "focusFirstElement",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalCloseTriggered",
+                "name": "wmModalCloseTriggered",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalPrimaryTriggered",
+                "name": "wmModalPrimaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmModalSecondaryTriggered",
+                "name": "wmModalSecondaryTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "emitCloseEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitPrimaryEvent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "emitSecondaryEvent": {
+                "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": "toggleModal"
+            }];
+    }
+}