@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -1,200 +1,200 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f164fbca.js';
-import { t as toBool, i as intl, a as handleDisabledAttribute } from './functions-d0e70094.js';
-import { g as globalMessages } from './intl-05c9e0c9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e11ea42.js';
+import { t as toBool, i as intl, a as handleDisabledAttribute } from './functions-5afd09f4.js';
+import { g as globalMessages } from './intl-e2da750a.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) {
-        registerInstance(this, hostRef);
-        this.wmSearchBrowseResults = createEvent(this, "wmSearchBrowseResults", 7);
-        this.wmSearchValueChanged = 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 toBool(this.disabled);
-    }
-    get resultCount() {
-        let message = "";
-        const basicMessage = intl.formatMessage({
-            id: "search.resultsFound",
-            defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
-        }, { numResults: this.numResults });
-        const findMessage = 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();
-        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() {
-        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);
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmSearchBrowseResults = createEvent(this, "wmSearchBrowseResults", 7);
+    this.wmSearchValueChanged = 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 toBool(this.disabled);
+  }
+  get resultCount() {
+    let message = "";
+    const basicMessage = intl.formatMessage({
+      id: "search.resultsFound",
+      defaultMessage: "{numResults, plural, =0 {No results} one {1 result} other {# results}} found",
+    }, { numResults: this.numResults });
+    const findMessage = 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();
+    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("");
         });
-    }
-    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 (h("div", { class: "wm-find-elements" }, h("div", { id: "results-display", class: "results" }, this.resultCount), h("div", { class: "wm-button-collection" }, h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: globalMessages.previous, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
-                id: "search.previousResult",
-                defaultMessage: "Press to hear previous matching result",
-            }) }), h("wm-button", { "button-type": "icononly", icon: "f045", tooltip: globalMessages.next, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
-                id: "search.nextResult",
-                defaultMessage: "Press to hear next matching result",
-            }) }))));
-    }
-    renderJumpToLink() {
-        if (this.numResults && this.highlightedId) {
-            return (h("a", { ref: (el) => (this.linkEl = el), href: `#${this.highlightedId}`, class: "sr-only" }, intl.formatMessage({
-                id: "search.jumpToResult",
-                defaultMessage: "Jump to search result in list",
-            })));
-        }
-        else {
-            return null;
-        }
-    }
-    /**
-     * End search and find render helpers
-     */
-    render() {
-        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}`, ref: (el) => (this.wrapperEl = el) }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${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 }), h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), 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 getElement(this); }
-    static get watchers() { return {
-        "numResults": ["handleNumResultsUpdate"],
-        "disabled": ["handleDisabledChange"]
-    }; }
+      });
+    }
+  }
+  // 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() {
+    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 (h("div", { class: "wm-find-elements" }, h("div", { id: "results-display", class: "results" }, this.resultCount), h("div", { class: "wm-button-collection" }, h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: globalMessages.previous, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+        id: "search.previousResult",
+        defaultMessage: "Press to hear previous matching result",
+      }) }), h("wm-button", { "button-type": "icononly", icon: "f045", tooltip: globalMessages.next, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+        id: "search.nextResult",
+        defaultMessage: "Press to hear next matching result",
+      }) }))));
+  }
+  renderJumpToLink() {
+    if (this.numResults && this.highlightedId) {
+      return (h("a", { ref: (el) => (this.linkEl = el), href: `#${this.highlightedId}`, class: "sr-only" }, intl.formatMessage({
+        id: "search.jumpToResult",
+        defaultMessage: "Jump to search result in list",
+      })));
+    }
+    else {
+      return null;
+    }
+  }
+  /**
+   * End search and find render helpers
+   */
+  render() {
+    return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}`, ref: (el) => (this.wrapperEl = el) }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${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 }), h("span", { class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), 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 getElement(this); }
+  static get watchers() { return {
+    "numResults": ["handleNumResultsUpdate"],
+    "disabled": ["handleDisabledChange"]
+  }; }
 };
 Search.style = wmSearchCss;