@watermarkinsights/ripple 3.25.0 → 3.25.1

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

@@ -1 +0,0 @@
-{"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","globalMessages","previous","onClick","disabled","next","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      @include field-focus;\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\";\nimport { globalMessages } from \"../../global/intl\";\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={globalMessages.previous}\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={globalMessages.next}\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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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["wmSnackbarCss","Snackbar","this","parsedNotifications","isTabbing","timers","newNotification","prototype","updateSnacks","newValue","_this","parsedData","JSON","parse","length","prevNotificationsLength","i","id","toString","message","link","newWindow","__spreadArray","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","toggleTabbingOn","toggleTabbingOff","latestNotification","shadowRoot","querySelector","concat","focus","stopTimer","triggeringButton","document","activeElement","focusOnDismiss","snackDismissed","notification","endSnack","wmSnackbarSnackFinished","emit","userFinishedSnack","snackLinkClicked","wmSnackbarActionTriggered","userTriggeredAction","forEach","notif","index","clearTimeout","filter","timer","ind","renderSnackbars","map","h","class","tabindex","onFocus","globalMessages","onClick","onKeyDown","ev","key","onMouseEnter","showTooltip","target","close","onMouseLeave","hideTooltip","onBlur","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass"],"sources":["src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\nwm-snackbar {\n  * {\n    box-sizing: border-box;\n    margin: unset; //Edge\n  }\n\n  .wm-snackbars {\n    position: fixed;\n    bottom: rem-calc(0);\n    left: rem-calc(20);\n    right: rem-calc(20);\n    padding: rem-calc(4 10 30);\n    z-index: 2001;\n    max-width: rem-calc(568);\n    max-height: rem-calc(280);\n    -webkit-overflow-scrolling: touch;\n    overflow: auto;\n\n    &.empty {\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    .wm-snack-wrapper {\n      width: 100%;\n      height: 100%;\n\n      &:not(:last-child) {\n        margin-bottom: rem-calc(20);\n      }\n\n      .wm-snackbar {\n        @include shadow8;\n        @include displayFlex;\n        @include alignItems(center);\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n        font-size: rem-calc(14);\n        color: #fff;\n        padding: rem-calc(15 30);\n        background: #4a4a4a;\n        opacity: 0;\n        left: 0;\n        position: relative;\n        font-family: inherit;\n\n        .link {\n          letter-spacing: 0;\n          text-transform: none;\n          font-size: rem-calc(14);\n          border: none;\n          background: transparent;\n          padding-left: 0;\n          padding-right: 0;\n          height: auto;\n          border-radius: 0;\n          line-height: 1;\n          color: $snackbar-link-color;\n          margin: rem-calc(0 50 0 10);\n          text-decoration: none;\n          font-weight: 600;\n          cursor: pointer;\n\n          &.new-window::after {\n            @include mdi-icon;\n            display: inline;\n            content: \"\\f137\";\n            margin-left: rem-calc(4);\n          }\n\n          &:hover {\n            text-decoration: underline;\n          }\n\n          &:focus {\n            outline: none;\n            border: none;\n          }\n\n          &::-moz-focus-inner {\n            border: 0;\n            outline: none;\n          }\n        }\n\n        &:not(:last-child) {\n          margin-bottom: rem-calc(20);\n        }\n\n        &.active:not(button) {\n          opacity: 1;\n        }\n\n        .wm-snackbarmsg {\n          @include displayFlex;\n          @include justifyContent(space-between);\n          @include alignItems(center);\n          // font-size: rem-calc(14);\n          width: 100%;\n          position: relative;\n          padding: 0;\n\n          .msgtext {\n            width: 100%;\n          }\n\n          .closesnack {\n            @include box-shadow(none);\n            @include border-radius(50%);\n            background-color: #3b3b3b;\n            color: #ffffff;\n            cursor: pointer;\n            border: none;\n            font-size: rem-calc(16);\n            padding: 0;\n            height: auto;\n            line-height: 1;\n            min-width: rem-calc(44);\n            min-height: rem-calc(44);\n            text-align: center;\n            letter-spacing: normal;\n\n            @media screen and (min-width: rem-calc(768)) {\n              min-width: rem-calc(30);\n              min-height: rem-calc(30);\n            }\n\n            &:before {\n              @include mdi-icon;\n              content: \"\\f156\";\n            }\n\n            &:hover {\n              background-color: #fff;\n              color: $snackbar-color;\n            }\n\n            &:focus {\n              outline: none;\n            }\n\n            &::-moz-focus-inner {\n              border: 0;\n              outline: none;\n            }\n\n            &:active {\n              @include scale($xVal: 0.9, $yVal: 0.9);\n            }\n          }\n        }\n\n        .sr-only {\n          @include srOnly;\n          top: 0;\n          left: 0;\n        }\n      }\n    }\n  }\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\n  @extend %focus-on-dark;\n\n  > .tooltip {\n    clip: auto;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: opacity 500ms 500ms;\n    padding: rem-calc(6);\n    top: rem-calc(44);\n    left: rem-calc(44);\n    white-space: nowrap;\n    transform: translateX(-50%);\n    @media screen and (min-width: rem-calc(768)) {\n      top: rem-calc(33);\n      left: auto;\n    }\n  }\n}\n\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\n  outline: none;\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\n  background-size: rem-calc(6px 3px);\n  background-position: 0 1em;\n  border-radius: 0;\n  line-height: normal;\n}\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, hideTooltip, showTooltip } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\nimport { globalMessages } from \"../../global/intl\";\n@Component({\n  tag: \"wm-snackbar\",\n  styleUrl: \"wm-snackbar.scss\",\n  shadow: true,\n})\nexport class Snackbar {\n  @Element() el!: HTMLElement;\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\n\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\n  private uid!: string;\n  private focusOnDismiss!: HTMLElement;\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\n  private timers: Array<number> = [];\n  private newNotification: boolean = false;\n\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\n\n  @Watch(\"notifications\")\n  updateSnacks(newValue: string) {\n    const parsedData = JSON.parse(newValue);\n    const length = parsedData.length;\n    const prevNotificationsLength = this.parsedNotifications.length;\n    this.parsedNotifications = [];\n\n    //Parse notifications received as props and store a reference to them\n    for (let i = 0; i < length; i++) {\n      let newNotification: any = {\n        id: parsedData[i].id.toString(),\n        message: parsedData[i].message.toString(),\n        link: parsedData[i].link.toString(),\n        newWindow: !!parsedData[i].newWindow,\n      };\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\n    }\n\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\n    if (prevNotificationsLength < this.parsedNotifications.length) {\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\n      this.timers = [newTimer, ...this.timers];\n      this.storeElToFocusOnDismiss();\n      this.newNotification = true;\n    } else {\n      this.newNotification = false;\n    }\n  }\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\n  componentDidUpdate() {\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\n    this.newNotification = false;\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  focusLinkAndDisableTimer() {\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\n    const latestNotification = this.parsedNotifications[0];\n\n    if (latestNotification.link) {\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\n      link.focus();\n      this.stopTimer(latestNotification);\n    }\n  }\n\n  storeElToFocusOnDismiss() {\n    let triggeringButton = document.activeElement! as HTMLElement;\n    while (triggeringButton && triggeringButton.shadowRoot) {\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\n    }\n    this.focusOnDismiss = triggeringButton;\n  }\n\n  snackDismissed(notification: Notification) {\n    this.endSnack(notification);\n    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\n  }\n\n  //Remove snack from notification list once timer runs out\n  snackExpired() {\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\n    this.endSnack(notification);\n  }\n\n  endSnack(notification: Notification) {\n    //App listens for userFinishedSnack event and deletes the emitted notification.\n    this.stopTimer(notification);\n    this.wmSnackbarSnackFinished.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userFinishedSnack.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  snackLinkClicked(notification: Notification) {\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\n    this.stopTimer(notification);\n    this.wmSnackbarActionTriggered.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userTriggeredAction.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  //Delete the timer corresponding to the dismissed notification\n  stopTimer(notification: Notification) {\n    this.parsedNotifications.forEach((notif, index) => {\n      if (notif.id === notification.id) {\n        clearTimeout(this.timers[index]);\n        this.timers = this.timers.filter((timer, ind) => {\n          if (ind !== index) {\n            return timer;\n          }\n        });\n      }\n    });\n  }\n\n  renderSnackbars() {\n    return this.parsedNotifications.map((notification) => (\n      <div class=\"wm-snack-wrapper\">\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n\n          <div class=\"wm-snackbarmsg\">\n            <div class=\"msgtext\">\n              <span>{notification.message}</span>\n              {notification.link && (\n                <a\n                  id={`action-${notification.id}`}\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\n                  aria-label={`Click to ${notification.link}...${\n                    notification.newWindow ? \" \" + globalMessages.newWindow : \"\"\n                  }`}\n                  tabindex={0}\n                  onClick={() => {\n                    this.snackLinkClicked(notification);\n                  }}\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\n                >\n                  <span aria-hidden=\"true\">{notification.link}</span>\n                </a>\n              )}\n            </div>\n            <button\n              id={`close-button-${notification.id}`}\n              aria-label=\"Close this notification\"\n              class=\"closesnack\"\n              tabindex={notification.link ? 0 : -1}\n              onClick={() => this.snackDismissed(notification)}\n              onMouseEnter={(ev) => showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onMouseLeave={() => hideTooltip()}\n              onFocus={(ev) => this.isTabbing && showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onBlur={() => hideTooltip()}\n            ></button>\n          </div>\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n        </div>\n      </div>\n    ));\n  }\n\n  renderLiveRegion() {\n    const latestNotification = this.parsedNotifications[0];\n    const link = this.isTabbing ? \"\" : latestNotification.link;\n    const srAnnouncement = `${latestNotification.message} ${link}`;\n\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\n\n    if (region) {\n      region.innerHTML = \"\";\n      const wrapper = document.createElement(\"span\");\n      wrapper.innerHTML = srAnnouncement;\n      region.appendChild(wrapper);\n    }\n  }\n\n  render() {\n    this.newNotification && this.renderLiveRegion();\n    const snackbars = this.renderSnackbars();\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\n\n    return (\n      <div class={`wm-snackbars ${wrappingClass} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\n        {snackbars}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/wm-tab-item_3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTabItemCss","TabItem","this","tabClicked","ev","preventDefault","_this","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","Object","defineProperty","prototype","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","parentTabList","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","concat","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","offsetWidth","Array","from","querySelectorAll","tabItems","filter","t","getLinkEl","tab","shadowRoot","querySelector","allPanels","document","tabIds","map","p","getPanel","panels","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","selectedTabItem","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","menuLayout","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","generateId","tabPanelLoaded"],"sources":["src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n  * {\n    box-sizing: border-box;\n  }\n  font-family: inherit;\n  display: inline-block;\n\n  .tab-item {\n    list-style-type: none;\n    height: 100%;\n    display: inline-block;\n\n    .tab {\n      @include border-radius(0);\n      color: $button-default-text;\n      text-decoration: none;\n      letter-spacing: 0.7px;\n      font-size: rem-calc(14);\n      font-weight: 500;\n      opacity: 1;\n      position: relative;\n      text-transform: uppercase;\n      display: inline-block;\n      height: calc(40 / 12 * 1em);\n      line-height: calc(40 / 12 * 1em);\n      padding-right: rem-calc(24);\n      padding-left: rem-calc(24);\n\n      &[aria-selected=\"true\"] {\n        font-weight: 700;\n        opacity: 1;\n        background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n        background-size: calc(100% - 50px) 3px;\n\n        &.dark {\n          color: $button-primary-text;\n        }\n      }\n\n      &,\n      &:hover,\n      &:active {\n        outline: none;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.dark:not([aria-selected=\"true\"]) {\n        opacity: 0.8;\n        color: $button-primary-text;\n      }\n\n      &.user-is-tabbing:focus:not(:active) {\n        outline: none;\n        @include focus-style;\n        &.dark {\n          @include focus-on-dark;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tab-item\",\n  styleUrl: \"wm-tab-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabItem {\n  @Element() el!: HTMLWmTabItemElement;\n\n  private get parentTabList(): HTMLWmTabListElement | null {\n    return this.el.parentElement as HTMLWmTabListElement;\n  }\n\n  /**\n   * Indicates whether the tab is currently active\n   */\n  @Prop() selected: boolean = false;\n\n  @Prop() show: boolean = true;\n\n  /**\n   * The id of the tab, linked to a tab panel.\n   */\n  @Prop() tabId: string = \"\";\n\n  /**\n   * Reference to focusable link element\n   */\n  linkEl?: HTMLAnchorElement;\n\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  @Event() keydownOnTabItem!: EventEmitter<{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\n  }>;\n\n  @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\n\n  private tabClicked = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.wmTabSelected.emit({ tabId: this.tabId });\n    this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n  };\n\n  private tabPressed = (ev: KeyboardEvent) => {\n    const key = ev.key;\n\n    if (key === \"Enter\" || key === \" \") {\n      ev.preventDefault();\n      this.wmTabSelected.emit({ tabId: this.tabId });\n      this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n    } else if (key.includes(\"Arrow\")) {\n      ev.preventDefault();\n      this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\n    }\n  };\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\n  }\n\n  componentDidLoad() {\n    this.tabItemLoaded.emit();\n  }\n\n  render() {\n    let classes = this.show ? \"\" : \"hide \";\n    classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\n\n    let styles = {};\n    const padding = this.parentTabList && this.parentTabList.customPadding;\n    if (padding) {\n      const bkgSize = parseInt(padding, 10) * 2 || 0;\n      const units = padding.split(/([0-9]+)/).pop();\n      styles = {\n        \"padding-left\": this.parentTabList!.customPadding,\n        \"padding-right\": this.parentTabList!.customPadding,\n        \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\n      };\n    }\n\n    return (\n      <Host role=\"presentation\">\n        <li class=\"tab-item\" role=\"presentation\">\n          <a\n            class={`tab ${classes}`}\n            style={styles}\n            role=\"tab\"\n            ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\n            onClick={this.tabClicked}\n            id={`tab-link-${this.tabId}`}\n            onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\n            aria-selected={this.selected ? \"true\" : \"false\"}\n            tabindex={this.selected ? 0 : -1}\n          >\n            <slot></slot>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n",":host,\nwm-tab-list {\n  * {\n    box-sizing: border-box;\n  }\n\n  position: relative;\n  white-space: nowrap;\n  height: fit-content;\n  display: block;\n\n  .tabcontainer {\n    margin: 0;\n    margin-left: -24px;\n    width: 100%;\n    height: rem-calc(65);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n\n    &.dark {\n      background: rgb(53, 59, 72);\n      margin: 0;\n    }\n  }\n\n  wm-select {\n    padding: rem-calc(6) 0;\n  }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n","wm-tab-panel {\n  visibility: inherit;\n\n  &.tab-hidden {\n    display: none;\n  }\n\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.user-is-tabbing:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/wm-tag-input-row.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["TagInputRow","prototype","componentDidUpdate","this","wmTagInputRowUpdated","emit"],"sources":["src/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tag-input-row\",\n})\nexport class TagInputRow {\n  @Element() el!: HTMLWmTagInputRowElement;\n\n  @Prop({ attribute: \"col1\" }) col1?: string;\n  @Prop({ attribute: \"col2\" }) col2?: string;\n  @Prop({ attribute: \"col3\" }) col3?: string;\n  @Prop({ attribute: \"col4\" }) col4?: string;\n  @Prop() locked: boolean = false;\n\n  @Event() wmTagInputRowUpdated!: EventEmitter<void>;\n\n  componentDidUpdate() {\n    this.wmTagInputRowUpdated.emit();\n  }\n}\n"],"mappings":"4FAKaA,YAAW,W,wMAOI,K,CAI1BA,EAAAC,UAAAC,mBAAA,WACEC,KAAKC,qBAAqBC,M,gIAZN,U"}

package/dist/esm-es5/wm-tag-input.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTagInputCss","TagInput","this","uid","el","id","generateId","openUp","tooltipVisible","debouncedUpdate","debounce","forceUpdate","_this","row","column","csvToArray","selectedTags","options","Object","defineProperty","prototype","shadowRoot","activeElement","Array","from","dropdownEl","querySelectorAll","tagAreaEl","tagEls","filter","tag","classList","contains","wmRowEls","colValues","col1","col2","col3","col4","join","toLowerCase","inputEl","value","includes","list","tagInputType","tagsList","forEach","correspondingRowEl","locked","push","maxTags","length","intl","formatMessage","defaultMessage","description","addNewHelpText","selectionHelpText","maxTagsReachedMessage","tagAreaInstructions","tagsAddedMessage","defaultConfig","maxTagsReached","tagsAdded","userProvidedConfig","safeParseJSON","messageConfig","assign","inputElStyles","getComputedStyle","tagElStyles","inputElBuffer","paddingLeft","paddingRight","marginLeft","marginRight","reduce","prev","curr","parseInt","replace","minimumWidth","Math","max","measureText","placeholder","width","generateTagAddedMessage","tagName","generateTagAlreadyAddedMessage","componentWillLoad","createPlaceholderDefault","addNew","label","console","error","consolidateSelectedTags","focus","firstFocusableTag","nonLockedTagEls","focusTag","resizeObserver","ResizeObserver","observe","componentDidLoad","remove","componentDidRender","positionInput","includesCaseInsensitive","optionsList","concat","hasOptions","addAndSearchPlaceholder","searchPlaceholder","addPlaceholder","reflectSelectedTags","newValue","oldValue","isAddition","changedTag","val","map","querySelector","listToCSV","detail","tagChanged","wmTagInputChanged","emit","handleErrorMessageChange","errorMessage","announce","handleRowUpdate","closeIfNotElOrChild","ev","isntElOrChild","target","isExpanded","closeDropdown","dismissTooltip","hideTooltip","handleInputKeyDown","test","key","characterLimit","generateCharacterLimitWarning","stopPropagation","preventDefault","handleInputEnter","handleInputArrowDown","handleInputArrowUp","tablePosition","moveLeftCell","moveRightCell","handleInputBackspace","handleInputFocus","openDropdown","clearListItemFocus","handleInputChanged","charCount","clearCellFocus","announceExistingOptions","focusedListItem","handleListItemClick","submitInput","trim","handleTableRowClick","localRowEls","canAddNew","hasNonWhiteSpaceCharacters","match","addTag","addOption","resetInput","moveDownRow","moveDownListItem","moveUpRow","moveUpListItem","window","requestAnimationFrame","nonLockedTagsList","handleListItemKeyDown","typedEvTarget","click","focusedElement","item","dataset","option","rowId","referencedRow","isLocked","removeTag","tagLimitReached","handleTagAreaKeyDown","moveLeftTag","moveRightTag","handleTagAreaDelete","focusedTag","handleBlur","component","relatedTarget","fieldWrapperEl","handleCellMouseEnter","cell","contentWrapper","isTruncated","scrollWidth","clientWidth","showTooltip","innerText","handleTagAreaFocus","handleRemoveButtonClick","listItemEls","firstListItem","focusListItem","nextElementSibling","lastListItem","previousElementSibling","filteredRows","rowToFocus","focusCell","numCols","colHeaders","lastTag","firstTag","newOptionsList","optionAlreadyExists","removeOption","filterCaseInsensitive","newTagsList","tagAlreadyAdded","tagExistsAsOption","x","textToAnnounce","tagRemovedMessage","devOptionsList","setAttribute","scrollIntoView","block","element","position","rowCells","cellToFocus","add","clearTagFocus","resetPosition","shouldOpenUp","clientHeight","message","liveRegionEl","textContent","liveRegionMessage","numResults","optionEls","existingOptionsMessage","num","charLimit","globalMessages","getCharactersEntered","characterLimitReached","style","spaceAvailable","getBoundingClientRect","right","inputMinimumWidth","top","offsetTop","toString","lowercaseList","str","sortCaseInsensitive","sort","a","b","renderTags","lockedTags","unlockedTags","idx","tagText","targetList","h","class","role","tabIndex","onClick","__spreadArray","renderDropdown","ref","renderHelpText","tabindex","renderAddNewButton","renderListItems","isFocused","isSelected","onKeyDown","onBlur","helpText","componentMessages","renderTagCounter","renderTable","onScroll","colWidths","renderTableHeaders","renderTableRows","noResultsMessage","header","overflowRule","colWrap","renderTableCells","localId","onMouseEnter","onMouseLeave","render","Host","labelPosition","htmlFor","requiredField","onFocus","autocomplete","getCharacterLimit","maxLength","undefined","onInput","info"],"sources":["src/components/wm-tag-input/wm-tag-input.scss?tag=wm-tag-input&encapsulation=shadow","src/components/wm-tag-input/wm-tag-input.tsx"],"sourcesContent":[":host,\nwm-tag-input {\n  font-family: inherit;\n  width: 100%;\n  display: block;\n\n  * {\n    box-sizing: border-box;\n    font-size: 14px;\n  }\n\n  @include label;\n\n  .wrapper {\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  .field-wrapper {\n    position: relative;\n    width: 100%;\n    border: 1px solid $input-border-color;\n    @include border-radius(3px);\n\n    &.focused {\n      @include field-focus;\n    }\n\n    &.invalid {\n      @include invalidBorder;\n    }\n  }\n\n  .character-count {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: rem-calc(80);\n    background-color: rgba(74, 74, 74, 0.05);\n    font-size: rem-calc(14);\n    font-weight: 500;\n    align-self: stretch;\n  }\n\n  .tags-and-input-wrapper {\n    position: relative;\n    width: 100%;\n    padding: rem-calc(8) rem-calc(4) rem-calc(8) 0;\n    margin-bottom: rem-calc(-8);\n  }\n\n  .upper-row {\n    width: 100%;\n    display: flex;\n    flex: 1;\n    justify-content: space-between;\n    &:before {\n      align-self: flex-start;\n      @include mdi-icon;\n      content: \"\\f349\"; // magnifying glass\n      color: $tag-input-search-icon-color;\n      padding: rem-calc(12) rem-calc(8) rem-calc(12) rem-calc(12);\n    }\n  }\n\n  .lower-row {\n    width: 100%;\n    min-height: rem-calc(30);\n  }\n\n  #max-tags {\n    display: flex;\n    align-items: center;\n    min-height: rem-calc(30);\n    background-color: $tag-input-max-tags-bg;\n    padding: rem-calc(8) rem-calc(16);\n    color: $tag-input-max-tags-color;\n    font-size: rem-calc(14);\n    border-top: 1px solid $tag-input-max-tags-border;\n    border-radius: 0 0 3px 3px;\n  }\n\n  .tag-area {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0;\n    padding: 0;\n\n    &:focus {\n      outline: none;\n    }\n\n    [role=\"option\"] {\n      display: inline-flex;\n      align-items: center;\n      height: rem-calc(28);\n      list-style: none;\n      color: $charcoal;\n      background-color: rgba(3, 0, 0, 0.1);\n      padding: rem-calc(8) rem-calc(10);\n      margin-bottom: rem-calc(8);\n      margin-right: rem-calc(4);\n      margin-left: rem-calc(4);\n      transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      white-space: pre;\n\n      &.highlight {\n        animation: fadeIn 1s;\n        @keyframes fadeIn {\n          0% {\n            background-color: rgba(3, 0, 0, 0.1);\n          }\n          50% {\n            background-color: #c8dfcc;\n          }\n\n          100% {\n            background-color: rgba(3, 0, 0, 0.1);\n          }\n        }\n      }\n\n      &.focused {\n        background-color: #d1d1d1;\n      }\n\n      &.locked {\n        background-color: $tag-input-locked-tag-bg;\n        color: white;\n      }\n\n      .icon {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        height: rem-calc(20);\n        width: rem-calc(20);\n        padding: 0;\n        margin-left: rem-calc(8);\n        &.remove-btn {\n          border: 1px solid $periwinkle;\n          color: $periwinkle;\n          border-radius: 50%;\n          cursor: pointer;\n          transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);\n\n          &:hover {\n            color: white;\n            background-color: $periwinkle;\n          }\n\n          &:before {\n            @include mdi-icon;\n            content: \"\\f156\";\n          }\n        }\n\n        &.lock {\n          color: white;\n          &:before {\n            @include mdi-icon;\n            content: \"\\f341\";\n          }\n        }\n      }\n    }\n  }\n\n  input {\n    font-family: inherit;\n    border: none;\n    height: rem-calc(28);\n    padding: 0;\n    margin-bottom: rem-calc(8);\n    margin-right: rem-calc(4);\n    padding-left: rem-calc(8);\n    right: 0px;\n\n    &.hidden {\n      display: none;\n    }\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .dropdown-wrapper {\n    margin: 0;\n    padding: 0;\n    @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n    @include transition(transform 0.25s ease);\n    @include scale($xVal: 1, $yVal: 0);\n    @include transformOrigin(center top);\n    @include border-radius(3px);\n    position: absolute;\n    top: calc(100% + 2px);\n    right: 0;\n    background: #fff;\n    z-index: 100;\n    width: 100%;\n    font-size: rem-calc(14);\n\n    .dropdown {\n      -webkit-overflow-scrolling: touch;\n      overflow: auto;\n      max-height: rem-calc(200);\n      margin: 0;\n      padding: 0;\n    }\n\n    &.open {\n      @include scale($xVal: 1, $yVal: 1);\n    }\n\n    &.upwards {\n      top: unset;\n      bottom: calc(100% + 2px);\n      @include transformOrigin(center bottom);\n    }\n\n    li,\n    div {\n      display: flex;\n      align-items: center;\n      padding: 0 rem-calc(16);\n      background: #fff;\n      list-style: none;\n      height: rem-calc(43);\n      white-space: pre;\n\n      &[role=\"option\"],\n      &.add-new-btn {\n        cursor: pointer;\n        color: $periwinkle;\n        font-weight: bold;\n        width: 100%;\n        border: none;\n\n        &[aria-selected=\"true\"] {\n          color: $gray;\n          font-style: italic;\n          font-weight: normal;\n          cursor: unset;\n        }\n        &:hover:not([aria-selected=\"true\"]),\n        &.focused {\n          outline: none;\n          background: $background;\n        }\n      }\n\n      &.help-text {\n        color: $charcoal;\n        height: auto;\n        min-height: rem-calc(43);\n        padding-top: rem-calc(4);\n        padding-bottom: rem-calc(4);\n        white-space: normal;\n      }\n\n      &:not(:last-child) {\n        border-bottom: 2px solid rgba(#2e1b46, 0.05);\n      }\n    }\n  }\n\n  .info-text {\n    font-style: italic;\n    margin-top: rem-calc(4);\n  }\n\n  .table-wrapper {\n    min-height: rem-calc(160);\n    overflow: auto;\n    margin-top: rem-calc(24);\n\n    #table {\n      width: 100%;\n      border-spacing: 0px;\n      &.fixed-widths {\n        table-layout: fixed;\n      }\n\n      .headers {\n        height: rem-calc(40);\n        background-color: #eeedf4;\n        th {\n          text-align: left;\n          font-size: rem-calc(12);\n          font-weight: 700;\n          text-transform: uppercase;\n          padding: 0 rem-calc(24);\n        }\n      }\n    }\n\n    tr {\n      // the following colors are in a css-specificity order, do not move\n      &:nth-child(even) {\n        background-color: $tag-input-row-zebra-bg;\n      }\n\n      &.selected {\n        background-color: $tag-input-row-selected-bg;\n        // box-shadow to add border without affecting surrounding cell borders\n        box-shadow: inset 0 0 0 1px $tag-input-row-selected-border;\n        font-weight: 500;\n      }\n\n      &.focused:not(.locked),\n      &:hover:not(.locked) {\n        background-color: $tag-input-row-focused;\n        box-shadow: none;\n      }\n\n      &.locked {\n        td {\n          cursor: auto;\n        }\n\n        td:first-child {\n          .cell-content-wrapper:before {\n            @include mdi-icon;\n            content: \"\\f33e\";\n            margin-right: rem-calc(8);\n            color: $tag-input-row-lock-color;\n          }\n        }\n      }\n    }\n\n    td {\n      height: rem-calc(60);\n      vertical-align: middle;\n      padding: 0 rem-calc(24);\n      cursor: pointer;\n      &.focused {\n        // from wm-navigation\n        box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%),\n          inset 0 0 4px 3px #61279e;\n      }\n      .cell-content-wrapper.trunc {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .description {\n        display: none;\n      }\n    }\n  }\n\n  .no-results {\n    padding: rem-calc(20) rem-calc(24);\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  #error {\n    @include errorMessage;\n  }\n}\n","import {\n  h,\n  Component,\n  Host,\n  Element,\n  Prop,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  forceUpdate,\n} from \"@stencil/core\";\nimport {\n  csvToArray,\n  debounce,\n  generateId,\n  hideTooltip,\n  intl,\n  measureText,\n  safeParseJSON,\n  shouldOpenUp,\n  showTooltip,\n} from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\ninterface TablePosition {\n  row: number;\n  column: number;\n}\n\ninterface MessageConfig {\n  addNewHelpText: string;\n  selectionHelpText: string;\n  tagAreaInstructions: string;\n  maxTagsReached: string;\n  tagsAdded: string;\n}\n\n@Component({\n  tag: \"wm-tag-input\",\n  styleUrl: \"wm-tag-input.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TagInput {\n  @Element() el!: HTMLWmTagInputElement;\n  private inputEl!: HTMLInputElement;\n  private dropdownEl!: HTMLDivElement;\n  private tagAreaEl!: HTMLUListElement;\n  private liveRegionEl!: HTMLDivElement;\n  private fieldWrapperEl!: HTMLDivElement;\n\n  @Prop() label!: string;\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop({ mutable: true }) options: string = \"\"; // csv\n  @Prop({ reflect: true, mutable: true }) selectedTags: string = \"\"; // csv\n  @Prop() info?: string;\n  @Prop() errorMessage?: string;\n  @Prop() addNew: boolean = true;\n  @Prop({ mutable: true }) placeholder?: string;\n  @Prop() requiredField: boolean = false;\n  @Prop() characterLimit: number = 50;\n  @Prop() maxTags?: number;\n  @Prop() tagInputType: \"dropdown\" | \"table\" = \"dropdown\";\n  @Prop() colHeaders!: string;\n  @Prop() colWidths?: string;\n  @Prop() colWrap?: string;\n  @Prop() messageConfig: string = \"\"; // JSON\n  @Event() wmTagInputChanged!: EventEmitter<{\n    value: string[] | HTMLWmTagInputRowElement[];\n    tagChanged: string | HTMLWmTagInputRowElement;\n  }>;\n\n  private uid: string = this.el.id ? this.el.id : generateId();\n  private openUp: boolean = false;\n  private tooltipVisible: boolean = false;\n  @State() focusedListItem!: HTMLLIElement | null;\n  @State() focusedTag: HTMLLIElement | null = null;\n  @State() tablePosition: TablePosition = { row: 0, column: 1 };\n  @State() isExpanded: boolean = false;\n  @State() tagsList: string[] = csvToArray(this.selectedTags);\n  @State() optionsList: string[] = csvToArray(this.options);\n  @State() charCount: number = 0;\n  @State() liveRegionMessage = \"\";\n\n  get focusedElement(): Element | null {\n    return this.el.shadowRoot!.activeElement;\n  }\n  get listItemEls(): HTMLLIElement[] {\n    return Array.from(this.dropdownEl.querySelectorAll(\"li\"));\n  }\n  get tagEls(): HTMLLIElement[] {\n    return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(\".tag\")) : [];\n  }\n  get nonLockedTagEls(): HTMLLIElement[] {\n    return this.tagEls.filter((tag) => !tag.classList.contains(\"locked\"));\n  }\n  get optionEls(): HTMLLIElement[] {\n    return Array.from(this.dropdownEl.querySelectorAll(\".option\"));\n  }\n  get wmRowEls(): HTMLWmTagInputRowElement[] {\n    return Array.from(this.el.querySelectorAll(\"wm-tag-input-row\"));\n  }\n  get localRowEls(): HTMLElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\"tr\"));\n  }\n  get filteredRows(): HTMLWmTagInputRowElement[] {\n    return this.wmRowEls.filter((row) => {\n      const colValues = [row.col1, row.col2, row.col3, row.col4].join(\"\").toLowerCase();\n      return this.inputEl && this.inputEl.value ? colValues.includes(this.inputEl.value.toLowerCase()) : true;\n    });\n  }\n  get nonLockedTagsList() {\n    let list: string[] = [];\n\n    if (this.tagInputType === \"table\") {\n      this.tagsList.forEach((id) => {\n        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];\n        if (!correspondingRowEl.locked) {\n          list.push(id);\n        }\n      });\n    } else if (this.tagInputType === \"dropdown\") {\n      list = this.tagsList;\n    }\n\n    return list;\n  }\n  get tagLimitReached(): boolean {\n    return !!(this.maxTags && this.tagsList.length >= this.maxTags);\n  }\n\n  get noResultsMessage() {\n    return intl.formatMessage({\n      id: \"tagInput.noResults\",\n      defaultMessage: \"No results match your search.\",\n      description: \"Message displayed when a user's search returns empty.\",\n    });\n  }\n\n  get componentMessages(): MessageConfig {\n    const addNewHelpText = intl.formatMessage({\n      id: \"tagInput.addNewHelpText\",\n      defaultMessage: \"Press the Enter or Comma key to add a new tag.\",\n      description: \"Help text appearing in a dropdown. Use imperative\",\n    });\n    const selectionHelpText = intl.formatMessage({\n      id: \"tagInput.selectionHelpText\",\n      defaultMessage: \"Search and select a tag.\",\n      description: \"Help text appearing in a dropdown. Use imperative\",\n    });\n    const maxTagsReachedMessage = intl.formatMessage({\n      id: \"tagInput.maxTagsReached\",\n      defaultMessage: \"No more tags can be added because the limit has been reached.\",\n    });\n    const tagAreaInstructions = intl.formatMessage({\n      id: \"tagInput.tagAreaInstructions\",\n      defaultMessage: \"tag selection. Press Backspace or Delete to remove a tag.\",\n    });\n    const tagsAddedMessage = intl.formatMessage({\n      id: \"tagInput.tagsAdded\",\n      defaultMessage: \"Tags added\",\n      description: \"For the user to understand how close they are to the tag limit, followed by x/y count\",\n    });\n\n    const defaultConfig: MessageConfig = {\n      addNewHelpText: addNewHelpText,\n      selectionHelpText: selectionHelpText,\n      maxTagsReached: maxTagsReachedMessage,\n      tagAreaInstructions: tagAreaInstructions,\n      tagsAdded: tagsAddedMessage,\n    };\n\n    const userProvidedConfig = safeParseJSON(this.messageConfig);\n\n    return userProvidedConfig ? { ...defaultConfig, ...userProvidedConfig } : defaultConfig;\n  }\n\n  get inputMinimumWidth(): number {\n    // 150px is the minimum width of the input field, or the length of the placeholder text\n    const inputElStyles = getComputedStyle(this.inputEl);\n    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);\n    const inputElBuffer = [\n      inputElStyles.paddingLeft,\n      inputElStyles.paddingRight,\n      inputElStyles.marginLeft,\n      inputElStyles.marginRight,\n      tagElStyles.marginRight,\n    ].reduce((prev, curr) => prev + parseInt(curr.replace(\"px\", \"\")), 0);\n\n    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder!).width + inputElBuffer);\n    return minimumWidth;\n  }\n\n  generateTagAddedMessage(tag: string): string {\n    return intl.formatMessage(\n      {\n        id: \"tagInput.tagAdded\",\n        defaultMessage: \"{tagName} added.\",\n        description: \"A confirmation for adding a tag.\",\n      },\n      { tagName: tag }\n    );\n  }\n\n  generateTagAlreadyAddedMessage(tag: string): string {\n    return intl.formatMessage(\n      {\n        id: \"tagInput.tagAlreadyAdded\",\n        defaultMessage: \"{tagName} has already been added.\",\n        description: \"An alert for adding a tag that is already present.\",\n      },\n      { tagName: tag }\n    );\n  }\n\n  componentWillLoad() {\n    if (!this.placeholder) {\n      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);\n    }\n    if (!this.label) {\n      console.error(\"wm-tag-input must have a label property\");\n    }\n\n    this.consolidateSelectedTags();\n\n    this.el.focus = () => {\n      const firstFocusableTag = this.nonLockedTagEls[0];\n      if (firstFocusableTag) {\n        this.tagAreaEl.focus();\n        this.focusTag(firstFocusableTag);\n      } else {\n        this.inputEl.focus();\n      }\n    };\n\n    // on resize of component, trigger componentDidRender -> positionInput\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidLoad() {\n    // prevent highlighting of pre-selected tags\n    this.tagEls.forEach((el) => el.classList.remove(\"highlight\"));\n  }\n\n  componentDidRender() {\n    this.positionInput();\n  }\n\n  consolidateSelectedTags() {\n    this.tagsList.forEach((tag) => {\n      if (!this.includesCaseInsensitive(this.optionsList, tag)) {\n        this.options += `${this.options.length > 0 ? \",\" : \"\"}${tag}`;\n      }\n    });\n\n    this.optionsList = csvToArray(this.options);\n  }\n\n  createPlaceholderDefault(addNew: boolean, hasOptions: boolean): string {\n    const addAndSearchPlaceholder = intl.formatMessage({\n      id: \"tagInput.placeholderAddAndSearch\",\n      defaultMessage: \"Add or search for a tag\",\n      description: \"Placeholder text. Use imperative\",\n    });\n    const searchPlaceholder = intl.formatMessage({\n      id: \"tagInput.placeholderSearch\",\n      defaultMessage: \"Search and select a tag\",\n      description: \"Placeholder text. Use imperative\",\n    });\n    const addPlaceholder = intl.formatMessage({\n      id: \"tagInput.placeholderAdd\",\n      defaultMessage: \"Add a new tag\",\n      description: \"Placeholder text. Use imperative\",\n    });\n\n    let placeholder = \"\";\n    if (addNew && hasOptions) {\n      placeholder = addAndSearchPlaceholder;\n    } else if (!addNew && hasOptions) {\n      placeholder = searchPlaceholder;\n    } else if (addNew) {\n      placeholder = addPlaceholder;\n    }\n    return placeholder;\n  }\n\n  @Watch(\"tagsList\")\n  reflectSelectedTags(newValue: string[], oldValue: string[]) {\n    const isAddition = newValue.length > oldValue.length;\n    let changedTag: string | HTMLWmTagInputRowElement = \"\";\n    let selectedTags: string[] | HTMLWmTagInputRowElement[] = this.tagsList;\n\n    if (isAddition) {\n      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];\n    } else {\n      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];\n    }\n\n    // event emitted by type table uses element references instead of strings\n    if (this.tagInputType === \"table\") {\n      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];\n      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`) as HTMLWmTagInputRowElement);\n    }\n\n    this.selectedTags = this.listToCSV(this.tagsList);\n    let detail = { value: selectedTags, tagChanged: changedTag };\n    this.wmTagInputChanged.emit(detail);\n  }\n\n  @Watch(\"errorMessage\")\n  handleErrorMessageChange() {\n    if (this.errorMessage) {\n      this.announce(this.errorMessage);\n    }\n  }\n\n  @Listen(\"wmTagInputRowUpdated\")\n  handleRowUpdate() {\n    forceUpdate(this.el);\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  closeIfNotElOrChild(ev: MouseEvent): void {\n    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot!.contains(ev.target as HTMLElement);\n\n    if (this.tagInputType === \"dropdown\" && isntElOrChild && this.isExpanded) {\n      this.closeDropdown();\n    }\n  }\n\n  // From wm-button\n  // we need to listen for scroll events during the capture phase because they do not bubble up\n  // there can be layouts where the main content has 100vh and overflows\n  // in these cases window will register no scroll events unless we catch on they way down\n  @Listen(\"scroll\", { target: \"window\", capture: true })\n  dismissTooltip() {\n    if (this.tooltipVisible) {\n      hideTooltip();\n      this.tooltipVisible = false;\n    }\n  }\n\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 30);\n\n  handleInputKeyDown(ev: KeyboardEvent) {\n    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {\n      this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));\n    }\n\n    // prevent keydown triggering on tag area\n    ev.stopPropagation();\n    switch (ev.key) {\n      case \"Enter\":\n      case \",\":\n        ev.preventDefault();\n        this.handleInputEnter();\n        break;\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.handleInputArrowDown();\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.handleInputArrowUp();\n        break;\n      case \"ArrowLeft\":\n        ev.preventDefault();\n        if (this.tagInputType === \"table\" && this.tablePosition.row) {\n          this.moveLeftCell();\n        }\n        break;\n      case \"ArrowRight\":\n        ev.preventDefault();\n        if (this.tagInputType === \"table\" && this.tablePosition.row) {\n          this.moveRightCell();\n        }\n        break;\n      case \"Escape\":\n        if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n          this.closeDropdown();\n        }\n        break;\n      case \"ArrowLeft\":\n      case \"Backspace\":\n        this.handleInputBackspace();\n        break;\n    }\n  }\n\n  handleInputFocus() {\n    if (this.tagInputType === \"dropdown\") {\n      this.openDropdown();\n      this.clearListItemFocus();\n    }\n    // force update needed to apply styled state of field-wrapper el\n    forceUpdate(this.el);\n  }\n\n  handleInputChanged(value: string) {\n    this.charCount = value.length;\n\n    if (this.tagInputType === \"dropdown\") {\n      this.clearListItemFocus();\n      if (this.charCount >= this.characterLimit - 5) {\n        this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));\n      }\n      if (!this.isExpanded) {\n        this.openDropdown();\n      }\n    } else if (this.tagInputType === \"table\") {\n      this.clearCellFocus();\n    }\n    this.announceExistingOptions();\n  }\n\n  handleInputEnter() {\n    if (this.tagInputType === \"dropdown\") {\n      if (this.focusedListItem) {\n        this.handleListItemClick(this.focusedListItem);\n      } else {\n        this.submitInput(this.addNew, this.inputEl.value.trim());\n      }\n    } else if (this.tagInputType === \"table\" && this.tablePosition.row > 0) {\n      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);\n    }\n  }\n\n  submitInput(canAddNew: boolean, value: string) {\n    const hasNonWhiteSpaceCharacters = value.match(/\\S/);\n    if (canAddNew && hasNonWhiteSpaceCharacters) {\n      this.addTag(value);\n      this.optionsList = this.addOption(value);\n      this.resetInput();\n    }\n  }\n\n  handleInputArrowDown() {\n    if (this.tagInputType === \"table\") {\n      this.moveDownRow();\n    } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n      this.moveDownListItem();\n    } else if (this.tagInputType === \"dropdown\") {\n      this.openDropdown();\n    }\n  }\n\n  handleInputArrowUp() {\n    if (this.tagInputType === \"table\") {\n      this.moveUpRow();\n    } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n      this.moveUpListItem();\n    } else if (this.tagInputType === \"dropdown\") {\n      this.openDropdown();\n    }\n  }\n\n  handleInputBackspace() {\n    if (this.inputEl.value === \"\" && this.tagsList.length > 0) {\n      // wait for events to finish firing before redirecting focus\n      // prevents double input in input area and tag area\n      window.requestAnimationFrame(() => {\n        if (this.nonLockedTagsList.length > 0) {\n          this.tagAreaEl.focus();\n          this.focusTag(this.tagEls[this.tagEls.length - 1]);\n        }\n      });\n    }\n  }\n\n  handleListItemKeyDown(ev: KeyboardEvent) {\n    const typedEvTarget = ev.target as HTMLElement;\n\n    switch (ev.key) {\n      case \"Enter\":\n      case \" \":\n        ev.preventDefault();\n        typedEvTarget.click();\n        break;\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.moveDownListItem();\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.moveUpListItem();\n        break;\n      case \"Escape\":\n        if (this.focusedElement !== this.inputEl) {\n          this.inputEl.focus();\n        } else if (this.tagInputType === \"dropdown\") {\n          this.closeDropdown();\n        }\n        break;\n    }\n  }\n\n  handleListItemClick(item: HTMLElement) {\n    const tag = item.dataset.option!.trim() || \"\";\n\n    if (this.includesCaseInsensitive(this.tagsList, tag)) {\n      this.announce(this.generateTagAlreadyAddedMessage(tag));\n    } else {\n      this.resetInput();\n      this.addTag(tag);\n      this.optionsList = this.addOption(tag);\n      this.focusedListItem = null;\n    }\n  }\n\n  handleTableRowClick(rowId: string) {\n    const referencedRow = this.el.querySelector(`#${rowId}`) as HTMLWmTagInputRowElement;\n    const isLocked = referencedRow.locked;\n\n    if (!isLocked) {\n      if (this.includesCaseInsensitive(this.tagsList, rowId)) {\n        this.removeTag(rowId);\n      } else if (!this.tagLimitReached) {\n        this.addTag(rowId);\n        this.resetInput();\n      }\n    }\n  }\n\n  handleTagAreaKeyDown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.moveLeftTag();\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.moveRightTag();\n        break;\n      case \"Backspace\":\n      case \"Delete\":\n        this.handleTagAreaDelete();\n        break;\n    }\n  }\n\n  handleTagAreaDelete() {\n    const isLocked = this.focusedTag && this.focusedTag.classList.contains(\"locked\");\n\n    if (this.focusedTag && this.focusedTag.dataset.tag && !isLocked) {\n      this.removeTag(this.focusedTag.dataset.tag);\n\n      if (this.nonLockedTagsList.length === 0) {\n        // focus input if no tags are left\n        this.inputEl.focus();\n      } else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {\n        // reassign focus if removing the last tag but there are still tags remaining\n        this.focusedTag = this.tagEls[this.tagEls.length - 2];\n        this.focusTag(this.focusedTag);\n      }\n    }\n  }\n\n  handleBlur(ev: FocusEvent, component: HTMLElement) {\n    const isntElOrChild =\n      ev.relatedTarget !== component && !this.el.shadowRoot!.contains(ev.relatedTarget as HTMLElement);\n\n    this.dismissTooltip();\n    this.clearCellFocus();\n\n    if (isntElOrChild) {\n      this.fieldWrapperEl.classList.remove(\"focused\");\n      if (this.tagInputType === \"dropdown\") {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  handleCellMouseEnter(ev: MouseEvent) {\n    const cell = ev.target as HTMLElement;\n    const contentWrapper = cell.querySelector(\".cell-content-wrapper\")!;\n    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\n\n    if (isTruncated) {\n      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\n      showTooltip(\"bottom\", cell, cell.innerText!);\n      this.tooltipVisible = true;\n    }\n  }\n\n  handleTagAreaFocus() {\n    if (this.tagInputType === \"dropdown\") {\n      this.closeDropdown();\n    }\n\n    const firstFocusableTag = this.nonLockedTagEls[0];\n    firstFocusableTag && this.focusTag(firstFocusableTag);\n  }\n\n  handleRemoveButtonClick(tag: string) {\n    this.moveLeftTag();\n    this.removeTag(tag);\n  }\n\n  moveDownListItem() {\n    if (this.listItemEls.length > 0) {\n      const firstListItem = this.listItemEls[0];\n\n      if (!this.focusedListItem) {\n        this.focusListItem(firstListItem);\n      } else if (this.focusedListItem.nextElementSibling) {\n        this.focusListItem(this.focusedListItem.nextElementSibling as HTMLLIElement);\n      } else {\n        this.focusListItem(firstListItem);\n      }\n    }\n  }\n\n  moveUpListItem() {\n    if (this.listItemEls.length > 0) {\n      const lastListItem = this.listItemEls[this.listItemEls.length - 1];\n\n      if (!this.focusedListItem) {\n        this.focusListItem(lastListItem);\n      } else if (this.focusedListItem.previousElementSibling) {\n        this.focusListItem(this.focusedListItem.previousElementSibling as HTMLLIElement);\n      } else {\n        this.clearListItemFocus();\n      }\n    }\n  }\n\n  moveDownRow() {\n    if (this.filteredRows.length > 0) {\n      if (this.tablePosition.row === 0) {\n        this.tablePosition.row = 1;\n      } else if (this.tablePosition.row === this.filteredRows.length) {\n        this.tablePosition.row = 1;\n      } else {\n        this.tablePosition.row++;\n      }\n\n      // skip locked rows\n      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\n      if (rowToFocus.locked) {\n        this.moveDownRow();\n      } else {\n        this.focusCell(this.tablePosition);\n      }\n    }\n  }\n\n  moveUpRow() {\n    if (this.filteredRows.length > 0) {\n      if (this.tablePosition.row === 0) {\n        this.tablePosition.row = this.filteredRows.length;\n      } else if (this.tablePosition.row === 1) {\n        this.tablePosition.row = 0;\n      } else {\n        this.tablePosition.row--;\n      }\n\n      // skip locked rows\n      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\n      if (rowToFocus && rowToFocus.locked) {\n        this.moveUpRow();\n      } else if (rowToFocus) {\n        this.focusCell(this.tablePosition);\n      } else {\n        this.clearCellFocus();\n      }\n    }\n  }\n\n  moveLeftCell() {\n    if (this.tablePosition.column != 1) {\n      this.tablePosition.column--;\n      this.focusCell(this.tablePosition);\n    }\n  }\n\n  moveRightCell() {\n    const numCols = csvToArray(this.colHeaders).length;\n\n    if (this.tablePosition.column < numCols) {\n      this.tablePosition.column++;\n      this.focusCell(this.tablePosition);\n    }\n  }\n\n  moveLeftTag() {\n    const lastTag = this.tagEls[this.tagEls.length - 1];\n    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling as HTMLLIElement)) {\n      this.focusedTag = this.focusedTag.previousElementSibling as HTMLLIElement;\n    } else {\n      this.focusedTag = lastTag;\n    }\n    // skip locked tags\n    if (this.focusedTag.classList.contains(\"locked\") && this.nonLockedTagEls.length > 0) {\n      this.moveLeftTag();\n    } else {\n      this.focusTag(this.focusedTag);\n    }\n  }\n\n  moveRightTag() {\n    const firstTag = this.tagEls[0];\n    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling as HTMLLIElement)) {\n      this.focusedTag = this.focusedTag.nextElementSibling as HTMLLIElement;\n    } else {\n      this.focusedTag = firstTag;\n    }\n    // skip locked tags\n    if (this.focusedTag.classList.contains(\"locked\")) {\n      this.moveRightTag();\n    } else {\n      this.focusTag(this.focusedTag);\n    }\n  }\n\n  addOption(option: string): string[] {\n    let newOptionsList = this.optionsList;\n    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);\n    if (!optionAlreadyExists) {\n      newOptionsList = newOptionsList.concat(option);\n    }\n    return newOptionsList;\n  }\n\n  removeOption(option: string) {\n    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);\n  }\n\n  addTag(tag: string): void {\n    let newTagsList = this.tagsList;\n    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);\n    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];\n\n    if (!tagAlreadyAdded) {\n      let textToAnnounce = tag;\n      if (this.tagInputType === \"table\") {\n        const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n        textToAnnounce = referencedRow.col1!;\n      }\n      this.announce(this.generateTagAddedMessage(textToAnnounce));\n      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);\n      // if maxTags has been reached, focus should go to the tagArea\n      if (this.tagLimitReached) {\n        this.tagAreaEl.focus();\n      }\n    }\n  }\n\n  removeTag(tag: string) {\n    let textToAnnounce = tag;\n    if (this.tagInputType === \"table\") {\n      const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n      textToAnnounce = referencedRow.col1!;\n    }\n    const tagRemovedMessage = intl.formatMessage(\n      { id: \"tagInput.tagRemoved\", defaultMessage: \"{tag} removed\" },\n      { tag: textToAnnounce }\n    );\n    this.announce(tagRemovedMessage);\n    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);\n\n    if (this.tagInputType === \"dropdown\") {\n      // if a tag was introduced by the user, also remove it from the dropdown options\n      const devOptionsList = csvToArray(this.options);\n      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {\n        this.removeOption(tag);\n      }\n    }\n  }\n\n  focusListItem(item: HTMLLIElement): void {\n    this.focusedListItem = item;\n    this.inputEl.setAttribute(\"aria-activedescendant\", this.focusedListItem.id);\n    item.scrollIntoView({ block: \"nearest\" });\n  }\n\n  focusTag(element: HTMLLIElement): void {\n    if (element.classList.contains(\"locked\")) {\n      this.focusedTag = null;\n      this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\n    } else {\n      this.focusedTag = element;\n      this.tagAreaEl.setAttribute(\"aria-activedescendant\", this.focusedTag.id);\n    }\n  }\n\n  focusCell(position: TablePosition) {\n    this.clearCellFocus(false);\n\n    if (position.row) {\n      const rowToFocus = this.localRowEls[position.row];\n      const rowCells = rowToFocus.querySelectorAll(\"td\");\n      const cellToFocus = rowCells[position.column - 1];\n      const contentWrapper = cellToFocus.querySelector(\".cell-content-wrapper\")!;\n      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\n\n      rowToFocus.classList.add(\"focused\");\n      cellToFocus.classList.add(\"focused\");\n      cellToFocus.scrollIntoView({ block: \"nearest\" });\n      this.inputEl.setAttribute(\"aria-activedescendant\", cellToFocus.id);\n\n      this.dismissTooltip();\n      if (isTruncated) {\n        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\n        showTooltip(\"bottom\", cellToFocus, cellToFocus.innerText!);\n        this.tooltipVisible = true;\n      }\n    }\n  }\n\n  clearTagFocus() {\n    this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\n    this.focusedTag = null;\n  }\n\n  clearCellFocus(resetPosition: boolean = true) {\n    this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\n    if (resetPosition) {\n      this.tablePosition = { row: 0, column: 1 };\n    }\n\n    this.localRowEls.forEach((row) => {\n      row.classList.remove(\"focused\");\n      row.querySelectorAll(\"td\").forEach((cell) => {\n        cell.classList.remove(\"focused\");\n      });\n    });\n  }\n\n  openDropdown() {\n    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border\n    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);\n    this.isExpanded = true;\n  }\n\n  closeDropdown() {\n    this.clearListItemFocus();\n    this.isExpanded = false;\n  }\n\n  clearListItemFocus() {\n    this.focusedListItem = null;\n    this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\n\n    this.listItemEls.forEach((el) => {\n      el.classList.remove(\"focused\");\n    });\n  }\n\n  resetInput() {\n    this.charCount = 0;\n    this.inputEl.value = \"\";\n  }\n\n  announce(message: string) {\n    // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\n    if (this.liveRegionEl.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.liveRegionMessage = message;\n  }\n\n  announceExistingOptions() {\n    // request animation frame to wait for re-rendering of filtered options\n    window.requestAnimationFrame(() => {\n      let numResults = 0;\n\n      if (this.tagInputType === \"dropdown\") {\n        numResults = this.optionEls.length;\n      } else if (this.tagInputType === \"table\") {\n        numResults = this.filteredRows.length;\n      }\n\n      const existingOptionsMessage = intl.formatMessage(\n        {\n          id: \"tagInput.existingOptions\",\n          defaultMessage: \"{num, plural, one {1 existing option.} other {# existing options.}}\",\n        },\n        { num: numResults }\n      );\n\n      this.announce(existingOptionsMessage);\n    });\n  }\n\n  generateCharacterLimitWarning(charCount: number, charLimit: number): string {\n    let message = globalMessages.getCharactersEntered(charCount, charLimit);\n    if (charCount >= charLimit) {\n      message += ` ${globalMessages.characterLimitReached}`;\n    }\n    return message;\n  }\n\n  positionInput() {\n    const lastTag = this.tagEls[this.tagEls.length - 1];\n    // default placement to fall back to when no tags are present, or not enough space is available\n    this.inputEl.style.position = \"static\";\n    this.inputEl.style.width = \"100%\";\n\n    if (lastTag) {\n      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;\n      if (spaceAvailable >= this.inputMinimumWidth) {\n        // because the input has right: 0px\n        // all thats needed to properly place it is setting position: absolute, top, and width\n        this.inputEl.style.position = \"absolute\";\n        this.inputEl.style.top = lastTag.offsetTop.toString() + \"px\";\n        this.inputEl.style.width =\n          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + \"px\";\n      }\n    }\n  }\n\n  /// Helpers\n\n  listToCSV(list: string[]): string {\n    return list.join(\",\");\n  }\n\n  includesCaseInsensitive(list: string[], element: string): boolean {\n    const lowercaseList = list.map((str) => str.toLowerCase());\n    return lowercaseList.includes(element.toLowerCase());\n  }\n\n  filterCaseInsensitive(list: string[], element: string): string[] {\n    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());\n  }\n\n  sortCaseInsensitive(list: string[]) {\n    // The vanilla .sort method places words that start with capital letters above others (ASCII order)\n    // so we need to pass in our own compare function to sort case-insensitive\n    return list.sort((a, b) => {\n      a = a.toLowerCase();\n      b = b.toLowerCase();\n      return a > b ? 1 : a < b ? -1 : 0;\n    });\n  }\n\n  /// Renders\n\n  renderTags() {\n    let lockedTags: HTMLLIElement[] = [];\n    let unlockedTags: HTMLLIElement[] = [];\n\n    this.tagsList.forEach((tag, idx) => {\n      const id = `tag${idx + 1}`;\n      let tagText = \"\";\n      let isLocked = false;\n\n      if (this.tagInputType === \"dropdown\") {\n        tagText = tag;\n      } else if (this.tagInputType === \"table\") {\n        // display table tags using col1 of the row with the same id\n        // if one can't be found, display as empty\n        const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n        tagText = referencedRow ? referencedRow.col1! : \"\";\n        isLocked = referencedRow ? referencedRow.locked : false;\n      }\n\n      // make sure locked tags always appear in front of list\n      const targetList = isLocked ? lockedTags : unlockedTags;\n      targetList.push(\n        <li\n          id={id}\n          class={`tag highlight ${this.focusedTag && this.focusedTag.id === id ? \"focused\" : \"\"} ${\n            isLocked ? \"locked\" : \"\"\n          }`}\n          data-tag={tag}\n          role=\"option\"\n        >\n          {tagText}\n          {isLocked ? (\n            <div class=\"icon lock\"></div>\n          ) : (\n            <button class=\"icon remove-btn\" tabIndex={-1} onClick={() => this.handleRemoveButtonClick(tag)}></button>\n          )}\n        </li>\n      );\n    });\n\n    return [...lockedTags, ...unlockedTags];\n  }\n\n  renderDropdown() {\n    return (\n      <div\n        class={`dropdown-wrapper ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\n        ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\n      >\n        <div id=\"help-text\" class=\"help-text\">\n          {this.renderHelpText()}\n        </div>\n        <ul\n          class=\"dropdown\"\n          id=\"dropdown\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-expanded={this.isExpanded ? \"true\" : false}\n          aria-label={this.label}\n          tabindex={-1}\n        >\n          {this.inputEl && this.renderAddNewButton()}\n          {this.renderListItems(this.optionsList)}\n        </ul>\n      </div>\n    );\n  }\n\n  renderListItems(optionsList: string[]) {\n    optionsList = this.sortCaseInsensitive(optionsList);\n\n    // filter by input\n    if (this.inputEl && this.inputEl.value) {\n      optionsList = this.optionsList.filter((option) =>\n        option.toLowerCase().includes(this.inputEl.value.toLowerCase())\n      );\n    }\n\n    return optionsList.map((option, idx) => {\n      const id = `option${idx + 1}`;\n      const isFocused = this.focusedListItem && this.focusedListItem.id === id;\n      const isSelected = this.includesCaseInsensitive(this.tagsList, option);\n\n      return (\n        <li\n          class={`option ${isFocused ? \"focused\" : \"\"}`}\n          role=\"option\"\n          id={id}\n          data-option={option}\n          aria-selected={isSelected ? \"true\" : \"false\"}\n          aria-disabled={isSelected ? \"true\" : \"false\"}\n          onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\n          onBlur={(ev) => this.handleBlur(ev, this.el)}\n          onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\n        >\n          {option}\n        </li>\n      );\n    });\n  }\n\n  renderAddNewButton() {\n    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\\S/);\n    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());\n    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {\n      const id = `add-new-btn`;\n      const isFocused = this.focusedListItem && this.focusedListItem.id === id;\n      return (\n        <li\n          role=\"option\"\n          class={`add-new-btn ${isFocused ? \"focused\" : \"\"}`}\n          id={id}\n          data-option={this.inputEl.value}\n          onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\n          onBlur={(ev) => this.handleBlur(ev, this.el)}\n          onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\n          tabIndex={isFocused ? 0 : -1}\n        >\n          {`Add \"${this.inputEl.value.trim()}\"`}\n        </li>\n      );\n    } else return \"\";\n  }\n\n  renderHelpText() {\n    let helpText = \"\";\n\n    if (this.optionsList.length > 0) {\n      helpText += this.componentMessages.selectionHelpText;\n    }\n    if (this.addNew) {\n      helpText += \" \" + this.componentMessages.addNewHelpText;\n    }\n\n    return helpText;\n  }\n\n  renderTagCounter() {\n    if (this.maxTags) {\n      return (\n        <div class=\"lower-row\">\n          <div id=\"max-tags\">\n            {`${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`}\n            {this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderTable() {\n    return (\n      <div class=\"table-wrapper\" onScroll={() => this.dismissTooltip()}>\n        <table\n          id=\"table\"\n          role=\"grid\"\n          class={`${this.colWidths ? \"fixed-widths\" : \"\"}`}\n          aria-label={this.label}\n          aria-multiselectable=\"true\"\n        >\n          {this.renderTableHeaders()}\n          {this.filteredRows.length ? this.renderTableRows() : <div class=\"no-results\">{this.noResultsMessage}</div>}\n        </table>\n      </div>\n    );\n  }\n\n  renderTableHeaders() {\n    return (\n      <tr class=\"headers\" role=\"row\">\n        {csvToArray(this.colHeaders).map((header, idx) => {\n          let overflowRule = \"wrap\";\n          if (this.colWrap && csvToArray(this.colWrap)[idx]) {\n            overflowRule = csvToArray(this.colWrap)[idx];\n          }\n          return (\n            <th\n              class={`header-cell ${overflowRule}`}\n              role=\"columnheader\"\n              // @ts-ignore\n              width={this.colWidths ? csvToArray(this.colWidths)[idx] : \"\"}\n            >\n              {header}\n            </th>\n          );\n        })}\n      </tr>\n    );\n  }\n\n  renderTableRows() {\n    return this.filteredRows.map((row) => {\n      const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\n\n      return (\n        <tr\n          id={row.id}\n          class={`${row.locked ? \"locked\" : \"\"} ${isSelected ? \"selected\" : \"\"}`}\n          role=\"row\"\n          onClick={() => this.handleTableRowClick(row.id)}\n        >\n          {this.renderTableCells(row)}\n        </tr>\n      );\n    });\n  }\n\n  renderTableCells(row: HTMLWmTagInputRowElement) {\n    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);\n    const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\n\n    return colValues.map((val, idx) => {\n      const localId = `${row.id}-col${idx + 1}`;\n      let overflowRule = \"wrap\";\n      if (this.colWrap && csvToArray(this.colWrap)[idx]) {\n        overflowRule = csvToArray(this.colWrap)[idx];\n      }\n\n      return (\n        <td\n          id={localId}\n          role=\"gridcell\"\n          aria-describedby={`${localId}-description`}\n          aria-selected={isSelected.toString()}\n          onMouseEnter={(ev) => this.handleCellMouseEnter(ev)}\n          onMouseLeave={() => this.dismissTooltip()}\n        >\n          <div class={`cell-content-wrapper ${overflowRule}`}>{val}</div>\n          <div class=\"description\" id={`${localId}-description`}>\n            {row.locked ? \"locked\" : \"\"}\n          </div>\n        </td>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host id={this.uid}>\n        <div class={`wrapper label-${this.labelPosition} ${this.errorMessage ? \"invalid\" : \"\"}`}>\n          <div class=\"label-wrapper\">\n            <label class=\"label\" htmlFor={`input${this.uid}`}>\n              {this.label}\n              {this.requiredField && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          </div>\n          <div\n            class={`field-wrapper ${this.focusedElement ? \"focused\" : \"\"} ${this.errorMessage ? \"invalid\" : \"\"}`}\n            ref={(el) => (this.fieldWrapperEl = el as HTMLDivElement)}\n          >\n            <div class=\"upper-row\">\n              <div class=\"tags-and-input-wrapper\">\n                {this.tagsList.length > 0 && (\n                  <ul\n                    ref={(el) => (this.tagAreaEl = el as HTMLUListElement)}\n                    class=\"tag-area\"\n                    role=\"listbox\"\n                    aria-activedescendant=\"\"\n                    aria-orientation=\"horizontal\"\n                    aria-label={`${this.label} ${\n                      this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : \"\"\n                    }`}\n                    tabindex={this.nonLockedTagsList.length > 0 ? 0 : -1}\n                    aria-describedby={`info max-tags`}\n                    onFocus={() => this.handleTagAreaFocus()}\n                    onBlur={(ev) => {\n                      this.clearTagFocus();\n                      this.handleBlur(ev, this.el);\n                    }}\n                    onKeyDown={(ev) => this.handleTagAreaKeyDown(ev)}\n                  >\n                    {this.renderTags()}\n                  </ul>\n                )}\n                <input\n                  id={`input${this.uid}`}\n                  class={this.tagLimitReached ? \"hidden\" : \"\"}\n                  role=\"combobox\"\n                  ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                  autocomplete=\"off\"\n                  aria-required={this.requiredField ? \"true\" : null}\n                  aria-controls={this.tagInputType}\n                  aria-describedby={`help-text${this.errorMessage ? \" error \" : \"\"}`}\n                  aria-label={`${this.label} ${\n                    this.tagInputType === \"dropdown\" ? globalMessages.getCharacterLimit(this.characterLimit) : \"\"\n                  }`}\n                  aria-expanded={this.tagInputType === \"dropdown\" ? this.isExpanded.toString() : null}\n                  placeholder={this.placeholder}\n                  maxLength={this.tagInputType === \"dropdown\" ? this.characterLimit : undefined}\n                  onInput={() => this.handleInputChanged(this.inputEl.value)}\n                  onBlur={(ev) => {\n                    this.handleBlur(ev, this.el);\n                  }}\n                  onFocus={() => this.handleInputFocus()}\n                  onKeyDown={(ev) => this.handleInputKeyDown(ev)}\n                ></input>\n              </div>\n              {this.tagInputType === \"dropdown\" && (\n                <div class=\"character-count\">\n                  {this.charCount}/{this.characterLimit}\n                </div>\n              )}\n            </div>\n            {this.renderTagCounter()}\n            {this.tagInputType === \"dropdown\" && this.renderDropdown()}\n          </div>\n          {this.info && (\n            <div id=\"info\" class=\"info-text\">\n              {this.info}\n            </div>\n          )}\n          {this.errorMessage && <div id=\"error\">{this.errorMessage}</div>}\n          <div\n            class=\"sr-only\"\n            aria-live=\"assertive\"\n            ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n            aria-atomic=\"true\"\n          >\n            {this.liveRegionMessage}\n          </div>\n          {this.tagInputType === \"table\" && this.renderTable()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["wmTimepickerCss","Timepicker","this","twelveHrValid","twentyFourHrValid","uid","timeFormat","times","openUp","buttonAriaLabel","intl","formatMessage","id","defaultMessage","description","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKey","ev","key","preventDefault","isExpanded","open","moveDown","selectedOption","moveUp","handleOptionClick","textContent","stopPropagation","close","focusOption","optionsList","setDropdownPosition","length","updateErrorState","displayedErrorMessage","errorMessage","componentWillLoad","label","console","error","el","generateId","generateTimes","componentDidLoad","optionsEl","classList","add","Array","from","querySelectorAll","value","processInput","isValidTime","input","test","startTime","i","h_1","Math","floor","hour","toString","padStart","m","min","concat","findNearestTimeInterval","time","formattedTime","formatToStorage","minutes","parseInt","slice","roundedMinutes","round","roundedHour","replace","handleListSelection","_this","option","filter","o","formatToDisplay","setValue","previousValue","inputEl","wmTimepickerNewValidValue","emit","wmTimepickerOnChange","isValid","newErrorMessage","determineErrorMessage","message","requiredError","requiredFieldMessage","invalidError","requiredField","splitTime","exec","hours","amPm","undefined","toUpperCase","includes","_a","itemToSelect","shouldOpenUp","remove","window","requestAnimationFrame","returnFocus","setTimeout","buttonEl","focus","item","forEach","tabIndex","position","prevItem","previousElementSibling","scrollTop","getBoundingClientRect","top","nextItem","nextElementSibling","bottom","offsetHeight","findIndex","x","clientHeight","prevEl","nextEl","handleInput","handleInputBlur","shouldPreventValidation","preventValidation","isRelatedTarget","tpWrapper","renderOptions","map","index","h","role","onClick","render","Host","invalid","onBlur","class","labelPosition","ref","t","htmlFor","onInput","disabled","placeholder","autocomplete","onFocus","onMouseDown","tabindex"],"sources":["src/components/wm-timepicker/wm-timepicker.scss?tag=wm-timepicker&encapsulation=shadow","src/components/wm-timepicker/wm-timepicker.tsx"],"sourcesContent":[":host,\nwm-timepicker {\n  font-family: inherit;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  @include label;\n\n  .wrapper {\n    .inner-wrapper {\n      @include displayFlex();\n      align-items: center;\n      height: rem-calc(40);\n      border: 1px solid $input-border-color;\n      @include border-radius(3px);\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\n      justify-content: space-between;\n      position: relative;\n\n      input {\n        -moz-border-top-left-radius: 3px;\n        -webkit-border-top-left-radius: 3px;\n        border-top-left-radius: 3px;\n        -moz-border-bottom-left-radius: 3px;\n        -webkit-border-bottom-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        border: none;\n        font-size: rem-calc(14);\n        padding: rem-calc(10 15 8);\n        min-width: 0;\n        height: 100%;\n        flex: 1;\n        margin: 0;\n        font-family: inherit;\n\n        &:disabled {\n          background-color: $input-disabled-bg;\n          color: $input-disabled-color;\n        }\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      button {\n        all: unset;\n        cursor: pointer;\n        padding: rem-calc(0px 6px);\n        height: rem-calc(38);\n        background-color: $button-default-background;\n        border: none;\n        -moz-border-top-right-radius: 3px;\n        -webkit-border-top-right-radius: 3px;\n        border-top-right-radius: 3px;\n        -moz-border-bottom-right-radius: 3px;\n        -webkit-border-bottom-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n\n        // reset styles inherited from Planning in browsers without shadow DOM\n        -moz-border-top-left-radius: 0;\n        -webkit-border-top-left-radius: 0;\n        border-top-left-radius: 0;\n        -moz-border-bottom-left-radius: 0;\n        -webkit-border-bottom-left-radius: 0;\n        border-bottom-left-radius: 0;\n        @include box-shadow(none);\n\n        .clock::after {\n          @include mdi-icon;\n          content: \"\\f150\";\n          color: $button-default-text;\n          font-size: rem-calc(24);\n          padding: 0;\n          line-height: rem-calc(40);\n        }\n\n        &:hover {\n          background: mix(black, $button-default-background, 10%);\n          @include box-shadow(none);\n        }\n\n        &:disabled {\n          background-color: rgba(74, 74, 74, 0.05);\n          pointer-events: none;\n          @include box-shadow(none);\n          .clock::after {\n            color: #7b7b7b;\n          }\n        }\n\n        [dir=\"RTL\"] & {\n          right: auto;\n          left: 0;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &.user-is-tabbing:focus {\n          @include focus-style;\n        }\n\n        &::-moz-focus-inner {\n          border: 0;\n        }\n      }\n\n      .options {\n        margin: 0;\n        padding: 0;\n        -webkit-overflow-scrolling: touch;\n        overflow: auto;\n        // value can be passed in to the component and overwrite the following\n        max-height: rem-calc(305);\n        @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n        @include transition(transform 0.25s ease);\n        @include scale($xVal: 1, $yVal: 0);\n        @include transformOrigin(center top);\n        @include border-radius(3px);\n        position: absolute;\n        top: 2.5rem;\n        right: 0;\n        background: #fff;\n        z-index: 100;\n        width: 100%;\n        font-size: rem-calc(14);\n\n        &.upwards {\n          top: unset;\n          bottom: 2.5rem;\n          @include transformOrigin(center bottom);\n        }\n\n        &.hidden {\n          visibility: hidden;\n        }\n\n        [role=\"option\"] {\n          display: block;\n          cursor: pointer;\n          position: relative;\n          padding: rem-calc(20);\n          background: #fff;\n          font-family: inherit;\n          list-style: none;\n          color: $body-text-color;\n\n          &:hover {\n            background: $background;\n            outline: none;\n          }\n\n          &:focus {\n            outline: none;\n            background: $background;\n          }\n\n          &:not(:last-child) {\n            border-bottom: 2px solid rgba(#2e1b46, 0.05);\n          }\n        }\n      }\n\n      .options.open {\n        @include scale($xVal: 1, $yVal: 1);\n      }\n    }\n\n    &.invalid {\n      .inner-wrapper {\n        @include invalidBorder;\n      }\n\n      .error {\n        @include errorMessage;\n        margin-bottom: 4px;\n        top: 100%;\n        left: 0;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      .inner-wrapper {\n        @include field-focus;\n      }\n    }\n  }\n}\n","import { h, Component, Host, Element, Prop, Watch, State, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl, generateId, shouldOpenUp, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-timepicker\",\n  styleUrl: \"wm-timepicker.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Timepicker {\n  @Element() el!: HTMLWmTimepickerElement;\n  private inputEl!: HTMLInputElement;\n  private optionsEl!: HTMLUListElement;\n  private tpWrapper!: HTMLDivElement;\n  private buttonEl!: HTMLButtonElement;\n  private optionsList!: HTMLLIElement[];\n\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @Prop() errorMessage?: string | null;\n  @Prop() label: string = \"\";\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop() requiredField: boolean = false;\n  @Prop() requiredFieldMessage?: string;\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n  @State() selectedOption!: HTMLLIElement;\n  @State() isExpanded: boolean = false;\n  @State() isTabbing: boolean = false;\n  @Event() wmTimepickerNewValidValue!: EventEmitter<{ value: string }>;\n  @Event() wmTimepickerOnChange!: EventEmitter<{\n    // deprecated in favor of wmTimepickerNewValidValue and standard input event\n    value: string;\n    isValid: boolean;\n  }>;\n  private twelveHrValid = /^(0?[0-9]|1[0-2])\\s*:?\\s*([0-5][0-9])?\\s?(a|p|am|pm)?$/i;\n  private twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\\s*:?\\s*([0-5][0-9])?$/;\n  private uid: string = \"\";\n  private timeFormat: string = \"hh:mm\";\n  private times: string[] = [];\n  private openUp: boolean = false;\n  private buttonAriaLabel: string = intl.formatMessage({\n    id: \"time.selectTime\",\n    defaultMessage: \"Select time\",\n    description: \"Button text for screen readers.\",\n  });\n  @State() displayedErrorMessage?: string | null;\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  handleKey(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"next\");\n        } else {\n          this.moveDown(this.selectedOption);\n        }\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"previous\");\n        } else {\n          this.moveUp(this.selectedOption);\n        }\n        break;\n      case \"Enter\":\n      case \" \":\n        if (this.isExpanded) {\n          ev.preventDefault();\n          this.handleOptionClick(this.selectedOption.textContent!);\n        }\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isExpanded) {\n          this.close(false);\n        }\n        break;\n      case \"Home\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[0]);\n          this.setDropdownPosition(\"first\");\n        }\n        break;\n      case \"End\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[this.optionsList.length - 1]);\n          this.setDropdownPosition(\"last\");\n        }\n        break;\n    }\n  }\n\n  @Watch(\"errorMessage\")\n  updateErrorState() {\n    this.displayedErrorMessage = this.errorMessage;\n  }\n\n  componentWillLoad() {\n    if (this.label === \"\") {\n      console.error(\n        \"You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.\"\n      );\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n    this.updateErrorState();\n    this.timeFormat = intl.formatMessage({\n      id: \"time.timeFormat\",\n      defaultMessage: \"hh:mm\",\n    });\n\n    this.times = this.generateTimes();\n  }\n\n  componentDidLoad() {\n    this.optionsEl.classList.add(\"hidden\");\n    this.optionsList = Array.from(this.optionsEl.querySelectorAll(\"li\"));\n\n    if (this.value) {\n      this.processInput();\n    }\n  }\n\n  isValidTime(input: string) {\n    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);\n  }\n\n  generateTimes() {\n    let times = [];\n    let startTime = 0;\n\n    for (let i = 0; startTime < 24 * 60; i++) {\n      const h = Math.floor(startTime / 60);\n      const hour = h.toString().padStart(2, \"0\");\n      const m = (startTime % 60).toString();\n      const min = m.padStart(2, \"0\");\n      times[i] = `${hour}:${min}`;\n      startTime = startTime + 15;\n    }\n\n    return times;\n  }\n\n  findNearestTimeInterval(time: string) {\n    let formattedTime = this.formatToStorage(time);\n    const minutes = parseInt(formattedTime.slice(3, 5));\n\n    // first find the closest 15 min increment\n    if (minutes % 15 !== 0) {\n      const hour = parseInt(formattedTime.slice(0, 2));\n      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, \"0\");\n      if (roundedMinutes === \"60\") {\n        roundedMinutes = \"00\";\n        let roundedHour = hour + 1;\n        if (roundedHour === 24) {\n          roundedHour = 0;\n        }\n        formattedTime = formattedTime.replace(\n          `${hour.toString().padStart(2, \"0\")}:`,\n          `${roundedHour.toString().padStart(2, \"0\")}:`\n        );\n      }\n      if (parseInt(roundedMinutes) < 8) {\n        roundedMinutes = \"00\";\n      }\n      time = formattedTime.replace(`:${minutes.toString().padStart(2, \"0\")}`, `:${roundedMinutes}`);\n    }\n\n    return time;\n  }\n\n  handleListSelection(time: string) {\n    time = this.findNearestTimeInterval(time);\n\n    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];\n    option && this.focusOption(option);\n  }\n\n  setValue(time: string) {\n    const previousValue = this.value;\n    this.inputEl.value = this.formatToDisplay(time);\n    this.value = this.formatToStorage(time);\n    // update the selection in the list\n    // so it opens on the closest item\n    this.handleListSelection(time);\n\n    if (previousValue !== this.value) {\n      this.wmTimepickerNewValidValue.emit({ value: this.value });\n    }\n    // deprecated in favor of wmTimepickerNewValidValue and input\n    this.wmTimepickerOnChange.emit({\n      value: this.value,\n      isValid: !!this.displayedErrorMessage,\n    });\n  }\n\n  processInput() {\n    if (this.isValidTime(this.value)) {\n      this.setValue(this.value);\n    }\n    const newErrorMessage = this.determineErrorMessage();\n    this.displayedErrorMessage = newErrorMessage;\n  }\n\n  determineErrorMessage(): string | undefined | null {\n    let message: string | undefined | null = this.errorMessage;\n    const requiredError =\n      this.requiredFieldMessage ||\n      intl.formatMessage({\n        id: \"time.requiredError\",\n        defaultMessage: \"A time is required.\",\n      });\n    const invalidError = intl.formatMessage({\n      id: \"time.invalidTime\",\n      defaultMessage: \"Please enter a valid time.\",\n    });\n    const isValid = this.isValidTime(this.value);\n\n    if (isValid && !this.errorMessage) {\n      message = null;\n    } else if (!isValid && !this.errorMessage) {\n      if (this.requiredField && !this.value) {\n        message = requiredError;\n      } else if (this.value) {\n        message = invalidError;\n      } else {\n        message = null;\n      }\n    }\n\n    return message;\n  }\n\n  splitTime(time: string): [number, string, string?] {\n    const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);\n    let hours = parseInt(splitTime![1]);\n    let minutes = splitTime![2] || \"00\";\n    let amPm = splitTime ? splitTime[3] : undefined;\n\n    // handles edge case uncaught by regex '0pm'\n    if (hours === 0 && amPm?.toUpperCase().includes(\"P\")) {\n      // if user types '0pm' we change it to midnight\n      amPm = \"AM\";\n    }\n    return [hours, minutes, amPm];\n  }\n\n  formatToDisplay(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    // at the moment the component only displays in 12hr AM/PM\n    if (hours === 12 && !amPm) {\n      amPm = \"PM\";\n    }\n    if (hours === 0 || hours === 24) {\n      hours = 12;\n    }\n    if (hours > 12) {\n      hours -= 12;\n      amPm = \"PM\";\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\")) {\n      amPm = \"PM\";\n    } else {\n      amPm = \"AM\";\n    }\n\n    return `${hours.toString().padStart(2, \"0\")}:${minutes} ${amPm}`;\n  }\n\n  formatToStorage(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    if (hours === 24) {\n      hours = 0;\n    }\n    if (hours === 12 && amPm && amPm.toUpperCase().includes(\"A\")) {\n      hours -= 12;\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\") && hours !== 12) {\n      hours += 12;\n    }\n    return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\n  }\n\n  open(itemToSelect?: \"next\" | \"previous\") {\n    this.openUp = shouldOpenUp(this.el, this.optionsEl);\n    this.isExpanded = true;\n    this.optionsEl.classList.remove(\"hidden\");\n\n    if (this.errorMessage || !this.value) {\n      this.handleListSelection(\"09:00\");\n    }\n    this.setDropdownPosition(\"center\", this.selectedOption);\n    this.focusOption(this.selectedOption);\n\n    window.requestAnimationFrame(() => {\n      if (itemToSelect === \"next\") {\n        this.moveDown(this.selectedOption);\n      } else if (itemToSelect === \"previous\") {\n        this.moveUp(this.selectedOption);\n      }\n    });\n  }\n\n  close(returnFocus: boolean = true) {\n    this.isExpanded = false;\n\n    window.setTimeout(() => {\n      this.optionsEl.classList.add(\"hidden\");\n      // Returns focus to button after popup closes (no need if user is tabbing)\n      // Delay is necessary for screenreader to get new expanded state before focus\n      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n      // also UX wise, it makes sense for the button to only be focused after the animation is complete\n      if (returnFocus) {\n        this.buttonEl.focus();\n      }\n    }, 150);\n  }\n\n  focusOption(item: HTMLLIElement): void {\n    this.optionsList.forEach((option) => {\n      option.tabIndex = -1;\n    });\n\n    item.tabIndex = 0;\n    this.selectedOption = item;\n    item.focus();\n  }\n\n  setDropdownPosition(position: string, item?: HTMLLIElement) {\n    switch (position) {\n      case \"top\":\n        const prevItem = item?.previousElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;\n        break;\n      case \"bottom\":\n        const nextItem = item?.nextElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          nextItem.getBoundingClientRect().bottom -\n          this.optionsEl.getBoundingClientRect().top +\n          this.optionsEl.scrollTop -\n          this.optionsEl.offsetHeight;\n        break;\n      case \"center\":\n        this.optionsEl.scrollTop =\n          (this.optionsList.findIndex((x) => x.textContent === item?.textContent) - 2) * item!.offsetHeight;\n        break;\n      case \"first\":\n        this.optionsEl.scrollTop = 0;\n        break;\n      case \"last\":\n        this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;\n        break;\n    }\n  }\n\n  moveUp(el: HTMLLIElement) {\n    const prevEl = el.previousElementSibling as HTMLLIElement;\n    if (prevEl) {\n      // scroll option to top of dropdown if partially obscured / out of view\n      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {\n        this.setDropdownPosition(\"top\", el);\n      }\n      this.focusOption(prevEl);\n    } else {\n      this.focusOption(this.optionsList[this.optionsList.length - 1]);\n      this.setDropdownPosition(\"last\");\n    }\n  }\n\n  moveDown(el: HTMLLIElement) {\n    const nextEl = el.nextElementSibling as HTMLLIElement;\n    if (nextEl) {\n      // scroll option to bottom of dropdown if partially obscured / out of view\n      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {\n        this.setDropdownPosition(\"bottom\", el);\n      }\n      this.focusOption(nextEl);\n    } else {\n      this.focusOption(this.optionsList[0]);\n      this.setDropdownPosition(\"first\");\n    }\n  }\n\n  handleOptionClick(time: string) {\n    this.close();\n    this.setValue(time);\n    this.processInput();\n  }\n\n  handleInput() {\n    this.value = this.inputEl.value;\n    if (this.isValidTime(this.value)) {\n      this.handleListSelection(this.findNearestTimeInterval(this.value));\n      this.setDropdownPosition(\"center\", this.selectedOption);\n    }\n  }\n\n  handleInputBlur(ev: FocusEvent) {\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\n    if (!shouldPreventValidation) {\n      this.processInput();\n    }\n    this.tpWrapper.classList.remove(\"focus\");\n  }\n\n  renderOptions() {\n    return this.times.map((time, index) => (\n      <li id={`option${index + 1}`} role=\"option\" onClick={() => this.handleOptionClick(time)}>\n        {this.formatToDisplay(time)}\n      </li>\n    ));\n  }\n\n  render() {\n    return (\n      <Host id={this.uid} invalid={!!this.displayedErrorMessage ? \"true\" : null} onBlur={() => this.close(false)}>\n        <div\n          class={`wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? \"invalid\" : \"\"}`}\n          ref={(t) => (this.tpWrapper = t as HTMLDivElement)}\n        >\n          <div class=\"label-wrapper\">\n            {this.labelPosition !== \"none\" && (\n              <label id={`label-${this.uid}`} class=\"label\" htmlFor={`time-input-${this.uid}`}>\n                {this.label}\n                {this.requiredField && (\n                  <span class=\"required\" aria-hidden=\"true\">\n                    *\n                  </span>\n                )}\n              </label>\n            )}\n          </div>\n          <div>\n            <div class=\"inner-wrapper\">\n              <input\n                id={`time-input-${this.uid}`}\n                aria-label={this.label}\n                aria-describedby={`error-${this.uid}`}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                onBlur={(ev) => this.handleInputBlur(ev)}\n                onInput={() => this.handleInput()}\n                disabled={this.disabled}\n                aria-required={this.requiredField ? \"true\" : null}\n                placeholder={this.timeFormat}\n                autocomplete=\"off\"\n                onFocus={() => this.tpWrapper.classList.add(\"focus\")}\n              />\n              <button\n                id={`btn-${this.uid}`}\n                class={this.isTabbing ? \"user-is-tabbing\" : \"\"}\n                ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n                disabled={this.disabled}\n                aria-controls={`list-${this.uid}`}\n                aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n                aria-label={this.buttonAriaLabel}\n                aria-describedby={`time-input-${this.uid}`}\n                onClick={() => (this.isExpanded ? this.close() : this.open())}\n                // This addresses an issue in Safari, where clicking buttons does not focus them\n                // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event\n                onMouseDown={(ev) => {\n                  ev.preventDefault();\n                  this.buttonEl.focus();\n                }}\n              >\n                <span class=\"clock\" />\n              </button>\n              <ul\n                class={`options ${this.isExpanded ? \"open\" : \"\"}  ${this.openUp ? \"upwards\" : \"\"}`}\n                id={`list-${this.uid}`}\n                role=\"listbox\"\n                aria-labelledby={`label-${this.uid}`}\n                aria-describedby={this.isExpanded ? \"collapsed\" : null} //For screenreader, to announce state when expanded\n                tabindex={-1}\n                ref={(el) => (this.optionsEl = el as HTMLUListElement)}\n              >\n                {this.renderOptions()}\n              </ul>\n            </div>\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\n              {this.displayedErrorMessage}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["wmToggletipCss","Toggletip","this","tooltipMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","prototype","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","tempTooltip","includes","tooltipPosition","concat","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","_this","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\n  content: \"\";\n  position: absolute;\n  border: solid transparent;\n  height: 0;\n  width: 0;\n  pointer-events: none;\n}\n@mixin toggletipTriangleTop() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-bottom-color: $charcoal;\n  border-bottom-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleBottom() {\n  @include toggletipTriangleBase();\n  top: 100%;\n  border-top-color: $charcoal;\n  border-top-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleLeft() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-right-color: $charcoal;\n  border-right-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-left-width: 0px;\n  top: calc(50% - 6px);\n  left: rem-calc(-3);\n}\n@mixin toggletipTriangleRight() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-left-color: $charcoal;\n  border-left-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-right-width: 0px;\n  top: calc(50% - 6px);\n  right: rem-calc(-3);\n}\n@mixin toggletipTriangleTopLeft() {\n  @include toggletipTriangleTop();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleTopRight() {\n  @include toggletipTriangleTop();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n@mixin toggletipTriangleBottomLeft() {\n  @include toggletipTriangleBottom();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleBottomRight() {\n  @include toggletipTriangleBottom();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n\n:host,\nwm-toggletip {\n  display: inline-block;\n  position: relative;\n  height: 40px;\n  width: 40px;\n\n  .button {\n    display: flex;\n    background: none;\n    border: none;\n    padding: 0;\n    width: inherit;\n    height: inherit;\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n    &:before {\n      @include mdi-icon;\n      content: \"\\f2fc\";\n      font-size: 16px;\n      color: $charcoal;\n      background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\n    }\n    &:focus {\n      outline: none;\n      &.user-is-tabbing {\n        @include focus-style;\n      }\n    }\n  }\n\n  .tooltip {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    pointer-events: none;\n\n    font-family: inherit;\n    font-size: rem-calc(14);\n    text-transform: none;\n    font-weight: normal;\n    background: black;\n    color: #fff;\n    padding: rem-calc(6);\n    line-height: normal;\n    z-index: 30;\n    white-space: nowrap;\n\n    &.hover {\n      clip: auto;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: opacity 500ms 500ms;\n      padding: rem-calc(6);\n      white-space: nowrap;\n    }\n  }\n\n  .toggletip {\n    position: absolute;\n    max-width: rem-calc(220);\n    width: max-content;\n    padding: rem-calc(8) rem-calc(12);\n    border-radius: rem-calc(3);\n    background: $charcoal;\n    color: white;\n    font-size: 14px;\n    z-index: 30;\n\n    &.top {\n      &:before {\n        @include toggletipTriangleBottom();\n      }\n    }\n\n    &.bottom {\n      &:before {\n        @include toggletipTriangleTop();\n      }\n    }\n\n    &.right {\n      &:before {\n        @include toggletipTriangleLeft();\n      }\n    }\n\n    &.left {\n      &:before {\n        @include toggletipTriangleRight();\n      }\n    }\n\n    &.bottom-right {\n      &:before {\n        @include toggletipTriangleTopLeft();\n      }\n    }\n\n    &.bottom-left {\n      &:before {\n        @include toggletipTriangleTopRight();\n      }\n    }\n\n    &.top-right {\n      &:before {\n        @include toggletipTriangleBottomLeft();\n      }\n    }\n\n    &.top-left {\n      &:before {\n        @include toggletipTriangleBottomRight();\n      }\n    }\n\n    &.hidden {\n      transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\n      visibility: hidden;\n    }\n  }\n\n  .toggletip,\n  .tooltip {\n    &.top {\n      transform: translate(-50%, 0%);\n      bottom: 40px;\n      left: 20px;\n    }\n\n    &.bottom {\n      transform: translate(-50%, 0%);\n      top: 40px;\n      left: 20px;\n    }\n\n    &.right {\n      transform: translate(100%, calc(-50% - 20px));\n      right: 0px;\n    }\n\n    &.left {\n      transform: translate(-100%, calc(-50% - 20px));\n      left: 0px;\n    }\n\n    &.bottom-right {\n      top: 40px;\n      left: 0px;\n    }\n\n    &.bottom-left {\n      top: 40px;\n      right: 0px;\n    }\n\n    &.top-right {\n      bottom: 40px;\n      left: 0px;\n    }\n\n    &.top-left {\n      bottom: 40px;\n      right: 0px;\n    }\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\n\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\nimport { TooltipPlacement } from \"../../global/interfaces\";\n@Component({\n  tag: \"wm-toggletip\",\n  styleUrl: \"wm-toggletip.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Toggletip {\n  @Element() el!: HTMLWmToggletipElement;\n\n  @Prop() label?: string;\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\n  @Prop() tooltipText?: string; // DEPRECATED\n  get tempTooltip() {\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\n    return this.tooltip || this.tooltipText;\n  }\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @State() isOpen: boolean = false;\n  @State() isTabbing: boolean = false;\n\n  private toggletipEl!: HTMLDivElement;\n  private tooltipEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private tooltipMessage = intl.formatMessage({\n    id: \"toggletip.moreInformation\",\n    defaultMessage: \"More information\",\n  });\n\n  componentWillLoad() {\n    const validTooltipPlacement = [\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n      \"top-right\",\n      \"top-left\",\n      \"bottom-right\",\n      \"bottom-left\",\n    ];\n\n    if (!this.label) {\n      console.error(\"wm-toggletip must have a label property\");\n    }\n    if (!this.tempTooltip) {\n      console.error(\"wm-toggletip must have a tooltip property\");\n    }\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\n      console.error(\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\n      );\n    }\n    if (this.tooltipText) {\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isOpen) {\n          ev.stopPropagation(); // prevent closing modal if within one\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isOpen) {\n          this.close();\n        }\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(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    if (this.isOpen) {\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\n        // Re-announce if clicking any part of the component while open\n        this.announceToggletip();\n      } else {\n        this.close();\n      }\n    }\n  }\n\n  open() {\n    this.isOpen = true;\n    this.announceToggletip();\n  }\n\n  close() {\n    this.isOpen = false;\n    this.hideTooltip();\n  }\n\n  handleBlur() {\n    this.hideTooltip();\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\n    this.liveRegionEl.innerHTML = \"\";\n  }\n\n  showTooltip() {\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\n    this.setToggletipPosition();\n    this.tooltipEl.classList.add(\"hover\");\n  }\n\n  hideTooltip() {\n    this.tooltipEl.classList.remove(\"hover\");\n  }\n\n  announceToggletip() {\n    this.liveRegionEl.innerHTML = \"\";\n    setTimeout(() => {\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\n    }, 10);\n  }\n\n  setToggletipPosition() {\n    // Vertical\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\n    }\n\n    // Horizontal\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          type=\"button\"\n          aria-label={this.label}\n          onClick={() => {\n            this.setToggletipPosition();\n            this.open();\n          }}\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltip()}\n          onBlur={() => this.handleBlur()}\n        ></button>\n        <div\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\n          aria-hidden=\"true\"\n        >\n          {this.tooltipMessage}\n        </div>\n        <div\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\n        >\n          {this.tempTooltip}\n        </div>\n        <div\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          role=\"status\"\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}