@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,120 +1,120 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("wm-snackbar", () => {
-  let page;
-  beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
-    await page.evaluate(async () => {
-      document.addEventListener("keydown", (ev) => {
-        if (ev.key == "Tab") {
-          document.body.classList.add("user-is-tabbing");
-        }
-      });
-      document.addEventListener("mousedown", () => {
-        document.body.classList.remove("user-is-tabbing");
-      });
-      document.addEventListener("wmSnackbarSnackFinished", (ev) => {
-        const snackbar = document.querySelector("wm-snackbar");
-        let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
-        snackbar.notifications = JSON.stringify(newSnacks);
-      });
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
+        await page.evaluate(async () => {
+            document.addEventListener("keydown", (ev) => {
+                if (ev.key == "Tab") {
+                    document.body.classList.add("user-is-tabbing");
+                }
+            });
+            document.addEventListener("mousedown", () => {
+                document.body.classList.remove("user-is-tabbing");
+            });
+            document.addEventListener("wmSnackbarSnackFinished", (ev) => {
+                const snackbar = document.querySelector("wm-snackbar");
+                let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
+                snackbar.notifications = JSON.stringify(newSnacks);
+            });
+        });
     });
-  });
-  afterEach(async () => {
-    jest.clearAllTimers();
-  });
-  // RENDER
-  it("it displays a snackbar when it receives a notification", async () => {
-    //generate snackbar
-    const button = await page.find("wm-button");
-    button.click(); //perform action that generates a notification
-    await page.waitForChanges();
-    const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snackbar).not.toBeNull();
-  });
-  it("it displays multiple snackbars when it receives more than one notification", async () => {
-    //generate snackbars
-    const button = await page.find("wm-button");
-    button.click();
-    await page.waitForChanges();
-    button.click();
-    await page.waitForChanges();
-    const snackbars = await page.findAll("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snackbars.length).toBe(2);
-  });
-  it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
-    //generate snackbar
-    const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
-    const button = await page.find("wm-button");
-    button.click();
-    await page.waitForChanges();
-    let snack = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snack).not.toBeNull();
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve("");
-      }, 21000);
+    afterEach(async () => {
+        jest.clearAllTimers();
     });
-    snack = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snack).toBeNull();
-    expect(snackExpired).toHaveReceivedEventDetail({
-      id: "3",
-      message: "You did something",
-      link: "Undo",
+    // RENDER
+    it("it displays a snackbar when it receives a notification", async () => {
+        //generate snackbar
+        const button = await page.find("wm-button");
+        button.click(); //perform action that generates a notification
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snackbar).not.toBeNull();
+    });
+    it("it displays multiple snackbars when it receives more than one notification", async () => {
+        //generate snackbars
+        const button = await page.find("wm-button");
+        button.click();
+        await page.waitForChanges();
+        button.click();
+        await page.waitForChanges();
+        const snackbars = await page.findAll("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snackbars.length).toBe(2);
+    });
+    it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
+        //generate snackbar
+        const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
+        const button = await page.find("wm-button");
+        button.click();
+        await page.waitForChanges();
+        let snack = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snack).not.toBeNull();
+        await new Promise((resolve) => {
+            setTimeout(() => {
+                resolve("");
+            }, 21000);
+        });
+        snack = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snack).toBeNull();
+        expect(snackExpired).toHaveReceivedEventDetail({
+            id: "3",
+            message: "You did something",
+            link: "Undo",
+        });
+    });
+    it("dismisses the snackbar when the close button is clicked", async () => {
+        //generate snackbar
+        const triggerButton = await page.find("wm-button");
+        triggerButton.click();
+        await page.waitForChanges();
+        //press close button
+        const closeButton = await page.find("wm-snackbar >>> button");
+        closeButton.click();
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snackbar).toBeNull();
+    });
+    //ACCESSIBILITY
+    it("renders an aria-live region", async () => {
+        const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
+        expect(element).toEqualAttribute("aria-live", "polite");
+    });
+    it("focuses the action link in snackbar if the user is tabbing", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        const link = await page.find("wm-snackbar >>> .link");
+        expect(focusedElId).toBe(link.id);
+    });
+    it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //press close button
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snackbar).toBeNull();
+        const focusedElId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElId).toBe("create-snack");
+    });
+    it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
+        //generate snackbar
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //tab out
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
+        expect(snackbar).toBeNull();
+        const focusedElId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElId).toBe("create-snack");
     });
-  });
-  it("dismisses the snackbar when the close button is clicked", async () => {
-    //generate snackbar
-    const triggerButton = await page.find("wm-button");
-    triggerButton.click();
-    await page.waitForChanges();
-    //press close button
-    const closeButton = await page.find("wm-snackbar >>> button");
-    closeButton.click();
-    await page.waitForChanges();
-    const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snackbar).toBeNull();
-  });
-  //ACCESSIBILITY
-  it("renders an aria-live region", async () => {
-    const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
-    expect(element).toEqualAttribute("aria-live", "polite");
-  });
-  it("focuses the action link in snackbar if the user is tabbing", async () => {
-    //generate snackbar
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    const link = await page.find("wm-snackbar >>> .link");
-    expect(focusedElId).toBe(link.id);
-  });
-  it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
-    //generate snackbar
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    //press close button
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snackbar).toBeNull();
-    const focusedElId = await page.evaluate(() => document.activeElement.id);
-    expect(focusedElId).toBe("create-snack");
-  });
-  it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
-    //generate snackbar
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    //tab out
-    await page.keyboard.press("Tab");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    const snackbar = await page.find("wm-snackbar >>> .wm-snackbarmsg");
-    expect(snackbar).toBeNull();
-    const focusedElId = await page.evaluate(() => document.activeElement.id);
-    expect(focusedElId).toBe("create-snack");
-  });
 });

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

@@ -2,216 +2,218 @@ import { h } from "@stencil/core";
 import { generateId, hideTooltip, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
-  constructor() {
-    this.parsedNotifications = [];
-    this.uid = this.el.id ? this.el.id : 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();
+    constructor() {
+        this.parsedNotifications = [];
+        this.uid = this.el.id ? this.el.id : 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 wmSnackbarSnackFinished event and deletes the emitted notification.
+        this.stopTimer(notification);
+        this.wmSnackbarSnackFinished.emit({
+            id: notification.id,
+            message: notification.message,
+            link: notification.link,
+            newWindow: notification.newWindow,
         });
-      }
-    }
-  }
-  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 wmSnackbarSnackFinished event and deletes the emitted notification.
-    this.stopTimer(notification);
-    this.wmSnackbarSnackFinished.emit({
-      id: notification.id,
-      message: notification.message,
-      link: notification.link,
-      newWindow: notification.newWindow,
-    });
-  }
-  snackLinkClicked(notification) {
-    //App listens for wmSnackbarActionTriggered 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,
-    });
-  }
-  //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;
-          }
+    }
+    snackLinkClicked(notification) {
+        //App listens for wmSnackbarActionTriggered 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,
         });
-      }
-    });
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  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) })))));
-  }
-  render() {
-    return (h("div", { class: {
-        "wm-snackbars": true,
-        empty: this.parsedNotifications.length === 0,
-        "user-is-tabbing": this.isTabbing,
-      } }, 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()));
-  }
-  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 states() {
-    return {
-      "isTabbing": {},
-      "announcement": {}
-    };
-  }
-  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"
+    }
+    //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";
         }
-      }, {
-        "method": "wmSnackbarActionTriggered",
-        "name": "wmSnackbarActionTriggered",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
+        this.announcement = message;
+    }
+    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) })))));
+    }
+    render() {
+        return (h("div", { class: {
+                "wm-snackbars": true,
+                empty: this.parsedNotifications.length === 0,
+                "user-is-tabbing": this.isTabbing,
+            } }, 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()));
+    }
+    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 elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "notifications",
-        "methodName": "updateSnacks"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "checkForTabbing",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mouseover",
-        "method": "handleMouse",
-        "target": "document",
-        "capture": false,
-        "passive": true
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "announcement": {}
+        };
+    }
+    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",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }, {
+                "method": "wmSnackbarActionTriggered",
+                "name": "wmSnackbarActionTriggered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "notifications",
+                "methodName": "updateSnacks"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "checkForTabbing",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "mouseover",
+                "method": "handleMouse",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }