@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

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

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmSearchCss = ":host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{box-sizing:border-box}:host .wm-search-wrapper,wm-search .wm-search-wrapper{border-radius:3px;position:relative;border:1px solid rgba(35, 35, 35, 0.6);display:flex;justify-content:space-between;align-items:center}:host .wm-search-wrapper .search-icon,wm-search .wm-search-wrapper .search-icon{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;font-size:1.0625rem;position:absolute;left:0.4375rem}:host .wm-search-wrapper input,wm-search .wm-search-wrapper input{border:none;height:40px;padding:0 1.75rem;background:transparent;overflow:visible;width:100%;flex:1;font-family:inherit}:host .wm-search-wrapper input:focus,wm-search .wm-search-wrapper input:focus{outline:none}:host .wm-search-wrapper.focus,wm-search .wm-search-wrapper.focus{box-shadow:0 0 0 1px #20cbd4;border-color:#20cbd4;border-radius:3px}:host .find,wm-search .find{min-height:3rem}:host .find input,wm-search .find input{padding:16px 8px 16px 28px}:host .find .wm-find-elements,wm-search .find .wm-find-elements{display:flex;align-items:center;justify-content:flex-start;padding-right:16px}:host .find .wm-find-elements wm-button+wm-button,wm-search .find .wm-find-elements wm-button+wm-button{margin-left:0.25rem}:host .find .wm-find-elements .results,wm-search .find .wm-find-elements .results{margin-right:0.5rem;font-style:italic}:host .sr-only,wm-search .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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .show-for-tabbers,wm-search .show-for-tabbers{all:unset;color:#575195;text-decoration:none;font-weight:500;font-size:0.875rem;margin:10px 0}:host .show-for-tabbers:hover,wm-search .show-for-tabbers:hover{background:linear-gradient(#575195, #575195) no-repeat;background-size:100% 1px;background-position:0 1.2em;padding-bottom:0.2em}:host .show-for-tabbers:focus,wm-search .show-for-tabbers:focus{outline:none;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1.2em;padding-bottom:0.2em}";
+
+const Search = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmBrowseSearchResults = index.createEvent(this, "wmBrowseSearchResults", 7);
+    this.searchType = "basic";
+    this.disabled = false;
+    /**
+     * Props required for both variants.
+     */
+    this.placeholder = "";
+    this.label = "";
+    this.numResults = 0;
+    /**
+     * This exposes the input's value on the host component so that the app can access it.
+     */
+    this.value = "";
+    /**
+     * If the user is tabbing, the search and find variant will display a link to jump to a search result.
+     */
+    this.isTabbing = false;
+    /**
+     * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,
+     * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.
+     */
+    this.highlightedId = "";
+    this.highlightedName = null;
+    /**
+     * Indicates which of the search results is currently highlighted. It will be displayed as "[highlightedNum] of [numResults]" next to the input in the search and find variant.
+     * This number updates as the user browses using the buttons.
+     */
+    this.highlightedNum = 0;
+    /**
+     * Element refs
+     */
+    this.resultsLiveRegion = null;
+    this.wrapperEl = null;
+    this.linkEl = null;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+    this.linkEl && this.linkEl.classList.remove("sr-only");
+    this.linkEl && this.linkEl.classList.add("show-for-tabbers");
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+    this.linkEl && this.linkEl.classList.add("sr-only");
+    this.linkEl && this.linkEl.classList.remove("show-for-tabbers");
+  }
+  componentWillLoad() {
+    // replacing the prototype's focus event by our own
+    // to delegate focus to the appropriate el in the shadow root
+    // we could replace by ShadowRoot.delegatesFocus()
+    // when there's enough support for it
+    // @ts-ignore
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("#wm-search-input").focus();
+        // onFocus event doesn't run when focus is programmatic,
+        // so we reproduce this.addFocusStyle here
+        this.shadowRoot.querySelector("#wm-search-wrapper").classList.add("focus");
+      }
+    };
+    if (this.placeholder === "") {
+      console.error("You must set the placeholder property for the wm-search component.");
+    }
+    if (this.label === "") {
+      console.error("You must set the label property for the wm-search component.");
+    }
+    this.hookToModal();
+  }
+  hookToModal() {
+    // if the search is in a modal we want to clear the input when the modal closes
+    let el = this.el;
+    while (!!el) {
+      if (el.tagName === "WM-MODAL") {
+        this.parentModal = el;
+      }
+      el = el.parentElement;
+    }
+    if (this.parentModal) {
+      const events = ["wmCloseTriggered", "wmPrimaryTriggered", "wmSecondaryTriggered"];
+      events.map((event) => {
+        this.parentModal.addEventListener(event, () => {
+          this.updateValue("");
+        });
+      });
+    }
+  }
+  async updateValue(value) {
+    this.value = value;
+    //For search-and-find, the results should always restart at "[1 or 0] of ..." after any new input.
+    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.
+    this.resetHighlightCountToStart();
+  }
+  resetHighlightCountToStart() {
+    if (this.searchType === "find") {
+      if (this.numResults) {
+        this.highlightedNum = 1;
+      }
+      else {
+        this.highlightedNum = 0;
+      }
+    }
+  }
+  /**
+   * Unfortunately, simply rendering the prop values for the number of results or highlighted option in the live regions, ideally so that the screen reader reads them when they change, does not work
+   * ---NVDA in Firefox only reads the specific letters that change in the prop value. The innerHTML of the live region must be explicitly changed in order for the screen reader to read the words in full, i.e., coherently.
+   *
+   * An update of the props triggers a re-render, so setting the live region in componentDidRender ensures the screen reader announces any changes to the number of results/highlighted option.
+   * Note: Updating the innerHTML of the live region does not cause the component to re-render so there's no performance hit here.
+   */
+  componentDidRender() {
+    this.announceChanges();
+  }
+  /**
+   * Set live region to blank and then update it with the message ensure the screen reader registers the changes.
+   */
+  announceChanges() {
+    let message = this.getResultsMessage();
+    if (this.searchType === "find" && this.highlightedName) {
+      message += `, ${this.highlightedName}`;
+    }
+    this.resultsLiveRegion && (this.resultsLiveRegion.innerHTML = "");
+    window.requestAnimationFrame(() => this.resultsLiveRegion && (this.resultsLiveRegion.innerHTML = message));
+  }
+  /**
+   * Creates the message that should be announced by the screen reader.
+   */
+  getResultsMessage() {
+    //If there's no text in the input, don't give any message
+    if (this.value) {
+      if (this.searchType === "basic") {
+        return functions.intl.formatMessage({
+          id: "search.resultsFound",
+          defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
+        }, { numResults: this.numResults });
+      }
+      else {
+        return functions.intl.formatMessage({
+          id: "search.xOfYResults",
+          defaultMessage: "{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}",
+        }, { numResults: this.numResults, current: this.highlightedNum });
+      }
+    }
+    else {
+      return "";
+    }
+  }
+  changeHighlightedNum(newNum) {
+    if (this.numResults) {
+      if (newNum < 1) {
+        // we were on the first item, going down: go to last item
+        this.highlightedNum = this.numResults;
+      }
+      else if (newNum > this.numResults) {
+        // we were on the last item, going up: go to first item
+        this.highlightedNum = 1;
+      }
+      else {
+        this.highlightedNum = newNum;
+      }
+      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });
+    }
+  }
+  addFocusStyle() {
+    if (this.wrapperEl) {
+      this.wrapperEl.classList.add("focus");
+    }
+  }
+  removeFocusStyle() {
+    if (this.wrapperEl) {
+      this.wrapperEl.classList.remove("focus");
+    }
+  }
+  /**
+   * Functions that return elements specifically for search-and-find.
+   */
+  renderResultsAndBrowseButtons() {
+    return (index.h("div", { class: "wm-find-elements" }, index.h("div", { id: "results-display", class: "results" }, this.getResultsMessage()), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-style": "icononly", icon: "f05d", tooltip: functions.intl.formatMessage({
+        id: "global.previous",
+        description: "button text",
+        defaultMessage: "previous",
+      }), "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.disabled || this.numResults < 2, "label-for-identical-buttons": functions.intl.formatMessage({
+        id: "search.previousResult",
+        defaultMessage: "Press to hear previous matching result",
+      }) }), index.h("wm-button", { "button-style": "icononly", icon: "f045", tooltip: functions.intl.formatMessage({
+        id: "global.next",
+        description: "button text",
+        defaultMessage: "next",
+      }), "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.disabled || this.numResults < 2, "label-for-identical-buttons": functions.intl.formatMessage({
+        id: "search.nextResult",
+        defaultMessage: "Press to hear next matching result",
+      }) }))));
+  }
+  renderJumpToLink() {
+    if (this.numResults && this.highlightedId) {
+      return (index.h("a", { ref: (el) => (this.linkEl = el), href: `#${this.highlightedId}`, class: "sr-only" }, functions.intl.formatMessage({
+        id: "search.jumpToResult",
+        defaultMessage: "Jump to search result in list",
+      })));
+    }
+    else {
+      return null;
+    }
+  }
+  /**
+   * End search and find render helpers
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}`, ref: (el) => (this.wrapperEl = el) }, index.h("input", { disabled: this.disabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
+        id: "search.typeToFilterResults",
+        defaultMessage: "Type to filter the results",
+      })}`, onInput: (ev) => this.updateValue(ev.target.value), onFocus: () => this.addFocusStyle(), onBlur: () => this.removeFocusStyle(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), index.h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) })), this.searchType === "find" && this.renderJumpToLink()));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "numResults": ["resetHighlightCountToStart"]
+  }; }
+};
+Search.style = wmSearchCss;
+
+exports.wm_search = Search;

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

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d930307d.js');
+const functions = require('./functions-e3f5ae65.js');
+
+const wmSnackbarCss = "@charset \"UTF-8\";.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 *{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}: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:\"\"}: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;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;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;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;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;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;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:linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;background-size:0.375rem 0.1875rem;background-position:0 1em;border-radius:0;line-height:normal}";
+
+const Snackbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.userFinishedSnack = index.createEvent(this, "userFinishedSnack", 7);
+    this.userTriggeredAction = index.createEvent(this, "userTriggeredAction", 7);
+    //Prop receives notifications as JSON string, which is later parsed into an array of objects.
+    this.notifications = "[]";
+    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;
+  }
+  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(),
+      };
+      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 : functions.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.keyCode === 9) {
+      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.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.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) => (index.h("div", { class: "wm-snack-wrapper" }, index.h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), index.h("div", { class: "wm-snackbarmsg" }, index.h("div", { class: "msgtext" }, index.h("span", null, notification.message), notification.link && (index.h("a", { id: `action-${notification.id}`, class: "link", "aria-label": `Click to ${notification.link}...`, tabindex: 0, onClick: () => {
+        this.snackLinkClicked(notification);
+      }, onKeyDown: (ev) => ev.keyCode === 13 && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification) }, index.h("span", { class: "tooltip", "aria-hidden": "true" }, "Close"))), index.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 (index.h("div", { ref: (el) => (this.snackbarEl = el), class: `wm-snackbars ${wrappingClass}` }, index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}` }), snackbars));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "notifications": ["updateSnacks"]
+  }; }
+};
+Snackbar.style = wmSnackbarCss;
+
+exports.wm_snackbar = Snackbar;