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

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

@@ -1,350 +0,0 @@
-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") {
-            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",
-                "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"
-            }];
-    }
-}