@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/collection/components/wm-search/wm-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-search.js","sourceRoot":"","sources":["../../../../src/components/wm-search/wm-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\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={intl.formatMessage({\n              id: \"global.previous\",\n              description: \"button text\",\n              defaultMessage: \"previous\",\n            })}\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={intl.formatMessage({\n              id: \"global.next\",\n              description: \"button text\",\n              defaultMessage: \"next\",\n            })}\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,"file":"wm-search.js","sourceRoot":"","sources":["../../../../src/components/wm-search/wm-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAO9C,MAAM,OAAO,MAAM;;IAgFT,cAAS,GAAuB,IAAI,CAAC;IACrC,WAAM,GAAuB,IAAI,CAAC;sBA/Ec,OAAO;oBAClB,KAAK;uBAKpB,EAAE;iBACR,EAAE;sBACoB,CAAC;iBAKS,EAAE;qBAK5B,KAAK;yBAMH,EAAE;2BACO,IAAI;0BAMX,CAAC;gCAEK,EAAE;;wBAMV,EAAE;;EAElC,IAAI,WAAW;IACb,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACrC;MACE,EAAE,EAAE,qBAAqB;MACzB,cAAc,EAAE,8EAA8E;KAC/F,EACD,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAChC,CAAC;IACF,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CACpC;MACE,EAAE,EAAE,oBAAoB;MACxB,cAAc,EAAE,uFAAuF;KACxG,EACD,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,CAC9D,CAAC;IAEF,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,EAAE;MAC/B,OAAO,GAAG,YAAY,CAAC;KACxB;SAAM,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;MACrC,OAAO,GAAG,WAAW,CAAC;KACvB;IAED,OAAO,OAAO,CAAC;EACjB,CAAC;EAiBD,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACvD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;EAC/D,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACpD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;EAClE,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,WAAW,KAAK,EAAE,EAAE;MAC3B,OAAO,CAAC,KAAK,CAAC,oEAAoE,CAAC,CAAC;KACrF;IAED,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACrB,OAAO,CAAC,KAAK,CAAC,8DAA8D,CAAC,CAAC;KAC/E;IACD,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,WAAW;IACT,+EAA+E;IAC/E,IAAI,EAAE,GAAG,IAAI,CAAC,EAAS,CAAC;IACxB,OAAO,CAAC,CAAC,EAAE,EAAE;MACX,IAAI,EAAE,CAAC,OAAO,KAAK,UAAU,EAAE;QAC7B,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC;OAC7C;MACD,EAAE,GAAG,EAAE,CAAC,aAA4B,CAAC;KACtC;IAED,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,MAAM,MAAM,GAAG,CAAC,kBAAkB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;MAClF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,IAAI,CAAC,WAAY,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE;UAC7C,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;MACL,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,0GAA0G;EAE1G,KAAK,CAAC,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IAEnB,kGAAkG;IAClG,0GAA0G;IAC1G,IAAI,CAAC,0BAA0B,EAAE,CAAC;IAElC,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;EACH,CAAC;EAGD,0BAA0B;IACxB,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,EAAE;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC/C;EACH,CAAC;EAED,QAAQ,CAAC,OAAe;IACtB,IAAI,IAAI,CAAC,iBAAkB,CAAC,WAAW,KAAK,OAAO,EAAE;MACnD,OAAO,IAAI,QAAQ,CAAC;KACrB;IACD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;EAC9B,CAAC;EAED,eAAe;IACb,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAChC,gFAAgF;MAChF,IAAI,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC;MAEzC,qEAAqE;MACrE,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE;QACtD,iBAAiB,IAAI,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;OAClD;MAED,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB,CAAC,MAAc;IACjC,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,MAAM,GAAG,CAAC,EAAE;QACd,yDAAyD;QACzD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC;OACvC;WAAM,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;QACnC,uDAAuD;QACvD,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;OACzB;WAAM;QACL,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;OAC9B;MAED,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;MACnE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;MACnE,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;EACH,CAAC;EAED,aAAa;IACX,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;KACvC;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;KAC1C;EACH,CAAC;EAED,UAAU;IACR,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC,KAAK,EAAE;MAC5C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KACvD;IACD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC;EACzC,CAAC;EAED;;KAEG;EACH,6BAA6B;IAC3B,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB;MAC3B,WAAK,EAAE,EAAC,iBAAiB,EAAC,KAAK,EAAC,SAAS,IACtC,IAAI,CAAC,WAAW,CACb;MACN,WAAK,KAAK,EAAC,sBAAsB;QAC/B,gCACc,UAAU,EACtB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC;YAC1B,EAAE,EAAE,iBAAiB;YACrB,WAAW,EAAE,aAAa;YAC1B,cAAc,EAAE,UAAU;WAC3B,CAAC,sBACe,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACjE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,iCACjB,IAAI,CAAC,aAAa,CAAC;YAC9C,EAAE,EAAE,uBAAuB;YAC3B,cAAc,EAAE,wCAAwC;WACzD,CAAC,GACF;QACF,gCACc,UAAU,EACtB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC;YAC1B,EAAE,EAAE,aAAa;YACjB,WAAW,EAAE,aAAa;YAC1B,cAAc,EAAE,MAAM;WACvB,CAAC,sBACe,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACjE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,iCACjB,IAAI,CAAC,aAAa,CAAC;YAC9C,EAAE,EAAE,mBAAmB;YACvB,cAAc,EAAE,oCAAoC;WACrD,CAAC,GACF,CACE,CACF,CACP,CAAC;EACJ,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,EAAE;MACzC,OAAO,CACL,SAAG,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAC,SAAS,IACrG,IAAI,CAAC,aAAa,CAAC;QAClB,EAAE,EAAE,qBAAqB;QACzB,cAAc,EAAE,+BAA+B;OAChD,CAAC,CACA,CACL,CAAC;KACH;SAAM;MACL,OAAO,IAAI,CAAC;KACb;EACH,CAAC;EACD;;KAEG;EAEH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAE,qBAAqB,IAAI,CAAC,UAAU,EAAE,EAC7C,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC;QAEpD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAC,iBAAiB,EACpB,WAAW,EAAE,IAAI,CAAC,WAAW,gBACjB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;YACtE,EAAE,EAAE,4BAA4B;YAChC,cAAc,EAAE,4BAA4B;WAC7C,CAAC,EAAE,EACJ,OAAO,EAAE,CAAC,EAAS,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAE,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC,EAC/E,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,uBACb,MAAM,EACxB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;QACF,YAAM,KAAK,EAAC,iBAAiB,IAAE,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAQ;QAC9E,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,IAAI,CAAC,6BAA6B,EAAE;QACnE,WACE,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,SAAS,eACL,QAAQ,iBACN,MAAM,EAClB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC,IAExD,IAAI,CAAC,YAAY,CACd,CACF;MACL,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,IAAI,CAAC,gBAAgB,EAAE,CACjD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}