@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,707 +1,1288 @@
-import { h, Component, Host, Element, Prop, Listen, State, Event, Watch } from "@stencil/core";
-import { generateId, shouldOpenUp, intl } from "../../global/functions";
+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.labelPosition = "top";
-    this.options = ""; // csv
-    this.selectedTags = ""; // csv
-    this.addNew = true;
-    this.characterLimit = 50;
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.openUp = false;
-    this.isExpanded = false;
-    this.tagsList = this.csvToArray(this.selectedTags);
-    this.optionsList = this.csvToArray(this.options);
-    this.charCount = 0;
-    this.liveRegionMessage = "";
-    this.tagAreaInstructions = intl.formatMessage({
-      id: "tagInput.tagAreaInstructions",
-      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-    });
-  }
-  get focusedElement() {
-    return this.el.shadowRoot.activeElement;
-  }
-  get listItemEls() {
-    return Array.from(this.dropdownEl.querySelectorAll("li"));
-  }
-  get tagEls() {
-    return Array.from(this.tagAreaEl.querySelectorAll(".tag"));
-  }
-  get optionEls() {
-    return Array.from(this.dropdownEl.querySelectorAll(".option"));
-  }
-  generateTagAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAdded",
-      defaultMessage: "{tagName} added.",
-      description: "A confirmation for adding a tag.",
-    }, { tagName: tag });
-  }
-  generateTagAlreadyAddedMessage(tag) {
-    return intl.formatMessage({
-      id: "tagInput.tagAlreadyAdded",
-      defaultMessage: "{tagName} has already been added.",
-      description: "An alert for adding a tag that is already present.",
-    }, { tagName: tag });
-  }
-  componentWillLoad() {
-    if (!this.placeholder) {
-      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);
-    }
-    if (!this.label) {
-      console.error("wm-tag-input must have a label property");
-    }
-    this.consolidateSelectedTags();
-  }
-  componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
-  }
-  consolidateSelectedTags() {
-    this.tagsList.forEach((tag) => {
-      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
-        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
-      }
-    });
-    this.optionsList = this.csvToArray(this.options);
-  }
-  createPlaceholderDefault(addNew, hasOptions) {
-    const addAndSearchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAddAndSearch",
-      defaultMessage: "Add or search for a tag",
-    });
-    const searchPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderSearch",
-      defaultMessage: "Search and select a tag",
-    });
-    const addPlaceholder = intl.formatMessage({
-      id: "tagInput.placeholderAdd",
-      defaultMessage: "Add a new tag",
-    });
-    let placeholder = "";
-    if (addNew && hasOptions) {
-      placeholder = addAndSearchPlaceholder;
-    }
-    else if (!addNew && hasOptions) {
-      placeholder = searchPlaceholder;
-    }
-    else if (addNew) {
-      placeholder = addPlaceholder;
-    }
-    return placeholder;
-  }
-  reflectSelectedTags() {
-    this.selectedTags = this.listToCSV(this.tagsList);
-    this.wmTagInputChanged.emit({ value: this.tagsList });
-  }
-  closeIfNotElOrChild(ev) {
-    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (isntElOrChild && this.isExpanded) {
-      this.closeDropdown();
-    }
-  }
-  handleInputKeyDown(ev) {
-    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
-      this.announceCharacterLimitWarning(this.inputEl.value.length, this.characterLimit);
-    }
-    // prevent keydown triggering on tag area
-    ev.stopPropagation();
-    switch (ev.key) {
-      case "Enter":
-      case ",":
-        ev.preventDefault();
-        this.submitInput(this.addNew, this.inputEl.value.trim());
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.handleInputArrowDown();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.handleInputArrowUp();
-        break;
-      case "Escape":
-        if (this.isExpanded) {
-          this.closeDropdown();
-        }
-        break;
-      case "ArrowLeft":
-      case "Backspace":
-        this.handleInputBackspace();
-        break;
-    }
-  }
-  handleInputChanged(value) {
-    this.charCount = value.length;
-    if (this.charCount >= this.characterLimit - 5) {
-      this.announceCharacterLimitWarning(this.charCount, this.characterLimit);
-    }
-    this.announceExistingOptions();
-    if (!this.isExpanded) {
-      this.openDropdown();
-    }
-  }
-  submitInput(canAddNew, value) {
-    if (canAddNew && value) {
-      this.tagsList = this.addTag(value);
-      this.optionsList = this.addOption(value);
-      this.resetInput();
-    }
-  }
-  handleInputArrowDown() {
-    if (this.isExpanded) {
-      this.moveDownListItem();
-    }
-    else {
-      this.openDropdown();
-    }
-  }
-  handleInputArrowUp() {
-    if (this.isExpanded) {
-      this.moveUpListItem();
-    }
-    else {
-      this.openDropdown();
-    }
-  }
-  handleInputBackspace() {
-    if (this.inputEl.value === "" && this.tagsList.length > 0) {
-      // wait for events to finish firing before redirecting focus
-      // prevents double input in input area and tag area
-      window.requestAnimationFrame(() => {
-        this.tagAreaEl.focus();
-        this.focusTag(this.tagEls[this.tagEls.length - 1]);
-      });
-    }
-  }
-  handleListItemKeyDown(ev) {
-    const typedEvTarget = ev.target;
-    switch (ev.key) {
-      case "Enter":
-      case " ":
-        ev.preventDefault();
-        typedEvTarget.click();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveDownListItem();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveUpListItem();
-        break;
-      case "Escape":
-        if (this.focusedElement !== this.inputEl) {
-          this.inputEl.focus();
+    constructor() {
+        this.addNewHelpText = intl.formatMessage({
+            id: "tagInput.addNewHelpText",
+            defaultMessage: "Press the Enter or Comma key to add a new tag.",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
+        });
+        this.selectionHelpText = intl.formatMessage({
+            id: "tagInput.selectionHelpText",
+            defaultMessage: "Search and select a tag.",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
+        });
+        this.maxTagsReachedMessage = intl.formatMessage({
+            id: "tagInput.maxTagsReached",
+            defaultMessage: "No more tags can be added because the limit has been reached.",
+            description: "Tag refers to a tag UI element that can be added to a list.",
+        });
+        this.tagAreaInstructions = intl.formatMessage({
+            id: "tagInput.tagAreaInstructions",
+            defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+            description: "Label for a UI element where a user can select from a list of tags.",
+        });
+        this.tagsAddedMessage = intl.formatMessage({
+            id: "tagInput.tagsAdded",
+            defaultMessage: "Tags added",
+            description: "Tag refers to a tag UI element that can be added to a list. Full message for context: 'Tags added: x/y",
+        });
+        this.noResultsMessage = intl.formatMessage({
+            id: "tagInput.noResults",
+            defaultMessage: "No results match your search.",
+        });
+        this.openUp = false;
+        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.isKeying = false;
+        this.isExpanded = false;
+        this.liveRegionMessage = "";
+        this.focusedOption = undefined;
+        this.focusedColumn = 0;
+        this.focusedTagIndex = undefined;
+        this.tagsList = [];
+    }
+    addNewTagMessage(newTagName) {
+        return intl.formatMessage({
+            id: "tagInput.addNewTag",
+            defaultMessage: "Add {newTagName}",
+            description: "Button text to add a new tag to a list of tags",
+        }, { newTagName: newTagName });
+    }
+    toggleKeyingOn() {
+        this.isKeying = true;
+    }
+    toggleKeyingOff() {
+        this.isKeying = false;
+    }
+    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")) : [];
+    }
+    get focusedTag() {
+        if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0) {
+            return this._tagEls[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 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 {
-          this.closeDropdown();
-        }
-        break;
-    }
-  }
-  handleListItemClick(ev) {
-    const typedEvTarget = ev.target;
-    const tag = typedEvTarget.dataset.option.trim() || "";
-    if (this.includesCaseInsensitive(this.tagsList, tag)) {
-      this.announce(this.generateTagAlreadyAddedMessage(tag));
-    }
-    else {
-      this.announce(this.generateTagAddedMessage(tag));
-      this.resetInput();
-      this.tagsList = this.addTag(tag);
-      this.optionsList = this.addOption(tag);
-      this.focusedListItem = null;
-      this.inputEl.focus();
-    }
-  }
-  handleTagAreaKeyDown(ev) {
-    switch (ev.key) {
-      case "ArrowLeft":
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveLeftTag();
-        break;
-      case "ArrowRight":
-      case "ArrowDown":
+            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: "Confirmation for adding a tag UI element to a list of tags.",
+        }, { tagName: tag });
+    }
+    tagRemovedMessage(tag) {
+        return intl.formatMessage({
+            id: "tagInput.tagRemoved",
+            defaultMessage: "{tagName} removed.",
+            description: "Confirmation for removing a tag UI element from a list of tags.",
+        }, { tagName: tag });
+    }
+    tagAlreadyAddedMessage(tag) {
+        return intl.formatMessage({
+            id: "tagInput.tagAlreadyAdded",
+            defaultMessage: "{tagName} has already been added.",
+            description: "Alert for adding a tag UI element that is already included in the list.",
+        }, { tagName: tag });
+    }
+    tagLockedMessage(tag) {
+        return intl.formatMessage({
+            id: "tagInput.tagLocked",
+            defaultMessage: "{tagName} is locked and cannot be removed.",
+            description: "Alert indicating a tag UI element cannot be removed from its list.",
+        }, { 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._tagEls[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);
+        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") {
+            const tagName = this.getTagName(tagOptionEl);
+            // announce selection or deselection of all kinds of tags
+            if (tagOptionEl.selected) {
+                let changeAnnouncement = this.tagAddedMessage(tagName);
+                if (this.tagLimitReached) {
+                    changeAnnouncement += ` ${this.maxTagsReachedMessage}`;
+                }
+                this.announce(changeAnnouncement);
+            }
+            else {
+                this.announce(this.tagRemovedMessage(tagName));
+            }
+        }
+    }
+    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) {
+        const addedTags = Array.from(mutationRecord.addedNodes);
+        if (!!addedTags) {
+            addedTags.forEach((t) => {
+                t.classList.add("highlight");
+            });
+        }
+        // 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) {
+            removedTag.classList.remove("highlight");
+            // 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._tagEls.length > 0) {
+                // Otherwise the last tag was deleted and we reassign to the new last tag.
+                const tagToFocus = this._tagEls[this._tagEls.length - 1];
+                this.focusTag(tagToFocus);
+            }
+            else {
+                // unless there are no more tags...
+                this.inputEl.focus();
+            }
+        }
+    }
+    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;
+    }
+    handleClick(ev) {
+        const el = ev.target;
+        if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
+            this.closeDropdown();
+        }
+    }
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
+        }
+    }
+    handleOptionClick(ev) {
         ev.preventDefault();
-        this.moveRightTag();
-        break;
-      case "Backspace":
-      case "Delete":
-        this.handleTagAreaDelete();
-        break;
-    }
-  }
-  handleTagAreaDelete() {
-    if (this.focusedTag && this.focusedTag.dataset.tag) {
-      this.removeTag(this.focusedTag.dataset.tag);
-      if (this.tagsList.length === 0) {
-        // focus input if no tags are left
-        this.inputEl.focus();
-      }
-      else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {
-        // reassign focus if removing the last tag but there are still tags remaining
-        this.focusedTag = this.tagEls[this.tagEls.length - 2];
-        this.focusTag(this.focusedTag);
-      }
-    }
-  }
-  handleBlur(ev, component) {
-    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
-    if (isntElOrChild) {
-      this.closeDropdown();
-      this.fieldWrapperEl.classList.remove("focused");
-    }
-  }
-  handleTagAreaFocus() {
-    this.closeDropdown();
-    if (!this.focusedTag) {
-      this.focusedTag = this.tagEls[0];
-    }
-    this.focusTag(this.focusedTag);
-  }
-  handleRemoveButtonClick(tag) {
-    this.moveLeftTag();
-    this.removeTag(tag);
-  }
-  moveDownListItem() {
-    if (this.listItemEls.length > 0) {
-      const firstListItem = this.listItemEls[0];
-      if (!this.focusedListItem) {
-        this.focusListItem(firstListItem);
-      }
-      else if (this.focusedListItem.nextElementSibling) {
-        this.focusListItem(this.focusedListItem.nextElementSibling);
-      }
-      else {
-        this.focusListItem(firstListItem);
-      }
-    }
-  }
-  moveUpListItem() {
-    if (this.listItemEls.length > 0) {
-      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
-      if (!this.focusedListItem) {
-        this.focusListItem(lastListItem);
-      }
-      else if (this.focusedListItem.previousElementSibling) {
-        this.focusListItem(this.focusedListItem.previousElementSibling);
-      }
-      else {
-        this.focusedListItem = null;
-        this.inputEl.focus();
-      }
-    }
-  }
-  moveLeftTag() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
-      this.focusedTag = this.focusedTag.previousElementSibling;
-    }
-    else {
-      this.focusedTag = lastTag;
-    }
-    this.focusTag(this.focusedTag);
-  }
-  moveRightTag() {
-    const firstTag = this.tagEls[0];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
-      this.focusedTag = this.focusedTag.nextElementSibling;
-    }
-    else {
-      this.focusedTag = firstTag;
-    }
-    this.focusTag(this.focusedTag);
-  }
-  addOption(option) {
-    let newOptionsList = this.optionsList;
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
-    if (!optionAlreadyExists) {
-      newOptionsList = newOptionsList.concat(option);
-    }
-    return newOptionsList;
-  }
-  removeOption(option) {
-    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
-  }
-  addTag(tag) {
-    let newTagsList = this.tagsList;
-    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
-    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
-    if (!tagAlreadyAdded) {
-      this.announce(this.generateTagAddedMessage(tag));
-      newTagsList = newTagsList.concat(tagExistsAsOption || tag);
-    }
-    return newTagsList;
-  }
-  removeTag(tag) {
-    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: tag });
-    this.announce(tagRemovedMessage);
-    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    const devOptionsList = this.csvToArray(this.options);
-    if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-      this.removeOption(tag);
-    }
-  }
-  focusListItem(item) {
-    this.focusedListItem = item;
-    item.focus();
-  }
-  focusTag(element) {
-    this.focusedTag = element;
-    this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
-  }
-  clearTagFocus() {
-    this.tagAreaEl.removeAttribute("aria-activedescendant");
-    this.focusedTag = null;
-  }
-  openDropdown() {
-    this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight);
-    this.isExpanded = true;
-  }
-  closeDropdown() {
-    this.focusedListItem = null;
-    this.isExpanded = false;
-  }
-  clearListItemFocus() {
-    this.focusedListItem = null;
-    this.listItemEls.forEach((el) => {
-      el.tabIndex = -1;
-      el.classList.remove("focused");
-    });
-  }
-  resetInput() {
-    this.charCount = 0;
-    this.inputEl.value = "";
-  }
-  announce(message) {
-    // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.liveRegionMessage = message;
-  }
-  announceExistingOptions() {
-    // request animation frame to wait for re-rendering of filtered options
-    window.requestAnimationFrame(() => {
-      const existingOptionsMessage = intl.formatMessage({
-        id: "tagInput.existingOptions",
-        defaultMessage: "{num, plural, one {1 existing option.} other {# existing options.}}",
-      }, { num: this.optionEls.length });
-      if (this.optionEls.length > 0) {
-        this.announce(existingOptionsMessage);
-      }
-    });
-  }
-  announceCharacterLimitWarning(charCount, charLimit) {
-    const charactersEnteredMessage = intl.formatMessage({
-      id: "tagInput.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "tagInput.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-    });
-    this.announce(`${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`);
-  }
-  /// Helpers
-  listToCSV(list) {
-    return list.join(",");
-  }
-  csvToArray(csv) {
-    return csv ? csv.split(/, ?/) : [];
-  }
-  includesCaseInsensitive(list, element) {
-    const lowercaseList = list.map((str) => str.toLowerCase());
-    return lowercaseList.includes(element.toLowerCase());
-  }
-  filterCaseInsensitive(list, element) {
-    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
-  }
-  sortCaseInsensitive(list) {
-    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
-    // so we need to pass in our own compare function to sort case-insensitive
-    return list.sort((a, b) => {
-      a = a.toLowerCase();
-      b = b.toLowerCase();
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
-  }
-  /// Renders
-  renderTags() {
-    return this.tagsList.map((tag, idx) => {
-      const id = `tag${idx + 1}`;
-      return (h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""}`, "data-tag": tag, role: "option" },
-        tag,
-        h("button", { class: "remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) })));
-    });
-  }
-  renderListItems(optionsList) {
-    optionsList = this.sortCaseInsensitive(optionsList);
-    // filter by input
-    if (this.inputEl && this.inputEl.value) {
-      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
-    }
-    return optionsList.map((option, idx) => {
-      const id = `option${idx + 1}`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev) }, option));
-    });
-  }
-  renderAddNewButton() {
-    if (this.inputEl.value.length > 0 &&
-      this.addNew &&
-      !this.includesCaseInsensitive(this.optionsList, this.inputEl.value)) {
-      const id = `add-new-btn`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value}"`));
-    }
-    else
-      return "";
-  }
-  renderHelpText() {
-    const helpTextHasOptions = intl.formatMessage({
-      id: "tagInput.helpTextCanSelect",
-      defaultMessage: "Search and select a tag.",
-    });
-    const helpTextEditable = intl.formatMessage({
-      id: "tagInput.helpTextEditable",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-    });
-    let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += helpTextHasOptions;
-    }
-    if (this.addNew) {
-      helpText += " " + helpTextEditable;
-    }
-    return helpText;
-  }
-  render() {
-    const isFocused = this.focusedElement &&
-      (this.focusedElement === this.inputEl ||
-        this.focusedElement === this.tagAreaEl ||
-        this.focusedElement.classList.contains("add-new-btn") ||
-        (this.optionsList.length > 0 && this.listItemEls.includes(this.focusedElement)));
-    return (h(Host, { id: this.uid },
-      h("div", { class: `wrapper label-${this.labelPosition}` },
-        h("div", { class: "label-wrapper" },
-          h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label)),
-        h("div", { class: `field-wrapper ${isFocused ? "focused" : ""}`, ref: (el) => (this.fieldWrapperEl = el) },
-          h("div", { class: "inner-wrapper" },
-            h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-horizontal": "true", "aria-label": this.tagsList.length > 0 && `${this.label} ${this.tagAreaInstructions}`, tabindex: this.tagsList.length > 0 ? 0 : -1, "aria-describedby": "info", onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-                this.clearTagFocus();
-                this.handleBlur(ev, this.el);
-              }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) },
-              this.renderTags(),
-              h("div", { class: "input-wrapper", role: "none" },
-                h("input", { id: `input${this.uid}`, role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-controls": "dropdown", "aria-describedby": "help-text", "aria-label": this.label, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
-                    this.handleBlur(ev, this.el);
-                  }, onFocus: () => {
-                    this.openDropdown();
-                    this.clearListItemFocus();
-                  }, onKeyDown: (ev) => this.handleInputKeyDown(ev) })))),
-          h("div", { class: "character-count" },
-            this.charCount,
-            "/",
-            this.characterLimit),
-          h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}` },
-            h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()),
-            h("ul", { class: "dropdown", ref: (el) => (this.dropdownEl = el), id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 },
-              this.inputEl && this.renderAddNewButton(),
-              this.renderListItems(this.optionsList)))),
-        this.info ? (h("div", { id: "info", class: "info-text" }, this.info)) : (""),
-        h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage))));
-  }
-  static get is() { return "wm-tag-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-tag-input.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-tag-input.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "labelPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"top\" | \"left\" | \"none\"",
-        "resolved": "\"left\" | \"none\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label-position",
-      "reflect": false,
-      "defaultValue": "\"top\""
-    },
-    "options": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "options",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "selectedTags": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "selected-tags",
-      "reflect": true,
-      "defaultValue": "\"\""
-    },
-    "info": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "info",
-      "reflect": false
-    },
-    "addNew": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "add-new",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "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"
-    }
-  }; }
-  static get states() { return {
-    "focusedListItem": {},
-    "focusedTag": {},
-    "isExpanded": {},
-    "tagsList": {},
-    "optionsList": {},
-    "charCount": {},
-    "liveRegionMessage": {}
-  }; }
-  static get events() { return [{
-      "method": "wmTagInputChanged",
-      "name": "wmTagInputChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ value: string[] }",
-        "resolved": "{ value: string[]; }",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "tagsList",
-      "methodName": "reflectSelectedTags"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "closeIfNotElOrChild",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+        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) {
+            this.announce(this.tagLockedMessage(this.getTagName(option)));
+        }
+        else {
+            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));
+        }
+        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) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.closeDropdown();
+                }
+                break;
+            case "ArrowLeft":
+            case "Backspace":
+                this.handleInputBackspace();
+                break;
+        }
+    }
+    handleInputFocus() {
+        this.clearOptionFocus();
+        if (this.isDropdown) {
+            this.openDropdown();
+        }
+    }
+    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) {
+            if (this.focusedOption.locked) {
+                this.announce(this.tagLockedMessage(this.getTagName(this.focusedOption)));
+            }
+            else {
+                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.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.map((o) => this.elFromTagOption(o));
+            const prev = findPrev(items, this._focusedOption, true);
+            this.focusOption(prev);
+        }
+    }
+    handleInputBackspace() {
+        if (this.inputEl.value === "" && this._tagEls.length > 0) {
+            this.isKeying = true;
+            // 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._tagEls[this._tagEls.length - 1]);
+            });
+        }
+    }
+    handleTagAreaKeyDown(ev) {
+        switch (ev.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+                ev.preventDefault();
+                if (this.focusedTag) {
+                    const prev = findPrev(this._tagEls, this.focusedTag, true);
+                    this.focusTag(prev);
+                }
+                break;
+            case "ArrowRight":
+            case "ArrowDown":
+                ev.preventDefault();
+                if (this.focusedTag) {
+                    const next = findNext(this._tagEls, this.focusedTag, true);
+                    this.focusTag(next);
+                }
+                break;
+            case "Backspace":
+            case "Delete":
+                if (this.focusedTag) {
+                    const option = this.tagOptionFromTag(this.focusedTag);
+                    if (option.locked) {
+                        this.announce(this.tagLockedMessage(this.getTagName(option)));
+                    }
+                    else {
+                        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();
+            }
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
+    handleTagAreaFocus(ev) {
+        if (this.isDropdown) {
+            this.closeDropdown();
+        }
+        if (this._tagEls.length > 0) {
+            const relTarget = ev.relatedTarget;
+            if (relTarget && relTarget.id === "input") {
+                const lastFocusableTag = this._tagEls[this._tagEls.length - 1];
+                this.focusTag(lastFocusableTag);
+            }
+            else {
+                const firstFocusableTag = this._tagEls[0];
+                this.focusTag(firstFocusableTag);
+            }
+        }
+    }
+    handleTableFocus() {
+        // Forward focus to first focusable table row when container receives focus
+        // First try filtered options, then fall back to all options
+        let targetOptions = this.filteredOptionEls;
+        if (targetOptions.length === 0) {
+            targetOptions = this.optionEls;
+        }
+        if (targetOptions.length > 0) {
+            const firstOption = targetOptions[0];
+            const firstRow = this.elFromTagOption(firstOption);
+            if (firstRow) {
+                this.focusOption(firstRow);
+                return;
+            }
+        }
+    }
+    handleTableWrapperKeyDown(ev) {
+        // Override browser's default scrolling behavior and delegate to our navigation
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                this.handleInputArrowDown();
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                this.handleInputArrowUp();
+                break;
+            case "ArrowLeft":
+                ev.preventDefault();
+                this.focusPrevCell();
+                break;
+            case "ArrowRight":
+                ev.preventDefault();
+                this.focusNextCell();
+                break;
+            case "Enter":
+                ev.preventDefault();
+                this.handleInputEnter();
+                break;
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation();
+                // Focus back to input as a safe fallback
+                if (this.inputEl) {
+                    this.inputEl.focus();
+                }
+                break;
+        }
+    }
+    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", this._focusedOption, this._focusedOption.innerText);
+                }
+                const tableEl = this.el.shadowRoot.querySelector("#table");
+                if (!(this.el.shadowRoot.activeElement == tableEl)) {
+                    tableEl.focus();
+                }
+                if (this.filteredOptionEls.length > 0 && this.focusedOption == this.filteredOptionEls[0]) {
+                    // When the focused option is the first option, scroll to the top of the table so headers are visible
+                    this.el.shadowRoot.querySelector(".table-wrapper").scrollTop = 0;
+                }
+            }
+            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._tagEls.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
+        const addedTags = tagNames.split(",").filter((t) => t.match(/\S/));
+        addedTags.forEach((tag) => {
+            this.wmTagInputTagAdded.emit(tag);
+        });
+        this.announce(this.tagAddedMessage(addedTags.join(", ")));
+        this.resetInput();
+    }
+    announceExistingOptions() {
+        // request animation frame to wait for re-rendering of filtered options
+        window.requestAnimationFrame(() => {
+            const 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");
+                }
+            }
+        }
+    }
+    handleTagMouseEnter(ev) {
+        this.showTooltipIfTruncated(ev.target);
+    }
+    renderDropdownInput() {
+        return (h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "dropdown", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": `${this.label} ${globalMessages.getCharacterLimit(this.characterLimit)}`, "aria-expanded": this.isExpanded.toString(), "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
+    renderTableInput() {
+        return (h("input", { id: "input", class: "input", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "table", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": this.label, placeholder: this.placeholder, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
+    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) }, this.addNewTagMessage(inputValue))));
+    }
+    renderTable() {
+        return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
+            // browsers will make this container tabbable if it scrolls
+            // we need to proactively set tabindex to -1 to avoid user focus. This is okay, because the table provides behavior that allows scrolling its content
+            tabindex: -1, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true", onFocus: () => this.handleTableFocus(), "aria-activedescendant": this._focusedCell ? this._focusedCell.id : undefined, tabindex: this.filteredOptionEls.length ? "0" : undefined }, 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) => (h("th", { class: "header-cell", 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);
+        return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${focused} ${o.locked ? "locked" : ""}`, "aria-describedby": `tag-${o.id}-description`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip, onClick: () => o.emitDeselectedEvent() }, h("span", { class: "sr-only" }, tagName), h("div", { class: "description", id: `tag-${o.id}-description` }, o.locked ? globalMessages.locked : ""), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? h("div", { class: "svg-icon svg-locked" }) : h("div", { class: "icon remove-btn svg-icon svg-close" })));
+    }
+    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);
+        const colHeaders = csvToArray(this.colHeaders);
+        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", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: "column-label" }, colHeaders[idx] || `Column ${idx + 1}`), h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? globalMessages.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", { key: '487a89339ede599f379c58bafeae76469d21a780', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f849489b81e37460b4aefeec16624e246d2c8a2d', class: "label-wrapper" }, h("label", { key: '66ba79dc7d47e3cf8e0621a648d5488147a4e8a7', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'e56bff146fb718718892ec3ef65080a676d98330', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'c8f254c41f21d6e6b6a64269999177984b53c421', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '7e20617627c57bbe0257a521e8d320e8a29af3c7', class: "upper-row" }, h("div", { key: '5ac0239866d948162dffab70b585baa987809229', class: "svg-icon svg-search" }), h("div", { key: 'a2118423ae068f8c8cf6ebc98bad2d257176fbed', class: `tags-and-input-wrapper` }, h("ul", { key: '58ecf075c9e6fb08094f8d7f28d537bc9dec9997', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.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("div", { key: '34790567a401667fefd54928235c5e22cafcf2bc', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '3ad6fa7ae961b16bfaf28e0e2da722bafde7ed0c', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '00d080279460ffadcc1fdb265bc54b2b0a64c0f8', id: "info", class: "info-text" }, this.info)), h("div", { key: '694d807ce12dd203bb7e30bb4f742a395dee9caa', id: "error" }, this.errorMessage), h("div", { key: 'd02caba6dc7cdfc7f458cece08fa5170158125f2', class: "sr-only", "aria-live": "polite", 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 {
+            "isKeying": {},
+            "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": "announceError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsKeying",
+                "method": "toggleKeyingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsTabbing",
+                "method": "toggleKeyingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotKeying",
+                "method": "toggleKeyingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleKeyingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "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
+            }];
+    }
 }