@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/esm/wm-modal-footer.entry.js

@@ -1,36 +1,36 @@
-import { r as registerInstance, h, g as getElement } from './index-7e11ea42.js';
+import { r as registerInstance, h, g as getElement } from './index-f164fbca.js';
 
 const wmModalFooterCss = "wm-modal-footer{display:block;-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px}wm-modal-footer .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
 
 const ModalFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.secondaryText = "";
-    this.primaryText = "";
-    this.infoText = "";
-    this.primaryActionDisabled = false;
-    this.deleteStyle = false;
-  }
-  componentWillLoad() {
-    const parentModal = this.el.closest("wm-modal");
-    this.uid = parentModal.uid;
-  }
-  emitParentPrimaryEvent() {
-    const parentModal = this.el.closest("wm-modal");
-    if (parentModal) {
-      parentModal.emitPrimaryEvent();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
     }
-  }
-  emitParentSecondaryEvent() {
-    const parentModal = this.el.closest("wm-modal");
-    if (parentModal) {
-      parentModal.emitSecondaryEvent();
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
     }
-  }
-  render() {
-    return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}` }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}` }, this.primaryText))));
-  }
-  get el() { return getElement(this); }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitPrimaryEvent();
+        }
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitSecondaryEvent();
+        }
+    }
+    render() {
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}` }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}` }, this.primaryText))));
+    }
+    get el() { return getElement(this); }
 };
 ModalFooter.style = wmModalFooterCss;
 

package/dist/esm/wm-modal-header.entry.js

@@ -1,28 +1,28 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7e11ea42.js';
-import { g as globalMessages } from './intl-e2da750a.js';
-import './functions-5afd09f4.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f164fbca.js';
+import { g as globalMessages } from './intl-05c9e0c9.js';
+import './functions-d0e70094.js';
 
 const wmModalHeaderCss = "wm-modal-header{display:block;-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";
 
 const ModalHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.heading = "";
-    this.subheading = "";
-  }
-  componentWillLoad() {
-    const parentModal = this.el.closest("wm-modal");
-    this.uid = parentModal.uid;
-  }
-  emitParentCloseEvent() {
-    const parentModal = this.el.closest("wm-modal");
-    //@ts-ignore
-    parentModal.emitCloseEvent();
-  }
-  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: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, onClick: () => this.emitParentCloseEvent() }))));
-  }
-  get el() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    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: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, onClick: () => this.emitParentCloseEvent() }))));
+    }
+    get el() { return getElement(this); }
 };
 ModalHeader.style = wmModalHeaderCss;
 

package/dist/esm/wm-modal.entry.js

@@ -1,105 +1,105 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7e11ea42.js';
-import { g as generateId } from './functions-5afd09f4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f164fbca.js';
+import { g as generateId } from './functions-d0e70094.js';
 
-const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;overflow:hidden;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-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);-moz-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);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 dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
+const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;overflow:hidden;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::-ms-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-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);-moz-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);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 dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
 
 const Modal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.focusLastElement = createEvent(this, "focusLastElement", 3);
-    this.focusFirstElement = createEvent(this, "focusFirstElement", 3);
-    this.wmModalCloseTriggered = createEvent(this, "wmModalCloseTriggered", 3);
-    this.wmModalPrimaryTriggered = createEvent(this, "wmModalPrimaryTriggered", 7);
-    this.wmModalSecondaryTriggered = createEvent(this, "wmModalSecondaryTriggered", 7);
-    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(hostRef) {
+        registerInstance(this, hostRef);
+        this.focusLastElement = createEvent(this, "focusLastElement", 3);
+        this.focusFirstElement = createEvent(this, "focusFirstElement", 3);
+        this.wmModalCloseTriggered = createEvent(this, "wmModalCloseTriggered", 3);
+        this.wmModalPrimaryTriggered = createEvent(this, "wmModalPrimaryTriggered", 7);
+        this.wmModalSecondaryTriggered = createEvent(this, "wmModalSecondaryTriggered", 7);
+        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)));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["toggleModal"]
-  }; }
+    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.");
+            }
+        }
+        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();
+        }
+        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.");
+        }
+        else {
+            this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
+        }
+    }
+    render() {
+        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["toggleModal"]
+    }; }
 };
 Modal.style = wmModalCss;