@watermarkinsights/ripple 0.0.1 → 0.1.0-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 = "";
+        this.modalType = "modal";
+        this.uid = undefined;
+        this.returnFocusEl = undefined;
+    }
+    get closeButtonEl() {
+        return this.el.querySelector(`#wm-modal-close-${this.uid}`);
+    }
+    get focusOnOpenEl() {
+        let customElementToFocus = null;
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (this.modalType === "dialog" && window.innerWidth < 768) {
+                // When a dialog is opened at this smaller width,
+                // focusing the footer buttons can cause the dialog to scroll and disorient the user
+                customElementToFocus = this.closeButtonEl;
+            }
+            else {
+                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 a fallback tooltip inside the dialog so it appears above it
+        return typeof HTMLElement.prototype.showPopover === 'function';
+    }
+    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();
+        this.initialBodyOverflow = document.body.style.overflow;
+        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 = this.initialBodyOverflow; // TypeScript doesn't like the idea of assigning undefined but that's what we want
+        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: '971cf1e1e2425c11876eb75503cf150ca10bdb40', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '8fe66f81867b79b593204fe0b775cde0a6fffe1a', 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: 'c69f5898139dec832b9cb49ae6c68f972de3dcd6', class: "wm-tooltip" }), h("slot", { key: '56eb71ba84fa3b7069a0a1b4a7affeef82d29402' }), h("div", { key: '4469cdcbc90b969102e4007e4fab2f2b3232ac4f', 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",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "elementToFocus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "element-to-focus",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "modalType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"modal\" | \"dialog\"",
+                    "resolved": "\"dialog\" | \"modal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "modal-type",
+                "reflect": true,
+                "defaultValue": "\"modal\""
+            },
+            "uid": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "uid",
+                "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"
+            }];
+    }
+}