@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/esm-es5/wm-pagination.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmPaginationCss","Pagination","this","totalPages","debouncedResize","debounce","_this","isLargeViewport","window","innerWidth","getMiddlePageNums","coreBtns","currentPage","undefined","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","maintainFocusOnNumberChange","el","requestAnimationFrame","shadowRoot","querySelector","focus","concat","handleResize","calculateTotalPages","Math","ceil","totalItems","itemsPerPage","componentWillLoad","Error","document","body","classList","contains","getElementById","updatePageDisplayed","pageNum","value","wmPaginationPageClicked","emit","pageClicked","srAnnouncement","getCurrentPagesInView","displayShortPagination","pages","i","push","displayPageNumber","displayLongPagination","view","__spreadArray","displayEllipsis","map","page","h","id","class","onClick","end","begin","renderLarge","disabled","renderSmall","width","height","xmlns","d","render"],"sources":["src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\nnav .smallscreen {\n  margin-bottom: rem-calc(10);\n  @include displayFlex();\n  @include alignItems(center);\n  @include justifyContent(flex-end);\n  @include type-level-4;\n\n  .pageview {\n    @include type-level-4;\n    margin: rem-calc(0 10);\n  }\n\n  .paginationbtn {\n    position: relative;\n    @include box-shadow(none); // fix for Edge\n    @include transition(none);\n    border: none;\n    color: $button-default-text;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    height: rem-calc(40);\n    width: rem-calc(40);\n    font-family: inherit;\n    letter-spacing: 0.3px;\n    font-size: rem-calc(14);\n    font-weight: 500;\n    cursor: pointer;\n    text-transform: none; //For Edge\n\n    svg * {\n      fill: #565397;\n    }\n\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      outline: none;\n    }\n\n    &[disabled] {\n      color: #9f9f9f;\n      pointer-events: none;\n      svg * {\n        fill: #9f9f9f;\n      }\n    }\n  }\n\n  .previousbtn {\n    margin-right: rem-calc(10);\n    width: auto !important;\n  }\n\n  .nextbtn {\n    margin-left: rem-calc(10);\n    margin-right: 0;\n    width: auto !important;\n  }\n\n  .previousbtn,\n  .nextbtn {\n    @include transition(none);\n  }\n\n  .ellipsis {\n    display: inline-block;\n    width: rem-calc(40);\n    text-align: center;\n  }\n\n  .pagebtncontainer {\n    &.user-is-tabbing {\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\n        @include box-shadow(none); // fix for Edge\n\n        &:before {\n          position: absolute;\n          content: \"\";\n          height: auto;\n          width: 16px;\n          top: 0;\n          bottom: 0;\n          left: 12px;\n          right: 0;\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n          background-size: 6px 2px;\n          background-position: 0 2em;\n          border-radius: 0;\n          line-height: normal;\n        }\n\n        &.previousbtn:focus:before {\n          left: 0 !important;\n        }\n\n        &.nextbtn:focus:before {\n          left: 0 !important;\n        }\n      }\n\n      [aria-current=\"page\"]:focus {\n        @include focus-style;\n      }\n    }\n  }\n}\n\nnav .largescreen {\n  & .user-is-tabbing {\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\n      // to make focus indicator as wide as text \"previous\" and \"next\"\n      &.previousbtn:focus:before {\n        width: 56px !important;\n      }\n      &.nextbtn:focus:before {\n        width: 32px !important;\n      }\n    }\n  }\n  .paginationbtn {\n    &[aria-current=\"page\"] {\n      @include border-radius(50%);\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\n      background-color: $button-primary-background;\n      color: $button-primary-text;\n\n      &:hover {\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\n        background: mix(black, $button-primary-background, 10%);\n      }\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\nimport { debounce } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-pagination\",\n  styleUrl: \"wm-pagination.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Pagination {\n  @Element() el!: any;\n\n  @Prop() currentPage: number = 1;\n  @Prop() totalItems?: number = undefined;\n  @Prop() itemsPerPage?: number = undefined;\n  @Prop() value = 1;\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\n  @State() isTabbing: boolean = false;\n  @State() srAnnouncement: string = \"\";\n\n  private totalPages: number = 0;\n\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\n  @Event() focusCurrentPage!: EventEmitter;\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\n    window.requestAnimationFrame(() => {\n      switch (el) {\n        case \"previous\":\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\n          break;\n        case \"next\":\n          this.currentPage === this.totalPages &&\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\n          break;\n        case \"prev-arrow\":\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\n          break;\n        case \"next-arrow\":\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\n          break;\n        case \"page\":\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\n        default:\n          return;\n      }\n    });\n  }\n\n  debouncedResize = debounce(() => {\n    this.isLargeViewport = window.innerWidth > 600;\n  }, 250);\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    this.debouncedResize();\n  }\n\n  @Watch(\"totalItems\")\n  @Watch(\"itemsPerPage\")\n  calculateTotalPages() {\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\n  }\n\n  componentWillLoad() {\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\n      throw new Error(\"Please check the required attributes\");\n    }\n\n    this.calculateTotalPages();\n\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\n      if (this.isLargeViewport) {\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\n      } else {\n        this.currentPage === 1\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\n      }\n    };\n  }\n\n  updatePageDisplayed(pageNum: any) {\n    this.value = pageNum;\n    this.wmPaginationPageClicked.emit();\n    this.pageClicked.emit(); // deprecated\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\n  }\n\n  displayShortPagination() {\n    let pages = [];\n    for (let i = 1; i <= this.totalPages; i++) {\n      pages.push(this.displayPageNumber(i));\n    }\n    return pages;\n  }\n\n  displayLongPagination() {\n    let view = [\n      this.displayPageNumber(1),\n      this.currentPage > 3 && this.displayEllipsis(),\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\n      this.displayPageNumber(this.totalPages),\n    ];\n    return view;\n  }\n\n  displayPageNumber(pageNum: number) {\n    return (\n      <button\n        id={`wm-${pageNum}`}\n        class=\"paginationbtn\"\n        onClick={() => {\n          this.currentPage = pageNum;\n          this.updatePageDisplayed(pageNum);\n          this.maintainFocusOnNumberChange(\"page\");\n        }}\n        value={pageNum}\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\n      >\n        {pageNum}\n      </button>\n    );\n  }\n\n  displayEllipsis() {\n    return <span class=\"ellipsis\">...</span>;\n  }\n\n  getMiddlePageNums = () => {\n    let coreBtns;\n    // if pg is 1, 2 or 3\n    if (this.currentPage < 4) {\n      coreBtns = [2, 3, 4];\n    } else if (this.currentPage > this.totalPages - 3) {\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\n    } else {\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\n    }\n    return coreBtns;\n  };\n\n  // displayPageView = () => {\n  //   // let end = this.itemsPerPage! * this.currentPage;\n  //   // const begin = end - this.itemsPerPage! + 1;\n  //   // if (end > this.totalItems!) {\n  //   //   end = this.totalItems!;\n  //   // }\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\n  // };\n\n  getCurrentPagesInView() {\n    let end = this.itemsPerPage! * this.currentPage;\n    const begin = end - this.itemsPerPage! + 1;\n    if (end > this.totalItems!) {\n      end = this.totalItems!;\n    }\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\n  }\n\n  renderLarge() {\n    return (\n      <div class=\"largescreen\">\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n          <button\n            id=\"previous\"\n            class=\"paginationbtn previousbtn\"\n            onClick={() => {\n              this.currentPage = this.currentPage - 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"previous\");\n            }}\n            disabled={this.currentPage === 1}\n            aria-label=\"Go to previous page\"\n            aria-controls=\"status\"\n          >\n            Previous\n          </button>\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\n          <button\n            id=\"next\"\n            class=\"paginationbtn nextbtn\"\n            onClick={() => {\n              this.currentPage = this.currentPage + 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"next\");\n            }}\n            disabled={this.currentPage === this.totalPages}\n            aria-label=\"Go to next page\"\n            aria-controls=\"status\"\n          >\n            Next\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  renderSmall() {\n    return (\n      <div class=\"smallscreen\">\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n          <button\n            id={`wm-1-arw`}\n            class=\"paginationbtn\"\n            onClick={() => {\n              this.currentPage = 1;\n              this.updatePageDisplayed(1);\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\n            }}\n            value={1}\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\n            aria-label={`Go to page 1`}\n            aria-controls=\"status\"\n            disabled={this.currentPage === 1}\n          >\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\n            </svg>\n          </button>\n          <button\n            id=\"previous-arw\"\n            class=\"paginationbtn previousbtn\"\n            onClick={() => {\n              this.currentPage -= 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\n            }}\n            disabled={this.currentPage === 1}\n            aria-label=\"Go to previous page\"\n          >\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\n            </svg>\n          </button>\n          Page {this.currentPage} of {this.totalPages}\n          <button\n            id=\"next-arw\"\n            class=\"paginationbtn nextbtn\"\n            onClick={() => {\n              this.currentPage += 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"next-arrow\");\n            }}\n            disabled={this.currentPage === this.totalPages}\n            aria-label=\"Go to next page\"\n          >\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\n            </svg>\n          </button>\n          <button\n            id={`wm-${this.totalPages}-arw`}\n            class=\"paginationbtn\"\n            onClick={() => {\n              this.currentPage = this.totalPages;\n              this.updatePageDisplayed(this.totalPages);\n              this.maintainFocusOnNumberChange(\"next-arrow\");\n            }}\n            value={this.totalPages}\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\n            aria-label={`Go to last page, page ${this.totalPages}`}\n            aria-controls=\"status\"\n            disabled={this.currentPage === this.totalPages}\n          >\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      // do not render the component if there's only one page\n      this.totalItems! > this.itemsPerPage! && (\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\n            {this.srAnnouncement}\n          </div>\n        </nav>\n      )\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["wmPaginationCss","Pagination","this","totalPages","debouncedResize","debounce","_this","isLargeViewport","window","innerWidth","getMiddlePageNums","coreBtns","currentPage","undefined","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","maintainFocusOnNumberChange","el","requestAnimationFrame","shadowRoot","querySelector","focus","concat","handleResize","calculateTotalPages","Math","ceil","totalItems","itemsPerPage","componentWillLoad","Error","document","body","classList","contains","getElementById","updatePageDisplayed","pageNum","value","wmPaginationPageClicked","emit","pageClicked","srAnnouncement","getCurrentPagesInView","displayShortPagination","pages","i","push","displayPageNumber","displayLongPagination","view","__spreadArray","displayEllipsis","map","page","h","id","class","onClick","end","begin","renderLarge","disabled","renderSmall","width","height","xmlns","d","render"],"sources":["src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\r\nnav .smallscreen {\r\n  margin-bottom: rem-calc(10);\r\n  @include displayFlex();\r\n  @include alignItems(center);\r\n  @include justifyContent(flex-end);\r\n  @include type-level-4;\r\n\r\n  .pageview {\r\n    @include type-level-4;\r\n    margin: rem-calc(0 10);\r\n  }\r\n\r\n  .paginationbtn {\r\n    position: relative;\r\n    @include box-shadow(none); // fix for Edge\r\n    @include transition(none);\r\n    border: none;\r\n    color: $button-default-text;\r\n    background-color: transparent;\r\n    margin: 0;\r\n    padding: 0;\r\n    height: rem-calc(40);\r\n    width: rem-calc(40);\r\n    font-family: inherit;\r\n    letter-spacing: 0.3px;\r\n    font-size: rem-calc(14);\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    text-transform: none; //For Edge\r\n\r\n    svg * {\r\n      fill: #565397;\r\n    }\r\n\r\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &::-moz-focus-inner {\r\n      border: 0;\r\n      outline: none;\r\n    }\r\n\r\n    &[disabled] {\r\n      color: #9f9f9f;\r\n      pointer-events: none;\r\n      svg * {\r\n        fill: #9f9f9f;\r\n      }\r\n    }\r\n  }\r\n\r\n  .previousbtn {\r\n    margin-right: rem-calc(10);\r\n    width: auto !important;\r\n  }\r\n\r\n  .nextbtn {\r\n    margin-left: rem-calc(10);\r\n    margin-right: 0;\r\n    width: auto !important;\r\n  }\r\n\r\n  .previousbtn,\r\n  .nextbtn {\r\n    @include transition(none);\r\n  }\r\n\r\n  .ellipsis {\r\n    display: inline-block;\r\n    width: rem-calc(40);\r\n    text-align: center;\r\n  }\r\n\r\n  .pagebtncontainer {\r\n    &.user-is-tabbing {\r\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n        @include box-shadow(none); // fix for Edge\r\n\r\n        &:before {\r\n          position: absolute;\r\n          content: \"\";\r\n          height: auto;\r\n          width: 16px;\r\n          top: 0;\r\n          bottom: 0;\r\n          left: 12px;\r\n          right: 0;\r\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n          background-size: 6px 2px;\r\n          background-position: 0 2em;\r\n          border-radius: 0;\r\n          line-height: normal;\r\n        }\r\n\r\n        &.previousbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n\r\n        &.nextbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n      }\r\n\r\n      [aria-current=\"page\"]:focus {\r\n        @include focus-style;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nnav .largescreen {\r\n  & .user-is-tabbing {\r\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n      // to make focus indicator as wide as text \"previous\" and \"next\"\r\n      &.previousbtn:focus:before {\r\n        width: 56px !important;\r\n      }\r\n      &.nextbtn:focus:before {\r\n        width: 32px !important;\r\n      }\r\n    }\r\n  }\r\n  .paginationbtn {\r\n    &[aria-current=\"page\"] {\r\n      @include border-radius(50%);\r\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n      background-color: $button-primary-background;\r\n      color: $button-primary-text;\r\n\r\n      &:hover {\r\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n        background: mix(black, $button-primary-background, 10%);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\r\nimport { debounce } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-pagination\",\r\n  styleUrl: \"wm-pagination.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Pagination {\r\n  @Element() el!: any;\r\n\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalItems?: number = undefined;\r\n  @Prop() itemsPerPage?: number = undefined;\r\n  @Prop() value = 1;\r\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\r\n  @State() isTabbing: boolean = false;\r\n  @State() srAnnouncement: string = \"\";\r\n\r\n  private totalPages: number = 0;\r\n\r\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\r\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\r\n  @Event() focusCurrentPage!: EventEmitter;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\r\n    window.requestAnimationFrame(() => {\r\n      switch (el) {\r\n        case \"previous\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\r\n          break;\r\n        case \"next\":\r\n          this.currentPage === this.totalPages &&\r\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\r\n          break;\r\n        case \"prev-arrow\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\r\n          break;\r\n        case \"next-arrow\":\r\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\r\n          break;\r\n        case \"page\":\r\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\r\n        default:\r\n          return;\r\n      }\r\n    });\r\n  }\r\n\r\n  debouncedResize = debounce(() => {\r\n    this.isLargeViewport = window.innerWidth > 600;\r\n  }, 250);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleResize() {\r\n    this.debouncedResize();\r\n  }\r\n\r\n  @Watch(\"totalItems\")\r\n  @Watch(\"itemsPerPage\")\r\n  calculateTotalPages() {\r\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\r\n      throw new Error(\"Please check the required attributes\");\r\n    }\r\n\r\n    this.calculateTotalPages();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\r\n      if (this.isLargeViewport) {\r\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\r\n      } else {\r\n        this.currentPage === 1\r\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\r\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\r\n      }\r\n    };\r\n  }\r\n\r\n  updatePageDisplayed(pageNum: any) {\r\n    this.value = pageNum;\r\n    this.wmPaginationPageClicked.emit();\r\n    this.pageClicked.emit(); // deprecated\r\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\r\n  }\r\n\r\n  displayShortPagination() {\r\n    let pages = [];\r\n    for (let i = 1; i <= this.totalPages; i++) {\r\n      pages.push(this.displayPageNumber(i));\r\n    }\r\n    return pages;\r\n  }\r\n\r\n  displayLongPagination() {\r\n    let view = [\r\n      this.displayPageNumber(1),\r\n      this.currentPage > 3 && this.displayEllipsis(),\r\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\r\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\r\n      this.displayPageNumber(this.totalPages),\r\n    ];\r\n    return view;\r\n  }\r\n\r\n  displayPageNumber(pageNum: number) {\r\n    return (\r\n      <button\r\n        id={`wm-${pageNum}`}\r\n        class=\"paginationbtn\"\r\n        onClick={() => {\r\n          this.currentPage = pageNum;\r\n          this.updatePageDisplayed(pageNum);\r\n          this.maintainFocusOnNumberChange(\"page\");\r\n        }}\r\n        value={pageNum}\r\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\r\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\r\n      >\r\n        {pageNum}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  displayEllipsis() {\r\n    return <span class=\"ellipsis\">...</span>;\r\n  }\r\n\r\n  getMiddlePageNums = () => {\r\n    let coreBtns;\r\n    // if pg is 1, 2 or 3\r\n    if (this.currentPage < 4) {\r\n      coreBtns = [2, 3, 4];\r\n    } else if (this.currentPage > this.totalPages - 3) {\r\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\r\n    } else {\r\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\r\n    }\r\n    return coreBtns;\r\n  };\r\n\r\n  // displayPageView = () => {\r\n  //   // let end = this.itemsPerPage! * this.currentPage;\r\n  //   // const begin = end - this.itemsPerPage! + 1;\r\n  //   // if (end > this.totalItems!) {\r\n  //   //   end = this.totalItems!;\r\n  //   // }\r\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\r\n  // };\r\n\r\n  getCurrentPagesInView() {\r\n    let end = this.itemsPerPage! * this.currentPage;\r\n    const begin = end - this.itemsPerPage! + 1;\r\n    if (end > this.totalItems!) {\r\n      end = this.totalItems!;\r\n    }\r\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\r\n  }\r\n\r\n  renderLarge() {\r\n    return (\r\n      <div class=\"largescreen\">\r\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id=\"previous\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage - 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"previous\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Previous\r\n          </button>\r\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\r\n          <button\r\n            id=\"next\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage + 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Next\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderSmall() {\r\n    return (\r\n      <div class=\"smallscreen\">\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id={`wm-1-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = 1;\r\n              this.updatePageDisplayed(1);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            value={1}\r\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\r\n            aria-label={`Go to page 1`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === 1}\r\n          >\r\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id=\"previous-arw\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage -= 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          Page {this.currentPage} of {this.totalPages}\r\n          <button\r\n            id=\"next-arw\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage += 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id={`wm-${this.totalPages}-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.totalPages;\r\n              this.updatePageDisplayed(this.totalPages);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            value={this.totalPages}\r\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\r\n            aria-label={`Go to last page, page ${this.totalPages}`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === this.totalPages}\r\n          >\r\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // do not render the component if there's only one page\r\n      this.totalItems! > this.itemsPerPage! && (\r\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\r\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\r\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\r\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\r\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\r\n            {this.srAnnouncement}\r\n          </div>\r\n        </nav>\r\n      )\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/esm-es5/wm-progress-indicator_3.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,r,o,t){function n(e){return e instanceof o?e:new o((function(r){r(e)}))}return new(o||(o=Promise))((function(o,p){function a(e){try{i(t.next(e))}catch(e){p(e)}}function s(e){try{i(t["throw"](e))}catch(e){p(e)}}function i(e){e.done?o(e.value):n(e.value).then(a,s)}i((t=t.apply(e,r||[])).next())}))};var __generator=this&&this.__generator||function(e,r){var o={label:0,sent:function(){if(p[0]&1)throw p[1];return p[1]},trys:[],ops:[]},t,n,p,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(r){return i([e,r])}}function i(s){if(t)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(o=0)),o)try{if(t=1,n&&(p=s[0]&2?n["return"]:s[0]?n["throw"]||((p=n["return"])&&p.call(n),0):n.next)&&!(p=p.call(n,s[1])).done)return p;if(n=0,p)s=[s[0]&2,p.value];switch(s[0]){case 0:case 1:p=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;n=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(p=o.trys,p=p.length>0&&p[p.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!p||s[1]>p[0]&&s[1]<p[3])){o.label=s[1];break}if(s[0]===6&&o.label<p[1]){o.label=p[1];p=s;break}if(p&&o.label<p[2]){o.label=p[2];o.ops.push(s);break}if(p[2])o.ops.pop();o.trys.pop();continue}s=r.call(e,o)}catch(e){s=[6,e];n=0}finally{t=p=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,f as forceUpdate,h,H as Host,g as getElement,c as createEvent}from"./index-84a6ae22.js";import{g as generateId,i as intl,d as debounce,q as csvToArray}from"./functions-c58046f2.js";import{a as allChartsDetails,h as handleChartKeydown,g as getDetails,r as renderStackedBar,d as renderDoughnut,e as renderInstructionsText,f as renderLegend,i as renderCompletionMessage,k as exitChart,l as renderLegendItem}from"./chartFunctions-e22110b8.js";var wmProgressIndicatorCss=":host,wm-progress-indicator{display:block}:host .component-wrapper,wm-progress-indicator .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-progress-indicator .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-progress-indicator .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-progress-indicator .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-progress-indicator .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-progress-indicator .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-progress-indicator .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-progress-indicator .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-progress-indicator .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-progress-indicator .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-progress-indicator .component-wrapper path:active,:host .component-wrapper path:hover,wm-progress-indicator .component-wrapper path:hover,:host .component-wrapper path:focus,wm-progress-indicator .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-progress-indicator .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-progress-indicator .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-progress-indicator .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-progress-indicator .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-progress-indicator .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-progress-indicator .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-progress-indicator .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-progress-indicator .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-progress-indicator .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-progress-indicator .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-progress-indicator .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-progress-indicator .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-progress-indicator .component-wrapper.doughnut3 .label-text{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 .component-wrapper.doughnut0,wm-progress-indicator .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-progress-indicator .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-progress-indicator .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-progress-indicator .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-progress-indicator .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-progress-indicator .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-progress-indicator .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-progress-indicator .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-progress-indicator .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-progress-indicator .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-progress-indicator .component-wrapper.bar2,:host .component-wrapper.bar3,wm-progress-indicator .component-wrapper.bar3,:host .component-wrapper.bar4,wm-progress-indicator .component-wrapper.bar4,:host .component-wrapper.bar5,wm-progress-indicator .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-progress-indicator .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-progress-indicator .component-wrapper.bar6,:host .component-wrapper.bar7,wm-progress-indicator .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-progress-indicator .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-progress-indicator .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-progress-indicator .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-progress-indicator .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-progress-indicator .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-progress-indicator .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-progress-indicator .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-progress-indicator .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-progress-indicator .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-progress-indicator .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-progress-indicator .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-progress-indicator .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-progress-indicator .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-progress-indicator .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-progress-indicator .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-progress-indicator .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-progress-indicator .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-progress-indicator .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-progress-indicator .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-progress-indicator .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-progress-indicator .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-progress-indicator .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-progress-indicator .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-progress-indicator .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-progress-indicator .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-progress-indicator .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-progress-indicator .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-progress-indicator .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-progress-indicator .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-progress-indicator .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-progress-indicator .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-progress-indicator .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-progress-indicator .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-progress-indicator #chart-instructions{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 .component-wrapper .legend-wrapper,wm-progress-indicator .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-progress-indicator .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";var ProgressIndicator=function(){function e(e){registerInstance(this,e);this.uid=generateId();this.slicesDetails=[];this.barLabelsWidth=this.el.parentElement.barLabelsWidth;this.label=undefined;this.subinfo=undefined;this.completionMessage=undefined;this.showLegend=true;this.isTabbing=false;this.mode=undefined;this.userIsNavigating=false}Object.defineProperty(e.prototype,"popoverEl",{get:function(){return this.el.shadowRoot.querySelector("priv-chart-popover")},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"sliceEls",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll(".segment"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"chartDetails",{get:function(){return this.mode?allChartsDetails[this.mode]:undefined},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"ariaLabelText",{get:function(){var e="".concat(this.label);if(this.subinfo){e+=" ".concat(this.subinfo)}return e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"chartRoleDescription",{get:function(){return intl.formatMessage({id:"chart.roleDescription",defaultMessage:"Interactive chart",description:"For screen readers only, a description clarifying the role of the chart widget"})},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKeydown=function(e){handleChartKeydown.call(this,e)};e.prototype.componentWillLoad=function(){var e=this;if(!this.label){console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.")}if(this.el.children.length!==2){console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.")}this.el.parentElement.addEventListener("wmProgressMonitorModeChange",(function(r){return e.mode=r.detail}))};e.prototype.handleSliceUpdate=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,getDetails.call(this,this.mode)];case 1:e.sent();forceUpdate(this.el);return[2]}}))}))};e.prototype.handleModeUpdate=function(){if(this.mode){getDetails.call(this,this.mode)}};e.prototype.renderBarOrDoughnut=function(){if(this.total>0&&this.mode==="bar"){return renderStackedBar.call(this,this.mode)}else{return renderDoughnut.call(this,this.mode)}};e.prototype.render=function(){var e=this;return h(Host,{onBlur:function(){return exitChart.call(e)}},h("div",{ref:function(r){return e.componentWrapperEl=r},class:"component-wrapper ".concat(this.mode," ").concat(this.isTabbing&&!this.userIsNavigating?"user-is-tabbing":""),role:"application","aria-label":this.ariaLabelText,tabindex:"0","aria-roledescription":this.chartRoleDescription,"aria-describedby":"chart-instructions"},h("label",{id:"label-".concat(this.uid),class:"label ".concat(this.barLabelsWidth&&this.mode==="bar"?"custom-width":""),style:{"--custom-label-width":this.barLabelsWidth},htmlFor:"graphic-".concat(this.uid)},h("span",{class:"label-text"},this.label),this.subinfo?h("span",{class:"subinfo"},this.subinfo):""),this.mode&&this.renderBarOrDoughnut(),this.mode==="doughnut"?renderLegend.call(this,this.mode):"",h("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":""}),this.mode==="doughnut"?renderCompletionMessage.call(this):""),renderInstructionsText())};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{mode:["handleModeUpdate"]}},enumerable:false,configurable:true});return e}();ProgressIndicator.style=wmProgressIndicatorCss;var wmProgressMonitorCss=":host .legend-wrapper,wm-progress-monitor .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .legend-wrapper .legend,wm-progress-monitor .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .legend-wrapper .legend.bar1,wm-progress-monitor .legend-wrapper .legend.bar1,:host .legend-wrapper .legend.bar6,wm-progress-monitor .legend-wrapper .legend.bar6{display:none}:host .legend-wrapper .legend.--top,wm-progress-monitor .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .legend-wrapper .legend.--top .legend-item,wm-progress-monitor .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .legend-wrapper .legend.--top .legend-color,wm-progress-monitor .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .legend-wrapper .legend.--bottom,wm-progress-monitor .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .legend-wrapper .legend.--bottom .legend-item,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .legend-wrapper .legend.--bottom .legend-color,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .legend-wrapper .legend .legend-item,wm-progress-monitor .legend-wrapper .legend .legend-item{position:relative}:host .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-monitor .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .legend-wrapper .legend .legend-text,wm-progress-monitor .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .legend-wrapper .legend .legend-color,wm-progress-monitor .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .legend-wrapper .legend.bar3,wm-progress-monitor .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host,wm-progress-monitor{display:-ms-flexbox;display:flex}:host .legend-wrapper,wm-progress-monitor .legend-wrapper{-ms-flex-align:start;align-items:flex-start;padding:0 1.25rem}:host(.row){-ms-flex-direction:row;flex-direction:row}:host(.column){-ms-flex-direction:column;flex-direction:column}";var ProgressMonitor=function(){function e(e){var r=this;registerInstance(this,e);this.wmProgressMonitorModeChange=createEvent(this,"wmProgressMonitorModeChange",7);this.doughnutWidth=300;this.modeInitialized=false;this.debouncedUpdate=debounce((function(){return forceUpdate(r.el)}),50);this.breakpoint=undefined;this.groupLegend=undefined;this.barLabelsWidth=undefined}Object.defineProperty(e.prototype,"parsedBreakpoint",{get:function(){var e=this.parseToNum(this.breakpoint?this.breakpoint:this.el.children.length);var r=e>=20?e:e*this.doughnutWidth;return r},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"mode",{get:function(){return this.el.clientWidth>this.parsedBreakpoint?"doughnut":"bar"},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){var e=this;var r=new ResizeObserver((function(){return e.debouncedUpdate()}));r.observe(this.el)};e.prototype.componentDidLoad=function(){this.wmProgressMonitorModeChange.emit(this.mode);this.modeInitialized=true};e.prototype.componentWillUpdate=function(){if(this.prevMode!==this.mode){this.wmProgressMonitorModeChange.emit(this.mode)}this.prevMode=this.mode};e.prototype.parseToNum=function(e){var r=e.toString();var o=r.replace("px","");return parseInt(o)};e.prototype.renderLegend=function(){var e=csvToArray(this.groupLegend);var r=allChartsDetails.bar.colors;return h("div",{class:"legend-wrapper"},h("div",{class:"legend"},e.map((function(e,o){var t={key:e,color:r[o]};return renderLegendItem(t)}))))};e.prototype.render=function(){return h(Host,{class:this.mode==="doughnut"?"row":"column"},this.modeInitialized&&this.groupLegend&&this.mode==="bar"&&this.renderLegend(),this.modeInitialized&&h("slot",null))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ProgressMonitor.style=wmProgressMonitorCss;var ProgressSlice=function(){function e(e){registerInstance(this,e);this.wmProgressSliceUpdated=createEvent(this,"wmProgressSliceUpdated",7);this.legend=undefined;this.amount=undefined;this.popoverTitle=undefined;this.popoverText=undefined;this.popoverButtonText=undefined}e.prototype.componentDidUpdate=function(){this.wmProgressSliceUpdated.emit()};return e}();export{ProgressIndicator as wm_progress_indicator,ProgressMonitor as wm_progress_monitor,ProgressSlice as wm_progress_slice};
+var __awaiter=this&&this.__awaiter||function(e,r,o,t){function n(e){return e instanceof o?e:new o((function(r){r(e)}))}return new(o||(o=Promise))((function(o,p){function a(e){try{i(t.next(e))}catch(e){p(e)}}function s(e){try{i(t["throw"](e))}catch(e){p(e)}}function i(e){e.done?o(e.value):n(e.value).then(a,s)}i((t=t.apply(e,r||[])).next())}))};var __generator=this&&this.__generator||function(e,r){var o={label:0,sent:function(){if(p[0]&1)throw p[1];return p[1]},trys:[],ops:[]},t,n,p,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(r){return i([e,r])}}function i(s){if(t)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(o=0)),o)try{if(t=1,n&&(p=s[0]&2?n["return"]:s[0]?n["throw"]||((p=n["return"])&&p.call(n),0):n.next)&&!(p=p.call(n,s[1])).done)return p;if(n=0,p)s=[s[0]&2,p.value];switch(s[0]){case 0:case 1:p=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;n=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(p=o.trys,p=p.length>0&&p[p.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!p||s[1]>p[0]&&s[1]<p[3])){o.label=s[1];break}if(s[0]===6&&o.label<p[1]){o.label=p[1];p=s;break}if(p&&o.label<p[2]){o.label=p[2];o.ops.push(s);break}if(p[2])o.ops.pop();o.trys.pop();continue}s=r.call(e,o)}catch(e){s=[6,e];n=0}finally{t=p=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,f as forceUpdate,h,H as Host,g as getElement,c as createEvent}from"./index-84a6ae22.js";import{g as generateId,i as intl,d as debounce,q as csvToArray}from"./functions-1c41e984.js";import{a as allChartsDetails,h as handleChartKeydown,g as getDetails,r as renderStackedBar,d as renderDoughnut,e as renderInstructionsText,f as renderLegend,i as renderCompletionMessage,k as exitChart,l as renderLegendItem}from"./chartFunctions-b0a9e440.js";var wmProgressIndicatorCss=":host,wm-progress-indicator{display:block}:host .component-wrapper,wm-progress-indicator .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-progress-indicator .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-progress-indicator .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-progress-indicator .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-progress-indicator .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-progress-indicator .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-progress-indicator .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-progress-indicator .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-progress-indicator .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-progress-indicator .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-progress-indicator .component-wrapper path:active,:host .component-wrapper path:hover,wm-progress-indicator .component-wrapper path:hover,:host .component-wrapper path:focus,wm-progress-indicator .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-progress-indicator .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-progress-indicator .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-progress-indicator .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-progress-indicator .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-progress-indicator .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-progress-indicator .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-progress-indicator .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-progress-indicator .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-progress-indicator .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-progress-indicator .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-progress-indicator .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-progress-indicator .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-progress-indicator .component-wrapper.doughnut3 .label-text{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 .component-wrapper.doughnut0,wm-progress-indicator .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-progress-indicator .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-progress-indicator .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-progress-indicator .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-progress-indicator .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-progress-indicator .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-progress-indicator .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-progress-indicator .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-progress-indicator .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-progress-indicator .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-progress-indicator .component-wrapper.bar2,:host .component-wrapper.bar3,wm-progress-indicator .component-wrapper.bar3,:host .component-wrapper.bar4,wm-progress-indicator .component-wrapper.bar4,:host .component-wrapper.bar5,wm-progress-indicator .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-progress-indicator .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-progress-indicator .component-wrapper.bar6,:host .component-wrapper.bar7,wm-progress-indicator .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-progress-indicator .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-progress-indicator .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-progress-indicator .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-progress-indicator .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-progress-indicator .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-progress-indicator .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-progress-indicator .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-progress-indicator .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-progress-indicator .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-progress-indicator .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-progress-indicator .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-progress-indicator .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-progress-indicator .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-progress-indicator .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-progress-indicator .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-progress-indicator .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-progress-indicator .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-progress-indicator .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-progress-indicator .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-progress-indicator .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-progress-indicator .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-progress-indicator .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-progress-indicator .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-progress-indicator .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-progress-indicator .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-progress-indicator .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-progress-indicator .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-progress-indicator .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-progress-indicator .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-progress-indicator .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-progress-indicator .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-progress-indicator .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-progress-indicator .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-progress-indicator #chart-instructions{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 .component-wrapper .legend-wrapper,wm-progress-indicator .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-progress-indicator .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";var ProgressIndicator=function(){function e(e){registerInstance(this,e);this.uid=generateId();this.slicesDetails=[];this.barLabelsWidth=this.el.parentElement.barLabelsWidth;this.label=undefined;this.subinfo=undefined;this.completionMessage=undefined;this.showLegend=true;this.isTabbing=false;this.mode=undefined;this.userIsNavigating=false}Object.defineProperty(e.prototype,"popoverEl",{get:function(){return this.el.shadowRoot.querySelector("priv-chart-popover")},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"sliceEls",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll(".segment"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"chartDetails",{get:function(){return this.mode?allChartsDetails[this.mode]:undefined},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"ariaLabelText",{get:function(){var e="".concat(this.label);if(this.subinfo){e+=" ".concat(this.subinfo)}return e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"chartRoleDescription",{get:function(){return intl.formatMessage({id:"chart.roleDescription",defaultMessage:"Interactive chart",description:"For screen readers only, a description clarifying the role of the chart widget"})},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKeydown=function(e){handleChartKeydown.call(this,e)};e.prototype.componentWillLoad=function(){var e=this;if(!this.label){console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.")}if(this.el.children.length!==2){console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.")}this.el.parentElement.addEventListener("wmProgressMonitorModeChange",(function(r){return e.mode=r.detail}))};e.prototype.handleSliceUpdate=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,getDetails.call(this,this.mode)];case 1:e.sent();forceUpdate(this.el);return[2]}}))}))};e.prototype.handleModeUpdate=function(){if(this.mode){getDetails.call(this,this.mode)}};e.prototype.renderBarOrDoughnut=function(){if(this.total>0&&this.mode==="bar"){return renderStackedBar.call(this,this.mode)}else{return renderDoughnut.call(this,this.mode)}};e.prototype.render=function(){var e=this;return h(Host,{onBlur:function(){return exitChart.call(e)}},h("div",{ref:function(r){return e.componentWrapperEl=r},class:"component-wrapper ".concat(this.mode," ").concat(this.isTabbing&&!this.userIsNavigating?"user-is-tabbing":""),role:"application","aria-label":this.ariaLabelText,tabindex:"0","aria-roledescription":this.chartRoleDescription,"aria-describedby":"chart-instructions"},h("label",{id:"label-".concat(this.uid),class:"label ".concat(this.barLabelsWidth&&this.mode==="bar"?"custom-width":""),style:{"--custom-label-width":this.barLabelsWidth},htmlFor:"graphic-".concat(this.uid)},h("span",{class:"label-text"},this.label),this.subinfo?h("span",{class:"subinfo"},this.subinfo):""),this.mode&&this.renderBarOrDoughnut(),this.mode==="doughnut"?renderLegend.call(this,this.mode):"",h("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":""}),this.mode==="doughnut"?renderCompletionMessage.call(this):""),renderInstructionsText())};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{mode:["handleModeUpdate"]}},enumerable:false,configurable:true});return e}();ProgressIndicator.style=wmProgressIndicatorCss;var wmProgressMonitorCss=":host .legend-wrapper,wm-progress-monitor .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .legend-wrapper .legend,wm-progress-monitor .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .legend-wrapper .legend.bar1,wm-progress-monitor .legend-wrapper .legend.bar1,:host .legend-wrapper .legend.bar6,wm-progress-monitor .legend-wrapper .legend.bar6{display:none}:host .legend-wrapper .legend.--top,wm-progress-monitor .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .legend-wrapper .legend.--top .legend-item,wm-progress-monitor .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .legend-wrapper .legend.--top .legend-color,wm-progress-monitor .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .legend-wrapper .legend.--bottom,wm-progress-monitor .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .legend-wrapper .legend.--bottom .legend-item,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .legend-wrapper .legend.--bottom .legend-color,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .legend-wrapper .legend .legend-item,wm-progress-monitor .legend-wrapper .legend .legend-item{position:relative}:host .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-monitor .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .legend-wrapper .legend .legend-text,wm-progress-monitor .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .legend-wrapper .legend .legend-color,wm-progress-monitor .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .legend-wrapper .legend.bar3,wm-progress-monitor .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host,wm-progress-monitor{display:-ms-flexbox;display:flex}:host .legend-wrapper,wm-progress-monitor .legend-wrapper{-ms-flex-align:start;align-items:flex-start;padding:0 1.25rem}:host(.row){-ms-flex-direction:row;flex-direction:row}:host(.column){-ms-flex-direction:column;flex-direction:column}";var ProgressMonitor=function(){function e(e){var r=this;registerInstance(this,e);this.wmProgressMonitorModeChange=createEvent(this,"wmProgressMonitorModeChange",7);this.doughnutWidth=300;this.modeInitialized=false;this.debouncedUpdate=debounce((function(){return forceUpdate(r.el)}),50);this.breakpoint=undefined;this.groupLegend=undefined;this.barLabelsWidth=undefined}Object.defineProperty(e.prototype,"parsedBreakpoint",{get:function(){var e=this.parseToNum(this.breakpoint?this.breakpoint:this.el.children.length);var r=e>=20?e:e*this.doughnutWidth;return r},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"mode",{get:function(){return this.el.clientWidth>this.parsedBreakpoint?"doughnut":"bar"},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){var e=this;var r=new ResizeObserver((function(){return e.debouncedUpdate()}));r.observe(this.el)};e.prototype.componentDidLoad=function(){this.wmProgressMonitorModeChange.emit(this.mode);this.modeInitialized=true};e.prototype.componentWillUpdate=function(){if(this.prevMode!==this.mode){this.wmProgressMonitorModeChange.emit(this.mode)}this.prevMode=this.mode};e.prototype.parseToNum=function(e){var r=e.toString();var o=r.replace("px","");return parseInt(o)};e.prototype.renderLegend=function(){var e=csvToArray(this.groupLegend);var r=allChartsDetails.bar.colors;return h("div",{class:"legend-wrapper"},h("div",{class:"legend"},e.map((function(e,o){var t={key:e,color:r[o]};return renderLegendItem(t)}))))};e.prototype.render=function(){return h(Host,{class:this.mode==="doughnut"?"row":"column"},this.modeInitialized&&this.groupLegend&&this.mode==="bar"&&this.renderLegend(),this.modeInitialized&&h("slot",null))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ProgressMonitor.style=wmProgressMonitorCss;var ProgressSlice=function(){function e(e){registerInstance(this,e);this.wmProgressSliceUpdated=createEvent(this,"wmProgressSliceUpdated",7);this.legend=undefined;this.amount=undefined;this.popoverTitle=undefined;this.popoverText=undefined;this.popoverButtonText=undefined}e.prototype.componentDidUpdate=function(){this.wmProgressSliceUpdated.emit()};return e}();export{ProgressIndicator as wm_progress_indicator,ProgressMonitor as wm_progress_monitor,ProgressSlice as wm_progress_slice};
 //# sourceMappingURL=wm-progress-indicator_3.entry.js.map

package/dist/esm-es5/wm-progress-indicator_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmProgressIndicatorCss","ProgressIndicator","this","uid","generateId","slicesDetails","barLabelsWidth","el","parentElement","Object","defineProperty","class_1","prototype","shadowRoot","querySelector","Array","from","querySelectorAll","mode","allChartsDetails","undefined","text","concat","label","subinfo","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","call","componentWillLoad","_this","console","error","children","length","warn","addEventListener","detail","handleSliceUpdate","getDetails","_a","sent","forceUpdate","handleModeUpdate","renderBarOrDoughnut","total","renderStackedBar","renderDoughnut","render","h","Host","onBlur","exitChart","ref","componentWrapperEl","class","userIsNavigating","role","ariaLabelText","tabindex","chartRoleDescription","style","htmlFor","renderLegend","renderCompletionMessage","renderInstructionsText","wmProgressMonitorCss","ProgressMonitor","doughnutWidth","modeInitialized","debouncedUpdate","debounce","asNumber","parseToNum","breakpoint","asPixels","clientWidth","parsedBreakpoint","resizeObserver","ResizeObserver","observe","componentDidLoad","wmProgressMonitorModeChange","emit","componentWillUpdate","prevMode","num","asString","toString","withoutPx","replace","parseInt","keys","csvToArray","groupLegend","colors","bar","map","key","idx","legendItem","color","renderLegendItem","ProgressSlice","componentDidUpdate","wmProgressSliceUpdated"],"sources":["src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\nwm-progress-indicator {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\nimport { ChartDetails } from \"../../../global/interfaces\";\nimport { generateId, intl } from \"../../../global/functions\";\nimport {\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\n\n@Component({\n  tag: \"wm-progress-indicator\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-indicator.scss\",\n})\nexport class ProgressIndicator {\n  @Element() el!: HTMLWmProgressIndicatorElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() label?: string;\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() showLegend: boolean = true;\n\n  @State() isTabbing: boolean = false;\n  @State() mode?: \"doughnut\" | \"bar\";\n  @State() userIsNavigating: boolean = false;\n\n  private uid: string = generateId();\n  private total!: number;\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\n  private slicesDetails: SliceDetails[] = [];\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\n  }\n  get chartDetails(): ChartDetails | undefined {\n    return this.mode ? allChartsDetails[this.mode] : undefined;\n  }\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\n    });\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  componentWillLoad() {\n    if (!this.label) {\n      console.error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n\n    if (this.el.children.length !== 2) {\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\n    }\n\n    // Listen to parent for initial mode, and future changes\n    this.el.parentElement!.addEventListener(\n      \"wmProgressMonitorModeChange\",\n      (ev) => (this.mode = (ev as CustomEvent).detail)\n    );\n  }\n\n  @Listen(\"wmProgressSliceUpdated\")\n  async handleSliceUpdate() {\n    await getDetails.call(this, this.mode!);\n    forceUpdate(this.el);\n  }\n\n  @Watch(\"mode\")\n  handleModeUpdate() {\n    if (this.mode) {\n      getDetails.call(this, this.mode);\n    }\n  }\n\n  renderBarOrDoughnut() {\n    if (this.total > 0 && this.mode === \"bar\") {\n      return renderStackedBar.call(this, this.mode!);\n    } else {\n      return renderDoughnut.call(this, this.mode!);\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex=\"0\"\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby={`chart-instructions`}\n        >\n          <label\n            id={`label-${this.uid}`}\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\n            htmlFor={`graphic-${this.uid}`}\n          >\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.mode && this.renderBarOrDoughnut()}\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n",":host,\nwm-progress-monitor {\n  display: flex;\n\n  .legend-wrapper {\n    @extend %chart-legend-styles;\n    align-items: flex-start;\n    padding: 0 1.25rem;\n  }\n}\n\n:host(.row) {\n  flex-direction: row;\n}\n\n:host(.column) {\n  flex-direction: column;\n}\n","import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\nimport { csvToArray, debounce } from \"../../../global/functions\";\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\nimport { LegendItem } from \"../../../global/interfaces\";\n@Component({\n  tag: \"wm-progress-monitor\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-monitor.scss\",\n})\nexport class ProgressMonitor {\n  @Element() el!: HTMLWmProgressMonitorElement;\n  @Prop() breakpoint?: number | string;\n  @Prop() groupLegend?: string;\n  @Prop() barLabelsWidth?: string;\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\n  private doughnutWidth = 300;\n  private prevMode?: string;\n  private modeInitialized: boolean = false;\n\n  get parsedBreakpoint() {\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\n    // e.g. 4 -> 1200px, while 768 -> 768 px\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\n    return asPixels;\n  }\n\n  get mode(): \"doughnut\" | \"bar\" {\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\n  }\n\n  componentWillLoad() {\n    // rerender on resize in case layout needs to change\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidLoad() {\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\n    this.wmProgressMonitorModeChange.emit(this.mode);\n    this.modeInitialized = true;\n  }\n\n  componentWillUpdate() {\n    // store prevMode before every render except first to determine when it has changed\n    if (this.prevMode !== this.mode) {\n      this.wmProgressMonitorModeChange.emit(this.mode);\n    }\n    this.prevMode = this.mode;\n  }\n\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\n\n  parseToNum(num: string | number): number {\n    const asString = num.toString();\n    const withoutPx = asString.replace(\"px\", \"\");\n    return parseInt(withoutPx);\n  }\n\n  renderLegend() {\n    const keys = csvToArray(this.groupLegend!);\n    const colors = allChartsDetails.bar.colors;\n\n    return (\n      <div class=\"legend-wrapper\">\n        <div class=\"legend\">\n          {keys.map((key, idx) => {\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\n            return renderLegendItem(legendItem);\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\n        {this.modeInitialized && <slot />}\n      </Host>\n    );\n  }\n}\n","import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-progress-slice\",\n  shadow: true,\n})\nexport class ProgressSlice {\n  @Prop() legend?: string;\n  @Prop() amount?: string;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() popoverButtonText?: string;\n\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\n  componentDidUpdate() {\n    this.wmProgressSliceUpdated.emit();\n  }\n}\n"],"mappings":"k6DAAA,IAAMA,uBAAyB,k9sB,ICoBlBC,kBAAiB,W,uCAcpBC,KAAAC,IAAcC,aAGdF,KAAAG,cAAgC,GAChCH,KAAAI,eAA2BJ,KAAKK,GAAGC,cAA+CF,e,6FAV5D,K,eAEA,M,0CAEO,K,CAQrCG,OAAAC,eAAIC,EAAAC,UAAA,YAAS,C,IAAb,WACE,OAAOV,KAAKK,GAAGM,WAAYC,cAAc,qB,uCAE3CL,OAAAC,eAAIC,EAAAC,UAAA,WAAQ,C,IAAZ,WACE,OAAOG,MAAMC,KAAKd,KAAKK,GAAGM,WAAYI,iBAAiB,Y,uCAEzDR,OAAAC,eAAIC,EAAAC,UAAA,eAAY,C,IAAhB,WACE,OAAOV,KAAKgB,KAAOC,iBAAiBjB,KAAKgB,MAAQE,S,uCAEnDX,OAAAC,eAAIC,EAAAC,UAAA,gBAAa,C,IAAjB,WACE,IAAIS,EAAO,GAAAC,OAAGpB,KAAKqB,OACnB,GAAIrB,KAAKsB,QAAS,CAChBH,GAAQ,IAAAC,OAAIpB,KAAKsB,Q,CAEnB,OAAOH,C,uCAGTZ,OAAAC,eAAIC,EAAAC,UAAA,uBAAoB,C,IAAxB,WACE,OAAOa,KAAKC,cAAc,CACxBC,GAAI,wBACJC,eAAgB,oBAChBC,YAAa,kF,uCAKjBlB,EAAAC,UAAAkB,gBAAA,WACE5B,KAAK6B,UAAY,I,EAInBpB,EAAAC,UAAAoB,iBAAA,WACE9B,KAAK6B,UAAY,K,EAInBpB,EAAAC,UAAAqB,cAAA,SAAcC,GACZC,mBAAmBC,KAAKlC,KAAMgC,E,EAGhCvB,EAAAC,UAAAyB,kBAAA,eAAAC,EAAApC,KACE,IAAKA,KAAKqB,MAAO,CACfgB,QAAQC,MACN,+I,CAIJ,GAAItC,KAAKK,GAAGkC,SAASC,SAAW,EAAG,CACjCH,QAAQI,KAAK,0E,CAIfzC,KAAKK,GAAGC,cAAeoC,iBACrB,+BACA,SAACV,GAAE,OAAMI,EAAKpB,KAAQgB,EAAmBW,MAAtC,G,EAKDlC,EAAAC,UAAAkC,kBAAN,W,4GACE,SAAMC,WAAWX,KAAKlC,KAAMA,KAAKgB,O,OAAjC8B,EAAAC,OACAC,YAAYhD,KAAKK,I,kBAInBI,EAAAC,UAAAuC,iBAAA,WACE,GAAIjD,KAAKgB,KAAM,CACb6B,WAAWX,KAAKlC,KAAMA,KAAKgB,K,GAI/BP,EAAAC,UAAAwC,oBAAA,WACE,GAAIlD,KAAKmD,MAAQ,GAAKnD,KAAKgB,OAAS,MAAO,CACzC,OAAOoC,iBAAiBlB,KAAKlC,KAAMA,KAAKgB,K,KACnC,CACL,OAAOqC,eAAenB,KAAKlC,KAAMA,KAAKgB,K,GAI1CP,EAAAC,UAAA4C,OAAA,eAAAlB,EAAApC,KACE,OACEuD,EAACC,KAAI,CAACC,OAAQ,WAAM,OAAAC,UAAUxB,KAAKE,EAAf,GAClBmB,EAAA,OACEI,IAAK,SAACtD,GAAE,OAAM+B,EAAKwB,mBAAqBvD,CAAhC,EACRwD,MAAO,qBAAAzC,OAAqBpB,KAAKgB,KAAI,KAAAI,OAAIpB,KAAK6B,YAAc7B,KAAK8D,iBAAmB,kBAAoB,IACxGC,KAAK,cAAa,aACN/D,KAAKgE,cACjBC,SAAS,IAAG,uBACUjE,KAAKkE,qBAAoB,mBAC7B,sBAElBX,EAAA,SACE9B,GAAI,SAAAL,OAASpB,KAAKC,KAClB4D,MAAO,SAAAzC,OAASpB,KAAKI,gBAAkBJ,KAAKgB,OAAS,MAAQ,eAAiB,IAC9EmD,MAAO,CAAE,uBAAwBnE,KAAKI,gBACtCgE,QAAS,WAAAhD,OAAWpB,KAAKC,MAEzBsD,EAAA,QAAMM,MAAM,cAAc7D,KAAKqB,OAC9BrB,KAAKsB,QAAUiC,EAAA,QAAMM,MAAM,WAAW7D,KAAKsB,SAAkB,IAE/DtB,KAAKgB,MAAQhB,KAAKkD,sBAClBlD,KAAKgB,OAAS,WAAaqD,aAAanC,KAAKlC,KAAMA,KAAKgB,MAAQ,GACjEuC,EAAA,sBAAoBM,MAAO7D,KAAK6B,UAAY,kBAAoB,KAC/D7B,KAAKgB,OAAS,WAAasD,wBAAwBpC,KAAKlC,MAAQ,IAElEuE,yB,sWA7HqB,G,+CCpB9B,IAAMC,qBAAuB,u7E,ICShBC,gBAAe,W,qIAMlBzE,KAAA0E,cAAgB,IAEhB1E,KAAA2E,gBAA2B,MAkCnC3E,KAAA4E,gBAAkBC,UAAS,WAAM,OAAA7B,YAAYZ,EAAK/B,GAAjB,GAAsB,I,mFAhCvDE,OAAAC,eAAIiE,EAAA/D,UAAA,mBAAgB,C,IAApB,WACE,IAAMoE,EAAW9E,KAAK+E,WAAW/E,KAAKgF,WAAahF,KAAKgF,WAAahF,KAAKK,GAAGkC,SAASC,QAGtF,IAAMyC,EAAWH,GAAY,GAAKA,EAAWA,EAAW9E,KAAK0E,cAC7D,OAAOO,C,uCAGT1E,OAAAC,eAAIiE,EAAA/D,UAAA,OAAI,C,IAAR,WACE,OAAOV,KAAKK,GAAG6E,YAAclF,KAAKmF,iBAAmB,WAAa,K,uCAGpEV,EAAA/D,UAAAyB,kBAAA,eAAAC,EAAApC,KAEE,IAAMoF,EAAiB,IAAIC,gBAAe,WAAM,OAAAjD,EAAKwC,iBAAL,IAChDQ,EAAeE,QAAQtF,KAAKK,G,EAG9BoE,EAAA/D,UAAA6E,iBAAA,WAEEvF,KAAKwF,4BAA4BC,KAAKzF,KAAKgB,MAC3ChB,KAAK2E,gBAAkB,I,EAGzBF,EAAA/D,UAAAgF,oBAAA,WAEE,GAAI1F,KAAK2F,WAAa3F,KAAKgB,KAAM,CAC/BhB,KAAKwF,4BAA4BC,KAAKzF,KAAKgB,K,CAE7ChB,KAAK2F,SAAW3F,KAAKgB,I,EAKvByD,EAAA/D,UAAAqE,WAAA,SAAWa,GACT,IAAMC,EAAWD,EAAIE,WACrB,IAAMC,EAAYF,EAASG,QAAQ,KAAM,IACzC,OAAOC,SAASF,E,EAGlBtB,EAAA/D,UAAA2D,aAAA,WACE,IAAM6B,EAAOC,WAAWnG,KAAKoG,aAC7B,IAAMC,EAASpF,iBAAiBqF,IAAID,OAEpC,OACE9C,EAAA,OAAKM,MAAM,kBACTN,EAAA,OAAKM,MAAM,UACRqC,EAAKK,KAAI,SAACC,EAAKC,GACd,IAAMC,EAAyB,CAAEF,IAAKA,EAAKG,MAAON,EAAOI,IACzD,OAAOG,iBAAiBF,E,OAOlCjC,EAAA/D,UAAA4C,OAAA,WACE,OACEC,EAACC,KAAI,CAACK,MAAO7D,KAAKgB,OAAS,WAAa,MAAQ,UAE7ChB,KAAK2E,iBAAmB3E,KAAKoG,aAAepG,KAAKgB,OAAS,OAAShB,KAAKqE,eACxErE,KAAK2E,iBAAmBpB,EAAA,a,2OAvEL,G,+CCHfsD,cAAa,W,oPAQxBA,EAAAnG,UAAAoG,mBAAA,WACE9G,KAAK+G,uBAAuBtB,M,WATN,U"}
+{"version":3,"names":["wmProgressIndicatorCss","ProgressIndicator","this","uid","generateId","slicesDetails","barLabelsWidth","el","parentElement","Object","defineProperty","class_1","prototype","shadowRoot","querySelector","Array","from","querySelectorAll","mode","allChartsDetails","undefined","text","concat","label","subinfo","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","call","componentWillLoad","_this","console","error","children","length","warn","addEventListener","detail","handleSliceUpdate","getDetails","_a","sent","forceUpdate","handleModeUpdate","renderBarOrDoughnut","total","renderStackedBar","renderDoughnut","render","h","Host","onBlur","exitChart","ref","componentWrapperEl","class","userIsNavigating","role","ariaLabelText","tabindex","chartRoleDescription","style","htmlFor","renderLegend","renderCompletionMessage","renderInstructionsText","wmProgressMonitorCss","ProgressMonitor","doughnutWidth","modeInitialized","debouncedUpdate","debounce","asNumber","parseToNum","breakpoint","asPixels","clientWidth","parsedBreakpoint","resizeObserver","ResizeObserver","observe","componentDidLoad","wmProgressMonitorModeChange","emit","componentWillUpdate","prevMode","num","asString","toString","withoutPx","replace","parseInt","keys","csvToArray","groupLegend","colors","bar","map","key","idx","legendItem","color","renderLegendItem","ProgressSlice","componentDidUpdate","wmProgressSliceUpdated"],"sources":["src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\r\nwm-progress-indicator {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\r\nimport { ChartDetails } from \"../../../global/interfaces\";\r\nimport { generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-indicator\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-indicator.scss\",\r\n})\r\nexport class ProgressIndicator {\r\n  @Element() el!: HTMLWmProgressIndicatorElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() showLegend: boolean = true;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() mode?: \"doughnut\" | \"bar\";\r\n  @State() userIsNavigating: boolean = false;\r\n\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\r\n  private slicesDetails: SliceDetails[] = [];\r\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\r\n  }\r\n  get chartDetails(): ChartDetails | undefined {\r\n    return this.mode ? allChartsDetails[this.mode] : undefined;\r\n  }\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n\r\n    if (this.el.children.length !== 2) {\r\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\r\n    }\r\n\r\n    // Listen to parent for initial mode, and future changes\r\n    this.el.parentElement!.addEventListener(\r\n      \"wmProgressMonitorModeChange\",\r\n      (ev) => (this.mode = (ev as CustomEvent).detail)\r\n    );\r\n  }\r\n\r\n  @Listen(\"wmProgressSliceUpdated\")\r\n  async handleSliceUpdate() {\r\n    await getDetails.call(this, this.mode!);\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Watch(\"mode\")\r\n  handleModeUpdate() {\r\n    if (this.mode) {\r\n      getDetails.call(this, this.mode);\r\n    }\r\n  }\r\n\r\n  renderBarOrDoughnut() {\r\n    if (this.total > 0 && this.mode === \"bar\") {\r\n      return renderStackedBar.call(this, this.mode!);\r\n    } else {\r\n      return renderDoughnut.call(this, this.mode!);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex=\"0\"\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby={`chart-instructions`}\r\n        >\r\n          <label\r\n            id={`label-${this.uid}`}\r\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\r\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\r\n            htmlFor={`graphic-${this.uid}`}\r\n          >\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.mode && this.renderBarOrDoughnut()}\r\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host,\r\nwm-progress-monitor {\r\n  display: flex;\r\n\r\n  .legend-wrapper {\r\n    @extend %chart-legend-styles;\r\n    align-items: flex-start;\r\n    padding: 0 1.25rem;\r\n  }\r\n}\r\n\r\n:host(.row) {\r\n  flex-direction: row;\r\n}\r\n\r\n:host(.column) {\r\n  flex-direction: column;\r\n}\r\n","import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\r\nimport { csvToArray, debounce } from \"../../../global/functions\";\r\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\r\nimport { LegendItem } from \"../../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-progress-monitor\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-monitor.scss\",\r\n})\r\nexport class ProgressMonitor {\r\n  @Element() el!: HTMLWmProgressMonitorElement;\r\n  @Prop() breakpoint?: number | string;\r\n  @Prop() groupLegend?: string;\r\n  @Prop() barLabelsWidth?: string;\r\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\r\n  private doughnutWidth = 300;\r\n  private prevMode?: string;\r\n  private modeInitialized: boolean = false;\r\n\r\n  get parsedBreakpoint() {\r\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\r\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\r\n    // e.g. 4 -> 1200px, while 768 -> 768 px\r\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\r\n    return asPixels;\r\n  }\r\n\r\n  get mode(): \"doughnut\" | \"bar\" {\r\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // rerender on resize in case layout needs to change\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\r\n    this.wmProgressMonitorModeChange.emit(this.mode);\r\n    this.modeInitialized = true;\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    // store prevMode before every render except first to determine when it has changed\r\n    if (this.prevMode !== this.mode) {\r\n      this.wmProgressMonitorModeChange.emit(this.mode);\r\n    }\r\n    this.prevMode = this.mode;\r\n  }\r\n\r\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\r\n\r\n  parseToNum(num: string | number): number {\r\n    const asString = num.toString();\r\n    const withoutPx = asString.replace(\"px\", \"\");\r\n    return parseInt(withoutPx);\r\n  }\r\n\r\n  renderLegend() {\r\n    const keys = csvToArray(this.groupLegend!);\r\n    const colors = allChartsDetails.bar.colors;\r\n\r\n    return (\r\n      <div class=\"legend-wrapper\">\r\n        <div class=\"legend\">\r\n          {keys.map((key, idx) => {\r\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\r\n            return renderLegendItem(legendItem);\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\r\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\r\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\r\n        {this.modeInitialized && <slot />}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n","import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-slice\",\r\n  shadow: true,\r\n})\r\nexport class ProgressSlice {\r\n  @Prop() legend?: string;\r\n  @Prop() amount?: string;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() popoverButtonText?: string;\r\n\r\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\r\n  componentDidUpdate() {\r\n    this.wmProgressSliceUpdated.emit();\r\n  }\r\n}\r\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,i,s){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function o(e){try{l(s.next(e))}catch(e){n(e)}}function a(e){try{l(s["throw"](e))}catch(e){n(e)}}function l(e){e.done?i(e.value):r(e.value).then(o,a)}l((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},s,r,n,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(e){return function(t){return l([e,t])}}function l(a){if(s)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(s=1,r&&(n=a[0]&2?r["return"]:a[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,a[1])).done)return n;if(r=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){i.label=a[1];break}if(a[0]===6&&i.label<n[1]){i.label=n[1];n=a;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(a);break}if(n[2])i.ops.pop();i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e];r=0}finally{s=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl}from"./functions-c58046f2.js";var 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}';var Search=function(){function e(e){registerInstance(this,e);this.wmSearchBrowseResults=createEvent(this,"wmSearchBrowseResults",7);this.wmBrowseSearchResults=createEvent(this,"wmBrowseSearchResults",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=""}Object.defineProperty(e.prototype,"resultCount",{get:function(){var e="";var t=intl.formatMessage({id:"search.resultsFound",defaultMessage:"{numResults, plural, =0 {No results} one {1 result} other {# results}} found"},{numResults:this.numResults});var i=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"){e=t}else if(this.searchType==="find"){e=i}return e},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true;this.linkEl&&this.linkEl.classList.remove("sr-only");this.linkEl&&this.linkEl.classList.add("show-for-tabbers")};e.prototype.toggleTabbingOff=function(){this.isTabbing=false;this.linkEl&&this.linkEl.classList.add("sr-only");this.linkEl&&this.linkEl.classList.remove("show-for-tabbers")};e.prototype.componentWillLoad=function(){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()};e.prototype.hookToModal=function(){var e=this;var t=this.el;while(!!t){if(t.tagName==="WM-MODAL"){this.parentModal=t}t=t.parentElement}if(this.parentModal){var i=["wmCloseTriggered","wmPrimaryTriggered","wmSecondaryTriggered"];i.map((function(t){e.parentModal.addEventListener(t,(function(){e.updateValue("")}))}))}};e.prototype.updateValue=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.value=e;this.resetHighlightCountToStart();if(this.value){this.announceChanges()}return[2]}))}))};e.prototype.resetHighlightCountToStart=function(){if(this.searchType==="find"){this.highlightedNum=this.numResults?1:0}};e.prototype.announce=function(e){if(this.resultsLiveRegion.textContent===e){e+=" "}this.announcement=e};e.prototype.announceChanges=function(){var e=this;window.requestAnimationFrame((function(){var t=e.resultCount;if(e.searchType==="find"&&e.highlightedName){t+=", ".concat(e.highlightedName)}e.announce(t)}))};e.prototype.changeHighlightedNum=function(e){if(this.numResults){if(e<1){this.highlightedNum=this.numResults}else if(e>this.numResults){this.highlightedNum=1}else{this.highlightedNum=e}this.wmSearchBrowseResults.emit({position:this.highlightedNum});this.wmBrowseSearchResults.emit({position:this.highlightedNum});this.announceChanges()}};e.prototype.addFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.add("focus")}};e.prototype.removeFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.remove("focus")}};e.prototype.handleBlur=function(){this.removeFocusStyle();if(this.previousBlurredValue!==this.value){this.wmSearchValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value};e.prototype.renderResultsAndBrowseButtons=function(){var e=this;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:intl.formatMessage({id:"global.previous",description:"button text",defaultMessage:"previous"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum-1)},disabled:this.disabled||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:intl.formatMessage({id:"global.next",description:"button text",defaultMessage:"next"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum+1)},disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":intl.formatMessage({id:"search.nextResult",defaultMessage:"Press to hear next matching result"})})))};e.prototype.renderJumpToLink=function(){var e=this;if(this.numResults&&this.highlightedId){return h("a",{ref:function(t){return e.linkEl=t},href:"#".concat(this.highlightedId),class:"sr-only"},intl.formatMessage({id:"search.jumpToResult",defaultMessage:"Jump to search result in list"}))}else{return null}};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{id:"wm-search-wrapper",class:"wm-search-wrapper ".concat(this.searchType),ref:function(t){return e.wrapperEl=t}},h("input",{disabled:this.disabled,id:"wm-search-input",placeholder:this.placeholder,"aria-label":"".concat(this.label?this.label+". ":"").concat(intl.formatMessage({id:"search.typeToFilterResults",defaultMessage:"Type to filter the results"})),onInput:function(t){return e.updateValue(t.target.value)},onFocus:function(){return e.addFocusStyle()},onBlur:function(){return e.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:function(t){return e.resultsLiveRegion=t}},this.announcement)),this.searchType==="find"&&this.renderJumpToLink())};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{numResults:["resetHighlightCountToStart"]}},enumerable:false,configurable:true});return e}();Search.style=wmSearchCss;export{Search as wm_search};
+var __awaiter=this&&this.__awaiter||function(e,t,i,s){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function o(e){try{l(s.next(e))}catch(e){n(e)}}function a(e){try{l(s["throw"](e))}catch(e){n(e)}}function l(e){e.done?i(e.value):r(e.value).then(o,a)}l((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},s,r,n,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(e){return function(t){return l([e,t])}}function l(a){if(s)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(s=1,r&&(n=a[0]&2?r["return"]:a[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,a[1])).done)return n;if(r=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){i.label=a[1];break}if(a[0]===6&&i.label<n[1]){i.label=n[1];n=a;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(a);break}if(n[2])i.ops.pop();i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e];r=0}finally{s=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl}from"./functions-1c41e984.js";var 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}';var Search=function(){function e(e){registerInstance(this,e);this.wmSearchBrowseResults=createEvent(this,"wmSearchBrowseResults",7);this.wmBrowseSearchResults=createEvent(this,"wmBrowseSearchResults",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=""}Object.defineProperty(e.prototype,"resultCount",{get:function(){var e="";var t=intl.formatMessage({id:"search.resultsFound",defaultMessage:"{numResults, plural, =0 {No results} one {1 result} other {# results}} found"},{numResults:this.numResults});var i=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"){e=t}else if(this.searchType==="find"){e=i}return e},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true;this.linkEl&&this.linkEl.classList.remove("sr-only");this.linkEl&&this.linkEl.classList.add("show-for-tabbers")};e.prototype.toggleTabbingOff=function(){this.isTabbing=false;this.linkEl&&this.linkEl.classList.add("sr-only");this.linkEl&&this.linkEl.classList.remove("show-for-tabbers")};e.prototype.componentWillLoad=function(){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()};e.prototype.hookToModal=function(){var e=this;var t=this.el;while(!!t){if(t.tagName==="WM-MODAL"){this.parentModal=t}t=t.parentElement}if(this.parentModal){var i=["wmCloseTriggered","wmPrimaryTriggered","wmSecondaryTriggered"];i.map((function(t){e.parentModal.addEventListener(t,(function(){e.updateValue("")}))}))}};e.prototype.updateValue=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.value=e;this.resetHighlightCountToStart();if(this.value){this.announceChanges()}return[2]}))}))};e.prototype.resetHighlightCountToStart=function(){if(this.searchType==="find"){this.highlightedNum=this.numResults?1:0}};e.prototype.announce=function(e){if(this.resultsLiveRegion.textContent===e){e+=" "}this.announcement=e};e.prototype.announceChanges=function(){var e=this;window.requestAnimationFrame((function(){var t=e.resultCount;if(e.searchType==="find"&&e.highlightedName){t+=", ".concat(e.highlightedName)}e.announce(t)}))};e.prototype.changeHighlightedNum=function(e){if(this.numResults){if(e<1){this.highlightedNum=this.numResults}else if(e>this.numResults){this.highlightedNum=1}else{this.highlightedNum=e}this.wmSearchBrowseResults.emit({position:this.highlightedNum});this.wmBrowseSearchResults.emit({position:this.highlightedNum});this.announceChanges()}};e.prototype.addFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.add("focus")}};e.prototype.removeFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.remove("focus")}};e.prototype.handleBlur=function(){this.removeFocusStyle();if(this.previousBlurredValue!==this.value){this.wmSearchValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value};e.prototype.renderResultsAndBrowseButtons=function(){var e=this;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:intl.formatMessage({id:"global.previous",description:"button text",defaultMessage:"previous"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum-1)},disabled:this.disabled||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:intl.formatMessage({id:"global.next",description:"button text",defaultMessage:"next"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum+1)},disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":intl.formatMessage({id:"search.nextResult",defaultMessage:"Press to hear next matching result"})})))};e.prototype.renderJumpToLink=function(){var e=this;if(this.numResults&&this.highlightedId){return h("a",{ref:function(t){return e.linkEl=t},href:"#".concat(this.highlightedId),class:"sr-only"},intl.formatMessage({id:"search.jumpToResult",defaultMessage:"Jump to search result in list"}))}else{return null}};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{id:"wm-search-wrapper",class:"wm-search-wrapper ".concat(this.searchType),ref:function(t){return e.wrapperEl=t}},h("input",{disabled:this.disabled,id:"wm-search-input",placeholder:this.placeholder,"aria-label":"".concat(this.label?this.label+". ":"").concat(intl.formatMessage({id:"search.typeToFilterResults",defaultMessage:"Type to filter the results"})),onInput:function(t){return e.updateValue(t.target.value)},onFocus:function(){return e.addFocusStyle()},onBlur:function(){return e.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:function(t){return e.resultsLiveRegion=t}},this.announcement)),this.searchType==="find"&&this.renderJumpToLink())};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{numResults:["resetHighlightCountToStart"]}},enumerable:false,configurable:true});return e}();Search.style=wmSearchCss;export{Search as wm_search};
 //# sourceMappingURL=wm-search.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["wmSearchCss","Search","this","wrapperEl","linkEl","Object","defineProperty","class_1","prototype","message","basicMessage","intl","formatMessage","id","defaultMessage","numResults","findMessage","current","highlightedNum","searchType","toggleTabbingOn","isTabbing","classList","remove","add","toggleTabbingOff","componentWillLoad","placeholder","console","error","label","hookToModal","_this","el","tagName","parentModal","parentElement","events","map","event","addEventListener","updateValue","value","resetHighlightCountToStart","announceChanges","announce","resultsLiveRegion","textContent","announcement","window","requestAnimationFrame","messageToAnnounce","resultCount","highlightedName","concat","changeHighlightedNum","newNum","wmSearchBrowseResults","emit","position","wmBrowseSearchResults","addFocusStyle","removeFocusStyle","handleBlur","previousBlurredValue","wmSearchValueChanged","renderResultsAndBrowseButtons","h","class","icon","tooltip","description","onClick","disabled","renderJumpToLink","highlightedId","ref","href","render","Host","onInput","ev","target","onFocus","onBlur","autocomplete","String","fromCodePoint","parseInt"],"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      box-shadow: 0 0 0 1px #20cbd4;\n      border-color: $border-focus-color;\n      border-radius: 3px;\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\";\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"],"mappings":"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"}
+{"version":3,"names":["wmSearchCss","Search","this","wrapperEl","linkEl","Object","defineProperty","class_1","prototype","message","basicMessage","intl","formatMessage","id","defaultMessage","numResults","findMessage","current","highlightedNum","searchType","toggleTabbingOn","isTabbing","classList","remove","add","toggleTabbingOff","componentWillLoad","placeholder","console","error","label","hookToModal","_this","el","tagName","parentModal","parentElement","events","map","event","addEventListener","updateValue","value","resetHighlightCountToStart","announceChanges","announce","resultsLiveRegion","textContent","announcement","window","requestAnimationFrame","messageToAnnounce","resultCount","highlightedName","concat","changeHighlightedNum","newNum","wmSearchBrowseResults","emit","position","wmBrowseSearchResults","addFocusStyle","removeFocusStyle","handleBlur","previousBlurredValue","wmSearchValueChanged","renderResultsAndBrowseButtons","h","class","icon","tooltip","description","onClick","disabled","renderJumpToLink","highlightedId","ref","href","render","Host","onInput","ev","target","onFocus","onBlur","autocomplete","String","fromCodePoint","parseInt"],"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"],"mappings":"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"}