@watermarkinsights/ripple 5.13.0-alpha.2 → 5.13.0-alpha.3

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

@@ -0,0 +1,1245 @@
+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.requiredField = false;
+        this.tagInputType = "dropdown";
+        // dropdown variant
+        this.addNew = true;
+        this.characterLimit = 50;
+        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.inModal = false;
+        this.isKeying = false;
+        this.isExpanded = false;
+        this.liveRegionMessage = "";
+        this.focusedColumn = 0;
+        this.tagsList = []; // options to render as tags. This needs the be kept in state as tags should be shown in the order they are added
+        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
+    }
+    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 {
+            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);
+        // 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") {
+            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.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();
+                    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) {
+            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();
+            }
+        }
+    }
+    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);
+            }
+        }
+    }
+    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);
+                }
+            }
+            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);
+    }
+    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", 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);
+        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 }, h("span", { class: "sr-only" }, tagName), h("div", { class: "description", id: `tag-${o.id}-description` }, o.locked ? "locked" : ""), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "svg-icon svg-locked" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }, h("div", { class: "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);
+        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: `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: 'c7c6274b246a075d3dde1a85c48f74a6f81e8488', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e111c172efb9f67de292ea97c032eb0aceb5dd7b', class: "label-wrapper" }, h("label", { key: '41022ce3f8be12acda982a6b6fddd5703004278d', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '778554d1db5854adcc3629fa263a2c1b537bcf7f', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'e73b049d34b5de5f7599c7c09b325545a3be0c5e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'd192eac4c59464f4002e99f77ad295c5e3917f38', class: "upper-row" }, h("div", { key: 'fde56c948d07ebfe7f0811bf516b8d466b8aaf20', class: "svg-icon svg-search" }), h("div", { key: '9831080c30d69e89aa482dc439a9210c5f6f0246', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'd9b2a3749cd06d1ad5ce381b99c04685cff97c62', 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-label": `${this.label} ${this.tagAreaInstructions}`, 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("input", { key: 'cd48d5e5c79157f76e67d89411e3471bd421cb82', 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 " : ""} max-tags`, "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", { key: 'f2bf5d26f43064e12e4a2b51ed3b7a531e30d0f1', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'aea747efbca0eb714301678e297052c9bcfb745c', id: "info", class: "info-text" }, this.info)), h("div", { key: 'fa5e0b55abbd2f9608bbea1161a9169adeaee627', id: "error" }, this.errorMessage), h("div", { key: '3f484bbc12775a17f5af366deeb0776808b38016', 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",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "info": {
+                "type": "string",
+                "attribute": "info",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "labelPosition": {
+                "type": "string",
+                "attribute": "label-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"left\" | \"none\"",
+                    "resolved": "\"left\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"top\""
+            },
+            "maxTags": {
+                "type": "number",
+                "attribute": "max-tags",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "requiredField": {
+                "type": "boolean",
+                "attribute": "required-field",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tagInputType": {
+                "type": "string",
+                "attribute": "tag-input-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dropdown\" | \"table\"",
+                    "resolved": "\"dropdown\" | \"table\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"dropdown\""
+            },
+            "helpText": {
+                "type": "string",
+                "attribute": "help-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "addNew": {
+                "type": "boolean",
+                "attribute": "add-new",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "characterLimit": {
+                "type": "number",
+                "attribute": "character-limit",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "50"
+            },
+            "colHeaders": {
+                "type": "string",
+                "attribute": "col-headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "colWidths": {
+                "type": "string",
+                "attribute": "col-widths",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "colWrap": {
+                "type": "string",
+                "attribute": "col-wrap",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "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
+            }];
+    }
+}