@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

@@ -3,200 +3,193 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-53aff314.js');
+const functions = require('./functions-d2d99997.js');
+const intl = require('./intl-a1ccf587.js');
 
-const wmSearchCss = ":host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;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%;-ms-flex:1;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{-webkit-box-shadow:0 0 0 1px #20cbd4;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;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;-webkit-clip-path:inset(50%) !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:-webkit-gradient(linear, left top, left bottom, from(#575195), to(#575195)) no-repeat;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:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1.2em;padding-bottom:0.2em}";
+const wmSearchCss = ":host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;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%;-ms-flex:1;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{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}: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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;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;-webkit-clip-path:inset(50%) !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:-webkit-gradient(linear, left top, left bottom, from(#575195), to(#575195)) no-repeat;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:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;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.wmSearchBrowseResults = index.createEvent(this, "wmSearchBrowseResults", 7);
-    this.wmBrowseSearchResults = index.createEvent(this, "wmBrowseSearchResults", 7);
-    this.wmSearchValueChanged = index.createEvent(this, "wmSearchValueChanged", 7);
-    this.wrapperEl = null;
-    this.linkEl = null;
-    this.searchType = "basic";
-    this.disabled = false;
-    this.placeholder = "";
-    this.label = "";
-    this.numResults = 0;
-    this.value = "";
-    this.isTabbing = false;
-    this.highlightedId = "";
-    this.highlightedName = null;
-    this.highlightedNum = 0;
-    this.previousBlurredValue = "";
-    this.parentModal = undefined;
-    this.announcement = "";
-  }
-  get resultCount() {
-    let message = "";
-    const basicMessage = functions.intl.formatMessage({
-      id: "search.resultsFound",
-      defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
-    }, { numResults: this.numResults });
-    const findMessage = functions.intl.formatMessage({
-      id: "search.xOfYResults",
-      defaultMessage: "{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}",
-    }, { numResults: this.numResults, current: this.highlightedNum });
-    if (this.searchType === "basic") {
-      message = basicMessage;
-    }
-    else if (this.searchType === "find") {
-      message = findMessage;
-    }
-    return message;
-  }
-  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() {
-    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("");
-        });
-      });
-    }
-  }
-  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)
-  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();
-    if (this.value) {
-      this.announceChanges();
-    }
-  }
-  resetHighlightCountToStart() {
-    if (this.searchType === "find") {
-      this.highlightedNum = this.numResults ? 1 : 0;
-    }
-  }
-  announce(message) {
-    if (this.resultsLiveRegion.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  announceChanges() {
-    window.requestAnimationFrame(() => {
-      // requestAnimationFrame to allow all changes to occur before announcing results
-      let messageToAnnounce = this.resultCount;
-      // if a result is found, also include it after the liveregion message
-      if (this.searchType === "find" && this.highlightedName) {
-        messageToAnnounce += `, ${this.highlightedName}`;
-      }
-      this.announce(messageToAnnounce);
-    });
-  }
-  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.wmSearchBrowseResults.emit({ position: this.highlightedNum });
-      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });
-      this.announceChanges();
-    }
-  }
-  addFocusStyle() {
-    if (this.wrapperEl) {
-      this.wrapperEl.classList.add("focus");
-    }
-  }
-  removeFocusStyle() {
-    if (this.wrapperEl) {
-      this.wrapperEl.classList.remove("focus");
-    }
-  }
-  handleBlur() {
-    this.removeFocusStyle();
-    if (this.previousBlurredValue !== this.value) {
-      this.wmSearchValueChanged.emit({ value: this.value });
-    }
-    this.previousBlurredValue = this.value;
-  }
-  /**
-   * 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.resultCount), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-type": "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-type": "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.handleBlur(), "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.announcement)), this.searchType === "find" && this.renderJumpToLink()));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "numResults": ["resetHighlightCountToStart"]
-  }; }
-};
+const Search = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmSearchBrowseResults = index.createEvent(this, "wmSearchBrowseResults", 7);
+    this.wmBrowseSearchResults = index.createEvent(this, "wmBrowseSearchResults", 7);
+    this.wmSearchValueChanged = index.createEvent(this, "wmSearchValueChanged", 7);
+    this.wrapperEl = null;
+    this.linkEl = null;
+    this.searchType = "basic";
+    this.disabled = false;
+    this.placeholder = "";
+    this.label = "";
+    this.numResults = 0;
+    this.value = "";
+    this.isTabbing = false;
+    this.highlightedId = "";
+    this.highlightedName = null;
+    this.highlightedNum = 0;
+    this.previousBlurredValue = "";
+    this.parentModal = undefined;
+    this.announcement = "";
+  }
+  get resultCount() {
+    let message = "";
+    const basicMessage = functions.intl.formatMessage({
+      id: "search.resultsFound",
+      defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
+    }, { numResults: this.numResults });
+    const findMessage = functions.intl.formatMessage({
+      id: "search.xOfYResults",
+      defaultMessage: "{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}",
+    }, { numResults: this.numResults, current: this.highlightedNum });
+    if (this.searchType === "basic") {
+      message = basicMessage;
+    }
+    else if (this.searchType === "find") {
+      message = findMessage;
+    }
+    return message;
+  }
+  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() {
+    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("");
+        });
+      });
+    }
+  }
+  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)
+  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();
+    if (this.value) {
+      this.announceChanges();
+    }
+  }
+  resetHighlightCountToStart() {
+    if (this.searchType === "find") {
+      this.highlightedNum = this.numResults ? 1 : 0;
+    }
+  }
+  announce(message) {
+    if (this.resultsLiveRegion.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  announceChanges() {
+    window.requestAnimationFrame(() => {
+      // requestAnimationFrame to allow all changes to occur before announcing results
+      let messageToAnnounce = this.resultCount;
+      // if a result is found, also include it after the liveregion message
+      if (this.searchType === "find" && this.highlightedName) {
+        messageToAnnounce += `, ${this.highlightedName}`;
+      }
+      this.announce(messageToAnnounce);
+    });
+  }
+  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.wmSearchBrowseResults.emit({ position: this.highlightedNum });
+      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });
+      this.announceChanges();
+    }
+  }
+  addFocusStyle() {
+    if (this.wrapperEl) {
+      this.wrapperEl.classList.add("focus");
+    }
+  }
+  removeFocusStyle() {
+    if (this.wrapperEl) {
+      this.wrapperEl.classList.remove("focus");
+    }
+  }
+  handleBlur() {
+    this.removeFocusStyle();
+    if (this.previousBlurredValue !== this.value) {
+      this.wmSearchValueChanged.emit({ value: this.value });
+    }
+    this.previousBlurredValue = this.value;
+  }
+  /**
+   * 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.resultCount), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: intl.globalMessages.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-type": "icononly", icon: "f045", tooltip: intl.globalMessages.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.handleBlur(), "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.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "numResults": ["resetHighlightCountToStart"]
+  }; }
+};
 Search.style = wmSearchCss;
 
 exports.wm_search = Search;

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

@@ -1 +1 @@
-{"file":"wm-search.entry.cjs.js","mappings":"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","names":["intl","h","Host"],"sources":["./src/components/wm-search/wm-search.scss?tag=wm-search&encapsulation=shadow","./src/components/wm-search/wm-search.tsx"],"sourcesContent":[":host,\r\nwm-search {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n  width: 100%;\r\n  font-size: rem-calc(14);\r\n\r\n  .wm-search-wrapper {\r\n    border-radius: 3px;\r\n    position: relative;\r\n    border: 1px solid rgba(35, 35, 35, 0.6);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    .search-icon {\r\n      @include mdi-icon;\r\n      font-size: rem-calc(17);\r\n      position: absolute;\r\n      left: rem-calc(7);\r\n    }\r\n\r\n    input {\r\n      border: none;\r\n      height: 40px;\r\n      padding: rem-calc(0 28);\r\n      background: transparent;\r\n      overflow: visible;\r\n      width: 100%;\r\n      flex: 1;\r\n      font-family: inherit;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n\r\n    &.focus {\r\n      box-shadow: 0 0 0 1px #20cbd4;\r\n      border-color: $border-focus-color;\r\n      border-radius: 3px;\r\n    }\r\n  }\r\n\r\n  .find {\r\n    min-height: 3rem;\r\n\r\n    input {\r\n      padding: 16px 8px 16px 28px;\r\n    }\r\n\r\n    .wm-find-elements {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      padding-right: 16px;\r\n      wm-button + wm-button {\r\n        margin-left: rem-calc(4);\r\n      }\r\n\r\n      .results {\r\n        margin-right: rem-calc(8);\r\n        font-style: italic;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n\r\n  .show-for-tabbers {\r\n    all: unset;\r\n    color: #575195;\r\n    text-decoration: none;\r\n    font-weight: 500;\r\n    font-size: rem-calc(14);\r\n    margin: 10px 0;\r\n\r\n    &:hover {\r\n      background: linear-gradient(#575195, #575195) no-repeat;\r\n      background-size: 100% 1px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n      background-size: 6px 3px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-search\",\r\n  styleUrl: \"wm-search.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Search {\r\n  @Element() el!: HTMLWmSearchElement;\r\n  @Prop({ mutable: true }) searchType: \"basic\" | \"find\" = \"basic\";\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Props required for both variants.\r\n   */\r\n  @Prop() placeholder: string = \"\";\r\n  @Prop() label: string = \"\";\r\n  @Prop({ mutable: true }) numResults: number = 0;\r\n\r\n  /**\r\n   * This exposes the input's value on the host component so that the app can access it.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\r\n\r\n  /**\r\n   * If the user is tabbing, the search and find variant will display a link to jump to a search result.\r\n   */\r\n  @State() isTabbing: boolean = false;\r\n\r\n  /**\r\n   * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\r\n   * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\r\n   */\r\n  @Prop() highlightedId: string = \"\";\r\n  @Prop() highlightedName: string | null = null;\r\n\r\n  /**\r\n   * 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.\r\n   * This number updates as the user browses using the buttons.\r\n   */\r\n  @State() highlightedNum: number = 0;\r\n\r\n  @State() previousBlurredValue: string = \"\";\r\n  @State() parentModal?: HTMLWmModalElement;\r\n\r\n  /**\r\n   * Live region announcement\r\n   */\r\n  @State() announcement: string = \"\";\r\n\r\n  get resultCount(): string {\r\n    let message = \"\";\r\n    const basicMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.resultsFound\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\r\n      },\r\n      { numResults: this.numResults }\r\n    );\r\n    const findMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.xOfYResults\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\r\n      },\r\n      { numResults: this.numResults, current: this.highlightedNum }\r\n    );\r\n\r\n    if (this.searchType === \"basic\") {\r\n      message = basicMessage;\r\n    } else if (this.searchType === \"find\") {\r\n      message = findMessage;\r\n    }\r\n\r\n    return message;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the buttons in the search-and-find variant are pressed.\r\n   */\r\n  @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\r\n  @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\r\n  @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\r\n\r\n  /**\r\n   * Element refs\r\n   */\r\n  private resultsLiveRegion!: HTMLElement;\r\n  private wrapperEl: HTMLElement | null = null;\r\n  private linkEl: HTMLElement | null = null;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n    this.linkEl && this.linkEl.classList.remove(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n    this.linkEl && this.linkEl.classList.add(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.placeholder === \"\") {\r\n      console.error(\"You must set the placeholder property for the wm-search component.\");\r\n    }\r\n\r\n    if (this.label === \"\") {\r\n      console.error(\"You must set the label property for the wm-search component.\");\r\n    }\r\n    this.hookToModal();\r\n  }\r\n\r\n  hookToModal() {\r\n    // if the search is in a modal we want to clear the input when the modal closes\r\n    let el = this.el as any;\r\n    while (!!el) {\r\n      if (el.tagName === \"WM-MODAL\") {\r\n        this.parentModal = el as HTMLWmModalElement;\r\n      }\r\n      el = el.parentElement as HTMLElement;\r\n    }\r\n\r\n    if (this.parentModal) {\r\n      const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\r\n      events.map((event) => {\r\n        this.parentModal!.addEventListener(event, () => {\r\n          this.updateValue(\"\");\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\r\n  @Method()\r\n  async updateValue(value: string) {\r\n    this.value = value;\r\n\r\n    //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\r\n    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\r\n    this.resetHighlightCountToStart();\r\n\r\n    if (this.value) {\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  @Watch(\"numResults\")\r\n  resetHighlightCountToStart(): void {\r\n    if (this.searchType === \"find\") {\r\n      this.highlightedNum = this.numResults ? 1 : 0;\r\n    }\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.resultsLiveRegion!.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  announceChanges() {\r\n    window.requestAnimationFrame(() => {\r\n      // requestAnimationFrame to allow all changes to occur before announcing results\r\n      let messageToAnnounce = this.resultCount;\r\n\r\n      // if a result is found, also include it after the liveregion message\r\n      if (this.searchType === \"find\" && this.highlightedName) {\r\n        messageToAnnounce += `, ${this.highlightedName}`;\r\n      }\r\n\r\n      this.announce(messageToAnnounce);\r\n    });\r\n  }\r\n\r\n  changeHighlightedNum(newNum: number): void {\r\n    if (this.numResults) {\r\n      if (newNum < 1) {\r\n        // we were on the first item, going down: go to last item\r\n        this.highlightedNum = this.numResults;\r\n      } else if (newNum > this.numResults) {\r\n        // we were on the last item, going up: go to first item\r\n        this.highlightedNum = 1;\r\n      } else {\r\n        this.highlightedNum = newNum;\r\n      }\r\n\r\n      this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\r\n      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  addFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.add(\"focus\");\r\n    }\r\n  }\r\n\r\n  removeFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.remove(\"focus\");\r\n    }\r\n  }\r\n\r\n  handleBlur() {\r\n    this.removeFocusStyle();\r\n    if (this.previousBlurredValue !== this.value) {\r\n      this.wmSearchValueChanged.emit({ value: this.value });\r\n    }\r\n    this.previousBlurredValue = this.value;\r\n  }\r\n\r\n  /**\r\n   * Functions that return elements specifically for search-and-find.\r\n   */\r\n  renderResultsAndBrowseButtons(): HTMLDivElement {\r\n    return (\r\n      <div class=\"wm-find-elements\">\r\n        <div id=\"results-display\" class=\"results\">\r\n          {this.resultCount}\r\n        </div>\r\n        <div class=\"wm-button-collection\">\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f05d\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.previous\",\r\n              description: \"button text\",\r\n              defaultMessage: \"previous\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.previousResult\",\r\n              defaultMessage: \"Press to hear previous matching result\",\r\n            })}\r\n          />\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f045\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.next\",\r\n              description: \"button text\",\r\n              defaultMessage: \"next\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.nextResult\",\r\n              defaultMessage: \"Press to hear next matching result\",\r\n            })}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderJumpToLink(): HTMLAnchorElement | null {\r\n    if (this.numResults && this.highlightedId) {\r\n      return (\r\n        <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"search.jumpToResult\",\r\n            defaultMessage: \"Jump to search result in list\",\r\n          })}\r\n        </a>\r\n      );\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n  /**\r\n   * End search and find render helpers\r\n   */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          id=\"wm-search-wrapper\"\r\n          class={`wm-search-wrapper ${this.searchType}`}\r\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n        >\r\n          <input\r\n            disabled={this.disabled}\r\n            id=\"wm-search-input\"\r\n            placeholder={this.placeholder}\r\n            aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\r\n              id: \"search.typeToFilterResults\",\r\n              defaultMessage: \"Type to filter the results\",\r\n            })}`}\r\n            onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\r\n            onFocus={() => this.addFocusStyle()}\r\n            onBlur={() => this.handleBlur()}\r\n            aria-autocomplete=\"none\"\r\n            autocomplete=\"off\"\r\n            value={this.value}\r\n          />\r\n          <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\r\n          {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\r\n          <div\r\n            id=\"wm-search-live\"\r\n            class=\"sr-only\"\r\n            aria-live=\"polite\"\r\n            aria-atomic=\"true\"\r\n            ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\r\n          >\r\n            {this.announcement}\r\n          </div>\r\n        </div>\r\n        {this.searchType === \"find\" && this.renderJumpToLink()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"wm-search.entry.cjs.js","mappings":"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","names":["intl","h","globalMessages","Host"],"sources":["./src/components/wm-search/wm-search.scss?tag=wm-search&encapsulation=shadow","./src/components/wm-search/wm-search.tsx"],"sourcesContent":[":host,\nwm-search {\n  * {\n    box-sizing: border-box;\n  }\n  width: 100%;\n  font-size: rem-calc(14);\n\n  .wm-search-wrapper {\n    border-radius: 3px;\n    position: relative;\n    border: 1px solid rgba(35, 35, 35, 0.6);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .search-icon {\n      @include mdi-icon;\n      font-size: rem-calc(17);\n      position: absolute;\n      left: rem-calc(7);\n    }\n\n    input {\n      border: none;\n      height: 40px;\n      padding: rem-calc(0 28);\n      background: transparent;\n      overflow: visible;\n      width: 100%;\n      flex: 1;\n      font-family: inherit;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    &.focus {\n      @include field-focus;\n    }\n  }\n\n  .find {\n    min-height: 3rem;\n\n    input {\n      padding: 16px 8px 16px 28px;\n    }\n\n    .wm-find-elements {\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      padding-right: 16px;\n      wm-button + wm-button {\n        margin-left: rem-calc(4);\n      }\n\n      .results {\n        margin-right: rem-calc(8);\n        font-style: italic;\n      }\n    }\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  .show-for-tabbers {\n    all: unset;\n    color: #575195;\n    text-decoration: none;\n    font-weight: 500;\n    font-size: rem-calc(14);\n    margin: 10px 0;\n\n    &:hover {\n      background: linear-gradient(#575195, #575195) no-repeat;\n      background-size: 100% 1px;\n      background-position: 0 1.2em;\n      padding-bottom: 0.2em;\n    }\n\n    &:focus {\n      outline: none;\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n      background-size: 6px 3px;\n      background-position: 0 1.2em;\n      padding-bottom: 0.2em;\n    }\n  }\n}\n","import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n  tag: \"wm-search\",\n  styleUrl: \"wm-search.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Search {\n  @Element() el!: HTMLWmSearchElement;\n  @Prop({ mutable: true }) searchType: \"basic\" | \"find\" = \"basic\";\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Props required for both variants.\n   */\n  @Prop() placeholder: string = \"\";\n  @Prop() label: string = \"\";\n  @Prop({ mutable: true }) numResults: number = 0;\n\n  /**\n   * This exposes the input's value on the host component so that the app can access it.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\n\n  /**\n   * If the user is tabbing, the search and find variant will display a link to jump to a search result.\n   */\n  @State() isTabbing: boolean = false;\n\n  /**\n   * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\n   * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\n   */\n  @Prop() highlightedId: string = \"\";\n  @Prop() highlightedName: string | null = null;\n\n  /**\n   * 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.\n   * This number updates as the user browses using the buttons.\n   */\n  @State() highlightedNum: number = 0;\n\n  @State() previousBlurredValue: string = \"\";\n  @State() parentModal?: HTMLWmModalElement;\n\n  /**\n   * Live region announcement\n   */\n  @State() announcement: string = \"\";\n\n  get resultCount(): string {\n    let message = \"\";\n    const basicMessage = intl.formatMessage(\n      {\n        id: \"search.resultsFound\",\n        defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\n      },\n      { numResults: this.numResults }\n    );\n    const findMessage = intl.formatMessage(\n      {\n        id: \"search.xOfYResults\",\n        defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\n      },\n      { numResults: this.numResults, current: this.highlightedNum }\n    );\n\n    if (this.searchType === \"basic\") {\n      message = basicMessage;\n    } else if (this.searchType === \"find\") {\n      message = findMessage;\n    }\n\n    return message;\n  }\n\n  /**\n   * Emitted when the buttons in the search-and-find variant are pressed.\n   */\n  @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\n  @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\n  @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\n\n  /**\n   * Element refs\n   */\n  private resultsLiveRegion!: HTMLElement;\n  private wrapperEl: HTMLElement | null = null;\n  private linkEl: HTMLElement | null = null;\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n    this.linkEl && this.linkEl.classList.remove(\"sr-only\");\n    this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n    this.linkEl && this.linkEl.classList.add(\"sr-only\");\n    this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\n  }\n\n  componentWillLoad() {\n    if (this.placeholder === \"\") {\n      console.error(\"You must set the placeholder property for the wm-search component.\");\n    }\n\n    if (this.label === \"\") {\n      console.error(\"You must set the label property for the wm-search component.\");\n    }\n    this.hookToModal();\n  }\n\n  hookToModal() {\n    // if the search is in a modal we want to clear the input when the modal closes\n    let el = this.el as any;\n    while (!!el) {\n      if (el.tagName === \"WM-MODAL\") {\n        this.parentModal = el as HTMLWmModalElement;\n      }\n      el = el.parentElement as HTMLElement;\n    }\n\n    if (this.parentModal) {\n      const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\n      events.map((event) => {\n        this.parentModal!.addEventListener(event, () => {\n          this.updateValue(\"\");\n        });\n      });\n    }\n  }\n\n  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\n  @Method()\n  async updateValue(value: string) {\n    this.value = value;\n\n    //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\n    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\n    this.resetHighlightCountToStart();\n\n    if (this.value) {\n      this.announceChanges();\n    }\n  }\n\n  @Watch(\"numResults\")\n  resetHighlightCountToStart(): void {\n    if (this.searchType === \"find\") {\n      this.highlightedNum = this.numResults ? 1 : 0;\n    }\n  }\n\n  announce(message: string) {\n    if (this.resultsLiveRegion!.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.announcement = message;\n  }\n\n  announceChanges() {\n    window.requestAnimationFrame(() => {\n      // requestAnimationFrame to allow all changes to occur before announcing results\n      let messageToAnnounce = this.resultCount;\n\n      // if a result is found, also include it after the liveregion message\n      if (this.searchType === \"find\" && this.highlightedName) {\n        messageToAnnounce += `, ${this.highlightedName}`;\n      }\n\n      this.announce(messageToAnnounce);\n    });\n  }\n\n  changeHighlightedNum(newNum: number): void {\n    if (this.numResults) {\n      if (newNum < 1) {\n        // we were on the first item, going down: go to last item\n        this.highlightedNum = this.numResults;\n      } else if (newNum > this.numResults) {\n        // we were on the last item, going up: go to first item\n        this.highlightedNum = 1;\n      } else {\n        this.highlightedNum = newNum;\n      }\n\n      this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\n      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\n      this.announceChanges();\n    }\n  }\n\n  addFocusStyle() {\n    if (this.wrapperEl) {\n      this.wrapperEl.classList.add(\"focus\");\n    }\n  }\n\n  removeFocusStyle() {\n    if (this.wrapperEl) {\n      this.wrapperEl.classList.remove(\"focus\");\n    }\n  }\n\n  handleBlur() {\n    this.removeFocusStyle();\n    if (this.previousBlurredValue !== this.value) {\n      this.wmSearchValueChanged.emit({ value: this.value });\n    }\n    this.previousBlurredValue = this.value;\n  }\n\n  /**\n   * Functions that return elements specifically for search-and-find.\n   */\n  renderResultsAndBrowseButtons(): HTMLDivElement {\n    return (\n      <div class=\"wm-find-elements\">\n        <div id=\"results-display\" class=\"results\">\n          {this.resultCount}\n        </div>\n        <div class=\"wm-button-collection\">\n          <wm-button\n            button-type=\"icononly\"\n            icon=\"f05d\"\n            tooltip={globalMessages.previous}\n            tooltip-position=\"bottom\"\n            onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\n            disabled={this.disabled || this.numResults < 2}\n            label-for-identical-buttons={intl.formatMessage({\n              id: \"search.previousResult\",\n              defaultMessage: \"Press to hear previous matching result\",\n            })}\n          />\n          <wm-button\n            button-type=\"icononly\"\n            icon=\"f045\"\n            tooltip={globalMessages.next}\n            tooltip-position=\"bottom\"\n            onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\n            disabled={this.disabled || this.numResults < 2}\n            label-for-identical-buttons={intl.formatMessage({\n              id: \"search.nextResult\",\n              defaultMessage: \"Press to hear next matching result\",\n            })}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  renderJumpToLink(): HTMLAnchorElement | null {\n    if (this.numResults && this.highlightedId) {\n      return (\n        <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\n          {intl.formatMessage({\n            id: \"search.jumpToResult\",\n            defaultMessage: \"Jump to search result in list\",\n          })}\n        </a>\n      );\n    } else {\n      return null;\n    }\n  }\n  /**\n   * End search and find render helpers\n   */\n\n  render() {\n    return (\n      <Host>\n        <div\n          id=\"wm-search-wrapper\"\n          class={`wm-search-wrapper ${this.searchType}`}\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\n        >\n          <input\n            disabled={this.disabled}\n            id=\"wm-search-input\"\n            placeholder={this.placeholder}\n            aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\n              id: \"search.typeToFilterResults\",\n              defaultMessage: \"Type to filter the results\",\n            })}`}\n            onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\n            onFocus={() => this.addFocusStyle()}\n            onBlur={() => this.handleBlur()}\n            aria-autocomplete=\"none\"\n            autocomplete=\"off\"\n            value={this.value}\n          />\n          <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\n          {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\n          <div\n            id=\"wm-search-live\"\n            class=\"sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\n          >\n            {this.announcement}\n          </div>\n        </div>\n        {this.searchType === \"find\" && this.renderJumpToLink()}\n      </Host>\n    );\n  }\n}\n"],"version":3}