npm - @watermarkinsights/ripple - Versions diffs - 4.3.0 → 4.4.0-0 - Mend

@watermarkinsights/ripple 4.3.0 → 4.4.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (371) hide show

package/dist/cjs/wm-modal-footer.cjs.entry.js CHANGED Viewed

@@ -2,39 +2,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-fae02cd7.js');
+const index = require('./index-f8ef86de.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) {
-    index.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) {
+        index.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 (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}` }, this.secondaryText)), index.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 index.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 (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}` }, this.secondaryText)), index.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 index.getElement(this); }
 };
 ModalFooter.style = wmModalFooterCss;

package/dist/cjs/wm-modal-header.cjs.entry.js CHANGED Viewed

@@ -2,31 +2,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-fae02cd7.js');
-const intl = require('./intl-fa3bb4ae.js');
-require('./functions-91da05e9.js');
+const index = require('./index-f8ef86de.js');
+const intl = require('./intl-3fafc6d1.js');
+require('./functions-4208c444.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) {
-    index.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 (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, onClick: () => this.emitParentCloseEvent() }))));
-  }
-  get el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.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 (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, onClick: () => this.emitParentCloseEvent() }))));
+    }
+    get el() { return index.getElement(this); }
 };
 ModalHeader.style = wmModalHeaderCss;

package/dist/cjs/wm-modal.cjs.entry.js CHANGED Viewed

@@ -2,108 +2,108 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.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) {
-    index.registerInstance(this, hostRef);
-    this.focusLastElement = index.createEvent(this, "focusLastElement", 3);
-    this.focusFirstElement = index.createEvent(this, "focusFirstElement", 3);
-    this.wmModalCloseTriggered = index.createEvent(this, "wmModalCloseTriggered", 3);
-    this.wmModalPrimaryTriggered = index.createEvent(this, "wmModalPrimaryTriggered", 7);
-    this.wmModalSecondaryTriggered = index.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) {
+        index.registerInstance(this, hostRef);
+        this.focusLastElement = index.createEvent(this, "focusLastElement", 3);
+        this.focusFirstElement = index.createEvent(this, "focusFirstElement", 3);
+        this.wmModalCloseTriggered = index.createEvent(this, "wmModalCloseTriggered", 3);
+        this.wmModalPrimaryTriggered = index.createEvent(this, "wmModalPrimaryTriggered", 7);
+        this.wmModalSecondaryTriggered = index.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 : functions.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 (index.h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && index.h("div", { class: "wm-tooltip" }), index.h("slot", null)));
-  }
-  get el() { return index.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 : functions.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 (index.h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el) }, !this.hasBrowserPopoverSupport && index.h("div", { class: "wm-tooltip" }), index.h("slot", null)));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["toggleModal"]
+    }; }
 };
 Modal.style = wmModalCss;