@watermarkinsights/ripple 5.7.0-1 → 5.7.0-10

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.css

@@ -0,0 +1,55 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss-header {
+  border-radius: 5px 5px 0 0px;
+  margin-bottom: -1px;
+}
+wm-modal-pss-header .wm-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+wm-modal-pss-header .wm-wrapper .title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--wmcolor-modal-heading);
+  line-height: normal;
+}
+wm-modal-pss-header .wm-wrapper .title .subtitle {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: normal;
+}
+wm-modal-pss-header .wm-wrapper .title:focus {
+  outline: none;
+}

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

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class ModalHeader {
+    constructor() {
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        this.uid = this.el.parentElement.uid;
+        // Trap focus when user tabs past last element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        this.el.parentElement.addEventListener("focusFirstElement", () => {
+            this.closeButtonEl.focus();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.parentElement;
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    // @Listen("click")
+    // directFocusOnClick() {
+    //   this.headingElement.tabIndex = 0;
+    //   this.headingElement.focus();
+    // }
+    render() {
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    static get is() { return "wm-modal-pss-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subheading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/wm-modal-pss/wm-modal-pss.css

@@ -0,0 +1,134 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+wm-modal-pss {
+  --wmcolor-modal-background: var(--wmcolor-background);
+  --wmcolor-modal-border: var(--wmcolor-border);
+  --wmcolor-modal-heading: var(--wmcolor-text);
+  --wmcolor-modal-overlay: var(--wmcolor-overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2001;
+  width: 80vw;
+  max-width: 750px;
+  max-height: 80vh;
+  box-shadow: 0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
+}
+wm-modal-pss * {
+  box-sizing: border-box;
+}
+wm-modal-pss > * {
+  width: 80vw;
+  max-width: 750px;
+  background: var(--wmcolor-modal-background);
+}
+wm-modal-pss > *:focus {
+  outline: none;
+}
+wm-modal-pss wm-modal-pss-header,
+wm-modal-pss wm-modal-pss-footer {
+  padding: 20px 30px;
+}
+wm-modal-pss wm-modal-pss-header {
+  z-index: 2003;
+}
+wm-modal-pss wm-modal-pss-footer {
+  z-index: 2003;
+}
+wm-modal-pss > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  max-height: calc(80vh - 166px);
+  z-index: 2002;
+}
+wm-modal-pss.wm-modal wm-modal-pss-header {
+  border-bottom: 1px solid var(--wmcolor-modal-border);
+}
+wm-modal-pss.wm-modal wm-modal-pss-footer {
+  border-top: 1px solid var(--wmcolor-modal-border);
+}
+@media only screen and (max-width: 768px) {
+  wm-modal-pss.wm-modal {
+    height: 100%;
+    max-height: none;
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > * {
+    max-width: none;
+    width: 100vw;
+  }
+  wm-modal-pss.wm-modal > *:not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+    max-height: none;
+    height: calc(100vh - 166px);
+  }
+}
+wm-modal-pss.wm-dialog > :not(wm-modal-pss-header):not(wm-modal-pss-footer) {
+  padding: 0 30px 20px 30px;
+  font-size: 0.875rem;
+  border: none;
+}
+wm-modal-pss .overlay {
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  position: fixed !important;
+  top: -1;
+  bottom: 1;
+  left: -1;
+  right: 1;
+  transform: translate(0%, 0%);
+  background-color: var(--wmcolor-modal-overlay);
+  transition: opacity 0.5s ease-out;
+  z-index: 2000;
+}
+wm-modal-pss.hide {
+  visibility: hidden;
+}
+wm-modal-pss .sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+  top: 0;
+  left: 0;
+}

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

@@ -0,0 +1,361 @@
+import { h, Host } from "@stencil/core";
+export class Modal {
+    constructor() {
+        this.bodyFocusListener = () => this.redirectFocusFromBody();
+        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}`);
+        }
+        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.");
+        }
+        const closeButtonEl = this.el.querySelector(`#wm-modal-close-${this.uid}`);
+        return customElementToFocus ? customElementToFocus : closeButtonEl;
+    }
+    //App can open modal by toggling the prop
+    toggleModal() {
+        this.open ? this.showModal() : this.hideModal();
+    }
+    handleClick(ev) {
+        this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
+    }
+    closeModalOnEscape(ev) {
+        if (ev.key === "Escape") {
+            // stops propagation prevents nested modal from closing all at once
+            ev.stopPropagation();
+            this.wmModalCloseTriggered.emit();
+            this.open = false;
+        }
+    }
+    showModal() {
+        this.setAriaDescribedbyOnModal();
+        this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes
+        document.body.style.overflow = "hidden"; //Keeps the page below the modal from scrolling
+        //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios
+        document.body.tabIndex = 0;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        document.body.addEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => {
+            // nested requestAnimationFrames allow all elements to become visible on page before assigning focus
+            window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal
+        });
+    }
+    //Close the modal and focus the triggering element when the modal buttons emit their events
+    hideModal() {
+        document.body.style.overflow = "visible";
+        document.body.tabIndex = -1;
+        document.body.removeEventListener("focus", this.bodyFocusListener, true);
+        window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus
+    }
+    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-pss]'.");
+            }
+        }
+        this.el.focus = () => {
+            this.focusOnOpenEl.focus();
+        };
+        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
+        this.uid = this.el.id ? this.el.id : generatedId;
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.showModal();
+        }
+    }
+    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.");
+        }
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+        }
+    }
+    setElToFocusOnClose() {
+        const elToFocus = document.activeElement;
+        if (elToFocus.tagName === "WM-MENUITEM") {
+            this.focusOnCloseEl = elToFocus.parentElement;
+        }
+        else {
+            let el;
+            while (elToFocus && elToFocus.shadowRoot) {
+                el = elToFocus.shadowRoot.activeElement;
+            }
+            if (el) {
+                this.focusOnCloseEl = el;
+            }
+        }
+    }
+    redirectFocusFromBody() {
+        if (document.activeElement.tagName === "BODY") {
+            this.focusOnOpenEl.focus();
+        }
+    }
+    render() {
+        return (h(Host, { class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+                this.focusLastElement.emit();
+            } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
+                this.focusFirstElement.emit();
+            } })));
+    }
+    static get is() { return "wm-modal-pss"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-modal-pss.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-modal-pss.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": {}
+                }
+            }, {
+                "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"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "closeModalOnEscape",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/esm/{global-dcf80bdb.js → global-687694e4.js}

@@ -1,4 +1,4 @@
-const version = "5.7.0-1";
+const version = "5.7.0-10";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/index-558b5a82.js

@@ -2424,10 +2424,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './wm-input.entry.js').then(processMod, consoleError);
-                case 'wm-modal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './wm-modal.entry.js').then(processMod, consoleError);
                 case 'wm-navigator':
                     return import(
                       /* webpackMode: "lazy" */
@@ -2480,6 +2476,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './wm-option_2.entry.js').then(processMod, consoleError);
+                case 'wm-modal_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './wm-modal_3.entry.js').then(processMod, consoleError);
+                case 'wm-modal-pss_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './wm-modal-pss_3.entry.js').then(processMod, consoleError);
                 case 'wm-navigation_3':
                     return import(
                       /* webpackMode: "lazy" */
@@ -2504,14 +2508,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './wm-line-chart.entry.js').then(processMod, consoleError);
-                case 'wm-modal-footer':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './wm-modal-footer.entry.js').then(processMod, consoleError);
-                case 'wm-modal-header':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './wm-modal-header.entry.js').then(processMod, consoleError);
                 case 'wm-nested-select':
                     return import(
                       /* webpackMode: "lazy" */