@watermarkinsights/ripple 3.24.0 → 3.24.1

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

@@ -1,176 +1,176 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-84a6ae22.js';
-import { i as intl, g as generateId } from './functions-c58046f2.js';
+import { i as intl, g as generateId } from './functions-1c41e984.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\"}: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 .wm-snackbarmsg .closesnack>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0;line-height:normal;z-index:30}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.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){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{top:2.0625rem;left:auto}}: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) {
-    registerInstance(this, hostRef);
-    this.wmSnackbarSnackFinished = createEvent(this, "wmSnackbarSnackFinished", 7);
-    this.userFinishedSnack = createEvent(this, "userFinishedSnack", 7);
-    this.wmSnackbarActionTriggered = createEvent(this, "wmSnackbarActionTriggered", 7);
-    this.userTriggeredAction = createEvent(this, "userTriggeredAction", 7);
-    this.parsedNotifications = []; //Holds the parsed array
-    this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
-    this.timers = [];
-    this.newNotification = false;
-    this.newWindowMessage = intl.formatMessage({
-      id: "global.newWindowLink",
-      defaultMessage: "Opens in a new window.",
-    });
-    this.notifications = "[]";
-  }
-  updateSnacks(newValue) {
-    const parsedData = JSON.parse(newValue);
-    const length = parsedData.length;
-    const prevNotificationsLength = this.parsedNotifications.length;
-    this.parsedNotifications = [];
-    //Parse notifications received as props and store a reference to them
-    for (let i = 0; i < length; i++) {
-      let newNotification = {
-        id: parsedData[i].id.toString(),
-        message: parsedData[i].message.toString(),
-        link: parsedData[i].link.toString(),
-        newWindow: !!parsedData[i].newWindow,
-      };
-      this.parsedNotifications = [...this.parsedNotifications, newNotification];
-    }
-    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
-    if (prevNotificationsLength < this.parsedNotifications.length) {
-      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
-      this.timers = [newTimer, ...this.timers];
-      this.storeElToFocusOnDismiss();
-      this.newNotification = true;
-    }
-    else {
-      this.newNotification = false;
-    }
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-  }
-  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
-  componentDidUpdate() {
-    //If the user is tabbing and there's a new notification, focus the link and disable timer.
-    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
-    this.newNotification = false;
-  }
-  checkForTabbing(ev) {
-    if (ev.key === "Tab") {
-      this.toggleTabbingOn();
-    }
-  }
-  //Workaround for screenreader's triggering click event on "enter".
-  handleMouse() {
-    this.toggleTabbingOff();
-  }
-  focusLinkAndDisableTimer() {
-    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
-    const latestNotification = this.parsedNotifications[0];
-    if (latestNotification.link) {
-      let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-      link.focus();
-      this.stopTimer(latestNotification);
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-    this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-    this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
-  }
-  storeElToFocusOnDismiss() {
-    let triggeringButton = document.activeElement;
-    while (triggeringButton && triggeringButton.shadowRoot) {
-      triggeringButton = triggeringButton.shadowRoot.activeElement;
-    }
-    this.focusOnDismiss = triggeringButton;
-  }
-  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.
-    notification.link && this.isTabbing && this.focusOnDismiss.focus();
-  }
-  //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;
-          }
-        });
-      }
-    });
-  }
-  renderSnackbars() {
-    return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", null, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + this.newWindowMessage : ""}`, tabindex: 0, onClick: () => {
-        this.snackLinkClicked(notification);
-      }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
-  }
-  renderLiveRegion() {
-    const latestNotification = this.parsedNotifications[0];
-    const link = this.isTabbing ? "" : latestNotification.link;
-    const srAnnouncement = `${latestNotification.message} ${link}`;
-    const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
-    if (region) {
-      region.innerHTML = "";
-      const wrapper = document.createElement("span");
-      wrapper.innerHTML = srAnnouncement;
-      region.appendChild(wrapper);
-    }
-  }
-  render() {
-    this.newNotification && this.renderLiveRegion();
-    const snackbars = this.renderSnackbars();
-    const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
-    return (h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "notifications": ["updateSnacks"]
-  }; }
-};
+const Snackbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmSnackbarSnackFinished = createEvent(this, "wmSnackbarSnackFinished", 7);
+    this.userFinishedSnack = createEvent(this, "userFinishedSnack", 7);
+    this.wmSnackbarActionTriggered = createEvent(this, "wmSnackbarActionTriggered", 7);
+    this.userTriggeredAction = createEvent(this, "userTriggeredAction", 7);
+    this.parsedNotifications = []; //Holds the parsed array
+    this.isTabbing = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets "enter" as a "click"
+    this.timers = [];
+    this.newNotification = false;
+    this.newWindowMessage = intl.formatMessage({
+      id: "global.newWindowLink",
+      defaultMessage: "Opens in a new window.",
+    });
+    this.notifications = "[]";
+  }
+  updateSnacks(newValue) {
+    const parsedData = JSON.parse(newValue);
+    const length = parsedData.length;
+    const prevNotificationsLength = this.parsedNotifications.length;
+    this.parsedNotifications = [];
+    //Parse notifications received as props and store a reference to them
+    for (let i = 0; i < length; i++) {
+      let newNotification = {
+        id: parsedData[i].id.toString(),
+        message: parsedData[i].message.toString(),
+        link: parsedData[i].link.toString(),
+        newWindow: !!parsedData[i].newWindow,
+      };
+      this.parsedNotifications = [...this.parsedNotifications, newNotification];
+    }
+    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.
+    if (prevNotificationsLength < this.parsedNotifications.length) {
+      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
+      this.timers = [newTimer, ...this.timers];
+      this.storeElToFocusOnDismiss();
+      this.newNotification = true;
+    }
+    else {
+      this.newNotification = false;
+    }
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+  }
+  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.
+  componentDidUpdate() {
+    //If the user is tabbing and there's a new notification, focus the link and disable timer.
+    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();
+    this.newNotification = false;
+  }
+  checkForTabbing(ev) {
+    if (ev.key === "Tab") {
+      this.toggleTabbingOn();
+    }
+  }
+  //Workaround for screenreader's triggering click event on "enter".
+  handleMouse() {
+    this.toggleTabbingOff();
+  }
+  focusLinkAndDisableTimer() {
+    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.
+    const latestNotification = this.parsedNotifications[0];
+    if (latestNotification.link) {
+      let link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+      link.focus();
+      this.stopTimer(latestNotification);
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+    this.snackbarEl && this.snackbarEl.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+    this.snackbarEl && this.snackbarEl.classList.remove("user-is-tabbing");
+  }
+  storeElToFocusOnDismiss() {
+    let triggeringButton = document.activeElement;
+    while (triggeringButton && triggeringButton.shadowRoot) {
+      triggeringButton = triggeringButton.shadowRoot.activeElement;
+    }
+    this.focusOnDismiss = triggeringButton;
+  }
+  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.
+    notification.link && this.isTabbing && this.focusOnDismiss.focus();
+  }
+  //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;
+          }
+        });
+      }
+    });
+  }
+  renderSnackbars() {
+    return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", null, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + this.newWindowMessage : ""}`, tabindex: 0, onClick: () => {
+        this.snackLinkClicked(notification);
+      }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
+  }
+  renderLiveRegion() {
+    const latestNotification = this.parsedNotifications[0];
+    const link = this.isTabbing ? "" : latestNotification.link;
+    const srAnnouncement = `${latestNotification.message} ${link}`;
+    const region = this.el.shadowRoot.querySelector(`#wm-live-region-${this.uid}`);
+    if (region) {
+      region.innerHTML = "";
+      const wrapper = document.createElement("span");
+      wrapper.innerHTML = srAnnouncement;
+      region.appendChild(wrapper);
+    }
+  }
+  render() {
+    this.newNotification && this.renderLiveRegion();
+    const snackbars = this.renderSnackbars();
+    const wrappingClass = this.parsedNotifications.length === 0 ? "empty" : "";
+    return (h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "notifications": ["updateSnacks"]
+  }; }
+};
 Snackbar.style = wmSnackbarCss;
 
 export { Snackbar as wm_snackbar };

package/dist/esm/wm-snackbar.entry.js.map

@@ -1 +1 @@
-{"file":"wm-snackbar.entry.js","mappings":"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","names":[],"sources":["./src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","./src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\nwm-snackbar {\n  * {\n    box-sizing: border-box;\n    margin: unset; //Edge\n  }\n\n  .wm-snackbars {\n    position: fixed;\n    bottom: rem-calc(0);\n    left: rem-calc(20);\n    right: rem-calc(20);\n    padding: rem-calc(4 10 30);\n    z-index: 2001;\n    max-width: rem-calc(568);\n    max-height: rem-calc(280);\n    -webkit-overflow-scrolling: touch;\n    overflow: auto;\n\n    &.empty {\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    .wm-snack-wrapper {\n      width: 100%;\n      height: 100%;\n\n      &:not(:last-child) {\n        margin-bottom: rem-calc(20);\n      }\n\n      .wm-snackbar {\n        @include shadow8;\n        @include displayFlex;\n        @include alignItems(center);\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n        font-size: rem-calc(14);\n        color: #fff;\n        padding: rem-calc(15 30);\n        background: #4a4a4a;\n        opacity: 0;\n        left: 0;\n        position: relative;\n        font-family: inherit;\n\n        .link {\n          letter-spacing: 0;\n          text-transform: none;\n          font-size: rem-calc(14);\n          border: none;\n          background: transparent;\n          padding-left: 0;\n          padding-right: 0;\n          height: auto;\n          border-radius: 0;\n          line-height: 1;\n          color: $snackbar-link-color;\n          margin: rem-calc(0 50 0 10);\n          text-decoration: none;\n          font-weight: 600;\n          cursor: pointer;\n\n          &.new-window::after {\n            @include mdi-icon;\n            display: inline;\n            content: \"\\f137\";\n            margin-left: rem-calc(4);\n          }\n\n          &:hover {\n            text-decoration: underline;\n          }\n\n          &:focus {\n            outline: none;\n            border: none;\n          }\n\n          &::-moz-focus-inner {\n            border: 0;\n            outline: none;\n          }\n        }\n\n        &:not(:last-child) {\n          margin-bottom: rem-calc(20);\n        }\n\n        &.active:not(button) {\n          opacity: 1;\n        }\n\n        .wm-snackbarmsg {\n          @include displayFlex;\n          @include justifyContent(space-between);\n          @include alignItems(center);\n          // font-size: rem-calc(14);\n          width: 100%;\n          position: relative;\n          padding: 0;\n\n          .msgtext {\n            width: 100%;\n          }\n\n          .closesnack {\n            @include box-shadow(none);\n            @include border-radius(50%);\n            background-color: #3b3b3b;\n            color: #ffffff;\n            cursor: pointer;\n            border: none;\n            font-size: rem-calc(16);\n            padding: 0;\n            height: auto;\n            line-height: 1;\n            min-width: rem-calc(44);\n            min-height: rem-calc(44);\n            text-align: center;\n            letter-spacing: normal;\n\n            @media screen and (min-width: rem-calc(768)) {\n              min-width: rem-calc(30);\n              min-height: rem-calc(30);\n            }\n\n            &:before {\n              @include mdi-icon;\n              content: \"\\f156\";\n            }\n\n            &:hover {\n              background-color: #fff;\n              color: $snackbar-color;\n            }\n\n            &:focus {\n              outline: none;\n            }\n\n            &::-moz-focus-inner {\n              border: 0;\n              outline: none;\n            }\n\n            &:active {\n              @include scale($xVal: 0.9, $yVal: 0.9);\n            }\n\n            > .tooltip {\n              position: absolute;\n              opacity: 0;\n              width: 1px;\n              height: 1px;\n              overflow: hidden;\n              clip: rect(0, 0, 0, 0);\n              font-size: rem-calc(14);\n              text-transform: none;\n              font-weight: normal;\n              background: black;\n              color: #fff;\n              padding: 0;\n              line-height: normal;\n              z-index: 30;\n            }\n\n            &:hover > .tooltip,\n            &.user-is-tabbing:focus > .tooltip {\n              clip: auto;\n              width: auto;\n              height: auto;\n              opacity: 1;\n              transition: opacity 500ms 500ms;\n              padding: rem-calc(6);\n              top: rem-calc(44);\n              left: rem-calc(44);\n              white-space: nowrap;\n              transform: translateX(-50%);\n              @media screen and (min-width: rem-calc(768)) {\n                top: rem-calc(33);\n                left: auto;\n              }\n            }\n          }\n        }\n\n        .sr-only {\n          @include srOnly;\n          top: 0;\n          left: 0;\n        }\n      }\n    }\n  }\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\n  @extend %focus-on-dark;\n\n  > .tooltip {\n    clip: auto;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: opacity 500ms 500ms;\n    padding: rem-calc(6);\n    top: rem-calc(44);\n    left: rem-calc(44);\n    white-space: nowrap;\n    transform: translateX(-50%);\n    @media screen and (min-width: rem-calc(768)) {\n      top: rem-calc(33);\n      left: auto;\n    }\n  }\n}\n\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\n  outline: none;\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\n  background-size: rem-calc(6px 3px);\n  background-position: 0 1em;\n  border-radius: 0;\n  line-height: normal;\n}\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, intl } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\n@Component({\n  tag: \"wm-snackbar\",\n  styleUrl: \"wm-snackbar.scss\",\n  shadow: true,\n})\nexport class Snackbar {\n  @Element() el!: HTMLElement;\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\n\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\n  private uid!: string;\n  private focusOnDismiss!: HTMLElement;\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\n  private timers: Array<number> = [];\n  private newNotification: boolean = false;\n  private snackbarEl!: HTMLDivElement;\n  private newWindowMessage = intl.formatMessage({\n    id: \"global.newWindowLink\",\n    defaultMessage: \"Opens in a new window.\",\n  });\n\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\n\n  @Watch(\"notifications\")\n  updateSnacks(newValue: string) {\n    const parsedData = JSON.parse(newValue);\n    const length = parsedData.length;\n    const prevNotificationsLength = this.parsedNotifications.length;\n    this.parsedNotifications = [];\n\n    //Parse notifications received as props and store a reference to them\n    for (let i = 0; i < length; i++) {\n      let newNotification: any = {\n        id: parsedData[i].id.toString(),\n        message: parsedData[i].message.toString(),\n        link: parsedData[i].link.toString(),\n        newWindow: !!parsedData[i].newWindow,\n      };\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\n    }\n\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\n    if (prevNotificationsLength < this.parsedNotifications.length) {\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\n      this.timers = [newTimer, ...this.timers];\n      this.storeElToFocusOnDismiss();\n      this.newNotification = true;\n    } else {\n      this.newNotification = false;\n    }\n  }\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\n  componentDidUpdate() {\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\n    this.newNotification = false;\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  checkForTabbing(ev: KeyboardEvent) {\n    if (ev.key === \"Tab\") {\n      this.toggleTabbingOn();\n    }\n  }\n\n  //Workaround for screenreader's triggering click event on \"enter\".\n  @Listen(\"mouseover\", { target: \"document\" })\n  handleMouse() {\n    this.toggleTabbingOff();\n  }\n\n  focusLinkAndDisableTimer() {\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\n    const latestNotification = this.parsedNotifications[0];\n\n    if (latestNotification.link) {\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\n      link.focus();\n      this.stopTimer(latestNotification);\n    }\n  }\n\n  toggleTabbingOn() {\n    this.isTabbing = true;\n    this.snackbarEl && this.snackbarEl.classList.add(\"user-is-tabbing\");\n  }\n\n  toggleTabbingOff() {\n    this.isTabbing = false;\n    this.snackbarEl && this.snackbarEl.classList.remove(\"user-is-tabbing\");\n  }\n\n  storeElToFocusOnDismiss() {\n    let triggeringButton = document.activeElement! as HTMLElement;\n    while (triggeringButton && triggeringButton.shadowRoot) {\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\n    }\n    this.focusOnDismiss = triggeringButton;\n  }\n\n  snackDismissed(notification: Notification) {\n    this.endSnack(notification);\n    //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.\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\n  }\n\n  //Remove snack from notification list once timer runs out\n  snackExpired() {\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\n    this.endSnack(notification);\n  }\n\n  endSnack(notification: Notification) {\n    //App listens for userFinishedSnack event and deletes the emitted notification.\n    this.stopTimer(notification);\n    this.wmSnackbarSnackFinished.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userFinishedSnack.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  snackLinkClicked(notification: Notification) {\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\n    this.stopTimer(notification);\n    this.wmSnackbarActionTriggered.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userTriggeredAction.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  //Delete the timer corresponding to the dismissed notification\n  stopTimer(notification: Notification) {\n    this.parsedNotifications.forEach((notif, index) => {\n      if (notif.id === notification.id) {\n        clearTimeout(this.timers[index]);\n        this.timers = this.timers.filter((timer, ind) => {\n          if (ind !== index) {\n            return timer;\n          }\n        });\n      }\n    });\n  }\n\n  renderSnackbars() {\n    return this.parsedNotifications.map((notification) => (\n      <div class=\"wm-snack-wrapper\">\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n\n          <div class=\"wm-snackbarmsg\">\n            <div class=\"msgtext\">\n              <span>{notification.message}</span>\n              {notification.link && (\n                <a\n                  id={`action-${notification.id}`}\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\n                  aria-label={`Click to ${notification.link}...${\n                    notification.newWindow ? \" \" + this.newWindowMessage : \"\"\n                  }`}\n                  tabindex={0}\n                  onClick={() => {\n                    this.snackLinkClicked(notification);\n                  }}\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\n                >\n                  <span aria-hidden=\"true\">{notification.link}</span>\n                </a>\n              )}\n            </div>\n            <button\n              id={`close-button-${notification.id}`}\n              aria-label=\"Close this notification\"\n              class=\"closesnack\"\n              tabindex={notification.link ? 0 : -1}\n              onClick={() => this.snackDismissed(notification)}\n            >\n              <span class=\"tooltip\" aria-hidden=\"true\">\n                Close\n              </span>\n            </button>\n          </div>\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n        </div>\n      </div>\n    ));\n  }\n\n  renderLiveRegion() {\n    const latestNotification = this.parsedNotifications[0];\n    const link = this.isTabbing ? \"\" : latestNotification.link;\n    const srAnnouncement = `${latestNotification.message} ${link}`;\n\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\n\n    if (region) {\n      region.innerHTML = \"\";\n      const wrapper = document.createElement(\"span\");\n      wrapper.innerHTML = srAnnouncement;\n      region.appendChild(wrapper);\n    }\n  }\n\n  render() {\n    this.newNotification && this.renderLiveRegion();\n    const snackbars = this.renderSnackbars();\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\n\n    return (\n      <div ref={(el) => (this.snackbarEl = el as HTMLDivElement)} class={`wm-snackbars ${wrappingClass}`}>\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\n        {snackbars}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"wm-snackbar.entry.js","mappings":"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","names":[],"sources":["./src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","./src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\r\nwm-snackbar {\r\n  * {\r\n    box-sizing: border-box;\r\n    margin: unset; //Edge\r\n  }\r\n\r\n  .wm-snackbars {\r\n    position: fixed;\r\n    bottom: rem-calc(0);\r\n    left: rem-calc(20);\r\n    right: rem-calc(20);\r\n    padding: rem-calc(4 10 30);\r\n    z-index: 2001;\r\n    max-width: rem-calc(568);\r\n    max-height: rem-calc(280);\r\n    -webkit-overflow-scrolling: touch;\r\n    overflow: auto;\r\n\r\n    &.empty {\r\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\r\n      padding-top: 0;\r\n      padding-bottom: 0;\r\n    }\r\n\r\n    .wm-snack-wrapper {\r\n      width: 100%;\r\n      height: 100%;\r\n\r\n      &:not(:last-child) {\r\n        margin-bottom: rem-calc(20);\r\n      }\r\n\r\n      .wm-snackbar {\r\n        @include shadow8;\r\n        @include displayFlex;\r\n        @include alignItems(center);\r\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\r\n        font-size: rem-calc(14);\r\n        color: #fff;\r\n        padding: rem-calc(15 30);\r\n        background: #4a4a4a;\r\n        opacity: 0;\r\n        left: 0;\r\n        position: relative;\r\n        font-family: inherit;\r\n\r\n        .link {\r\n          letter-spacing: 0;\r\n          text-transform: none;\r\n          font-size: rem-calc(14);\r\n          border: none;\r\n          background: transparent;\r\n          padding-left: 0;\r\n          padding-right: 0;\r\n          height: auto;\r\n          border-radius: 0;\r\n          line-height: 1;\r\n          color: $snackbar-link-color;\r\n          margin: rem-calc(0 50 0 10);\r\n          text-decoration: none;\r\n          font-weight: 600;\r\n          cursor: pointer;\r\n\r\n          &.new-window::after {\r\n            @include mdi-icon;\r\n            display: inline;\r\n            content: \"\\f137\";\r\n            margin-left: rem-calc(4);\r\n          }\r\n\r\n          &:hover {\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:focus {\r\n            outline: none;\r\n            border: none;\r\n          }\r\n\r\n          &::-moz-focus-inner {\r\n            border: 0;\r\n            outline: none;\r\n          }\r\n        }\r\n\r\n        &:not(:last-child) {\r\n          margin-bottom: rem-calc(20);\r\n        }\r\n\r\n        &.active:not(button) {\r\n          opacity: 1;\r\n        }\r\n\r\n        .wm-snackbarmsg {\r\n          @include displayFlex;\r\n          @include justifyContent(space-between);\r\n          @include alignItems(center);\r\n          // font-size: rem-calc(14);\r\n          width: 100%;\r\n          position: relative;\r\n          padding: 0;\r\n\r\n          .msgtext {\r\n            width: 100%;\r\n          }\r\n\r\n          .closesnack {\r\n            @include box-shadow(none);\r\n            @include border-radius(50%);\r\n            background-color: #3b3b3b;\r\n            color: #ffffff;\r\n            cursor: pointer;\r\n            border: none;\r\n            font-size: rem-calc(16);\r\n            padding: 0;\r\n            height: auto;\r\n            line-height: 1;\r\n            min-width: rem-calc(44);\r\n            min-height: rem-calc(44);\r\n            text-align: center;\r\n            letter-spacing: normal;\r\n\r\n            @media screen and (min-width: rem-calc(768)) {\r\n              min-width: rem-calc(30);\r\n              min-height: rem-calc(30);\r\n            }\r\n\r\n            &:before {\r\n              @include mdi-icon;\r\n              content: \"\\f156\";\r\n            }\r\n\r\n            &:hover {\r\n              background-color: #fff;\r\n              color: $snackbar-color;\r\n            }\r\n\r\n            &:focus {\r\n              outline: none;\r\n            }\r\n\r\n            &::-moz-focus-inner {\r\n              border: 0;\r\n              outline: none;\r\n            }\r\n\r\n            &:active {\r\n              @include scale($xVal: 0.9, $yVal: 0.9);\r\n            }\r\n\r\n            > .tooltip {\r\n              position: absolute;\r\n              opacity: 0;\r\n              width: 1px;\r\n              height: 1px;\r\n              overflow: hidden;\r\n              clip: rect(0, 0, 0, 0);\r\n              font-size: rem-calc(14);\r\n              text-transform: none;\r\n              font-weight: normal;\r\n              background: black;\r\n              color: #fff;\r\n              padding: 0;\r\n              line-height: normal;\r\n              z-index: 30;\r\n            }\r\n\r\n            &:hover > .tooltip,\r\n            &.user-is-tabbing:focus > .tooltip {\r\n              clip: auto;\r\n              width: auto;\r\n              height: auto;\r\n              opacity: 1;\r\n              transition: opacity 500ms 500ms;\r\n              padding: rem-calc(6);\r\n              top: rem-calc(44);\r\n              left: rem-calc(44);\r\n              white-space: nowrap;\r\n              transform: translateX(-50%);\r\n              @media screen and (min-width: rem-calc(768)) {\r\n                top: rem-calc(33);\r\n                left: auto;\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        .sr-only {\r\n          @include srOnly;\r\n          top: 0;\r\n          left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .sr-only {\r\n    @include srOnly;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n}\r\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\r\n  @extend %focus-on-dark;\r\n\r\n  > .tooltip {\r\n    clip: auto;\r\n    width: auto;\r\n    height: auto;\r\n    opacity: 1;\r\n    transition: opacity 500ms 500ms;\r\n    padding: rem-calc(6);\r\n    top: rem-calc(44);\r\n    left: rem-calc(44);\r\n    white-space: nowrap;\r\n    transform: translateX(-50%);\r\n    @media screen and (min-width: rem-calc(768)) {\r\n      top: rem-calc(33);\r\n      left: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\r\n  outline: none;\r\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\r\n  background-size: rem-calc(6px 3px);\r\n  background-position: 0 1em;\r\n  border-radius: 0;\r\n  line-height: normal;\r\n}\r\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\r\nimport { generateId, intl } from \"../../global/functions\";\r\nimport { Notification } from \"../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-snackbar\",\r\n  styleUrl: \"wm-snackbar.scss\",\r\n  shadow: true,\r\n})\r\nexport class Snackbar {\r\n  @Element() el!: HTMLElement;\r\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\r\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\r\n\r\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\r\n  private uid!: string;\r\n  private focusOnDismiss!: HTMLElement;\r\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\r\n  private timers: Array<number> = [];\r\n  private newNotification: boolean = false;\r\n  private snackbarEl!: HTMLDivElement;\r\n  private newWindowMessage = intl.formatMessage({\r\n    id: \"global.newWindowLink\",\r\n    defaultMessage: \"Opens in a new window.\",\r\n  });\r\n\r\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\r\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\r\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\r\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\r\n\r\n  @Watch(\"notifications\")\r\n  updateSnacks(newValue: string) {\r\n    const parsedData = JSON.parse(newValue);\r\n    const length = parsedData.length;\r\n    const prevNotificationsLength = this.parsedNotifications.length;\r\n    this.parsedNotifications = [];\r\n\r\n    //Parse notifications received as props and store a reference to them\r\n    for (let i = 0; i < length; i++) {\r\n      let newNotification: any = {\r\n        id: parsedData[i].id.toString(),\r\n        message: parsedData[i].message.toString(),\r\n        link: parsedData[i].link.toString(),\r\n        newWindow: !!parsedData[i].newWindow,\r\n      };\r\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\r\n    }\r\n\r\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\r\n    if (prevNotificationsLength < this.parsedNotifications.length) {\r\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\r\n      this.timers = [newTimer, ...this.timers];\r\n      this.storeElToFocusOnDismiss();\r\n      this.newNotification = true;\r\n    } else {\r\n      this.newNotification = false;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n  }\r\n\r\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\r\n  componentDidUpdate() {\r\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\r\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\r\n    this.newNotification = false;\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  checkForTabbing(ev: KeyboardEvent) {\r\n    if (ev.key === \"Tab\") {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  //Workaround for screenreader's triggering click event on \"enter\".\r\n  @Listen(\"mouseover\", { target: \"document\" })\r\n  handleMouse() {\r\n    this.toggleTabbingOff();\r\n  }\r\n\r\n  focusLinkAndDisableTimer() {\r\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\r\n    const latestNotification = this.parsedNotifications[0];\r\n\r\n    if (latestNotification.link) {\r\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\r\n      link.focus();\r\n      this.stopTimer(latestNotification);\r\n    }\r\n  }\r\n\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n    this.snackbarEl && this.snackbarEl.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n    this.snackbarEl && this.snackbarEl.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  storeElToFocusOnDismiss() {\r\n    let triggeringButton = document.activeElement! as HTMLElement;\r\n    while (triggeringButton && triggeringButton.shadowRoot) {\r\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\r\n    }\r\n    this.focusOnDismiss = triggeringButton;\r\n  }\r\n\r\n  snackDismissed(notification: Notification) {\r\n    this.endSnack(notification);\r\n    //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.\r\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\r\n  }\r\n\r\n  //Remove snack from notification list once timer runs out\r\n  snackExpired() {\r\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\r\n    this.endSnack(notification);\r\n  }\r\n\r\n  endSnack(notification: Notification) {\r\n    //App listens for userFinishedSnack event and deletes the emitted notification.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarSnackFinished.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userFinishedSnack.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  snackLinkClicked(notification: Notification) {\r\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarActionTriggered.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userTriggeredAction.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  //Delete the timer corresponding to the dismissed notification\r\n  stopTimer(notification: Notification) {\r\n    this.parsedNotifications.forEach((notif, index) => {\r\n      if (notif.id === notification.id) {\r\n        clearTimeout(this.timers[index]);\r\n        this.timers = this.timers.filter((timer, ind) => {\r\n          if (ind !== index) {\r\n            return timer;\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  renderSnackbars() {\r\n    return this.parsedNotifications.map((notification) => (\r\n      <div class=\"wm-snack-wrapper\">\r\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n\r\n          <div class=\"wm-snackbarmsg\">\r\n            <div class=\"msgtext\">\r\n              <span>{notification.message}</span>\r\n              {notification.link && (\r\n                <a\r\n                  id={`action-${notification.id}`}\r\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\r\n                  aria-label={`Click to ${notification.link}...${\r\n                    notification.newWindow ? \" \" + this.newWindowMessage : \"\"\r\n                  }`}\r\n                  tabindex={0}\r\n                  onClick={() => {\r\n                    this.snackLinkClicked(notification);\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\r\n                >\r\n                  <span aria-hidden=\"true\">{notification.link}</span>\r\n                </a>\r\n              )}\r\n            </div>\r\n            <button\r\n              id={`close-button-${notification.id}`}\r\n              aria-label=\"Close this notification\"\r\n              class=\"closesnack\"\r\n              tabindex={notification.link ? 0 : -1}\r\n              onClick={() => this.snackDismissed(notification)}\r\n            >\r\n              <span class=\"tooltip\" aria-hidden=\"true\">\r\n                Close\r\n              </span>\r\n            </button>\r\n          </div>\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n        </div>\r\n      </div>\r\n    ));\r\n  }\r\n\r\n  renderLiveRegion() {\r\n    const latestNotification = this.parsedNotifications[0];\r\n    const link = this.isTabbing ? \"\" : latestNotification.link;\r\n    const srAnnouncement = `${latestNotification.message} ${link}`;\r\n\r\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\r\n\r\n    if (region) {\r\n      region.innerHTML = \"\";\r\n      const wrapper = document.createElement(\"span\");\r\n      wrapper.innerHTML = srAnnouncement;\r\n      region.appendChild(wrapper);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    this.newNotification && this.renderLiveRegion();\r\n    const snackbars = this.renderSnackbars();\r\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\r\n\r\n    return (\r\n      <div ref={(el) => (this.snackbarEl = el as HTMLDivElement)} class={`wm-snackbars ${wrappingClass}`}>\r\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\r\n        {snackbars}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}