@watermarkinsights/ripple 3.27.1 → 3.28.0

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

@@ -3,193 +3,196 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9f0e6656.js');
-const functions = require('./functions-85c3c557.js');
-const intl = require('./intl-1c36fe38.js');
+const functions = require('./functions-9807717e.js');
+const intl = require('./intl-526c75ec.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.12rem;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: 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"]
-  }; }
-};
+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();
+  }
+  handleNumResultsUpdate() {
+    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": ["handleNumResultsUpdate"]
+  }; }
+};
 Search.style = wmSearchCss;
 
 exports.wm_search = Search;