@watermarkinsights/ripple 4.2.0-0 → 4.2.0

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

@@ -1,36 +1,36 @@
-import { r as registerInstance, h, g as getElement } from './index-f164fbca.js';
+import { r as registerInstance, h, g as getElement } from './index-7e11ea42.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;
+  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();
     }
-    componentWillLoad() {
-        const parentModal = this.el.closest("wm-modal");
-        this.uid = parentModal.uid;
+  }
+  emitParentSecondaryEvent() {
+    const parentModal = this.el.closest("wm-modal");
+    if (parentModal) {
+      parentModal.emitSecondaryEvent();
     }
-    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); }
+  }
+  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-f164fbca.js';
-import { g as globalMessages } from './intl-05c9e0c9.js';
-import './functions-d0e70094.js';
+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';
 
 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-f164fbca.js';
-import { g as generateId } from './functions-d0e70094.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7e11ea42.js';
+import { g as generateId } from './functions-5afd09f4.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{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 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 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;
+  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}`);
     }
-    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;
+    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 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;
+    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();
     }
-    toggleModal() {
-        this.open ? this.showModal() : this.hideModal();
+  }
+  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.");
+      }
     }
-    handleDialogClose() {
-        this.open = false;
+    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();
     }
-    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();
-        }
+    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.");
     }
-    hideModal() {
-        document.body.style.overflow = "visible";
-        this.dialogEl.close();
+    else {
+      this.el.setAttribute("aria-describedby", `wm-modal-heading-text-${this.uid} content-${this.uid}`);
     }
-    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"]
-    }; }
+  }
+  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;