@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

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

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

@@ -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-bb1309d0.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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}: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-dc9964aa.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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}: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 #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}';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