@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -2,1179 +2,1179 @@ import { h, forceUpdate } from "@stencil/core";
 import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class TagInput {
-    constructor() {
-        this.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",
-        });
-        this.selectionHelpText = intl.formatMessage({
-            id: "tagInput.selectionHelpText",
-            defaultMessage: "Search and select a tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
-        });
-        this.maxTagsReachedMessage = intl.formatMessage({
-            id: "tagInput.maxTagsReached",
-            defaultMessage: "No more tags can be added because the limit has been reached.",
-        });
-        this.tagAreaInstructions = intl.formatMessage({
-            id: "tagInput.tagAreaInstructions",
-            defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-        });
-        this.tagsAddedMessage = intl.formatMessage({
-            id: "tagInput.tagsAdded",
-            defaultMessage: "Tags added",
-            description: "Full message for context: 'Tags added: x/y",
-        });
-        this.openUp = false;
-        this.inModal = false;
-        this.lastAddedTags = []; // the tag(s) added by the user on their last action (for highlighting)
-        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
-        this.label = undefined;
-        this.errorMessage = undefined;
-        this.info = undefined;
-        this.labelPosition = "top";
-        this.maxTags = undefined;
-        this.placeholder = undefined;
-        this.requiredField = false;
-        this.tagInputType = "dropdown";
-        this.helpText = undefined;
-        this.addNew = true;
-        this.characterLimit = 50;
-        this.colHeaders = undefined;
-        this.colWidths = undefined;
-        this.colWrap = undefined;
-        this.isExpanded = false;
-        this.liveRegionMessage = "";
-        this.focusedOption = undefined;
-        this.focusedColumn = 0;
-        this.focusedTagIndex = undefined;
-        this.tagsList = [];
-    }
-    get isDropdown() {
-        return this.tagInputType === "dropdown";
-    }
-    get isTable() {
-        return this.tagInputType === "table";
-    }
-    get charCount() {
-        return this.inputEl ? this.inputEl.value.length : 0;
-    }
-    get tooltipVisible() {
-        return document.getElementById("wm-tooltip").classList.contains("show");
-    }
-    get optionEls() {
-        return Array.from(this.el.querySelectorAll("wm-tag-option"));
-    }
-    // list of options matching user query
-    get filteredOptionEls() {
-        const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
-        const list = Array.from(this.optionEls).filter((o) => {
-            let values = "";
-            if (this.isDropdown) {
-                values = o.textContent.toLowerCase();
-            }
-            else if (this.isTable) {
-                values = [o.col1, o.col2, o.col3, o.col4].join("").toLowerCase();
-            }
-            return values.includes(query);
-        });
-        return list;
-    }
-    // the ones that should be rendered as tags
-    get taggedOptions() {
-        return this.optionEls.filter((o) => o.selected || o.locked);
-    }
-    // for visual stuff (measuring, truncating...)
-    get _tagEls() {
-        return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
-    }
-    // unlocked and selected tags, i.e. the ones that the user can interact with.
-    // (as opposed to locked tags who can't be focused / deleted)
-    // used for focus logic
-    get focusableTags() {
-        return this._tagEls.filter((t) => !t.classList.contains("locked"));
-    }
-    get focusedTag() {
-        if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0)
-            return this.focusableTags[this.focusedTagIndex];
-    }
-    // get the wm-tag-option, given the internal representation (dropdown li or table tr)
-    tagOptionFromEl(el) {
-        return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
-    }
-    // get the wm-tag-option, given the internal representation of a tag
-    tagOptionFromTag(el) {
-        const id = el.id.replace("tag-", "");
-        return this.el.querySelector("#" + id);
-    }
-    // get the internal representation of a wm-tag-option
-    elFromTagOption(el) {
-        return this.el.shadowRoot.querySelector("#" + el.id);
-    }
-    // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
-    get _focusedOption() {
-        if (!!this.focusedOption) {
-            return this.elFromTagOption(this.focusedOption);
-        }
-        else if (this.addNewButton && this.addNewButton.classList.contains("focused")) {
-            return this.addNewButton;
-        }
-    }
-    get _focusedCell() {
-        if (!!this._focusedOption) {
-            const allCells = Array.from(this._focusedOption.querySelectorAll("td"));
-            const index = this.focusedColumn || 0;
-            return allCells[index];
-        }
-    }
-    get inputActiveDescendantId() {
-        if (this._focusedOption) {
-            if (this.isTable) {
-                const cells = Array.from(this._focusedOption.querySelectorAll("td"));
-                return cells[this.focusedColumn].id;
-            }
-            return this._focusedOption.id;
-        }
-        return null;
-    }
-    get tagLimitReached() {
-        return !!(this.maxTags && this.taggedOptions.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 inputMinimumWidth() {
-        if (this._tagEls) {
-            // 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;
-        }
-        else {
-            return 150;
-        }
-    }
-    getTagName(o) {
-        // when the user is typing and adding a new option, all we can pass is the text typed. so for the dropdown type the tag name is the identifier. It also takes care of duplicates. Table variant requires an id as the tag name is the first column but we want to allow duplicates here (e.g. people with the same name)
-        return this.isDropdown ? o.textContent : o.col1;
-    }
-    isExistingTag(tag) {
-        const list = this.optionEls.map((o) => this.getTagName(o).toLowerCase());
-        return list.includes(tag.toLowerCase());
-    }
-    tagAddedMessage(tag) {
-        return intl.formatMessage({
-            id: "tagInput.tagAdded",
-            defaultMessage: "{tagName} added.",
-            description: "A confirmation for adding a tag.",
-        }, { tagName: tag });
-    }
-    tagRemovedMessage(tag) {
-        return intl.formatMessage({
-            id: "tagInput.tagRemoved",
-            defaultMessage: "{tagName} removed.",
-            description: "A confirmation for removing a tag.",
-        }, { tagName: tag });
-    }
-    tagAlreadyAddedMessage(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 });
-    }
-    isElOrChild(el) {
-        return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
-    }
-    componentWillLoad() {
-        if (!this.placeholder) {
-            this.placeholder = this.createPlaceholderDefault(this.addNew, this.optionEls.length > 0);
-        }
-        if (!this.label) {
-            console.error("wm-tag-input must have a label property");
-        }
-        this.el.focus = () => {
-            const firstFocusableTag = this.focusableTags[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);
-        // if within wm-modal, change max-height to vh unit
-        if (this.el.closest("wm-modal")) {
-            this.inModal = true;
-        }
-        const lockedTags = [];
-        const regularTags = [];
-        this.optionEls.forEach((o) => {
-            if (o.locked) {
-                lockedTags.push(o);
-            }
-            else if (o.selected) {
-                regularTags.push(o);
-            }
-        });
-        this.tagsList = [...lockedTags, ...regularTags];
-    }
-    componentDidLoad() {
-        // Set up observer to announce changes in selected tags, or removed user-added tags
-        const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
-        observerAnnouncer.observe(this.el, {
-            subtree: true,
-            attributes: true,
-            attributeFilter: ["selected"],
-            childList: true,
-        });
-        // Set up observer that ensures parent reload
-        // when children wm-tag-options are removed
-        const optionListObserver = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleOptionListChange(mutationRecord)));
-        optionListObserver.observe(this.el, {
-            childList: true,
-        });
-        // Set up the observer that will handle focus
-        // when tag list changes
-        if (!!this.tagAreaEl) {
-            const tagListObserver = new MutationObserver((tagListMutations) => tagListMutations.forEach((mutationRecord) => this.handleTagListChange(mutationRecord)));
-            tagListObserver.observe(this.tagAreaEl, {
-                childList: true,
-            });
-        }
-    }
-    handleChangeAnnouncement(mutationRecord) {
-        const tagOptionEl = mutationRecord.target;
-        if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
-            // announce deselection of user-added tag, whose element removal is picked up
-            this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
-        }
-        else if (mutationRecord.type == "attributes") {
-            // announce selection or deselection of all kinds of tags
-            if (tagOptionEl.selected) {
-                this.announce(this.tagAddedMessage(tagOptionEl.textContent));
-            }
-            else {
-                this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
-            }
-        }
-    }
-    handleOptionListChange(record) {
-        const addedNodes = Array.from(record.addedNodes);
-        if (addedNodes.length > 0) {
-            addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
-        }
-        const removedNodes = Array.from(record.removedNodes);
-        if (removedNodes.length > 0) {
-            this.tagsList = this.tagsList.filter((t) => !removedNodes.includes(t));
-        }
-    }
-    handleTagOptionSelected(ev) {
-        const selOption = ev.target;
-        this.tagsList = this.tagsList.concat(selOption);
-    }
-    handleTagOptionDeselected(ev) {
-        const deselOption = ev.target;
-        this.tagsList = this.tagsList.filter((t) => t != deselOption);
-    }
-    handleTagListChange(mutationRecord) {
-        // there are 2 cases: the option still exists but is no longer selected,
-        // or it was removed altogether
-        const removedTag = mutationRecord.removedNodes[0];
-        if (!!removedTag) {
-            // this is a trick. focusedTag gets the ref from an index. When an element
-            // is removed it will fall back on the new element with that index if it exists
-            if (this.focusedTag) {
-                this.focusTag(this.focusedTag);
-            }
-            else if (this.focusableTags.length > 0) {
-                // Otherwise the last tag was deleted and we reassign to the new last tag.
-                const tagToFocus = this.focusableTags[this.focusableTags.length - 1];
-                this.focusTag(tagToFocus);
-            }
-            else {
-                // unless there are no more tags...
-                this.inputEl.focus();
-            }
-            this.lastAddedTags = [];
-        }
-    }
-    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;
-            const id = tag.id.replace("tag-", "");
-            const optionEl = id && this.el.querySelector("#" + id);
-            if (optionEl) {
-                // tag text for table variant is first column text
-                textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
-            }
-        });
-    }
-    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;
-    }
-    handleErrorMessageChange() {
-        if (this.errorMessage) {
-            this.announce(this.errorMessage);
-        }
-    }
-    handleClick(ev) {
-        const el = ev.target;
-        if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
-            this.closeDropdown();
-        }
-        else if (Array.from(this.el.children).includes(el)) {
-            const option = el;
-            const tagName = this.getTagName(option);
-            this.lastAddedTags = [tagName];
-        }
-    }
-    handleOptionClick(ev) {
+  constructor() {
+    this.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",
+    });
+    this.selectionHelpText = intl.formatMessage({
+      id: "tagInput.selectionHelpText",
+      defaultMessage: "Search and select a tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    this.maxTagsReachedMessage = intl.formatMessage({
+      id: "tagInput.maxTagsReached",
+      defaultMessage: "No more tags can be added because the limit has been reached.",
+    });
+    this.tagAreaInstructions = intl.formatMessage({
+      id: "tagInput.tagAreaInstructions",
+      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+    });
+    this.tagsAddedMessage = intl.formatMessage({
+      id: "tagInput.tagsAdded",
+      defaultMessage: "Tags added",
+      description: "Full message for context: 'Tags added: x/y",
+    });
+    this.openUp = false;
+    this.inModal = false;
+    this.lastAddedTags = []; // the tag(s) added by the user on their last action (for highlighting)
+    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
+    this.label = undefined;
+    this.errorMessage = undefined;
+    this.info = undefined;
+    this.labelPosition = "top";
+    this.maxTags = undefined;
+    this.placeholder = undefined;
+    this.requiredField = false;
+    this.tagInputType = "dropdown";
+    this.helpText = undefined;
+    this.addNew = true;
+    this.characterLimit = 50;
+    this.colHeaders = undefined;
+    this.colWidths = undefined;
+    this.colWrap = undefined;
+    this.isExpanded = false;
+    this.liveRegionMessage = "";
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
+    this.focusedTagIndex = undefined;
+    this.tagsList = [];
+  }
+  get isDropdown() {
+    return this.tagInputType === "dropdown";
+  }
+  get isTable() {
+    return this.tagInputType === "table";
+  }
+  get charCount() {
+    return this.inputEl ? this.inputEl.value.length : 0;
+  }
+  get tooltipVisible() {
+    return document.getElementById("wm-tooltip").classList.contains("show");
+  }
+  get optionEls() {
+    return Array.from(this.el.querySelectorAll("wm-tag-option"));
+  }
+  // list of options matching user query
+  get filteredOptionEls() {
+    const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
+    const list = Array.from(this.optionEls).filter((o) => {
+      let values = "";
+      if (this.isDropdown) {
+        values = o.textContent.toLowerCase();
+      }
+      else if (this.isTable) {
+        values = [o.col1, o.col2, o.col3, o.col4].join("").toLowerCase();
+      }
+      return values.includes(query);
+    });
+    return list;
+  }
+  // the ones that should be rendered as tags
+  get taggedOptions() {
+    return this.optionEls.filter((o) => o.selected || o.locked);
+  }
+  // for visual stuff (measuring, truncating...)
+  get _tagEls() {
+    return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
+  }
+  // unlocked and selected tags, i.e. the ones that the user can interact with.
+  // (as opposed to locked tags who can't be focused / deleted)
+  // used for focus logic
+  get focusableTags() {
+    return this._tagEls.filter((t) => !t.classList.contains("locked"));
+  }
+  get focusedTag() {
+    if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0)
+      return this.focusableTags[this.focusedTagIndex];
+  }
+  // get the wm-tag-option, given the internal representation (dropdown li or table tr)
+  tagOptionFromEl(el) {
+    return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
+  }
+  // get the wm-tag-option, given the internal representation of a tag
+  tagOptionFromTag(el) {
+    const id = el.id.replace("tag-", "");
+    return this.el.querySelector("#" + id);
+  }
+  // get the internal representation of a wm-tag-option
+  elFromTagOption(el) {
+    return this.el.shadowRoot.querySelector("#" + el.id);
+  }
+  // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
+  get _focusedOption() {
+    if (!!this.focusedOption) {
+      return this.elFromTagOption(this.focusedOption);
+    }
+    else if (this.addNewButton && this.addNewButton.classList.contains("focused")) {
+      return this.addNewButton;
+    }
+  }
+  get _focusedCell() {
+    if (!!this._focusedOption) {
+      const allCells = Array.from(this._focusedOption.querySelectorAll("td"));
+      const index = this.focusedColumn || 0;
+      return allCells[index];
+    }
+  }
+  get inputActiveDescendantId() {
+    if (this._focusedOption) {
+      if (this.isTable) {
+        const cells = Array.from(this._focusedOption.querySelectorAll("td"));
+        return cells[this.focusedColumn].id;
+      }
+      return this._focusedOption.id;
+    }
+    return null;
+  }
+  get tagLimitReached() {
+    return !!(this.maxTags && this.taggedOptions.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 inputMinimumWidth() {
+    if (this._tagEls) {
+      // 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;
+    }
+    else {
+      return 150;
+    }
+  }
+  getTagName(o) {
+    // when the user is typing and adding a new option, all we can pass is the text typed. so for the dropdown type the tag name is the identifier. It also takes care of duplicates. Table variant requires an id as the tag name is the first column but we want to allow duplicates here (e.g. people with the same name)
+    return this.isDropdown ? o.textContent : o.col1;
+  }
+  isExistingTag(tag) {
+    const list = this.optionEls.map((o) => this.getTagName(o).toLowerCase());
+    return list.includes(tag.toLowerCase());
+  }
+  tagAddedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagAdded",
+      defaultMessage: "{tagName} added.",
+      description: "A confirmation for adding a tag.",
+    }, { tagName: tag });
+  }
+  tagRemovedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagRemoved",
+      defaultMessage: "{tagName} removed.",
+      description: "A confirmation for removing a tag.",
+    }, { tagName: tag });
+  }
+  tagAlreadyAddedMessage(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 });
+  }
+  isElOrChild(el) {
+    return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
+  }
+  componentWillLoad() {
+    if (!this.placeholder) {
+      this.placeholder = this.createPlaceholderDefault(this.addNew, this.optionEls.length > 0);
+    }
+    if (!this.label) {
+      console.error("wm-tag-input must have a label property");
+    }
+    this.el.focus = () => {
+      const firstFocusableTag = this.focusableTags[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);
+    // if within wm-modal, change max-height to vh unit
+    if (this.el.closest("wm-modal")) {
+      this.inModal = true;
+    }
+    const lockedTags = [];
+    const regularTags = [];
+    this.optionEls.forEach((o) => {
+      if (o.locked) {
+        lockedTags.push(o);
+      }
+      else if (o.selected) {
+        regularTags.push(o);
+      }
+    });
+    this.tagsList = [...lockedTags, ...regularTags];
+  }
+  componentDidLoad() {
+    // Set up observer to announce changes in selected tags, or removed user-added tags
+    const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
+    observerAnnouncer.observe(this.el, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["selected"],
+      childList: true,
+    });
+    // Set up observer that ensures parent reload
+    // when children wm-tag-options are removed
+    const optionListObserver = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleOptionListChange(mutationRecord)));
+    optionListObserver.observe(this.el, {
+      childList: true,
+    });
+    // Set up the observer that will handle focus
+    // when tag list changes
+    if (!!this.tagAreaEl) {
+      const tagListObserver = new MutationObserver((tagListMutations) => tagListMutations.forEach((mutationRecord) => this.handleTagListChange(mutationRecord)));
+      tagListObserver.observe(this.tagAreaEl, {
+        childList: true,
+      });
+    }
+  }
+  handleChangeAnnouncement(mutationRecord) {
+    const tagOptionEl = mutationRecord.target;
+    if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
+      // announce deselection of user-added tag, whose element removal is picked up
+      this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
+    }
+    else if (mutationRecord.type == "attributes") {
+      // announce selection or deselection of all kinds of tags
+      if (tagOptionEl.selected) {
+        this.announce(this.tagAddedMessage(tagOptionEl.textContent));
+      }
+      else {
+        this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
+      }
+    }
+  }
+  handleOptionListChange(record) {
+    const addedNodes = Array.from(record.addedNodes);
+    if (addedNodes.length > 0) {
+      addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+    }
+    const removedNodes = Array.from(record.removedNodes);
+    if (removedNodes.length > 0) {
+      this.tagsList = this.tagsList.filter((t) => !removedNodes.includes(t));
+    }
+  }
+  handleTagOptionSelected(ev) {
+    const selOption = ev.target;
+    this.tagsList = this.tagsList.concat(selOption);
+  }
+  handleTagOptionDeselected(ev) {
+    const deselOption = ev.target;
+    this.tagsList = this.tagsList.filter((t) => t != deselOption);
+  }
+  handleTagListChange(mutationRecord) {
+    // there are 2 cases: the option still exists but is no longer selected,
+    // or it was removed altogether
+    const removedTag = mutationRecord.removedNodes[0];
+    if (!!removedTag) {
+      // this is a trick. focusedTag gets the ref from an index. When an element
+      // is removed it will fall back on the new element with that index if it exists
+      if (this.focusedTag) {
+        this.focusTag(this.focusedTag);
+      }
+      else if (this.focusableTags.length > 0) {
+        // Otherwise the last tag was deleted and we reassign to the new last tag.
+        const tagToFocus = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(tagToFocus);
+      }
+      else {
+        // unless there are no more tags...
+        this.inputEl.focus();
+      }
+      this.lastAddedTags = [];
+    }
+  }
+  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;
+      const id = tag.id.replace("tag-", "");
+      const optionEl = id && this.el.querySelector("#" + id);
+      if (optionEl) {
+        // tag text for table variant is first column text
+        textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
+      }
+    });
+  }
+  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;
+  }
+  handleErrorMessageChange() {
+    if (this.errorMessage) {
+      this.announce(this.errorMessage);
+    }
+  }
+  handleClick(ev) {
+    const el = ev.target;
+    if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
+      this.closeDropdown();
+    }
+    else if (Array.from(this.el.children).includes(el)) {
+      const option = el;
+      const tagName = this.getTagName(option);
+      this.lastAddedTags = [tagName];
+    }
+  }
+  handleOptionClick(ev) {
+    ev.preventDefault();
+    this.resetInput();
+    let option;
+    if (this.isTable) {
+      option = ev.target;
+      option = this.tagOptionFromEl(option.closest("tr"));
+    }
+    else {
+      option = this.tagOptionFromEl(ev.target);
+    }
+    // if someone wants to attach a click event listener on wm-tag-option
+    option.click();
+    if (!option.locked) {
+      option.selected
+        ? this.isTable && option.emitDeselectedEvent() // dropdown doesn't deselect on option click
+        : option.emitSelectedEvent();
+    }
+  }
+  // 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.charCount >= this.characterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+    // prevent keydown triggering on tag area
+    ev.stopPropagation();
+    switch (ev.key) {
+      case "Enter":
         ev.preventDefault();
-        this.resetInput();
-        let option;
+        this.handleInputEnter();
+        break;
+      case "ArrowDown":
+        ev.preventDefault();
+        this.handleInputArrowDown();
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        this.handleInputArrowUp();
+        break;
+      case "ArrowLeft":
         if (this.isTable) {
-            option = ev.target;
-            option = this.tagOptionFromEl(option.closest("tr"));
-        }
-        else {
-            option = this.tagOptionFromEl(ev.target);
-        }
-        // if someone wants to attach a click event listener on wm-tag-option
-        option.click();
-        if (!option.locked) {
-            option.selected
-                ? this.isTable && option.emitDeselectedEvent() // dropdown doesn't deselect on option click
-                : option.emitSelectedEvent();
-        }
-    }
-    // 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();
+          ev.preventDefault();
+          this.focusPrevCell();
         }
-    }
-    handleInputKeyDown(ev) {
-        if (/^.$/.test(ev.key) && this.charCount >= this.characterLimit) {
-            this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-        }
-        // prevent keydown triggering on tag area
-        ev.stopPropagation();
-        switch (ev.key) {
-            case "Enter":
-                ev.preventDefault();
-                this.handleInputEnter();
-                break;
-            case "ArrowDown":
-                ev.preventDefault();
-                this.handleInputArrowDown();
-                break;
-            case "ArrowUp":
-                ev.preventDefault();
-                this.handleInputArrowUp();
-                break;
-            case "ArrowLeft":
-                if (this.isTable) {
-                    ev.preventDefault();
-                    this.focusPrevCell();
-                }
-                break;
-            case "ArrowRight":
-                if (this.isTable) {
-                    ev.preventDefault();
-                    this.focusNextCell();
-                }
-                break;
-            case "Escape":
-                if (this.isDropdown && this.isExpanded) {
-                    this.closeDropdown();
-                }
-                break;
-            case "ArrowLeft":
-            case "Backspace":
-                this.handleInputBackspace();
-                break;
-        }
-    }
-    handleInputFocus() {
-        if (this.isDropdown) {
-            this.openDropdown();
-            this.clearOptionFocus();
-        }
-    }
-    handleInputChanged(ev) {
-        this.clearOptionFocus();
-        if (this.isDropdown) {
-            if (this.charCount >= this.characterLimit - 5) {
-                this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-            }
-            if (!this.isExpanded) {
-                this.openDropdown();
-            }
-        }
-        const val = ev.target.value;
-        if (val.includes(",") && this.addNew) {
-            this.addTags(val);
-        }
-        else {
-            this.announceExistingOptions();
-        }
-    }
-    handleInputEnter() {
-        // user has selected an option in the list
-        if (this.focusedOption) {
-            const tagName = this.getTagName(this.focusedOption);
-            this.lastAddedTags = [tagName];
-            this.focusedOption.click();
-            this.focusedOption.selected
-                ? this.isTable && this.focusedOption.emitDeselectedEvent()
-                : this.focusedOption.emitSelectedEvent();
-            this.resetInput();
-        }
-        else if (this.isDropdown) {
-            // user is adding a new tag
-            const tagName = this.inputEl.value;
-            if (!!tagName) {
-                this.isExistingTag(tagName) ? this.announce(this.tagAlreadyAddedMessage(tagName)) : this.addTags(tagName);
-                this.resetInput();
-            }
-        }
-    }
-    handleInputArrowDown() {
-        if (this.isDropdown) {
-            if (!this.isExpanded) {
-                this.openDropdown();
-            }
-            else {
-                let items = [];
-                // the id check prevents a bug where the ref is reassigned to the first option causing it to be added twice (after adding a new user option)
-                if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
-                    items.push(this.addNewButton);
-                }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
-                const next = findNext(items, this._focusedOption, true);
-                this.focusOption(next);
-            }
-        }
-        else {
-            const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
-            const next = findNext(items, this._focusedOption, true);
-            this.focusOption(next);
-        }
-    }
-    handleInputArrowUp() {
-        if (this.isDropdown) {
-            if (!this.isExpanded) {
-                this.openDropdown();
-            }
-            else {
-                let items = [];
-                if (this.addNewButton) {
-                    items.push(this.addNewButton);
-                }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
-                const prev = findPrev(items, this._focusedOption, true);
-                this.focusOption(prev);
-            }
-        }
-        else {
-            const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
-            const prev = findPrev(items, this._focusedOption, true);
-            this.focusOption(prev);
-        }
-    }
-    handleInputBackspace() {
-        if (this.inputEl.value === "" && this.focusableTags.length > 0) {
-            // wait for events to finish firing before redirecting focus
-            // prevents double input in input area and tag area
-            window.requestAnimationFrame(() => {
-                this.tagAreaEl.focus();
-                this.focusTag(this.focusableTags[this.focusableTags.length - 1]);
-            });
-        }
-    }
-    handleTagAreaKeyDown(ev) {
-        switch (ev.key) {
-            case "ArrowLeft":
-            case "ArrowUp":
-                ev.preventDefault();
-                if (this.focusedTag) {
-                    const prev = findPrev(this.focusableTags, this.focusedTag, true);
-                    this.focusTag(prev);
-                }
-                break;
-            case "ArrowRight":
-            case "ArrowDown":
-                ev.preventDefault();
-                if (this.focusedTag) {
-                    const next = findNext(this.focusableTags, this.focusedTag, true);
-                    this.focusTag(next);
-                }
-                break;
-            case "Backspace":
-            case "Delete":
-                if (this.focusedTag) {
-                    const option = this.tagOptionFromTag(this.focusedTag);
-                    if (!option.locked) {
-                        option.emitDeselectedEvent();
-                    }
-                }
-                break;
-        }
-    }
-    handleBlur(ev) {
-        this.dismissTooltip();
-        this.clearOptionFocus();
-        const relTarget = ev.relatedTarget;
-        if (!this.isElOrChild(relTarget)) {
-            this.fieldWrapperEl.classList.remove("focused");
-            if (this.isDropdown) {
-                this.closeDropdown();
-            }
-        }
-    }
-    handleTagAreaFocus(ev) {
-        if (this.isDropdown) {
-            this.closeDropdown();
-        }
-        if (this.focusableTags.length > 0) {
-            const relTarget = ev.relatedTarget;
-            if (relTarget && relTarget.id === "input") {
-                const lastFocusableTag = this.focusableTags[this.focusableTags.length - 1];
-                this.focusTag(lastFocusableTag);
-            }
-            else {
-                const firstFocusableTag = this.focusableTags[0];
-                this.focusTag(firstFocusableTag);
-            }
-        }
-    }
-    focusPrevCell() {
-        if (this.focusedOption) {
-            if (this.focusedColumn > 0) {
-                this.focusedColumn -= 1;
-            }
-        }
-    }
-    focusNextCell() {
-        if (this._focusedOption) {
-            const lastCellIdx = this._focusedOption.querySelectorAll("td").length - 1;
-            if (this.focusedColumn < lastCellIdx) {
-                this.focusedColumn += 1;
-            }
+        break;
+      case "ArrowRight":
+        if (this.isTable) {
+          ev.preventDefault();
+          this.focusNextCell();
         }
-    }
-    focusOption(optionToFocus) {
-        if (optionToFocus) {
-            // will be undefined for the "Add New" button
-            this.focusedOption = this.tagOptionFromEl(optionToFocus);
-            if (optionToFocus === this.addNewButton) {
-                this.addNewButton.classList.add("focused");
-            }
-            else {
-                this.addNewButton && this.addNewButton.classList.remove("focused");
-            }
-            if (this.isTable) {
-                // tooltip
-                const contentWrapper = this._focusedOption.querySelector(".cell-content-wrapper");
-                const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-                this.dismissTooltip();
-                if (isTruncated) {
-                    // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-                    showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
-                }
-            }
-            optionToFocus.scrollIntoView({ block: "nearest" });
+        break;
+      case "Escape":
+        if (this.isDropdown && this.isExpanded) {
+          this.closeDropdown();
         }
-    }
-    showTooltipIfTruncated(el) {
-        const displayedText = el.querySelector(".tag-text").textContent;
-        const id = el.id.replace("tag-", "");
-        if (id) {
-            const tagEl = this.el.querySelector("#" + id);
-            const fullText = this.getTagName(tagEl);
-            if (displayedText !== fullText && displayedText.includes("...")) {
-                showTooltip("bottom", el, fullText);
-            }
+        break;
+      case "ArrowLeft":
+      case "Backspace":
+        this.handleInputBackspace();
+        break;
+    }
+  }
+  handleInputFocus() {
+    if (this.isDropdown) {
+      this.openDropdown();
+      this.clearOptionFocus();
+    }
+  }
+  handleInputChanged(ev) {
+    this.clearOptionFocus();
+    if (this.isDropdown) {
+      if (this.charCount >= this.characterLimit - 5) {
+        this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+      }
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+    }
+    const val = ev.target.value;
+    if (val.includes(",") && this.addNew) {
+      this.addTags(val);
+    }
+    else {
+      this.announceExistingOptions();
+    }
+  }
+  handleInputEnter() {
+    // user has selected an option in the list
+    if (this.focusedOption) {
+      const tagName = this.getTagName(this.focusedOption);
+      this.lastAddedTags = [tagName];
+      this.focusedOption.click();
+      this.focusedOption.selected
+        ? this.isTable && this.focusedOption.emitDeselectedEvent()
+        : this.focusedOption.emitSelectedEvent();
+      this.resetInput();
+    }
+    else if (this.isDropdown) {
+      // user is adding a new tag
+      const tagName = this.inputEl.value;
+      if (!!tagName) {
+        this.isExistingTag(tagName) ? this.announce(this.tagAlreadyAddedMessage(tagName)) : this.addTags(tagName);
+        this.resetInput();
+      }
+    }
+  }
+  handleInputArrowDown() {
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        // the id check prevents a bug where the ref is reassigned to the first option causing it to be added twice (after adding a new user option)
+        if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
+          items.push(this.addNewButton);
         }
-    }
-    focusTag(element) {
-        // technically it's the tag area that has focus. This function handles the aria-activedescendant value within that parent
-        this.focusedTagIndex = this.focusableTags.indexOf(element);
-        element.scrollIntoView({ block: "nearest" });
-        window.requestAnimationFrame(() => {
-            hideTooltip();
-            this.showTooltipIfTruncated(element);
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
         });
-    }
-    clearOptionFocus() {
-        this.focusedOption = undefined;
-        this.focusedColumn = 0;
-    }
-    openDropdown() {
-        // offset of -2px to avoid overlapping the focus border
-        this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.el.clientHeight, -2);
-        this.isExpanded = true;
-    }
-    closeDropdown() {
-        this.clearOptionFocus();
-        this.isExpanded = false;
-    }
-    resetInput() {
-        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";
+        const next = findNext(items, this._focusedOption, true);
+        this.focusOption(next);
+      }
+    }
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const next = findNext(items, this._focusedOption, true);
+      this.focusOption(next);
+    }
+  }
+  handleInputArrowUp() {
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        if (this.addNewButton) {
+          items.push(this.addNewButton);
         }
-        this.liveRegionMessage = message;
-    }
-    addTags(tagNames) {
-        // covers both typing "," and pasting in text that includes ","
-        // if tag added without "," (typing enter), split puts the whole string in an array
-        this.lastAddedTags = tagNames.split(",").filter((t) => t.match(/\S/));
-        this.lastAddedTags.forEach((tag) => {
-            this.wmTagInputTagAdded.emit(tag);
-        });
-        this.announce(this.tagAddedMessage(this.lastAddedTags.join(", ")));
-        this.resetInput();
-    }
-    announceExistingOptions() {
-        // request animation frame to wait for re-rendering of filtered options
-        window.requestAnimationFrame(() => {
-            let numResults = 0;
-            if (this.isDropdown) {
-                numResults = this.optionEls.length;
-            }
-            else if (this.isTable) {
-                numResults = this.filteredOptionEls.length;
-            }
-            const existingOptionsMessage = intl.formatMessage({
-                id: "tagInput.existingOptions",
-                defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
-            }, { num: numResults });
-            this.announce(existingOptionsMessage);
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
         });
-    }
-    generateCharacterLimitWarning(charCount, charLimit) {
-        let message = globalMessages.getCharactersEntered(charCount, charLimit);
-        if (charCount >= charLimit) {
-            message += ` ${globalMessages.characterLimitReached}`;
-        }
-        return message;
-    }
-    positionInput() {
-        if (this.tagAreaEl) {
-            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%";
-            this.inputEl.classList.add("extended");
-            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 = (spaceAvailable - 8).toString() + "px";
-                    this.inputEl.classList.remove("extended");
-                }
-            }
-        }
-    }
-    handleTagMouseEnter(ev) {
-        this.showTooltipIfTruncated(ev.target);
-    }
-    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.filteredOptionEls.map((o) => this.renderListItem(o)))));
-    }
-    renderHelpText() {
-        if (this.helpText)
-            return this.helpText;
-        let helpText = "";
-        if (this.optionEls.length > 0) {
-            helpText = this.selectionHelpText;
-        }
-        if (this.addNew) {
-            helpText += " " + this.addNewHelpText;
-        }
-        return helpText;
-    }
-    renderAddNewButton() {
-        const inputValue = this.inputEl.value.trim();
-        const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
-        const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
-        return (this.addNew &&
-            hasNonWhiteSpaceCharacters &&
-            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
-    }
-    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.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (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));
-        })));
-    }
-    renderTag(o) {
-        const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
-        const tagName = this.getTagName(o);
-        const highlight = this.lastAddedTags.includes(tagName) ? "highlight" : "";
-        return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${highlight} ${focused} ${o.locked ? "locked" : ""}`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }))));
-    }
-    renderTags() {
-        return this.tagsList.map((o) => this.renderTag(o));
-    }
-    renderTagCounter() {
-        if (this.maxTags) {
-            return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.renderMaxTags())));
+        const prev = findPrev(items, this._focusedOption, true);
+        this.focusOption(prev);
+      }
+    }
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const prev = findPrev(items, this._focusedOption, true);
+      this.focusOption(prev);
+    }
+  }
+  handleInputBackspace() {
+    if (this.inputEl.value === "" && this.focusableTags.length > 0) {
+      // wait for events to finish firing before redirecting focus
+      // prevents double input in input area and tag area
+      window.requestAnimationFrame(() => {
+        this.tagAreaEl.focus();
+        this.focusTag(this.focusableTags[this.focusableTags.length - 1]);
+      });
+    }
+  }
+  handleTagAreaKeyDown(ev) {
+    switch (ev.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        ev.preventDefault();
+        if (this.focusedTag) {
+          const prev = findPrev(this.focusableTags, this.focusedTag, true);
+          this.focusTag(prev);
         }
-    }
-    renderMaxTags() {
-        if (this.helpText) {
-            return this.helpText;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        ev.preventDefault();
+        if (this.focusedTag) {
+          const next = findNext(this.focusableTags, this.focusedTag, true);
+          this.focusTag(next);
         }
-        else {
-            let msg = `${this.tagsAddedMessage}: ${this.taggedOptions.length}/${this.maxTags}`;
-            if (this.tagLimitReached) {
-                msg += `- ${this.maxTagsReachedMessage}`;
-            }
-            return msg;
+        break;
+      case "Backspace":
+      case "Delete":
+        if (this.focusedTag) {
+          const option = this.tagOptionFromTag(this.focusedTag);
+          if (!option.locked) {
+            option.emitDeselectedEvent();
+          }
         }
-    }
-    handleCellMouseEnter(ev) {
-        const cell = ev.target;
-        const contentWrapper = cell.querySelector(".cell-content-wrapper");
+        break;
+    }
+  }
+  handleBlur(ev) {
+    this.dismissTooltip();
+    this.clearOptionFocus();
+    const relTarget = ev.relatedTarget;
+    if (!this.isElOrChild(relTarget)) {
+      this.fieldWrapperEl.classList.remove("focused");
+      if (this.isDropdown) {
+        this.closeDropdown();
+      }
+    }
+  }
+  handleTagAreaFocus(ev) {
+    if (this.isDropdown) {
+      this.closeDropdown();
+    }
+    if (this.focusableTags.length > 0) {
+      const relTarget = ev.relatedTarget;
+      if (relTarget && relTarget.id === "input") {
+        const lastFocusableTag = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(lastFocusableTag);
+      }
+      else {
+        const firstFocusableTag = this.focusableTags[0];
+        this.focusTag(firstFocusableTag);
+      }
+    }
+  }
+  focusPrevCell() {
+    if (this.focusedOption) {
+      if (this.focusedColumn > 0) {
+        this.focusedColumn -= 1;
+      }
+    }
+  }
+  focusNextCell() {
+    if (this._focusedOption) {
+      const lastCellIdx = this._focusedOption.querySelectorAll("td").length - 1;
+      if (this.focusedColumn < lastCellIdx) {
+        this.focusedColumn += 1;
+      }
+    }
+  }
+  focusOption(optionToFocus) {
+    if (optionToFocus) {
+      // will be undefined for the "Add New" button
+      this.focusedOption = this.tagOptionFromEl(optionToFocus);
+      if (optionToFocus === this.addNewButton) {
+        this.addNewButton.classList.add("focused");
+      }
+      else {
+        this.addNewButton && this.addNewButton.classList.remove("focused");
+      }
+      if (this.isTable) {
+        // tooltip
+        const contentWrapper = this._focusedOption.querySelector(".cell-content-wrapper");
         const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+        this.dismissTooltip();
         if (isTruncated) {
-            // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-            showTooltip("bottom", cell, cell.innerText);
+          // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+          showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
         }
-    }
-    renderTableCells(o) {
-        const colValues = [o.col1, o.col2, o.col3, o.col4].filter((val) => !!val);
-        return colValues.map((val, idx) => {
-            const cellId = `${o.id}-col${idx + 1}`;
-            let overflowRule = "wrap";
-            if (this.colWrap && csvToArray(this.colWrap)[idx]) {
-                overflowRule = csvToArray(this.colWrap)[idx];
-            }
-            const classes = {
-                focused: !!this._focusedCell && cellId === this._focusedCell.id,
-            };
-            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
-        });
-    }
-    renderTableRow(o) {
-        const classes = {
-            selected: o.selected,
-            locked: o.locked,
-            focused: this.focusedOption && o === this.focusedOption ? true : false,
-        };
-        return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
-    }
-    renderListItem(o) {
-        if (!!this.inputEl) {
-            const isFocused = this.focusedOption && o === this.focusedOption;
-            return (h("li", { id: o.id, role: "option", class: `option ${isFocused ? "focused" : ""}`, "aria-selected": o.selected ? "true" : "false", onClick: (ev) => this.handleOptionClick(ev) }, o.textContent));
+      }
+      optionToFocus.scrollIntoView({ block: "nearest" });
+    }
+  }
+  showTooltipIfTruncated(el) {
+    const displayedText = el.querySelector(".tag-text").textContent;
+    const id = el.id.replace("tag-", "");
+    if (id) {
+      const tagEl = this.el.querySelector("#" + id);
+      const fullText = this.getTagName(tagEl);
+      if (displayedText !== fullText && displayedText.includes("...")) {
+        showTooltip("bottom", el, fullText);
+      }
+    }
+  }
+  focusTag(element) {
+    // technically it's the tag area that has focus. This function handles the aria-activedescendant value within that parent
+    this.focusedTagIndex = this.focusableTags.indexOf(element);
+    element.scrollIntoView({ block: "nearest" });
+    window.requestAnimationFrame(() => {
+      hideTooltip();
+      this.showTooltipIfTruncated(element);
+    });
+  }
+  clearOptionFocus() {
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
+  }
+  openDropdown() {
+    // offset of -2px to avoid overlapping the focus border
+    this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.el.clientHeight, -2);
+    this.isExpanded = true;
+  }
+  closeDropdown() {
+    this.clearOptionFocus();
+    this.isExpanded = false;
+  }
+  resetInput() {
+    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;
+  }
+  addTags(tagNames) {
+    // covers both typing "," and pasting in text that includes ","
+    // if tag added without "," (typing enter), split puts the whole string in an array
+    this.lastAddedTags = tagNames.split(",").filter((t) => t.match(/\S/));
+    this.lastAddedTags.forEach((tag) => {
+      this.wmTagInputTagAdded.emit(tag);
+    });
+    this.announce(this.tagAddedMessage(this.lastAddedTags.join(", ")));
+    this.resetInput();
+  }
+  announceExistingOptions() {
+    // request animation frame to wait for re-rendering of filtered options
+    window.requestAnimationFrame(() => {
+      let numResults = 0;
+      if (this.isDropdown) {
+        numResults = this.optionEls.length;
+      }
+      else if (this.isTable) {
+        numResults = this.filteredOptionEls.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() {
+    if (this.tagAreaEl) {
+      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%";
+      this.inputEl.classList.add("extended");
+      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 = (spaceAvailable - 8).toString() + "px";
+          this.inputEl.classList.remove("extended");
         }
-    }
-    render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this.focusableTags.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
-                this.focusedTagIndex = undefined;
-                this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", 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.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
-                this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && 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.isTable && 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
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "error-message",
-                "reflect": false
-            },
-            "info": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "info",
-                "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\""
-            },
-            "maxTags": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "max-tags",
-                "reflect": false
-            },
-            "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"
-            },
-            "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\""
-            },
-            "helpText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "help-text",
-                "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"
-            },
-            "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"
-            },
-            "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
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isExpanded": {},
-            "liveRegionMessage": {},
-            "focusedOption": {},
-            "focusedColumn": {},
-            "focusedTagIndex": {},
-            "tagsList": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmTagInputTagAdded",
-                "name": "wmTagInputTagAdded",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "errorMessage",
-                "methodName": "handleErrorMessageChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "privTagOptionSelected",
-                "method": "handleTagOptionSelected",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "privTagOptionDeselected",
-                "method": "handleTagOptionDeselected",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "scroll",
-                "method": "dismissTooltip",
-                "target": "window",
-                "capture": true,
-                "passive": true
-            }, {
-                "name": "blur",
-                "method": "handleBlur",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
+      }
+    }
+  }
+  handleTagMouseEnter(ev) {
+    this.showTooltipIfTruncated(ev.target);
+  }
+  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.filteredOptionEls.map((o) => this.renderListItem(o)))));
+  }
+  renderHelpText() {
+    if (this.helpText)
+      return this.helpText;
+    let helpText = "";
+    if (this.optionEls.length > 0) {
+      helpText = this.selectionHelpText;
+    }
+    if (this.addNew) {
+      helpText += " " + this.addNewHelpText;
+    }
+    return helpText;
+  }
+  renderAddNewButton() {
+    const inputValue = this.inputEl.value.trim();
+    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
+    const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
+    return (this.addNew &&
+      hasNonWhiteSpaceCharacters &&
+      !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
+  }
+  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.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (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));
+    })));
+  }
+  renderTag(o) {
+    const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
+    const tagName = this.getTagName(o);
+    const highlight = this.lastAddedTags.includes(tagName) ? "highlight" : "";
+    return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${highlight} ${focused} ${o.locked ? "locked" : ""}`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }))));
+  }
+  renderTags() {
+    return this.tagsList.map((o) => this.renderTag(o));
+  }
+  renderTagCounter() {
+    if (this.maxTags) {
+      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.renderMaxTags())));
+    }
+  }
+  renderMaxTags() {
+    if (this.helpText) {
+      return this.helpText;
+    }
+    else {
+      let msg = `${this.tagsAddedMessage}: ${this.taggedOptions.length}/${this.maxTags}`;
+      if (this.tagLimitReached) {
+        msg += `- ${this.maxTagsReachedMessage}`;
+      }
+      return msg;
+    }
+  }
+  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);
+    }
+  }
+  renderTableCells(o) {
+    const colValues = [o.col1, o.col2, o.col3, o.col4].filter((val) => !!val);
+    return colValues.map((val, idx) => {
+      const cellId = `${o.id}-col${idx + 1}`;
+      let overflowRule = "wrap";
+      if (this.colWrap && csvToArray(this.colWrap)[idx]) {
+        overflowRule = csvToArray(this.colWrap)[idx];
+      }
+      const classes = {
+        focused: !!this._focusedCell && cellId === this._focusedCell.id,
+      };
+      return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
+    });
+  }
+  renderTableRow(o) {
+    const classes = {
+      selected: o.selected,
+      locked: o.locked,
+      focused: this.focusedOption && o === this.focusedOption ? true : false,
+    };
+    return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
+  }
+  renderListItem(o) {
+    if (!!this.inputEl) {
+      const isFocused = this.focusedOption && o === this.focusedOption;
+      return (h("li", { id: o.id, role: "option", class: `option ${isFocused ? "focused" : ""}`, "aria-selected": o.selected ? "true" : "false", onClick: (ev) => this.handleOptionClick(ev) }, o.textContent));
+    }
+  }
+  render() {
+    return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this.focusableTags.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        this.focusedTagIndex = undefined;
+        this.handleBlur(ev);
+      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", 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.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+        this.handleBlur(ev);
+      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && 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.isTable && 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
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "info": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info",
+        "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\""
+      },
+      "maxTags": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-tags",
+        "reflect": false
+      },
+      "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"
+      },
+      "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\""
+      },
+      "helpText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "help-text",
+        "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"
+      },
+      "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"
+      },
+      "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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isExpanded": {},
+      "liveRegionMessage": {},
+      "focusedOption": {},
+      "focusedColumn": {},
+      "focusedTagIndex": {},
+      "tagsList": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTagInputTagAdded",
+        "name": "wmTagInputTagAdded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "handleErrorMessageChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "privTagOptionSelected",
+        "method": "handleTagOptionSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "privTagOptionDeselected",
+        "method": "handleTagOptionDeselected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "scroll",
+        "method": "dismissTooltip",
+        "target": "window",
+        "capture": true,
+        "passive": true
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }