@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -2,203 +2,203 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
-const intl = require('./intl-fa3bb4ae.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
+const intl = require('./intl-3fafc6d1.js');
 
 const wmSearchCss = ":host{--wmcolor-search-background:var(--wmcolor-input-background);--wmcolor-search-border:var(--wmcolor-input-border);--wmcolor-search-jump-text-focus:var(--wmcolor-interactive-focus-textonly);--wmcolor-search-jump-text:var(--wmcolor-button-text-textonly);width:100%;font-size:0.875rem}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wm-search-wrapper{border-radius:3px;position:relative;border:1px solid var(--wmcolor-search-border);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{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{border:none;height:40px;padding:0 1.75rem;background:var(--wmcolor-search-background);overflow:visible;width:100%;-ms-flex:1;flex:1;font-family:inherit}:host .wm-search-wrapper input:focus{outline:none}:host .wm-search-wrapper.focus{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}:host .find{min-height:3rem}:host .find input{padding:16px 8px 16px 28px}:host .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{margin-left:0.25rem}:host .find .wm-find-elements .results{margin-right:0.5rem;font-style:italic}:host .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{all:unset;color:var(--wmcolor-search-jump-text);text-decoration:none;font-weight:500;font-size:0.875rem;margin:10px 0}:host .show-for-tabbers:hover{background:-webkit-gradient(linear, left top, left bottom, from(var(--wmcolor-search-jump-text)), to(var(--wmcolor-search-jump-text))) no-repeat;background:linear-gradient(var(--wmcolor-search-jump-text), var(--wmcolor-search-jump-text)) no-repeat;background-size:100% 1px;background-position:0 1.2em;padding-bottom:0.2em}:host .show-for-tabbers:focus{outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, var(--wmcolor-search-jump-text-focus)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-search-jump-text-focus) 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.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 isDisabled() {
-    // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-    return functions.toBool(this.disabled);
-  }
-  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();
-    functions.handleDisabledAttribute(this.el, this.isDisabled);
-  }
-  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 = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
-      events.map((event) => {
-        this.parentModal.addEventListener(event, () => {
-          this.updateValue("");
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.wmSearchBrowseResults = index.createEvent(this, "wmSearchBrowseResults", 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 isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return functions.toBool(this.disabled);
+    }
+    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();
+        functions.handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    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 = ["wmModalCloseTriggered", "wmModalPrimaryTriggered", "wmModalSecondaryTriggered"];
+            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();
+        }
+    }
+    handleDisabledChange() {
+        functions.handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    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);
         });
-      });
-    }
-  }
-  // 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();
-    }
-  }
-  handleDisabledChange() {
-    functions.handleDisabledAttribute(this.el, this.isDisabled);
-  }
-  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.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.isDisabled || 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.isDisabled || 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.isDisabled, 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"],
-    "disabled": ["handleDisabledChange"]
-  }; }
+    }
+    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.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.isDisabled || 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.isDisabled || 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.isDisabled, 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"],
+        "disabled": ["handleDisabledChange"]
+    }; }
 };
 Search.style = wmSearchCss;