@watermarkinsights/ripple 3.27.0 → 3.27.1

package/dist/cjs/wm-snackbar.cjs.entry.js

@@ -3,143 +3,143 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9f0e6656.js');
-const functions = require('./functions-9807717e.js');
-const intl = require('./intl-526c75ec.js');
+const functions = require('./functions-85c3c557.js');
+const intl = require('./intl-1c36fe38.js');
 
 const wmSnackbarCss = ".user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host *,wm-snackbar *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:unset}:host .wm-snackbars,wm-snackbar .wm-snackbars{position:fixed;bottom:0;left:1.25rem;right:1.25rem;padding:0.25rem 0.625rem 1.875rem;z-index:2001;max-width:35.5rem;max-height:17.5rem;-webkit-overflow-scrolling:touch;overflow:auto}:host .wm-snackbars.empty,wm-snackbar .wm-snackbars.empty{-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);padding-top:0;padding-bottom:0}:host .wm-snackbars .wm-snack-wrapper,wm-snackbar .wm-snackbars .wm-snack-wrapper{width:100%;height:100%}:host .wm-snackbars .wm-snack-wrapper:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar{-webkit-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);font-size:0.875rem;color:#fff;padding:0.9375rem 1.875rem;background:#4a4a4a;opacity:0;left:0;position:relative;font-family:inherit}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link{letter-spacing:0;text-transform:none;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1;color:#85dadf;margin:0 3.125rem 0 0.625rem;text-decoration:none;font-weight:600;cursor:pointer}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline;content:\"\\f137\";margin-left:0.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover{text-decoration:underline}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus{outline:none;border:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button){opacity:1}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg{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;width:100%;position:relative;padding:0}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext{width:100%}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background-color:#3b3b3b;color:#ffffff;cursor:pointer;border:none;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{min-width:1.875rem;min-height:1.875rem}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\";font-size:1.12rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover{background-color:#fff;color:#4a4a4a}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus{outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .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}:host .sr-only,wm-snackbar .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}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 48rem){.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{top:2.0625rem;left:auto}}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active){outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #85dadf), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;background-size:0.375rem 0.1875rem;background-position:0 1em;border-radius:0;line-height:normal}";
 
-const Snackbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmSnackbarSnackFinished = index.createEvent(this, "wmSnackbarSnackFinished", 7);
-    this.userFinishedSnack = index.createEvent(this, "userFinishedSnack", 7);
-    this.wmSnackbarActionTriggered = index.createEvent(this, "wmSnackbarActionTriggered", 7);
-    this.userTriggeredAction = index.createEvent(this, "userTriggeredAction", 7);
-    this.parsedNotifications = [];
-    this.uid = this.el.id ? this.el.id : functions.generateId();
-    this.focusOnDismiss = null;
-    this.timers = [];
-    this.notifications = "[]";
-    this.isTabbing = false;
-    this.announcement = "";
-  }
-  updateSnacks(newValue) {
-    const prevNotificationsLength = this.parsedNotifications.length;
-    this.parsedNotifications = [...JSON.parse(newValue)];
-    if (prevNotificationsLength < this.parsedNotifications.length) {
-      const latestNotification = this.parsedNotifications[0];
-      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
-      this.timers = [newTimer, ...this.timers];
-      // don't announce link if user is tabbing because link is focused after announcement
-      this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
-      if (this.isTabbing && latestNotification.link) {
-        this.focusOnDismiss = document.activeElement ? document.activeElement : null;
-        this.stopTimer(latestNotification);
-        // allow snack to render before focusing
-        window.requestAnimationFrame(() => {
-          const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-          link.focus();
-        });
-      }
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  checkForTabbing(ev) {
-    if (ev.key === "Tab") {
-      this.toggleTabbingOn();
-    }
-  }
-  // Workaround for screenreader's triggering click event on "enter"
-  // This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
-  handleMouse() {
-    this.toggleTabbingOff();
-  }
-  snackDismissed(notification) {
-    this.endSnack(notification);
-    // Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
-    if (notification.link && this.isTabbing && this.focusOnDismiss) {
-      this.focusOnDismiss.focus();
-      this.focusOnDismiss = null;
-    }
-  }
-  //Remove snack from notification list once timer runs out
-  snackExpired() {
-    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
-    this.endSnack(notification);
-  }
-  endSnack(notification) {
-    //App listens for userFinishedSnack event and deletes the emitted notification.
-    this.stopTimer(notification);
-    this.wmSnackbarSnackFinished.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-      newWindow: notification.newWindow,
-    });
-    // deprecated
-    this.userFinishedSnack.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-    });
-  }
-  snackLinkClicked(notification) {
-    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
-    this.stopTimer(notification);
-    this.wmSnackbarActionTriggered.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-      newWindow: notification.newWindow,
-    });
-    // deprecated
-    this.userTriggeredAction.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-    });
-  }
-  //Delete the timer corresponding to the dismissed notification
-  stopTimer(notification) {
-    this.parsedNotifications.forEach((notif, index) => {
-      if (notif.id === notification.id) {
-        clearTimeout(this.timers[index]);
-        this.timers = this.timers.filter((timer, ind) => {
-          if (ind !== index) {
-            return timer;
-          }
-        });
-      }
-    });
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  renderSnackbars() {
-    return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + intl.globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
-        this.snackLinkClicked(notification);
-      }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() })), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
-  }
-  render() {
-    return (index.h("div", { class: {
-        "wm-snackbars": true,
-        empty: this.parsedNotifications.length === 0,
-        "user-is-tabbing": this.isTabbing,
-      } }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "notifications": ["updateSnacks"]
-  }; }
-};
+const Snackbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmSnackbarSnackFinished = index.createEvent(this, "wmSnackbarSnackFinished", 7);
+    this.userFinishedSnack = index.createEvent(this, "userFinishedSnack", 7);
+    this.wmSnackbarActionTriggered = index.createEvent(this, "wmSnackbarActionTriggered", 7);
+    this.userTriggeredAction = index.createEvent(this, "userTriggeredAction", 7);
+    this.parsedNotifications = [];
+    this.uid = this.el.id ? this.el.id : functions.generateId();
+    this.focusOnDismiss = null;
+    this.timers = [];
+    this.notifications = "[]";
+    this.isTabbing = false;
+    this.announcement = "";
+  }
+  updateSnacks(newValue) {
+    const prevNotificationsLength = this.parsedNotifications.length;
+    this.parsedNotifications = [...JSON.parse(newValue)];
+    if (prevNotificationsLength < this.parsedNotifications.length) {
+      const latestNotification = this.parsedNotifications[0];
+      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
+      this.timers = [newTimer, ...this.timers];
+      // don't announce link if user is tabbing because link is focused after announcement
+      this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
+      if (this.isTabbing && latestNotification.link) {
+        this.focusOnDismiss = document.activeElement ? document.activeElement : null;
+        this.stopTimer(latestNotification);
+        // allow snack to render before focusing
+        window.requestAnimationFrame(() => {
+          const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+          link.focus();
+        });
+      }
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  checkForTabbing(ev) {
+    if (ev.key === "Tab") {
+      this.toggleTabbingOn();
+    }
+  }
+  // Workaround for screenreader's triggering click event on "enter"
+  // This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
+  handleMouse() {
+    this.toggleTabbingOff();
+  }
+  snackDismissed(notification) {
+    this.endSnack(notification);
+    // Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
+    if (notification.link && this.isTabbing && this.focusOnDismiss) {
+      this.focusOnDismiss.focus();
+      this.focusOnDismiss = null;
+    }
+  }
+  //Remove snack from notification list once timer runs out
+  snackExpired() {
+    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
+    this.endSnack(notification);
+  }
+  endSnack(notification) {
+    //App listens for userFinishedSnack event and deletes the emitted notification.
+    this.stopTimer(notification);
+    this.wmSnackbarSnackFinished.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+      newWindow: notification.newWindow,
+    });
+    // deprecated
+    this.userFinishedSnack.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+    });
+  }
+  snackLinkClicked(notification) {
+    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.
+    this.stopTimer(notification);
+    this.wmSnackbarActionTriggered.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+      newWindow: notification.newWindow,
+    });
+    // deprecated
+    this.userTriggeredAction.emit({
+      id: notification.id,
+      message: notification.message,
+      link: notification.link,
+    });
+  }
+  //Delete the timer corresponding to the dismissed notification
+  stopTimer(notification) {
+    this.parsedNotifications.forEach((notif, index) => {
+      if (notif.id === notification.id) {
+        clearTimeout(this.timers[index]);
+        this.timers = this.timers.filter((timer, ind) => {
+          if (ind !== index) {
+            return timer;
+          }
+        });
+      }
+    });
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  renderSnackbars() {
+    return this.parsedNotifications.map((notification) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + intl.globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        this.snackLinkClicked(notification);
+      }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() })), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+  }
+  render() {
+    return (index.h("div", { class: {
+        "wm-snackbars": true,
+        empty: this.parsedNotifications.length === 0,
+        "user-is-tabbing": this.isTabbing,
+      } }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "notifications": ["updateSnacks"]
+  }; }
+};
 Snackbar.style = wmSnackbarCss;
 
 exports.wm_snackbar = Snackbar;