@watermarkinsights/ripple 3.24.0 → 3.24.1

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

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

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId,m as shouldOpenUp,e as isRelatedTarget}from"./functions-c58046f2.js";var wmTimepickerCss=':host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .sr-only,wm-timepicker .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper,wm-timepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-timepicker .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f150";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus,wm-timepicker .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error,wm-timepicker .wrapper.invalid .error{color:#c0392b;margin-top:4px;margin-bottom:4px;display:block;top:100%;left:0;font-style:italic}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}';var Timepicker=function(){function e(e){registerInstance(this,e);this.wmTimepickerNewValidValue=createEvent(this,"wmTimepickerNewValidValue",7);this.wmTimepickerOnChange=createEvent(this,"wmTimepickerOnChange",7);this.twelveHrValid=/^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;this.twentyFourHrValid=/^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;this.uid="";this.timeFormat="hh:mm";this.times=[];this.openUp=false;this.buttonAriaLabel=intl.formatMessage({id:"time.selectTime",defaultMessage:"Select time",description:"Button text for screen readers."});this.disabled=false;this.value="";this.errorMessage=undefined;this.label="";this.labelPosition="top";this.requiredField=false;this.requiredFieldMessage=undefined;this.preventValidation=undefined;this.selectedOption=undefined;this.isExpanded=false;this.isTabbing=false;this.displayedErrorMessage=undefined}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":e.preventDefault();if(this.isExpanded===false){this.open("next")}else{this.moveDown(this.selectedOption)}break;case"ArrowUp":e.preventDefault();if(this.isExpanded===false){this.open("previous")}else{this.moveUp(this.selectedOption)}break;case"Enter":case" ":if(this.isExpanded){e.preventDefault();this.handleOptionClick(this.selectedOption.textContent)}break;case"Escape":e.preventDefault();if(this.isExpanded){e.stopPropagation();this.close()}break;case"Tab":if(this.isExpanded){this.close(false)}break;case"Home":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}break;case"End":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}break}};e.prototype.updateErrorState=function(){this.displayedErrorMessage=this.errorMessage};e.prototype.componentWillLoad=function(){if(this.label===""){console.error("You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.")}this.uid=this.el.id?this.el.id:generateId();this.updateErrorState();this.timeFormat=intl.formatMessage({id:"time.timeFormat",defaultMessage:"hh:mm"});this.times=this.generateTimes()};e.prototype.componentDidLoad=function(){this.optionsEl.classList.add("hidden");this.optionsList=Array.from(this.optionsEl.querySelectorAll("li"));if(this.value){this.processInput()}};e.prototype.isValidTime=function(e){return this.twelveHrValid.test(e)||this.twentyFourHrValid.test(e)};e.prototype.generateTimes=function(){var e=[];var t=0;for(var i=0;t<24*60;i++){var r=Math.floor(t/60);var o=r.toString().padStart(2,"0");var n=(t%60).toString();var s=n.padStart(2,"0");e[i]="".concat(o,":").concat(s);t=t+15}return e};e.prototype.findNearestTimeInterval=function(e){var t=this.formatToStorage(e);var i=parseInt(t.slice(3,5));if(i%15!==0){var r=parseInt(t.slice(0,2));var o=(Math.round(i/15)*15).toString().padStart(2,"0");if(o==="60"){o="00";var n=r+1;if(n===24){n=0}t=t.replace("".concat(r.toString().padStart(2,"0"),":"),"".concat(n.toString().padStart(2,"0"),":"))}if(parseInt(o)<8){o="00"}e=t.replace(":".concat(i.toString().padStart(2,"0")),":".concat(o))}return e};e.prototype.handleListSelection=function(e){var t=this;e=this.findNearestTimeInterval(e);var i=this.optionsList.filter((function(i){return i.textContent==t.formatToDisplay(e)}))[0];i&&this.focusOption(i)};e.prototype.setValue=function(e){var t=this.value;this.inputEl.value=this.formatToDisplay(e);this.value=this.formatToStorage(e);this.handleListSelection(e);if(t!==this.value){this.wmTimepickerNewValidValue.emit({value:this.value})}this.wmTimepickerOnChange.emit({value:this.value,isValid:!!this.displayedErrorMessage})};e.prototype.processInput=function(){if(this.isValidTime(this.value)){this.setValue(this.value)}var e=this.determineErrorMessage();this.displayedErrorMessage=e};e.prototype.determineErrorMessage=function(){var e=this.errorMessage;var t=this.requiredFieldMessage||intl.formatMessage({id:"time.requiredError",defaultMessage:"A time is required."});var i=intl.formatMessage({id:"time.invalidTime",defaultMessage:"Please enter a valid time."});var r=this.isValidTime(this.value);if(r&&!this.errorMessage){e=null}else if(!r&&!this.errorMessage){if(this.requiredField&&!this.value){e=t}else if(this.value){e=i}else{e=null}}return e};e.prototype.splitTime=function(e){var t=this.twelveHrValid.exec(e)||this.twentyFourHrValid.exec(e);var i=parseInt(t[1]);var r=t[2]||"00";var o=t?t[3]:undefined;if(i===0&&(o===null||o===void 0?void 0:o.toUpperCase().includes("P"))){o="AM"}return[i,r,o]};e.prototype.formatToDisplay=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===12&&!o){o="PM"}if(i===0||i===24){i=12}if(i>12){i-=12;o="PM"}if(o&&o.toUpperCase().includes("P")){o="PM"}else{o="AM"}return"".concat(i.toString().padStart(2,"0"),":").concat(r," ").concat(o)};e.prototype.formatToStorage=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===24){i=0}if(i===12&&o&&o.toUpperCase().includes("A")){i-=12}if(o&&o.toUpperCase().includes("P")&&i!==12){i+=12}return"".concat(i.toString().padStart(2,"0"),":").concat(r)};e.prototype.open=function(e){var t=this;this.openUp=shouldOpenUp(this.el,this.optionsEl);this.isExpanded=true;this.optionsEl.classList.remove("hidden");if(this.errorMessage||!this.value){this.handleListSelection("09:00")}this.setDropdownPosition("center",this.selectedOption);this.focusOption(this.selectedOption);window.requestAnimationFrame((function(){if(e==="next"){t.moveDown(t.selectedOption)}else if(e==="previous"){t.moveUp(t.selectedOption)}}))};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}this.isExpanded=false;window.setTimeout((function(){t.optionsEl.classList.add("hidden");if(e){t.buttonEl.focus()}}),150)};e.prototype.focusOption=function(e){this.optionsList.forEach((function(e){e.tabIndex=-1}));e.tabIndex=0;this.selectedOption=e;e.focus()};e.prototype.setDropdownPosition=function(e,t){switch(e){case"top":var i=t===null||t===void 0?void 0:t.previousElementSibling;this.optionsEl.scrollTop=i.getBoundingClientRect().top-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop;break;case"bottom":var r=t===null||t===void 0?void 0:t.nextElementSibling;this.optionsEl.scrollTop=r.getBoundingClientRect().bottom-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop-this.optionsEl.offsetHeight;break;case"center":this.optionsEl.scrollTop=(this.optionsList.findIndex((function(e){return e.textContent===(t===null||t===void 0?void 0:t.textContent)}))-2)*t.offsetHeight;break;case"first":this.optionsEl.scrollTop=0;break;case"last":this.optionsEl.scrollTop=this.optionsList[0].clientHeight*this.optionsList.length;break}};e.prototype.moveUp=function(e){var t=e.previousElementSibling;if(t){if(t.getBoundingClientRect().top<this.optionsEl.getBoundingClientRect().top){this.setDropdownPosition("top",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}};e.prototype.moveDown=function(e){var t=e.nextElementSibling;if(t){if(t.getBoundingClientRect().bottom>this.optionsEl.getBoundingClientRect().bottom){this.setDropdownPosition("bottom",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}};e.prototype.handleOptionClick=function(e){this.close();this.setValue(e);this.processInput()};e.prototype.handleInput=function(){this.value=this.inputEl.value;if(this.isValidTime(this.value)){this.handleListSelection(this.findNearestTimeInterval(this.value));this.setDropdownPosition("center",this.selectedOption)}};e.prototype.handleInputBlur=function(e){var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.processInput()}this.tpWrapper.classList.remove("focus")};e.prototype.renderOptions=function(){var e=this;return this.times.map((function(t,i){return h("li",{id:"option".concat(i+1),role:"option",onClick:function(){return e.handleOptionClick(t)}},e.formatToDisplay(t))}))};e.prototype.render=function(){var e=this;return h(Host,{id:this.uid,invalid:!!this.displayedErrorMessage?"true":null,onBlur:function(){return e.close(false)}},h("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(!!this.displayedErrorMessage?"invalid":""),ref:function(t){return e.tpWrapper=t}},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{id:"label-".concat(this.uid),class:"label",htmlFor:"time-input-".concat(this.uid)},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*"))),h("div",null,h("div",{class:"inner-wrapper"},h("input",{id:"time-input-".concat(this.uid),"aria-label":this.label,"aria-describedby":"error-".concat(this.uid),ref:function(t){return e.inputEl=t},onBlur:function(t){return e.handleInputBlur(t)},onInput:function(){return e.handleInput()},disabled:this.disabled,"aria-required":this.requiredField?"true":null,placeholder:this.timeFormat,autocomplete:"off",onFocus:function(){return e.tpWrapper.classList.add("focus")}}),h("button",{id:"btn-".concat(this.uid),class:this.isTabbing?"user-is-tabbing":"",ref:function(t){return e.buttonEl=t},disabled:this.disabled,"aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false","aria-label":this.buttonAriaLabel,"aria-describedby":"time-input-".concat(this.uid),onClick:function(){return e.isExpanded?e.close():e.open()},onMouseDown:function(t){t.preventDefault();e.buttonEl.focus()}},h("span",{class:"clock"})),h("ul",{class:"options ".concat(this.isExpanded?"open":"","  ").concat(this.openUp?"upwards":""),id:"list-".concat(this.uid),role:"listbox","aria-labelledby":"label-".concat(this.uid),"aria-describedby":this.isExpanded?"collapsed":null,tabindex:-1,ref:function(t){return e.optionsEl=t}},this.renderOptions())),h("div",{id:"error-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayedErrorMessage))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["updateErrorState"]}},enumerable:false,configurable:true});return e}();Timepicker.style=wmTimepickerCss;export{Timepicker as wm_timepicker};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId,m as shouldOpenUp,e as isRelatedTarget}from"./functions-1c41e984.js";var wmTimepickerCss=':host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .sr-only,wm-timepicker .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper,wm-timepicker .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-timepicker .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f150";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus,wm-timepicker .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error,wm-timepicker .wrapper.invalid .error{color:#c0392b;margin-top:4px;margin-bottom:4px;display:block;top:100%;left:0;font-style:italic}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}';var Timepicker=function(){function e(e){registerInstance(this,e);this.wmTimepickerNewValidValue=createEvent(this,"wmTimepickerNewValidValue",7);this.wmTimepickerOnChange=createEvent(this,"wmTimepickerOnChange",7);this.twelveHrValid=/^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;this.twentyFourHrValid=/^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;this.uid="";this.timeFormat="hh:mm";this.times=[];this.openUp=false;this.buttonAriaLabel=intl.formatMessage({id:"time.selectTime",defaultMessage:"Select time",description:"Button text for screen readers."});this.disabled=false;this.value="";this.errorMessage=undefined;this.label="";this.labelPosition="top";this.requiredField=false;this.requiredFieldMessage=undefined;this.preventValidation=undefined;this.selectedOption=undefined;this.isExpanded=false;this.isTabbing=false;this.displayedErrorMessage=undefined}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":e.preventDefault();if(this.isExpanded===false){this.open("next")}else{this.moveDown(this.selectedOption)}break;case"ArrowUp":e.preventDefault();if(this.isExpanded===false){this.open("previous")}else{this.moveUp(this.selectedOption)}break;case"Enter":case" ":if(this.isExpanded){e.preventDefault();this.handleOptionClick(this.selectedOption.textContent)}break;case"Escape":e.preventDefault();if(this.isExpanded){e.stopPropagation();this.close()}break;case"Tab":if(this.isExpanded){this.close(false)}break;case"Home":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}break;case"End":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}break}};e.prototype.updateErrorState=function(){this.displayedErrorMessage=this.errorMessage};e.prototype.componentWillLoad=function(){if(this.label===""){console.error("You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.")}this.uid=this.el.id?this.el.id:generateId();this.updateErrorState();this.timeFormat=intl.formatMessage({id:"time.timeFormat",defaultMessage:"hh:mm"});this.times=this.generateTimes()};e.prototype.componentDidLoad=function(){this.optionsEl.classList.add("hidden");this.optionsList=Array.from(this.optionsEl.querySelectorAll("li"));if(this.value){this.processInput()}};e.prototype.isValidTime=function(e){return this.twelveHrValid.test(e)||this.twentyFourHrValid.test(e)};e.prototype.generateTimes=function(){var e=[];var t=0;for(var i=0;t<24*60;i++){var r=Math.floor(t/60);var o=r.toString().padStart(2,"0");var n=(t%60).toString();var s=n.padStart(2,"0");e[i]="".concat(o,":").concat(s);t=t+15}return e};e.prototype.findNearestTimeInterval=function(e){var t=this.formatToStorage(e);var i=parseInt(t.slice(3,5));if(i%15!==0){var r=parseInt(t.slice(0,2));var o=(Math.round(i/15)*15).toString().padStart(2,"0");if(o==="60"){o="00";var n=r+1;if(n===24){n=0}t=t.replace("".concat(r.toString().padStart(2,"0"),":"),"".concat(n.toString().padStart(2,"0"),":"))}if(parseInt(o)<8){o="00"}e=t.replace(":".concat(i.toString().padStart(2,"0")),":".concat(o))}return e};e.prototype.handleListSelection=function(e){var t=this;e=this.findNearestTimeInterval(e);var i=this.optionsList.filter((function(i){return i.textContent==t.formatToDisplay(e)}))[0];i&&this.focusOption(i)};e.prototype.setValue=function(e){var t=this.value;this.inputEl.value=this.formatToDisplay(e);this.value=this.formatToStorage(e);this.handleListSelection(e);if(t!==this.value){this.wmTimepickerNewValidValue.emit({value:this.value})}this.wmTimepickerOnChange.emit({value:this.value,isValid:!!this.displayedErrorMessage})};e.prototype.processInput=function(){if(this.isValidTime(this.value)){this.setValue(this.value)}var e=this.determineErrorMessage();this.displayedErrorMessage=e};e.prototype.determineErrorMessage=function(){var e=this.errorMessage;var t=this.requiredFieldMessage||intl.formatMessage({id:"time.requiredError",defaultMessage:"A time is required."});var i=intl.formatMessage({id:"time.invalidTime",defaultMessage:"Please enter a valid time."});var r=this.isValidTime(this.value);if(r&&!this.errorMessage){e=null}else if(!r&&!this.errorMessage){if(this.requiredField&&!this.value){e=t}else if(this.value){e=i}else{e=null}}return e};e.prototype.splitTime=function(e){var t=this.twelveHrValid.exec(e)||this.twentyFourHrValid.exec(e);var i=parseInt(t[1]);var r=t[2]||"00";var o=t?t[3]:undefined;if(i===0&&(o===null||o===void 0?void 0:o.toUpperCase().includes("P"))){o="AM"}return[i,r,o]};e.prototype.formatToDisplay=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===12&&!o){o="PM"}if(i===0||i===24){i=12}if(i>12){i-=12;o="PM"}if(o&&o.toUpperCase().includes("P")){o="PM"}else{o="AM"}return"".concat(i.toString().padStart(2,"0"),":").concat(r," ").concat(o)};e.prototype.formatToStorage=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===24){i=0}if(i===12&&o&&o.toUpperCase().includes("A")){i-=12}if(o&&o.toUpperCase().includes("P")&&i!==12){i+=12}return"".concat(i.toString().padStart(2,"0"),":").concat(r)};e.prototype.open=function(e){var t=this;this.openUp=shouldOpenUp(this.el,this.optionsEl);this.isExpanded=true;this.optionsEl.classList.remove("hidden");if(this.errorMessage||!this.value){this.handleListSelection("09:00")}this.setDropdownPosition("center",this.selectedOption);this.focusOption(this.selectedOption);window.requestAnimationFrame((function(){if(e==="next"){t.moveDown(t.selectedOption)}else if(e==="previous"){t.moveUp(t.selectedOption)}}))};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}this.isExpanded=false;window.setTimeout((function(){t.optionsEl.classList.add("hidden");if(e){t.buttonEl.focus()}}),150)};e.prototype.focusOption=function(e){this.optionsList.forEach((function(e){e.tabIndex=-1}));e.tabIndex=0;this.selectedOption=e;e.focus()};e.prototype.setDropdownPosition=function(e,t){switch(e){case"top":var i=t===null||t===void 0?void 0:t.previousElementSibling;this.optionsEl.scrollTop=i.getBoundingClientRect().top-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop;break;case"bottom":var r=t===null||t===void 0?void 0:t.nextElementSibling;this.optionsEl.scrollTop=r.getBoundingClientRect().bottom-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop-this.optionsEl.offsetHeight;break;case"center":this.optionsEl.scrollTop=(this.optionsList.findIndex((function(e){return e.textContent===(t===null||t===void 0?void 0:t.textContent)}))-2)*t.offsetHeight;break;case"first":this.optionsEl.scrollTop=0;break;case"last":this.optionsEl.scrollTop=this.optionsList[0].clientHeight*this.optionsList.length;break}};e.prototype.moveUp=function(e){var t=e.previousElementSibling;if(t){if(t.getBoundingClientRect().top<this.optionsEl.getBoundingClientRect().top){this.setDropdownPosition("top",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}};e.prototype.moveDown=function(e){var t=e.nextElementSibling;if(t){if(t.getBoundingClientRect().bottom>this.optionsEl.getBoundingClientRect().bottom){this.setDropdownPosition("bottom",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}};e.prototype.handleOptionClick=function(e){this.close();this.setValue(e);this.processInput()};e.prototype.handleInput=function(){this.value=this.inputEl.value;if(this.isValidTime(this.value)){this.handleListSelection(this.findNearestTimeInterval(this.value));this.setDropdownPosition("center",this.selectedOption)}};e.prototype.handleInputBlur=function(e){var t=this.preventValidation&&isRelatedTarget(e,this.preventValidation);if(!t){this.processInput()}this.tpWrapper.classList.remove("focus")};e.prototype.renderOptions=function(){var e=this;return this.times.map((function(t,i){return h("li",{id:"option".concat(i+1),role:"option",onClick:function(){return e.handleOptionClick(t)}},e.formatToDisplay(t))}))};e.prototype.render=function(){var e=this;return h(Host,{id:this.uid,invalid:!!this.displayedErrorMessage?"true":null,onBlur:function(){return e.close(false)}},h("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(!!this.displayedErrorMessage?"invalid":""),ref:function(t){return e.tpWrapper=t}},h("div",{class:"label-wrapper"},this.labelPosition!=="none"&&h("label",{id:"label-".concat(this.uid),class:"label",htmlFor:"time-input-".concat(this.uid)},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*"))),h("div",null,h("div",{class:"inner-wrapper"},h("input",{id:"time-input-".concat(this.uid),"aria-label":this.label,"aria-describedby":"error-".concat(this.uid),ref:function(t){return e.inputEl=t},onBlur:function(t){return e.handleInputBlur(t)},onInput:function(){return e.handleInput()},disabled:this.disabled,"aria-required":this.requiredField?"true":null,placeholder:this.timeFormat,autocomplete:"off",onFocus:function(){return e.tpWrapper.classList.add("focus")}}),h("button",{id:"btn-".concat(this.uid),class:this.isTabbing?"user-is-tabbing":"",ref:function(t){return e.buttonEl=t},disabled:this.disabled,"aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false","aria-label":this.buttonAriaLabel,"aria-describedby":"time-input-".concat(this.uid),onClick:function(){return e.isExpanded?e.close():e.open()},onMouseDown:function(t){t.preventDefault();e.buttonEl.focus()}},h("span",{class:"clock"})),h("ul",{class:"options ".concat(this.isExpanded?"open":"","  ").concat(this.openUp?"upwards":""),id:"list-".concat(this.uid),role:"listbox","aria-labelledby":"label-".concat(this.uid),"aria-describedby":this.isExpanded?"collapsed":null,tabindex:-1,ref:function(t){return e.optionsEl=t}},this.renderOptions())),h("div",{id:"error-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayedErrorMessage))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["updateErrorState"]}},enumerable:false,configurable:true});return e}();Timepicker.style=wmTimepickerCss;export{Timepicker as wm_timepicker};
 //# sourceMappingURL=wm-timepicker.entry.js.map