@watermarkinsights/ripple 3.26.0-9 → 3.26.0

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -1,1294 +1,1294 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
-import { csvToArray, debounce, generateId, hideTooltip, intl, measureText, safeParseJSON, shouldOpenUp, showTooltip, truncateText, } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class TagInput {
-  constructor() {
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.openUp = false;
-    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
-    this.label = undefined;
-    this.labelPosition = "top";
-    this.options = "";
-    this.selectedTags = "";
-    this.info = undefined;
-    this.errorMessage = undefined;
-    this.addNew = true;
-    this.placeholder = undefined;
-    this.requiredField = false;
-    this.characterLimit = 50;
-    this.maxTags = undefined;
-    this.tagInputType = "dropdown";
-    this.colHeaders = undefined;
-    this.colWidths = undefined;
-    this.colWrap = undefined;
-    this.messageConfig = "";
-    this.focusedListItem = undefined;
-    this.focusedTag = null;
-    this.tablePosition = { row: 0, column: 1 };
-    this.isExpanded = false;
-    this.tagsList = csvToArray(this.selectedTags);
-    this.optionsList = csvToArray(this.options);
-    this.charCount = 0;
-    this.liveRegionMessage = "";
-  }
-  get tooltipVisible() {
-    return document.getElementById("wm-tooltip").classList.contains("open");
-  }
-  get focusedElement() {
-    return this.el.shadowRoot.activeElement;
-  }
-  get listItemEls() {
-    return Array.from(this.dropdownEl.querySelectorAll("li"));
-  }
-  get tagEls() {
-    return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
-  }
-  get nonLockedTagEls() {
-    return this.tagEls.filter((tag) => !tag.classList.contains("locked"));
-  }
-  get optionEls() {
-    return Array.from(this.dropdownEl.querySelectorAll(".option"));
-  }
-  get wmRowEls() {
-    return Array.from(this.el.querySelectorAll("wm-tag-input-row"));
-  }
-  get localRowEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll("tr"));
-  }
-  get filteredRows() {
-    return this.wmRowEls.filter((row) => {
-      const colValues = [row.col1, row.col2, row.col3, row.col4].join("").toLowerCase();
-      return this.inputEl && this.inputEl.value ? colValues.includes(this.inputEl.value.toLowerCase()) : true;
-    });
-  }
-  get nonLockedTagsList() {
-    let list = [];
-    if (this.tagInputType === "table") {
-      this.tagsList.forEach((id) => {
-        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];
-        if (!correspondingRowEl.locked) {
-          list.push(id);
-        }
-      });
-    }
-    else if (this.tagInputType === "dropdown") {
-      list = this.tagsList;
-    }
-    return list;
-  }
-  get tagLimitReached() {
-    return !!(this.maxTags && this.tagsList.length >= this.maxTags);
-  }
-  get noResultsMessage() {
-    return intl.formatMessage({
-      id: "tagInput.noResults",
-      defaultMessage: "No results match your search.",
-      description: "Message displayed when a user's search returns empty.",
-    });
-  }
-  get componentMessages() {
-    const addNewHelpText = intl.formatMessage({
-      id: "tagInput.addNewHelpText",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const selectionHelpText = intl.formatMessage({
-      id: "tagInput.selectionHelpText",
-      defaultMessage: "Search and select a tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const maxTagsReachedMessage = intl.formatMessage({
-      id: "tagInput.maxTagsReached",
-      defaultMessage: "No more tags can be added because the limit has been reached.",
-    });
-    const tagAreaInstructions = intl.formatMessage({
-      id: "tagInput.tagAreaInstructions",
-      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-    });
-    const tagsAddedMessage = intl.formatMessage({
-      id: "tagInput.tagsAdded",
-      defaultMessage: "Tags added",
-      description: "For the user to understand how close they are to the tag limit, followed by x/y count",
-    });
-    const defaultConfig = {
-      addNewHelpText: addNewHelpText,
-      selectionHelpText: selectionHelpText,
-      maxTagsReached: maxTagsReachedMessage,
-      tagAreaInstructions: tagAreaInstructions,
-      tagsAdded: tagsAddedMessage,
-    };
-    const userProvidedConfig = safeParseJSON(this.messageConfig);
-    return userProvidedConfig ? Object.assign(Object.assign({}, defaultConfig), userProvidedConfig) : defaultConfig;
-  }
-  get inputMinimumWidth() {
-    // 150px is the minimum width of the input field, or the length of the placeholder text
-    const inputElStyles = getComputedStyle(this.inputEl);
-    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);
-    const inputElBuffer = [
-      inputElStyles.paddingLeft,
-      inputElStyles.paddingRight,
-      inputElStyles.marginLeft,
-      inputElStyles.marginRight,
-      tagElStyles.marginRight,
-    ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
-    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
-    return minimumWidth;
-  }
-  generateTagAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAdded",
-      defaultMessage: "{tagName} added.",
-      description: "A confirmation for adding a tag.",
-    }, { tagName: tag });
-  }
-  generateTagAlreadyAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAlreadyAdded",
-      defaultMessage: "{tagName} has already been added.",
-      description: "An alert for adding a tag that is already present.",
-    }, { tagName: tag });
-  }
-  componentWillLoad() {
-    if (!this.placeholder) {
-      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);
-    }
-    if (!this.label) {
-      console.error("wm-tag-input must have a label property");
-    }
-    this.consolidateSelectedTags();
-    this.el.focus = () => {
-      const firstFocusableTag = this.nonLockedTagEls[0];
-      if (firstFocusableTag) {
-        this.tagAreaEl.focus();
-        this.focusTag(firstFocusableTag);
-      }
-      else {
-        this.inputEl.focus();
-      }
-    };
-    // on resize of component, trigger componentDidRender -> positionInput
-    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
-    resizeObserver.observe(this.el);
-  }
-  componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
-  }
-  componentDidRender() {
-    this.positionInput();
-    // check each tag if truncation is needed
-    this.tagEls.forEach((tag) => {
-      const textEl = tag.querySelector(".tag-text");
-      const wrapper = this.el.shadowRoot.querySelector(".tags-and-input-wrapper");
-      const leftBound = textEl.getBoundingClientRect().left;
-      // the numbers represent spacing values for padding, margin, and delete icon
-      const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
-      let displayText = tag.dataset.tag;
-      if (this.tagInputType === "table") {
-        // table variant doesn't display the tag id, but the contents of the first column
-        const referencedRow = this.el.querySelector(`#${displayText}`);
-        displayText = referencedRow ? referencedRow.col1 : "";
-      }
-      textEl.textContent = truncateText(textEl, displayText, rightBound - leftBound, 5);
-    });
-  }
-  consolidateSelectedTags() {
-    this.tagsList.forEach((tag) => {
-      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
-        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
-      }
-    });
-    this.optionsList = csvToArray(this.options);
-  }
-  createPlaceholderDefault(addNew, hasOptions) {
-    const addAndSearchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAddAndSearch",
-      defaultMessage: "Add or search for a tag",
-      description: "Placeholder text. Use imperative",
-    });
-    const searchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderSearch",
-      defaultMessage: "Search and select a tag",
-      description: "Placeholder text. Use imperative",
-    });
-    const addPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAdd",
-      defaultMessage: "Add a new tag",
-      description: "Placeholder text. Use imperative",
-    });
-    let placeholder = "";
-    if (addNew && hasOptions) {
-      placeholder = addAndSearchPlaceholder;
-    }
-    else if (!addNew && hasOptions) {
-      placeholder = searchPlaceholder;
-    }
-    else if (addNew) {
-      placeholder = addPlaceholder;
-    }
-    return placeholder;
-  }
-  reflectSelectedTags(newValue, oldValue) {
-    const isAddition = newValue.length > oldValue.length;
-    let changedTag = "";
-    let selectedTags = this.tagsList;
-    if (isAddition) {
-      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];
-    }
-    else {
-      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];
-    }
-    // event emitted by type table uses element references instead of strings
-    if (this.tagInputType === "table") {
-      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];
-      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`));
-    }
-    this.selectedTags = this.listToCSV(this.tagsList);
-    let detail = { value: selectedTags, tagChanged: changedTag };
-    this.wmTagInputChanged.emit(detail);
-  }
-  handleErrorMessageChange() {
-    if (this.errorMessage) {
-      this.announce(this.errorMessage);
-    }
-  }
-  handleRowUpdate() {
-    forceUpdate(this.el);
-  }
-  closeIfNotElOrChild(ev) {
-    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (this.tagInputType === "dropdown" && isntElOrChild && this.isExpanded) {
-      this.closeDropdown();
-    }
-  }
-  // From wm-button
-  // we need to listen for scroll events during the capture phase because they do not bubble up
-  // there can be layouts where the main content has 100vh and overflows
-  // in these cases window will register no scroll events unless we catch on they way down
-  dismissTooltip() {
-    if (this.tooltipVisible) {
-      hideTooltip();
-    }
-  }
-  handleInputKeyDown(ev) {
-    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
-      this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));
-    }
-    // prevent keydown triggering on tag area
-    ev.stopPropagation();
-    switch (ev.key) {
-      case "Enter":
-      case ",":
-        ev.preventDefault();
-        this.handleInputEnter();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.handleInputArrowDown();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.handleInputArrowUp();
-        break;
-      case "ArrowLeft":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
-          ev.preventDefault();
-          this.moveLeftCell();
-        }
-        break;
-      case "ArrowRight":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
-          ev.preventDefault();
-          this.moveRightCell();
-        }
-        break;
-      case "Escape":
-        if (this.tagInputType === "dropdown" && this.isExpanded) {
-          this.closeDropdown();
-        }
-        break;
-      case "ArrowLeft":
-      case "Backspace":
-        this.handleInputBackspace();
-        break;
-    }
-  }
-  handleInputFocus() {
-    if (this.tagInputType === "dropdown") {
-      this.openDropdown();
-      this.clearListItemFocus();
-    }
-    // force update needed to apply styled state of field-wrapper el
-    forceUpdate(this.el);
-  }
-  handleInputChanged(value) {
-    this.charCount = value.length;
-    if (this.tagInputType === "dropdown") {
-      this.clearListItemFocus();
-      if (this.charCount >= this.characterLimit - 5) {
-        this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-      }
-      if (!this.isExpanded) {
-        this.openDropdown();
-      }
-    }
-    else if (this.tagInputType === "table") {
-      this.clearCellFocus();
-    }
-    this.announceExistingOptions();
-  }
-  handleInputEnter() {
-    if (this.tagInputType === "dropdown") {
-      if (this.focusedListItem) {
-        this.handleListItemClick(this.focusedListItem);
-      }
-      else {
-        this.submitInput(this.addNew, this.inputEl.value.trim());
-      }
-    }
-    else if (this.tagInputType === "table" && this.tablePosition.row > 0) {
-      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);
-    }
-  }
-  submitInput(canAddNew, value) {
-    const hasNonWhiteSpaceCharacters = value.match(/\S/);
-    if (canAddNew && hasNonWhiteSpaceCharacters) {
-      this.addTag(value);
-      this.optionsList = this.addOption(value);
-      this.resetInput();
-    }
-  }
-  handleInputArrowDown() {
-    if (this.tagInputType === "table") {
-      this.moveDownRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveDownListItem();
-    }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
-    }
-  }
-  handleInputArrowUp() {
-    if (this.tagInputType === "table") {
-      this.moveUpRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveUpListItem();
-    }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
-    }
-  }
-  handleInputBackspace() {
-    if (this.inputEl.value === "" && this.tagsList.length > 0) {
-      // wait for events to finish firing before redirecting focus
-      // prevents double input in input area and tag area
-      window.requestAnimationFrame(() => {
-        if (this.nonLockedTagsList.length > 0) {
-          this.tagAreaEl.focus();
-          this.focusTag(this.tagEls[this.tagEls.length - 1]);
-        }
-      });
-    }
-  }
-  handleListItemKeyDown(ev) {
-    const typedEvTarget = ev.target;
-    switch (ev.key) {
-      case "Enter":
-      case " ":
-        ev.preventDefault();
-        typedEvTarget.click();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveDownListItem();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveUpListItem();
-        break;
-      case "Escape":
-        if (this.focusedElement !== this.inputEl) {
-          this.inputEl.focus();
-        }
-        else if (this.tagInputType === "dropdown") {
-          this.closeDropdown();
-        }
-        break;
-    }
-  }
-  handleListItemClick(item) {
-    const tag = item.dataset.option.trim() || "";
-    if (this.includesCaseInsensitive(this.tagsList, tag)) {
-      this.announce(this.generateTagAlreadyAddedMessage(tag));
-    }
-    else {
-      this.resetInput();
-      this.addTag(tag);
-      this.optionsList = this.addOption(tag);
-      this.focusedListItem = null;
-    }
-  }
-  handleTableRowClick(rowId) {
-    const referencedRow = this.el.querySelector(`#${rowId}`);
-    const isLocked = referencedRow.locked;
-    if (!isLocked) {
-      if (this.includesCaseInsensitive(this.tagsList, rowId)) {
-        this.removeTag(rowId);
-      }
-      else if (!this.tagLimitReached) {
-        this.addTag(rowId);
-        this.resetInput();
-      }
-    }
-  }
-  handleTagAreaKeyDown(ev) {
-    switch (ev.key) {
-      case "ArrowLeft":
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveLeftTag();
-        break;
-      case "ArrowRight":
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveRightTag();
-        break;
-      case "Backspace":
-      case "Delete":
-        this.handleTagAreaDelete();
-        break;
-    }
-  }
-  handleTagAreaDelete() {
-    const isLocked = this.focusedTag && this.focusedTag.classList.contains("locked");
-    if (this.focusedTag && !isLocked) {
-      this.removeTag(this.focusedTag.dataset.tag);
-      if (this.nonLockedTagsList.length === 0) {
-        // focus input if no tags are left
-        this.inputEl.focus();
-      }
-      else {
-        const removingLastTag = this.focusedTag === this.tagEls[this.tagEls.length - 1];
-        // if removing the last tag, reassign focused tag to previous task
-        this.focusedTag = removingLastTag ? this.tagEls[this.tagEls.length - 2] : this.focusedTag;
-        this.focusTag(this.focusedTag);
-      }
-    }
-  }
-  handleBlur(ev, component) {
-    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
-    this.dismissTooltip();
-    this.clearCellFocus();
-    if (isntElOrChild) {
-      this.fieldWrapperEl.classList.remove("focused");
-      if (this.tagInputType === "dropdown") {
-        this.closeDropdown();
-      }
-    }
-  }
-  handleCellMouseEnter(ev) {
-    const cell = ev.target;
-    const contentWrapper = cell.querySelector(".cell-content-wrapper");
-    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-    if (isTruncated) {
-      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-      showTooltip("bottom", cell, cell.innerText);
-    }
-  }
-  handleTagAreaFocus() {
-    if (this.tagInputType === "dropdown") {
-      this.closeDropdown();
-    }
-    const firstFocusableTag = this.nonLockedTagEls[0];
-    firstFocusableTag && this.focusTag(firstFocusableTag);
-  }
-  handleRemoveButtonClick(tag) {
-    this.moveLeftTag();
-    this.removeTag(tag);
-  }
-  moveDownListItem() {
-    if (this.listItemEls.length > 0) {
-      const firstListItem = this.listItemEls[0];
-      if (!this.focusedListItem) {
-        this.focusListItem(firstListItem);
-      }
-      else if (this.focusedListItem.nextElementSibling) {
-        this.focusListItem(this.focusedListItem.nextElementSibling);
-      }
-      else {
-        this.focusListItem(firstListItem);
-      }
-    }
-  }
-  moveUpListItem() {
-    if (this.listItemEls.length > 0) {
-      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
-      if (!this.focusedListItem) {
-        this.focusListItem(lastListItem);
-      }
-      else if (this.focusedListItem.previousElementSibling) {
-        this.focusListItem(this.focusedListItem.previousElementSibling);
-      }
-      else {
-        this.clearListItemFocus();
-      }
-    }
-  }
-  moveDownRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = 1;
-      }
-      else if (this.tablePosition.row === this.filteredRows.length) {
-        this.tablePosition.row = 1;
-      }
-      else {
-        this.tablePosition.row++;
-      }
-      // skip locked rows
-      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1];
-      if (rowToFocus.locked) {
-        this.moveDownRow();
-      }
-      else {
-        this.focusCell(this.tablePosition);
-      }
-    }
-  }
-  moveUpRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = this.filteredRows.length;
-      }
-      else if (this.tablePosition.row === 1) {
-        this.tablePosition.row = 0;
-      }
-      else {
-        this.tablePosition.row--;
-      }
-      // skip locked rows
-      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1];
-      if (rowToFocus && rowToFocus.locked) {
-        this.moveUpRow();
-      }
-      else if (rowToFocus) {
-        this.focusCell(this.tablePosition);
-      }
-      else {
-        this.clearCellFocus();
-      }
-    }
-  }
-  moveLeftCell() {
-    if (this.tablePosition.column != 1) {
-      this.tablePosition.column--;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveRightCell() {
-    const numCols = csvToArray(this.colHeaders).length;
-    if (this.tablePosition.column < numCols) {
-      this.tablePosition.column++;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveLeftTag() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
-      this.focusedTag = this.focusedTag.previousElementSibling;
-    }
-    else {
-      this.focusedTag = lastTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked") && this.nonLockedTagEls.length > 0) {
-      this.moveLeftTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  moveRightTag() {
-    const firstTag = this.tagEls[0];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
-      this.focusedTag = this.focusedTag.nextElementSibling;
-    }
-    else {
-      this.focusedTag = firstTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked")) {
-      this.moveRightTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  addOption(option) {
-    let newOptionsList = this.optionsList;
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
-    if (!optionAlreadyExists) {
-      newOptionsList = newOptionsList.concat(option);
-    }
-    return newOptionsList;
-  }
-  removeOption(option) {
-    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
-  }
-  addTag(tag) {
-    let newTagsList = this.tagsList;
-    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
-    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
-    if (!tagAlreadyAdded) {
-      let textToAnnounce = tag;
-      if (this.tagInputType === "table") {
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        textToAnnounce = referencedRow.col1;
-      }
-      this.announce(this.generateTagAddedMessage(textToAnnounce));
-      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);
-      // if maxTags has been reached, focus should go to the tagArea
-      if (this.tagLimitReached) {
-        this.tagAreaEl.focus();
-      }
-    }
-  }
-  removeTag(tag) {
-    let textToAnnounce = tag;
-    if (this.tagInputType === "table") {
-      const referencedRow = this.el.querySelector(`#${tag}`);
-      textToAnnounce = referencedRow.col1;
-    }
-    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: textToAnnounce });
-    this.announce(tagRemovedMessage);
-    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    if (this.tagInputType === "dropdown") {
-      // if a tag was introduced by the user, also remove it from the dropdown options
-      const devOptionsList = csvToArray(this.options);
-      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-        this.removeOption(tag);
-      }
-    }
-  }
-  focusListItem(item) {
-    this.focusedListItem = item;
-    this.inputEl.setAttribute("aria-activedescendant", this.focusedListItem.id);
-    item.scrollIntoView({ block: "nearest" });
-  }
-  focusTag(element) {
-    if (element.classList.contains("locked")) {
-      this.focusedTag = null;
-      this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    }
-    else {
-      this.focusedTag = element;
-      this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
-    }
-    window.requestAnimationFrame(() => {
-      hideTooltip();
-      const textEl = element.querySelector(".tag-text");
-      const fullText = element.dataset.tag;
-      const isTruncated = fullText !== textEl.textContent && textEl.textContent.includes("...");
-      isTruncated && showTooltip("bottom", element, fullText);
-    });
-  }
-  focusCell(position) {
-    this.clearCellFocus(false);
-    if (position.row) {
-      const rowToFocus = this.localRowEls[position.row];
-      const rowCells = rowToFocus.querySelectorAll("td");
-      const cellToFocus = rowCells[position.column - 1];
-      const contentWrapper = cellToFocus.querySelector(".cell-content-wrapper");
-      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-      rowToFocus.classList.add("focused");
-      cellToFocus.classList.add("focused");
-      cellToFocus.scrollIntoView({ block: "nearest" });
-      this.inputEl.setAttribute("aria-activedescendant", cellToFocus.id);
-      this.dismissTooltip();
-      if (isTruncated) {
-        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-        showTooltip("bottom", cellToFocus, cellToFocus.innerText);
-      }
-    }
-  }
-  clearTagFocus() {
-    this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    this.focusedTag = null;
-  }
-  clearCellFocus(resetPosition = true) {
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    if (resetPosition) {
-      this.tablePosition = { row: 0, column: 1 };
-    }
-    this.localRowEls.forEach((row) => {
-      row.classList.remove("focused");
-      row.querySelectorAll("td").forEach((cell) => {
-        cell.classList.remove("focused");
-      });
-    });
-  }
-  openDropdown() {
-    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border
-    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);
-    this.isExpanded = true;
-  }
-  closeDropdown() {
-    this.clearListItemFocus();
-    this.isExpanded = false;
-  }
-  clearListItemFocus() {
-    this.focusedListItem = null;
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    this.listItemEls.forEach((el) => {
-      el.classList.remove("focused");
-    });
-  }
-  resetInput() {
-    this.charCount = 0;
-    this.inputEl.value = "";
-  }
-  announce(message) {
-    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.liveRegionMessage = message;
-  }
-  announceExistingOptions() {
-    // request animation frame to wait for re-rendering of filtered options
-    window.requestAnimationFrame(() => {
-      let numResults = 0;
-      if (this.tagInputType === "dropdown") {
-        numResults = this.optionEls.length;
-      }
-      else if (this.tagInputType === "table") {
-        numResults = this.filteredRows.length;
-      }
-      const existingOptionsMessage = intl.formatMessage({
-        id: "tagInput.existingOptions",
-        defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
-      }, { num: numResults });
-      this.announce(existingOptionsMessage);
-    });
-  }
-  generateCharacterLimitWarning(charCount, charLimit) {
-    let message = globalMessages.getCharactersEntered(charCount, charLimit);
-    if (charCount >= charLimit) {
-      message += ` ${globalMessages.characterLimitReached}`;
-    }
-    return message;
-  }
-  positionInput() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    // default placement to fall back to when no tags are present, or not enough space is available
-    this.inputEl.style.position = "static";
-    this.inputEl.style.width = "100%";
-    if (lastTag) {
-      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
-      if (spaceAvailable >= this.inputMinimumWidth) {
-        // because the input has right: 0px
-        // all thats needed to properly place it is setting position: absolute, top, and width
-        this.inputEl.style.position = "absolute";
-        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
-        this.inputEl.style.width =
-          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + "px";
-      }
-    }
-  }
-  handleTagMouseEnter(ev) {
-    const displayedText = ev.target.querySelector(".tag-text").textContent;
-    const fullText = ev.target.dataset.tag;
-    const isTruncated = displayedText !== fullText && displayedText.includes("...");
-    isTruncated && showTooltip("bottom", ev.target, fullText);
-  }
-  /// Helpers
-  listToCSV(list) {
-    return list.join(",");
-  }
-  includesCaseInsensitive(list, element) {
-    const lowercaseList = list.map((str) => str.toLowerCase());
-    return lowercaseList.includes(element.toLowerCase());
-  }
-  filterCaseInsensitive(list, element) {
-    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
-  }
-  sortCaseInsensitive(list) {
-    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
-    // so we need to pass in our own compare function to sort case-insensitive
-    return list.sort((a, b) => {
-      a = a.toLowerCase();
-      b = b.toLowerCase();
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
-  }
-  /// Renders
-  renderTags() {
-    let lockedTags = [];
-    let unlockedTags = [];
-    this.tagsList.forEach((tag, idx) => {
-      const id = `tag${idx + 1}`;
-      let tagText = "";
-      let isLocked = false;
-      if (this.tagInputType === "dropdown") {
-        tagText = tag;
-      }
-      else if (this.tagInputType === "table") {
-        // display table tags using col1 of the row with the same id
-        // if one can't be found, display as empty
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        tagText = referencedRow ? referencedRow.col1 : "";
-        isLocked = referencedRow ? referencedRow.locked : false;
-      }
-      // make sure locked tags always appear in front of list
-      const targetList = isLocked ? lockedTags : unlockedTags;
-      targetList.push(h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""} ${isLocked ? "locked" : ""}`, "data-tag": tag, role: "option", onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tag), h("span", { class: "tag-text", "aria-hidden": "true" }, tagText), isLocked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) }))));
-    });
-    return [...lockedTags, ...unlockedTags];
-  }
-  renderDropdown() {
-    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList))));
-  }
-  renderListItems(optionsList) {
-    optionsList = this.sortCaseInsensitive(optionsList);
-    // filter by input
-    if (this.inputEl && this.inputEl.value) {
-      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
-    }
-    return optionsList.map((option, idx) => {
-      const id = `option${idx + 1}`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target) }, option));
-    });
-  }
-  renderAddNewButton() {
-    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
-    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
-      const id = `add-new-btn`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
-    }
-    else
-      return "";
-  }
-  renderHelpText() {
-    let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += this.componentMessages.selectionHelpText;
-    }
-    if (this.addNew) {
-      helpText += " " + this.componentMessages.addNewHelpText;
-    }
-    return helpText;
-  }
-  renderTagCounter() {
-    if (this.maxTags) {
-      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, `${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`, this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`)));
-    }
-  }
-  renderTable() {
-    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredRows.length ? this.renderTableRows() : h("div", { class: "no-results" }, this.noResultsMessage))));
-  }
-  renderTableHeaders() {
-    return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
-      let overflowRule = "wrap";
-      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
-        overflowRule = csvToArray(this.colWrap)[idx];
-      }
-      return (h("th", { class: `header-cell ${overflowRule}`, role: "columnheader",
-        // @ts-ignore
-        width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
-    })));
-  }
-  renderTableRows() {
-    return this.filteredRows.map((row) => {
-      const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
-      return (h("tr", { id: row.id, class: `${row.locked ? "locked" : ""} ${isSelected ? "selected" : ""}`, role: "row", onClick: () => this.handleTableRowClick(row.id) }, this.renderTableCells(row)));
-    });
-  }
-  renderTableCells(row) {
-    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);
-    const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
-    return colValues.map((val, idx) => {
-      const localId = `${row.id}-col${idx + 1}`;
-      let overflowRule = "wrap";
-      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
-        overflowRule = csvToArray(this.colWrap)[idx];
-      }
-      return (h("td", { id: localId, role: "gridcell", "aria-describedby": `${localId}-description`, "aria-selected": isSelected.toString(), onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => this.dismissTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${localId}-description` }, row.locked ? "locked" : "")));
-    });
-  }
-  render() {
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.focusedElement ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, this.tagsList.length > 0 && (h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-activedescendant": "", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : ""}`, tabindex: this.nonLockedTagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-        this.clearTagFocus();
-        this.handleBlur(ev, this.el);
-      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags())), h("input", { id: `input${this.uid}`, class: this.tagLimitReached ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.tagInputType === "dropdown" ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.tagInputType === "dropdown" ? this.isExpanded.toString() : null, placeholder: this.placeholder, maxLength: this.tagInputType === "dropdown" ? this.characterLimit : undefined, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
-        this.handleBlur(ev, this.el);
-      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.tagInputType === "dropdown" && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.tagInputType === "dropdown" && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.tagInputType === "table" && this.renderTable())));
-  }
-  static get is() { return "wm-tag-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-tag-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-tag-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"top\" | \"left\" | \"none\"",
-          "resolved": "\"left\" | \"none\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "\"top\""
-      },
-      "options": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "options",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "selectedTags": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-tags",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "info": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "info",
-        "reflect": false
-      },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message",
-        "reflect": false
-      },
-      "addNew": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "add-new",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "requiredField": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required-field",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "characterLimit": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "character-limit",
-        "reflect": false,
-        "defaultValue": "50"
-      },
-      "maxTags": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max-tags",
-        "reflect": false
-      },
-      "tagInputType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"dropdown\" | \"table\"",
-          "resolved": "\"dropdown\" | \"table\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tag-input-type",
-        "reflect": false,
-        "defaultValue": "\"dropdown\""
-      },
-      "colHeaders": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col-headers",
-        "reflect": false
-      },
-      "colWidths": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col-widths",
-        "reflect": false
-      },
-      "colWrap": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col-wrap",
-        "reflect": false
-      },
-      "messageConfig": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "message-config",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusedListItem": {},
-      "focusedTag": {},
-      "tablePosition": {},
-      "isExpanded": {},
-      "tagsList": {},
-      "optionsList": {},
-      "charCount": {},
-      "liveRegionMessage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmTagInputChanged",
-        "name": "wmTagInputChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{\n    value: string[] | HTMLWmTagInputRowElement[];\n    tagChanged: string | HTMLWmTagInputRowElement;\n  }",
-          "resolved": "{ value: string[] | HTMLWmTagInputRowElement[]; tagChanged: string | HTMLWmTagInputRowElement; }",
-          "references": {
-            "HTMLWmTagInputRowElement": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "tagsList",
-        "methodName": "reflectSelectedTags"
-      }, {
-        "propName": "errorMessage",
-        "methodName": "handleErrorMessageChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmTagInputRowUpdated",
-        "method": "handleRowUpdate",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "closeIfNotElOrChild",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "scroll",
-        "method": "dismissTooltip",
-        "target": "window",
-        "capture": true,
-        "passive": true
-      }];
-  }
-}
+import { h, Host, forceUpdate, } from "@stencil/core";
+import { csvToArray, debounce, generateId, hideTooltip, intl, measureText, safeParseJSON, shouldOpenUp, showTooltip, truncateText, } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class TagInput {
+  constructor() {
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.openUp = false;
+    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
+    this.label = undefined;
+    this.labelPosition = "top";
+    this.options = "";
+    this.selectedTags = "";
+    this.info = undefined;
+    this.errorMessage = undefined;
+    this.addNew = true;
+    this.placeholder = undefined;
+    this.requiredField = false;
+    this.characterLimit = 50;
+    this.maxTags = undefined;
+    this.tagInputType = "dropdown";
+    this.colHeaders = undefined;
+    this.colWidths = undefined;
+    this.colWrap = undefined;
+    this.messageConfig = "";
+    this.focusedListItem = undefined;
+    this.focusedTag = null;
+    this.tablePosition = { row: 0, column: 1 };
+    this.isExpanded = false;
+    this.tagsList = csvToArray(this.selectedTags);
+    this.optionsList = csvToArray(this.options);
+    this.charCount = 0;
+    this.liveRegionMessage = "";
+  }
+  get tooltipVisible() {
+    return document.getElementById("wm-tooltip").classList.contains("open");
+  }
+  get focusedElement() {
+    return this.el.shadowRoot.activeElement;
+  }
+  get listItemEls() {
+    return Array.from(this.dropdownEl.querySelectorAll("li"));
+  }
+  get tagEls() {
+    return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
+  }
+  get nonLockedTagEls() {
+    return this.tagEls.filter((tag) => !tag.classList.contains("locked"));
+  }
+  get optionEls() {
+    return Array.from(this.dropdownEl.querySelectorAll(".option"));
+  }
+  get wmRowEls() {
+    return Array.from(this.el.querySelectorAll("wm-tag-input-row"));
+  }
+  get localRowEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll("tr"));
+  }
+  get filteredRows() {
+    return this.wmRowEls.filter((row) => {
+      const colValues = [row.col1, row.col2, row.col3, row.col4].join("").toLowerCase();
+      return this.inputEl && this.inputEl.value ? colValues.includes(this.inputEl.value.toLowerCase()) : true;
+    });
+  }
+  get nonLockedTagsList() {
+    let list = [];
+    if (this.tagInputType === "table") {
+      this.tagsList.forEach((id) => {
+        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];
+        if (!correspondingRowEl.locked) {
+          list.push(id);
+        }
+      });
+    }
+    else if (this.tagInputType === "dropdown") {
+      list = this.tagsList;
+    }
+    return list;
+  }
+  get tagLimitReached() {
+    return !!(this.maxTags && this.tagsList.length >= this.maxTags);
+  }
+  get noResultsMessage() {
+    return intl.formatMessage({
+      id: "tagInput.noResults",
+      defaultMessage: "No results match your search.",
+      description: "Message displayed when a user's search returns empty.",
+    });
+  }
+  get componentMessages() {
+    const addNewHelpText = intl.formatMessage({
+      id: "tagInput.addNewHelpText",
+      defaultMessage: "Press the Enter or Comma key to add a new tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    const selectionHelpText = intl.formatMessage({
+      id: "tagInput.selectionHelpText",
+      defaultMessage: "Search and select a tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    const maxTagsReachedMessage = intl.formatMessage({
+      id: "tagInput.maxTagsReached",
+      defaultMessage: "No more tags can be added because the limit has been reached.",
+    });
+    const tagAreaInstructions = intl.formatMessage({
+      id: "tagInput.tagAreaInstructions",
+      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+    });
+    const tagsAddedMessage = intl.formatMessage({
+      id: "tagInput.tagsAdded",
+      defaultMessage: "Tags added",
+      description: "For the user to understand how close they are to the tag limit, followed by x/y count",
+    });
+    const defaultConfig = {
+      addNewHelpText: addNewHelpText,
+      selectionHelpText: selectionHelpText,
+      maxTagsReached: maxTagsReachedMessage,
+      tagAreaInstructions: tagAreaInstructions,
+      tagsAdded: tagsAddedMessage,
+    };
+    const userProvidedConfig = safeParseJSON(this.messageConfig);
+    return userProvidedConfig ? Object.assign(Object.assign({}, defaultConfig), userProvidedConfig) : defaultConfig;
+  }
+  get inputMinimumWidth() {
+    // 150px is the minimum width of the input field, or the length of the placeholder text
+    const inputElStyles = getComputedStyle(this.inputEl);
+    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);
+    const inputElBuffer = [
+      inputElStyles.paddingLeft,
+      inputElStyles.paddingRight,
+      inputElStyles.marginLeft,
+      inputElStyles.marginRight,
+      tagElStyles.marginRight,
+    ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
+    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
+    return minimumWidth;
+  }
+  generateTagAddedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagAdded",
+      defaultMessage: "{tagName} added.",
+      description: "A confirmation for adding a tag.",
+    }, { tagName: tag });
+  }
+  generateTagAlreadyAddedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagAlreadyAdded",
+      defaultMessage: "{tagName} has already been added.",
+      description: "An alert for adding a tag that is already present.",
+    }, { tagName: tag });
+  }
+  componentWillLoad() {
+    if (!this.placeholder) {
+      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);
+    }
+    if (!this.label) {
+      console.error("wm-tag-input must have a label property");
+    }
+    this.consolidateSelectedTags();
+    this.el.focus = () => {
+      const firstFocusableTag = this.nonLockedTagEls[0];
+      if (firstFocusableTag) {
+        this.tagAreaEl.focus();
+        this.focusTag(firstFocusableTag);
+      }
+      else {
+        this.inputEl.focus();
+      }
+    };
+    // on resize of component, trigger componentDidRender -> positionInput
+    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
+    resizeObserver.observe(this.el);
+  }
+  componentDidLoad() {
+    // prevent highlighting of pre-selected tags
+    this.tagEls.forEach((el) => el.classList.remove("highlight"));
+  }
+  componentDidRender() {
+    this.positionInput();
+    // check each tag if truncation is needed
+    this.tagEls.forEach((tag) => {
+      const textEl = tag.querySelector(".tag-text");
+      const wrapper = this.el.shadowRoot.querySelector(".tags-and-input-wrapper");
+      const leftBound = textEl.getBoundingClientRect().left;
+      // the numbers represent spacing values for padding, margin, and delete icon
+      const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
+      let displayText = tag.dataset.tag;
+      if (this.tagInputType === "table") {
+        // table variant doesn't display the tag id, but the contents of the first column
+        const referencedRow = this.el.querySelector(`#${displayText}`);
+        displayText = referencedRow ? referencedRow.col1 : "";
+      }
+      textEl.textContent = truncateText(textEl, displayText, rightBound - leftBound, 5);
+    });
+  }
+  consolidateSelectedTags() {
+    this.tagsList.forEach((tag) => {
+      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
+        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
+      }
+    });
+    this.optionsList = csvToArray(this.options);
+  }
+  createPlaceholderDefault(addNew, hasOptions) {
+    const addAndSearchPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderAddAndSearch",
+      defaultMessage: "Add or search for a tag",
+      description: "Placeholder text. Use imperative",
+    });
+    const searchPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderSearch",
+      defaultMessage: "Search and select a tag",
+      description: "Placeholder text. Use imperative",
+    });
+    const addPlaceholder = intl.formatMessage({
+      id: "tagInput.placeholderAdd",
+      defaultMessage: "Add a new tag",
+      description: "Placeholder text. Use imperative",
+    });
+    let placeholder = "";
+    if (addNew && hasOptions) {
+      placeholder = addAndSearchPlaceholder;
+    }
+    else if (!addNew && hasOptions) {
+      placeholder = searchPlaceholder;
+    }
+    else if (addNew) {
+      placeholder = addPlaceholder;
+    }
+    return placeholder;
+  }
+  reflectSelectedTags(newValue, oldValue) {
+    const isAddition = newValue.length > oldValue.length;
+    let changedTag = "";
+    let selectedTags = this.tagsList;
+    if (isAddition) {
+      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];
+    }
+    else {
+      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];
+    }
+    // event emitted by type table uses element references instead of strings
+    if (this.tagInputType === "table") {
+      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];
+      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`));
+    }
+    this.selectedTags = this.listToCSV(this.tagsList);
+    let detail = { value: selectedTags, tagChanged: changedTag };
+    this.wmTagInputChanged.emit(detail);
+  }
+  handleErrorMessageChange() {
+    if (this.errorMessage) {
+      this.announce(this.errorMessage);
+    }
+  }
+  handleRowUpdate() {
+    forceUpdate(this.el);
+  }
+  closeIfNotElOrChild(ev) {
+    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
+    if (this.tagInputType === "dropdown" && isntElOrChild && this.isExpanded) {
+      this.closeDropdown();
+    }
+  }
+  // From wm-button
+  // we need to listen for scroll events during the capture phase because they do not bubble up
+  // there can be layouts where the main content has 100vh and overflows
+  // in these cases window will register no scroll events unless we catch on they way down
+  dismissTooltip() {
+    if (this.tooltipVisible) {
+      hideTooltip();
+    }
+  }
+  handleInputKeyDown(ev) {
+    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));
+    }
+    // prevent keydown triggering on tag area
+    ev.stopPropagation();
+    switch (ev.key) {
+      case "Enter":
+      case ",":
+        ev.preventDefault();
+        this.handleInputEnter();
+        break;
+      case "ArrowDown":
+        ev.preventDefault();
+        this.handleInputArrowDown();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.handleInputArrowUp();
+        break;
+      case "ArrowLeft":
+        if (this.tagInputType === "table" && this.tablePosition.row) {
+          ev.preventDefault();
+          this.moveLeftCell();
+        }
+        break;
+      case "ArrowRight":
+        if (this.tagInputType === "table" && this.tablePosition.row) {
+          ev.preventDefault();
+          this.moveRightCell();
+        }
+        break;
+      case "Escape":
+        if (this.tagInputType === "dropdown" && this.isExpanded) {
+          this.closeDropdown();
+        }
+        break;
+      case "ArrowLeft":
+      case "Backspace":
+        this.handleInputBackspace();
+        break;
+    }
+  }
+  handleInputFocus() {
+    if (this.tagInputType === "dropdown") {
+      this.openDropdown();
+      this.clearListItemFocus();
+    }
+    // force update needed to apply styled state of field-wrapper el
+    forceUpdate(this.el);
+  }
+  handleInputChanged(value) {
+    this.charCount = value.length;
+    if (this.tagInputType === "dropdown") {
+      this.clearListItemFocus();
+      if (this.charCount >= this.characterLimit - 5) {
+        this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+      }
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+    }
+    else if (this.tagInputType === "table") {
+      this.clearCellFocus();
+    }
+    this.announceExistingOptions();
+  }
+  handleInputEnter() {
+    if (this.tagInputType === "dropdown") {
+      if (this.focusedListItem) {
+        this.handleListItemClick(this.focusedListItem);
+      }
+      else {
+        this.submitInput(this.addNew, this.inputEl.value.trim());
+      }
+    }
+    else if (this.tagInputType === "table" && this.tablePosition.row > 0) {
+      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);
+    }
+  }
+  submitInput(canAddNew, value) {
+    const hasNonWhiteSpaceCharacters = value.match(/\S/);
+    if (canAddNew && hasNonWhiteSpaceCharacters) {
+      this.addTag(value);
+      this.optionsList = this.addOption(value);
+      this.resetInput();
+    }
+  }
+  handleInputArrowDown() {
+    if (this.tagInputType === "table") {
+      this.moveDownRow();
+    }
+    else if (this.tagInputType === "dropdown" && this.isExpanded) {
+      this.moveDownListItem();
+    }
+    else if (this.tagInputType === "dropdown") {
+      this.openDropdown();
+    }
+  }
+  handleInputArrowUp() {
+    if (this.tagInputType === "table") {
+      this.moveUpRow();
+    }
+    else if (this.tagInputType === "dropdown" && this.isExpanded) {
+      this.moveUpListItem();
+    }
+    else if (this.tagInputType === "dropdown") {
+      this.openDropdown();
+    }
+  }
+  handleInputBackspace() {
+    if (this.inputEl.value === "" && this.tagsList.length > 0) {
+      // wait for events to finish firing before redirecting focus
+      // prevents double input in input area and tag area
+      window.requestAnimationFrame(() => {
+        if (this.nonLockedTagsList.length > 0) {
+          this.tagAreaEl.focus();
+          this.focusTag(this.tagEls[this.tagEls.length - 1]);
+        }
+      });
+    }
+  }
+  handleListItemKeyDown(ev) {
+    const typedEvTarget = ev.target;
+    switch (ev.key) {
+      case "Enter":
+      case " ":
+        ev.preventDefault();
+        typedEvTarget.click();
+        break;
+      case "ArrowDown":
+        ev.preventDefault();
+        this.moveDownListItem();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.moveUpListItem();
+        break;
+      case "Escape":
+        if (this.focusedElement !== this.inputEl) {
+          this.inputEl.focus();
+        }
+        else if (this.tagInputType === "dropdown") {
+          this.closeDropdown();
+        }
+        break;
+    }
+  }
+  handleListItemClick(item) {
+    const tag = item.dataset.option.trim() || "";
+    if (this.includesCaseInsensitive(this.tagsList, tag)) {
+      this.announce(this.generateTagAlreadyAddedMessage(tag));
+    }
+    else {
+      this.resetInput();
+      this.addTag(tag);
+      this.optionsList = this.addOption(tag);
+      this.focusedListItem = null;
+    }
+  }
+  handleTableRowClick(rowId) {
+    const referencedRow = this.el.querySelector(`#${rowId}`);
+    const isLocked = referencedRow.locked;
+    if (!isLocked) {
+      if (this.includesCaseInsensitive(this.tagsList, rowId)) {
+        this.removeTag(rowId);
+      }
+      else if (!this.tagLimitReached) {
+        this.addTag(rowId);
+        this.resetInput();
+      }
+    }
+  }
+  handleTagAreaKeyDown(ev) {
+    switch (ev.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        ev.preventDefault();
+        this.moveLeftTag();
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        ev.preventDefault();
+        this.moveRightTag();
+        break;
+      case "Backspace":
+      case "Delete":
+        this.handleTagAreaDelete();
+        break;
+    }
+  }
+  handleTagAreaDelete() {
+    const isLocked = this.focusedTag && this.focusedTag.classList.contains("locked");
+    if (this.focusedTag && !isLocked) {
+      this.removeTag(this.focusedTag.dataset.tag);
+      if (this.nonLockedTagsList.length === 0) {
+        // focus input if no tags are left
+        this.inputEl.focus();
+      }
+      else {
+        const removingLastTag = this.focusedTag === this.tagEls[this.tagEls.length - 1];
+        // if removing the last tag, reassign focused tag to previous task
+        this.focusedTag = removingLastTag ? this.tagEls[this.tagEls.length - 2] : this.focusedTag;
+        this.focusTag(this.focusedTag);
+      }
+    }
+  }
+  handleBlur(ev, component) {
+    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
+    this.dismissTooltip();
+    this.clearCellFocus();
+    if (isntElOrChild) {
+      this.fieldWrapperEl.classList.remove("focused");
+      if (this.tagInputType === "dropdown") {
+        this.closeDropdown();
+      }
+    }
+  }
+  handleCellMouseEnter(ev) {
+    const cell = ev.target;
+    const contentWrapper = cell.querySelector(".cell-content-wrapper");
+    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+    if (isTruncated) {
+      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+      showTooltip("bottom", cell, cell.innerText);
+    }
+  }
+  handleTagAreaFocus() {
+    if (this.tagInputType === "dropdown") {
+      this.closeDropdown();
+    }
+    const firstFocusableTag = this.nonLockedTagEls[0];
+    firstFocusableTag && this.focusTag(firstFocusableTag);
+  }
+  handleRemoveButtonClick(tag) {
+    this.moveLeftTag();
+    this.removeTag(tag);
+  }
+  moveDownListItem() {
+    if (this.listItemEls.length > 0) {
+      const firstListItem = this.listItemEls[0];
+      if (!this.focusedListItem) {
+        this.focusListItem(firstListItem);
+      }
+      else if (this.focusedListItem.nextElementSibling) {
+        this.focusListItem(this.focusedListItem.nextElementSibling);
+      }
+      else {
+        this.focusListItem(firstListItem);
+      }
+    }
+  }
+  moveUpListItem() {
+    if (this.listItemEls.length > 0) {
+      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
+      if (!this.focusedListItem) {
+        this.focusListItem(lastListItem);
+      }
+      else if (this.focusedListItem.previousElementSibling) {
+        this.focusListItem(this.focusedListItem.previousElementSibling);
+      }
+      else {
+        this.clearListItemFocus();
+      }
+    }
+  }
+  moveDownRow() {
+    if (this.filteredRows.length > 0) {
+      if (this.tablePosition.row === 0) {
+        this.tablePosition.row = 1;
+      }
+      else if (this.tablePosition.row === this.filteredRows.length) {
+        this.tablePosition.row = 1;
+      }
+      else {
+        this.tablePosition.row++;
+      }
+      // skip locked rows
+      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1];
+      if (rowToFocus.locked) {
+        this.moveDownRow();
+      }
+      else {
+        this.focusCell(this.tablePosition);
+      }
+    }
+  }
+  moveUpRow() {
+    if (this.filteredRows.length > 0) {
+      if (this.tablePosition.row === 0) {
+        this.tablePosition.row = this.filteredRows.length;
+      }
+      else if (this.tablePosition.row === 1) {
+        this.tablePosition.row = 0;
+      }
+      else {
+        this.tablePosition.row--;
+      }
+      // skip locked rows
+      const rowToFocus = this.wmRowEls[this.tablePosition.row - 1];
+      if (rowToFocus && rowToFocus.locked) {
+        this.moveUpRow();
+      }
+      else if (rowToFocus) {
+        this.focusCell(this.tablePosition);
+      }
+      else {
+        this.clearCellFocus();
+      }
+    }
+  }
+  moveLeftCell() {
+    if (this.tablePosition.column != 1) {
+      this.tablePosition.column--;
+      this.focusCell(this.tablePosition);
+    }
+  }
+  moveRightCell() {
+    const numCols = csvToArray(this.colHeaders).length;
+    if (this.tablePosition.column < numCols) {
+      this.tablePosition.column++;
+      this.focusCell(this.tablePosition);
+    }
+  }
+  moveLeftTag() {
+    const lastTag = this.tagEls[this.tagEls.length - 1];
+    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
+      this.focusedTag = this.focusedTag.previousElementSibling;
+    }
+    else {
+      this.focusedTag = lastTag;
+    }
+    // skip locked tags
+    if (this.focusedTag.classList.contains("locked") && this.nonLockedTagEls.length > 0) {
+      this.moveLeftTag();
+    }
+    else {
+      this.focusTag(this.focusedTag);
+    }
+  }
+  moveRightTag() {
+    const firstTag = this.tagEls[0];
+    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
+      this.focusedTag = this.focusedTag.nextElementSibling;
+    }
+    else {
+      this.focusedTag = firstTag;
+    }
+    // skip locked tags
+    if (this.focusedTag.classList.contains("locked")) {
+      this.moveRightTag();
+    }
+    else {
+      this.focusTag(this.focusedTag);
+    }
+  }
+  addOption(option) {
+    let newOptionsList = this.optionsList;
+    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
+    if (!optionAlreadyExists) {
+      newOptionsList = newOptionsList.concat(option);
+    }
+    return newOptionsList;
+  }
+  removeOption(option) {
+    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
+  }
+  addTag(tag) {
+    let newTagsList = this.tagsList;
+    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
+    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
+    if (!tagAlreadyAdded) {
+      let textToAnnounce = tag;
+      if (this.tagInputType === "table") {
+        const referencedRow = this.el.querySelector(`#${tag}`);
+        textToAnnounce = referencedRow.col1;
+      }
+      this.announce(this.generateTagAddedMessage(textToAnnounce));
+      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);
+      // if maxTags has been reached, focus should go to the tagArea
+      if (this.tagLimitReached) {
+        this.tagAreaEl.focus();
+      }
+    }
+  }
+  removeTag(tag) {
+    let textToAnnounce = tag;
+    if (this.tagInputType === "table") {
+      const referencedRow = this.el.querySelector(`#${tag}`);
+      textToAnnounce = referencedRow.col1;
+    }
+    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: textToAnnounce });
+    this.announce(tagRemovedMessage);
+    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
+    if (this.tagInputType === "dropdown") {
+      // if a tag was introduced by the user, also remove it from the dropdown options
+      const devOptionsList = csvToArray(this.options);
+      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
+        this.removeOption(tag);
+      }
+    }
+  }
+  focusListItem(item) {
+    this.focusedListItem = item;
+    this.inputEl.setAttribute("aria-activedescendant", this.focusedListItem.id);
+    item.scrollIntoView({ block: "nearest" });
+  }
+  focusTag(element) {
+    if (element.classList.contains("locked")) {
+      this.focusedTag = null;
+      this.tagAreaEl.setAttribute("aria-activedescendant", "");
+    }
+    else {
+      this.focusedTag = element;
+      this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
+    }
+    window.requestAnimationFrame(() => {
+      hideTooltip();
+      const textEl = element.querySelector(".tag-text");
+      const fullText = element.dataset.tag;
+      const isTruncated = fullText !== textEl.textContent && textEl.textContent.includes("...");
+      isTruncated && showTooltip("bottom", element, fullText);
+    });
+  }
+  focusCell(position) {
+    this.clearCellFocus(false);
+    if (position.row) {
+      const rowToFocus = this.localRowEls[position.row];
+      const rowCells = rowToFocus.querySelectorAll("td");
+      const cellToFocus = rowCells[position.column - 1];
+      const contentWrapper = cellToFocus.querySelector(".cell-content-wrapper");
+      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+      rowToFocus.classList.add("focused");
+      cellToFocus.classList.add("focused");
+      cellToFocus.scrollIntoView({ block: "nearest" });
+      this.inputEl.setAttribute("aria-activedescendant", cellToFocus.id);
+      this.dismissTooltip();
+      if (isTruncated) {
+        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+        showTooltip("bottom", cellToFocus, cellToFocus.innerText);
+      }
+    }
+  }
+  clearTagFocus() {
+    this.tagAreaEl.setAttribute("aria-activedescendant", "");
+    this.focusedTag = null;
+  }
+  clearCellFocus(resetPosition = true) {
+    this.inputEl.setAttribute("aria-activedescendant", "");
+    if (resetPosition) {
+      this.tablePosition = { row: 0, column: 1 };
+    }
+    this.localRowEls.forEach((row) => {
+      row.classList.remove("focused");
+      row.querySelectorAll("td").forEach((cell) => {
+        cell.classList.remove("focused");
+      });
+    });
+  }
+  openDropdown() {
+    // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border
+    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);
+    this.isExpanded = true;
+  }
+  closeDropdown() {
+    this.clearListItemFocus();
+    this.isExpanded = false;
+  }
+  clearListItemFocus() {
+    this.focusedListItem = null;
+    this.inputEl.setAttribute("aria-activedescendant", "");
+    this.listItemEls.forEach((el) => {
+      el.classList.remove("focused");
+    });
+  }
+  resetInput() {
+    this.charCount = 0;
+    this.inputEl.value = "";
+  }
+  announce(message) {
+    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.liveRegionMessage = message;
+  }
+  announceExistingOptions() {
+    // request animation frame to wait for re-rendering of filtered options
+    window.requestAnimationFrame(() => {
+      let numResults = 0;
+      if (this.tagInputType === "dropdown") {
+        numResults = this.optionEls.length;
+      }
+      else if (this.tagInputType === "table") {
+        numResults = this.filteredRows.length;
+      }
+      const existingOptionsMessage = intl.formatMessage({
+        id: "tagInput.existingOptions",
+        defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
+      }, { num: numResults });
+      this.announce(existingOptionsMessage);
+    });
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    let message = globalMessages.getCharactersEntered(charCount, charLimit);
+    if (charCount >= charLimit) {
+      message += ` ${globalMessages.characterLimitReached}`;
+    }
+    return message;
+  }
+  positionInput() {
+    const lastTag = this.tagEls[this.tagEls.length - 1];
+    // default placement to fall back to when no tags are present, or not enough space is available
+    this.inputEl.style.position = "static";
+    this.inputEl.style.width = "100%";
+    if (lastTag) {
+      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
+      if (spaceAvailable >= this.inputMinimumWidth) {
+        // because the input has right: 0px
+        // all thats needed to properly place it is setting position: absolute, top, and width
+        this.inputEl.style.position = "absolute";
+        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
+        this.inputEl.style.width =
+          (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + "px";
+      }
+    }
+  }
+  handleTagMouseEnter(ev) {
+    const displayedText = ev.target.querySelector(".tag-text").textContent;
+    const fullText = ev.target.dataset.tag;
+    const isTruncated = displayedText !== fullText && displayedText.includes("...");
+    isTruncated && showTooltip("bottom", ev.target, fullText);
+  }
+  /// Helpers
+  listToCSV(list) {
+    return list.join(",");
+  }
+  includesCaseInsensitive(list, element) {
+    const lowercaseList = list.map((str) => str.toLowerCase());
+    return lowercaseList.includes(element.toLowerCase());
+  }
+  filterCaseInsensitive(list, element) {
+    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
+  }
+  sortCaseInsensitive(list) {
+    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
+    // so we need to pass in our own compare function to sort case-insensitive
+    return list.sort((a, b) => {
+      a = a.toLowerCase();
+      b = b.toLowerCase();
+      return a > b ? 1 : a < b ? -1 : 0;
+    });
+  }
+  /// Renders
+  renderTags() {
+    let lockedTags = [];
+    let unlockedTags = [];
+    this.tagsList.forEach((tag, idx) => {
+      const id = `tag${idx + 1}`;
+      let tagText = "";
+      let isLocked = false;
+      if (this.tagInputType === "dropdown") {
+        tagText = tag;
+      }
+      else if (this.tagInputType === "table") {
+        // display table tags using col1 of the row with the same id
+        // if one can't be found, display as empty
+        const referencedRow = this.el.querySelector(`#${tag}`);
+        tagText = referencedRow ? referencedRow.col1 : "";
+        isLocked = referencedRow ? referencedRow.locked : false;
+      }
+      // make sure locked tags always appear in front of list
+      const targetList = isLocked ? lockedTags : unlockedTags;
+      targetList.push(h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""} ${isLocked ? "locked" : ""}`, "data-tag": tag, role: "option", onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tag), h("span", { class: "tag-text", "aria-hidden": "true" }, tagText), isLocked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) }))));
+    });
+    return [...lockedTags, ...unlockedTags];
+  }
+  renderDropdown() {
+    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList))));
+  }
+  renderListItems(optionsList) {
+    optionsList = this.sortCaseInsensitive(optionsList);
+    // filter by input
+    if (this.inputEl && this.inputEl.value) {
+      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
+    }
+    return optionsList.map((option, idx) => {
+      const id = `option${idx + 1}`;
+      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
+      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
+      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target) }, option));
+    });
+  }
+  renderAddNewButton() {
+    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
+    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
+    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
+      const id = `add-new-btn`;
+      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
+      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
+    }
+    else
+      return "";
+  }
+  renderHelpText() {
+    let helpText = "";
+    if (this.optionsList.length > 0) {
+      helpText += this.componentMessages.selectionHelpText;
+    }
+    if (this.addNew) {
+      helpText += " " + this.componentMessages.addNewHelpText;
+    }
+    return helpText;
+  }
+  renderTagCounter() {
+    if (this.maxTags) {
+      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, `${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`, this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`)));
+    }
+  }
+  renderTable() {
+    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredRows.length ? this.renderTableRows() : h("div", { class: "no-results" }, this.noResultsMessage))));
+  }
+  renderTableHeaders() {
+    return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
+      let overflowRule = "wrap";
+      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
+        overflowRule = csvToArray(this.colWrap)[idx];
+      }
+      return (h("th", { class: `header-cell ${overflowRule}`, role: "columnheader",
+        // @ts-ignore
+        width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
+    })));
+  }
+  renderTableRows() {
+    return this.filteredRows.map((row) => {
+      const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+      return (h("tr", { id: row.id, class: `${row.locked ? "locked" : ""} ${isSelected ? "selected" : ""}`, role: "row", onClick: () => this.handleTableRowClick(row.id) }, this.renderTableCells(row)));
+    });
+  }
+  renderTableCells(row) {
+    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);
+    const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+    return colValues.map((val, idx) => {
+      const localId = `${row.id}-col${idx + 1}`;
+      let overflowRule = "wrap";
+      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
+        overflowRule = csvToArray(this.colWrap)[idx];
+      }
+      return (h("td", { id: localId, role: "gridcell", "aria-describedby": `${localId}-description`, "aria-selected": isSelected.toString(), onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => this.dismissTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${localId}-description` }, row.locked ? "locked" : "")));
+    });
+  }
+  render() {
+    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.focusedElement ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "tags-and-input-wrapper" }, this.tagsList.length > 0 && (h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-activedescendant": "", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : ""}`, tabindex: this.nonLockedTagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
+        this.clearTagFocus();
+        this.handleBlur(ev, this.el);
+      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags())), h("input", { id: `input${this.uid}`, class: this.tagLimitReached ? "hidden" : "", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.tagInputType === "dropdown" ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.tagInputType === "dropdown" ? this.isExpanded.toString() : null, placeholder: this.placeholder, maxLength: this.tagInputType === "dropdown" ? this.characterLimit : undefined, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
+        this.handleBlur(ev, this.el);
+      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.tagInputType === "dropdown" && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.tagInputType === "dropdown" && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.tagInputType === "table" && this.renderTable())));
+  }
+  static get is() { return "wm-tag-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tag-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tag-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"left\" | \"none\"",
+          "resolved": "\"left\" | \"none\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"top\""
+      },
+      "options": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "options",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "selectedTags": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-tags",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "info": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info",
+        "reflect": false
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "addNew": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-new",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "requiredField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "characterLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "character-limit",
+        "reflect": false,
+        "defaultValue": "50"
+      },
+      "maxTags": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-tags",
+        "reflect": false
+      },
+      "tagInputType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"dropdown\" | \"table\"",
+          "resolved": "\"dropdown\" | \"table\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tag-input-type",
+        "reflect": false,
+        "defaultValue": "\"dropdown\""
+      },
+      "colHeaders": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col-headers",
+        "reflect": false
+      },
+      "colWidths": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col-widths",
+        "reflect": false
+      },
+      "colWrap": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col-wrap",
+        "reflect": false
+      },
+      "messageConfig": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "message-config",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusedListItem": {},
+      "focusedTag": {},
+      "tablePosition": {},
+      "isExpanded": {},
+      "tagsList": {},
+      "optionsList": {},
+      "charCount": {},
+      "liveRegionMessage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTagInputChanged",
+        "name": "wmTagInputChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\r\n    value: string[] | HTMLWmTagInputRowElement[];\r\n    tagChanged: string | HTMLWmTagInputRowElement;\r\n  }",
+          "resolved": "{ value: string[] | HTMLWmTagInputRowElement[]; tagChanged: string | HTMLWmTagInputRowElement; }",
+          "references": {
+            "HTMLWmTagInputRowElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "tagsList",
+        "methodName": "reflectSelectedTags"
+      }, {
+        "propName": "errorMessage",
+        "methodName": "handleErrorMessageChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "wmTagInputRowUpdated",
+        "method": "handleRowUpdate",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "closeIfNotElOrChild",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "scroll",
+        "method": "dismissTooltip",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }];
+  }
+}