@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,313 +1,316 @@
 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;
-  }
-  get focusOnOpenEl() {
-    let customElementToFocus = null;
-    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
-      customElementToFocus = this.el.querySelector(`#wm-${this.elementToFocus}-${this.uid}`);
+    constructor() {
+        this.open = false;
+        this.elementToFocus = "";
+        this.modalType = "modal";
+        this.uid = undefined;
     }
-    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'. It will fall back to the default and focus the close button when the modal opens.");
+    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'. It will fall back to the default and focus the close button when the modal opens.");
+        }
+        return customElementToFocus;
     }
-    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() {
-    this.open = false;
-  }
-  showModal() {
-    this.setAriaDescribedbyOnModal();
-    document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
-    this.dialogEl.showModal();
-    if (this.focusOnOpenEl) {
-      this.focusOnOpenEl.focus();
+    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;
     }
-  }
-  hideModal() {
-    document.body.style.overflow = "visible";
-    this.dialogEl.close();
-  }
-  componentWillLoad() {
-    if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
-      if (!this.el.id) {
-        console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
-      }
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
     }
-    this.el.focus = () => {
-      if (this.focusOnOpenEl) {
-        this.focusOnOpenEl.focus();
-      }
-      else {
-        const closeButton = this.el.querySelector(`#wm-modal-close-${this.uid}`);
-        closeButton.focus();
-      }
-    };
-    this.uid = this.el.id ? this.el.id : generateId();
-  }
-  componentDidLoad() {
-    if (this.open) {
-      this.showModal();
+    handleDialogClose() {
+        this.open = false;
     }
-    this.dialogEl.addEventListener("close", () => this.handleDialogClose());
-  }
-  async emitCloseEvent() {
-    this.wmModalCloseTriggered.emit();
-  }
-  async emitPrimaryEvent() {
-    this.wmModalPrimaryTriggered.emit();
-  }
-  async emitSecondaryEvent() {
-    this.wmModalSecondaryTriggered.emit();
-  }
-  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.");
+    showModal() {
+        this.setAriaDescribedbyOnModal();
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        this.dialogEl.showModal();
+        if (this.focusOnOpenEl) {
+            this.focusOnOpenEl.focus();
+        }
     }
-    else {
-      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+    hideModal() {
+        document.body.style.overflow = "visible";
+        this.dialogEl.close();
     }
-  }
-  render() {
-    return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null)));
-  }
-  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 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": {}
+    componentWillLoad() {
+        if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
+            if (!this.el.id) {
+                console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
+            }
         }
-      }, {
-        "method": "wmModalPrimaryTriggered",
-        "name": "wmModalPrimaryTriggered",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        this.el.focus = () => {
+            if (this.focusOnOpenEl) {
+                this.focusOnOpenEl.focus();
+            }
+            else {
+                const closeButton = this.el.querySelector(`#wm-modal-close-${this.uid}`);
+                closeButton.focus();
+            }
+        };
+        this.uid = this.el.id ? this.el.id : generateId();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
         }
-      }, {
-        "method": "wmModalSecondaryTriggered",
-        "name": "wmModalSecondaryTriggered",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        this.dialogEl.addEventListener("close", () => this.handleDialogClose());
+    }
+    async emitCloseEvent() {
+        this.wmModalCloseTriggered.emit();
+    }
+    async emitPrimaryEvent() {
+        this.wmModalPrimaryTriggered.emit();
+    }
+    async emitSecondaryEvent() {
+        this.wmModalSecondaryTriggered.emit();
+    }
+    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.");
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "emitCloseEvent": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
         }
-      },
-      "emitPrimaryEvent": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    render() {
+        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null)));
+    }
+    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
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "emitSecondaryEvent": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    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": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "toggleModal"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleModal"
+            }];
+    }
 }

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

@@ -4,27 +4,27 @@ import { Modal } from "./wm-modal";
 import { ModalHeader } from "./wm-modal-header";
 import { ModalFooter } from "./wm-modal-footer";
 describe("wm-modal", () => {
-  it("builds", async () => {
-    const comp = await newSpecPage({
-      components: [Modal, ModalHeader, ModalFooter],
-      html: "<wm-modal open='false'><wm-modal-header heading='heading'></wm-modal-header><div>content</div><wm-modal-footer primary-text='primary-text'></wm-modal-footer></wm-modal>",
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Modal, ModalHeader, ModalFooter],
+            html: "<wm-modal open='false'><wm-modal-header heading='heading'></wm-modal-header><div>content</div><wm-modal-footer primary-text='primary-text'></wm-modal-footer></wm-modal>",
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("watching open-- toggles the modal", () => {
+        //toggleModal
+        const component = new Modal();
+        const mockShowModal = (component.showModal = jest.fn());
+        const mockHideModal = (component.hideModal = jest.fn());
+        component.open = true;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(1);
+        expect(mockHideModal).toHaveBeenCalledTimes(0);
+        jest.resetAllMocks();
+        component.open = false;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(0);
+        expect(mockHideModal).toHaveBeenCalledTimes(1);
+        jest.resetAllMocks();
     });
-    expect(comp.root).toMatchSnapshot();
-  });
-  it("watching open-- toggles the modal", () => {
-    //toggleModal
-    const component = new Modal();
-    const mockShowModal = (component.showModal = jest.fn());
-    const mockHideModal = (component.hideModal = jest.fn());
-    component.open = true;
-    component.toggleModal();
-    expect(mockShowModal).toHaveBeenCalledTimes(1);
-    expect(mockHideModal).toHaveBeenCalledTimes(0);
-    jest.resetAllMocks();
-    component.open = false;
-    component.toggleModal();
-    expect(mockShowModal).toHaveBeenCalledTimes(0);
-    expect(mockHideModal).toHaveBeenCalledTimes(1);
-    jest.resetAllMocks();
-  });
 });

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.css

@@ -72,7 +72,6 @@ button:hover {
     width: 3.75rem;
     height: 3.75rem;
   }
-
   button {
     display: initial;
   }