@watermarkinsights/ripple 3.26.0-9 → 3.26.0

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -1,282 +1,282 @@
-import { h } from "@stencil/core";
-import { generateId, hideTooltip, showTooltip } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Snackbar {
-  constructor() {
-    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.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;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  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);
-    }
-  }
-  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 ? " " + globalMessages.newWindow : ""}`, 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), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), 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", { class: `wm-snackbars ${wrappingClass} ${this.isTabbing ? "user-is-tabbing" : ""}` }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
-  }
-  static get is() { return "wm-snackbar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-snackbar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-snackbar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "notifications": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "notifications",
-        "reflect": true,
-        "defaultValue": "\"[]\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmSnackbarSnackFinished",
-        "name": "wmSnackbarSnackFinished",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "userFinishedSnack",
-        "name": "userFinishedSnack",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "wmSnackbarActionTriggered",
-        "name": "wmSnackbarActionTriggered",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "userTriggeredAction",
-        "name": "userTriggeredAction",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "notifications",
-        "methodName": "updateSnacks"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h } from "@stencil/core";
+import { generateId, hideTooltip, showTooltip } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Snackbar {
+  constructor() {
+    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.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;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  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);
+    }
+  }
+  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 ? " " + globalMessages.newWindow : ""}`, 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), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), 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", { class: `wm-snackbars ${wrappingClass} ${this.isTabbing ? "user-is-tabbing" : ""}` }, h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
+  }
+  static get is() { return "wm-snackbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-snackbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-snackbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "notifications": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "notifications",
+        "reflect": true,
+        "defaultValue": "\"[]\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmSnackbarSnackFinished",
+        "name": "wmSnackbarSnackFinished",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "userFinishedSnack",
+        "name": "userFinishedSnack",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "wmSnackbarActionTriggered",
+        "name": "wmSnackbarActionTriggered",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "userTriggeredAction",
+        "name": "userTriggeredAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "notifications",
+        "methodName": "updateSnacks"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "wmUserIsTabbing",
+        "method": "toggleTabbingOn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsNotTabbing",
+        "method": "toggleTabbingOff",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}