@watermarkinsights/ripple 4.0.0-9 → 4.0.0

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

@@ -1,1039 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TagInput } from "./wm-tag-input";
-import * as globalFunctions from "../../global/functions";
-// mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-// mockComputedStyle, component measures the placeholder on render to properly position the input
-global.getComputedStyle = jest
-  .fn()
-  .mockImplementation(() => ({ paddingLeft: "0px", paddingRight: "0px", marginLeft: "0px", marginRight: "0px" }));
-describe("taginput", () => {
-  let page;
-  beforeEach(async () => {
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input id="input" label="label" options="one,two,three,four"></wm-tag-input>`,
-    });
-  });
-  it("builds", async () => {
-    expect(page.root).toMatchSnapshot();
-  });
-  it("has right aria roles", async () => {
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label" options="one,two,three,four" selected-tags="one,three" info="info text"></wm-tag-input>`,
-    });
-    const label = await page.root.shadowRoot.querySelector("label");
-    expect(label.textContent).toBe("label");
-    const input = await page.root.shadowRoot.querySelector("input");
-    expect(input).toEqualAttribute("role", "combobox");
-    expect(input).toEqualAttribute("aria-label", "label 50 characters allowed.");
-    const helpText = await page.root.shadowRoot.querySelector(".help-text");
-    expect(input).toEqualAttribute("aria-describedby", helpText.id);
-    const dropdown = await page.root.shadowRoot.querySelector(".dropdown");
-    expect(dropdown).toEqualAttribute("role", "listbox");
-    expect(dropdown).toHaveAttribute("aria-multiselectable");
-    const options = await page.root.shadowRoot.querySelectorAll(".option");
-    options.forEach((option) => {
-      expect(option).toEqualAttribute("role", "option");
-    });
-    const tagArea = await page.root.shadowRoot.querySelector(".tag-area");
-    expect(tagArea).toEqualAttribute("role", "listbox");
-    expect(tagArea).toEqualAttribute("aria-label", "label tag selection. Press Backspace or Delete to remove a tag.");
-    expect(tagArea).toEqualAttribute("aria-describedby", "info max-tags");
-    expect(tagArea).toEqualAttribute("aria-orientation", "horizontal");
-    const tags = await page.root.shadowRoot.querySelectorAll(".tag");
-    tags.forEach((tag) => {
-      expect(tag).toEqualAttribute("role", "option");
-    });
-  });
-  it("changes help text when options are not provided", async () => {
-    // not editable with options
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label" add-new="false" options="one,two,three"></wm-tag-input>`,
-    });
-    let helpText = await page.root.shadowRoot.querySelector(".help-text");
-    expect(helpText.textContent).toBe("Search and select a tag.");
-    // editable with options
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label" options="one,two,three"></wm-tag-input>`,
-    });
-    helpText = await page.root.shadowRoot.querySelector(".help-text");
-    expect(helpText.textContent).toBe("Search and select a tag. Press the Enter or Comma key to add a new tag.");
-    // editable without options
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label"></wm-tag-input>`,
-    });
-    helpText = await page.root.shadowRoot.querySelector(".help-text");
-    expect(helpText.textContent).toBe(" Press the Enter or Comma key to add a new tag.");
-  });
-  it("shows the appropriate default placeholder text", async () => {
-    // editable with options
-    await page.setContent(`<wm-tag-input label="label" options="one,two"></wm-tag-input>`);
-    let input = await page.root.shadowRoot.querySelector("input");
-    expect(input).toEqualAttribute("placeholder", "Add or search for a tag");
-    // editable without options
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label"></wm-tag-input>`,
-    });
-    input = await page.root.shadowRoot.querySelector("input");
-    expect(input).toEqualAttribute("placeholder", "Add a new tag");
-    // not editable
-    page = await newSpecPage({
-      components: [TagInput],
-      html: `<wm-tag-input label="label" add-new="false" options="one,two,three"></wm-tag-input>`,
-    });
-    input = await page.root.shadowRoot.querySelector("input");
-    expect(input).toEqualAttribute("placeholder", "Search and select a tag");
-  });
-  it("shows options in original case", async () => {
-    await page.setContent('<wm-tag-input label="label" options="one two, Three four, five Six, sEVen, eight nine ten" selected-tags="one two, Three four, five Six, sEVen,eight nine ten"></wm-tag-input>');
-    const tags = page.root.shadowRoot.querySelectorAll(".tag");
-    expect(tags[0].dataset.tag).toBe("one two");
-    expect(tags[1].dataset.tag).toBe("Three four");
-    expect(tags[2].dataset.tag).toBe("five Six");
-    expect(tags[3].dataset.tag).toBe("sEVen");
-    expect(tags[4].dataset.tag).toBe("eight nine ten");
-  });
-  it("alphabetizes list items", async () => {
-    await page.setContent('<wm-tag-input label="label" options="C, B, E, D, F, A"></wm-tag-input>');
-    // List items appear in alphabetical orderconst listItems = page.root!.shadowRoot!.querySelectorAll(".option");
-    const listItems = page.root.shadowRoot.querySelectorAll(".option");
-    expect(listItems[0].textContent).toBe("A");
-    expect(listItems[1].textContent).toBe("B");
-    expect(listItems[2].textContent).toBe("C");
-    expect(listItems[3].textContent).toBe("D");
-    expect(listItems[4].textContent).toBe("E");
-    expect(listItems[5].textContent).toBe("F");
-  });
-  it("handles different casing of identical options", async () => {
-    await page.setContent(`<wm-tag-input label="label" options="one,two,three" selected-tags="oNE,tWO,thREe"></wm-tag-input>`);
-    const listItems = page.root.shadowRoot.querySelectorAll(".option");
-    const tags = page.root.shadowRoot.querySelectorAll(".tag");
-    expect(listItems.length).toBe(3);
-    expect(tags.length).toBe(3);
-  });
-  it("consolidates pre-selected tags into the options", async () => {
-    await page.setContent(`<wm-tag-input label="label" selected-tags="a,b,c"></wm-tag-input>`);
-    const listItems = page.root.shadowRoot.querySelectorAll(".option");
-    expect(listItems.length).toBe(3);
-    expect(page.root.options).toBe("a,b,c");
-    expect(listItems[0].textContent).toBe("a");
-    expect(listItems[1].textContent).toBe("b");
-    expect(listItems[2].textContent).toBe("c");
-  });
-  it("reflects selected tags", async () => {
-    const component = new TagInput();
-    const mockListToCSV = (component.listToCSV = jest.fn());
-    const mockWmTagInputChanged = (component.wmTagInputChanged.emit = jest.fn());
-    const tagsList = ["one", "two", "three"];
-    component.tagsList = tagsList;
-    component.reflectSelectedTags(tagsList, ["one", "two"]);
-    expect(mockListToCSV).toHaveBeenCalledTimes(1);
-    expect(mockListToCSV).toHaveBeenLastCalledWith(tagsList);
-    expect(mockWmTagInputChanged).toHaveBeenCalledTimes(1);
-    expect(mockWmTagInputChanged).toHaveBeenLastCalledWith({
-      value: tagsList,
-      tagChanged: "three",
-    });
-    jest.restoreAllMocks();
-  });
-  it("checks case insensitive list inclusion", async () => {
-    // includesCaseInsensitive
-    const component = new TagInput();
-    const testArray = ["One", "TWO", "three", "fOUr and FIve", "s I x"];
-    expect(component.includesCaseInsensitive(testArray, "one")).toBe(true);
-    expect(component.includesCaseInsensitive(testArray, "oNe")).toBe(true);
-    expect(component.includesCaseInsensitive(testArray, "seven")).toBe(false);
-  });
-  it("filters case insensitive strings from arrays", async () => {
-    // filterCaseInsensitive
-    const component = new TagInput();
-    const testArray = ["One", "TWO", "three", "fOUr and FIve", "s I x"];
-    const answers = [
-      ["TWO", "three", "fOUr and FIve", "s I x"],
-      ["One", "three", "fOUr and FIve", "s I x"],
-      ["One", "TWO", "fOUr and FIve", "s I x"],
-      ["One", "TWO", "three", "s I x"],
-      ["One", "TWO", "three", "fOUr and FIve"],
-    ];
-    testArray.forEach((str, idx) => {
-      const lowercaseWord = str.toLowerCase();
-      expect(component.filterCaseInsensitive(testArray, lowercaseWord)).toStrictEqual(answers[idx]);
-    });
-  });
-  it("throws error if no label prop is passed", async () => {
-    const mockConsoleError = (console.error = jest.fn());
-    await page.setContent(`<wm-tag-input></wm-tag-input>`);
-    expect(mockConsoleError).toHaveBeenCalledWith("wm-tag-input must have a label property");
-    jest.restoreAllMocks();
-  });
-  describe("handles user keys", () => {
-    describe("handles input keys", () => {
-      afterEach(() => {
-        jest.restoreAllMocks();
-      });
-      it("handles input key down", async () => {
-        // handleInputKeyDown
-        const component = new TagInput();
-        const mockPreventDefault = jest.fn();
-        const mockStopPropagation = jest.fn();
-        const event = {
-          key: "",
-          preventDefault: mockPreventDefault,
-          stopPropagation: mockStopPropagation,
-        };
-        //@ts-ignore
-        component.inputEl = { value: "new tag" };
-        // Enter
-        const mockHandleInputSubmit = (component.submitInput = jest.fn());
-        event.key = "Enter";
-        component.handleInputKeyDown(event);
-        expect(mockStopPropagation).toHaveBeenCalledTimes(1);
-        expect(mockHandleInputSubmit).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // mock listItemEls getter
-        jest.spyOn(component, "listItemEls", "get").mockReturnValue([{}]);
-        // ArrowDown
-        const mockHandleInputArrowDown = (component.handleInputArrowDown = jest.fn());
-        event.key = "ArrowDown";
-        component.handleInputKeyDown(event);
-        expect(mockHandleInputArrowDown).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowUp
-        const mockHandleInputArrowUp = (component.handleInputArrowUp = jest.fn());
-        event.key = "ArrowUp";
-        component.handleInputKeyDown(event);
-        expect(mockHandleInputArrowUp).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // Escape
-        const spyCloseDropdown = jest.spyOn(component, "closeDropdown");
-        jest.spyOn(component, "clearListItemFocus").mockImplementation(() => { });
-        event.key = "Escape";
-        component.isExpanded = true;
-        component.handleInputKeyDown(event);
-        expect(spyCloseDropdown).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // Backspace
-        const mockHandleInputBackspace = (component.handleInputBackspace = jest.fn());
-        event.key = "Backspace";
-        component.handleInputKeyDown(event);
-        expect(mockHandleInputBackspace).toHaveBeenCalledTimes(1);
-        jest.restoreAllMocks();
-      });
-      it("handles input change", async () => {
-        // handleInputChanged
-        const component = new TagInput();
-        const mockClearListItemFocus = (component.clearListItemFocus = jest.fn());
-        const mockGenerateCharacterLimitWarning = (component.generateCharacterLimitWarning = jest.fn());
-        component.announce = jest.fn();
-        const mockAnnounceExistingOptions = (component.announceExistingOptions = jest.fn());
-        const mockOpenDropdown = (component.openDropdown = jest.fn());
-        component.handleInputChanged("word");
-        expect(component.charCount).toBe("word".length);
-        expect(mockClearListItemFocus).toHaveBeenCalledTimes(1);
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(1);
-        expect(mockAnnounceExistingOptions).toHaveBeenCalledTimes(1);
-        expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.characterLimit = 3;
-        component.isExpanded = true;
-        component.handleInputChanged("more than 3 characters");
-        expect(mockClearListItemFocus).toHaveBeenCalledTimes(1);
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(0);
-        expect(mockAnnounceExistingOptions).toHaveBeenCalledTimes(1);
-        expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(1);
-        jest.restoreAllMocks();
-      });
-      it("handles input arrow down", async () => {
-        // handleInputArrowDown
-        const component = new TagInput();
-        const mockOpenDropdown = (component.openDropdown = jest.fn());
-        const mockMoveDownListItem = (component.moveDownListItem = jest.fn());
-        component.isExpanded = false;
-        component.handleInputArrowDown();
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(1);
-        expect(mockMoveDownListItem).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.isExpanded = true;
-        component.handleInputArrowDown();
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(0);
-        expect(mockMoveDownListItem).toHaveBeenCalledTimes(1);
-        jest.restoreAllMocks();
-      });
-      it("handles input arrow up", async () => {
-        // handleInputArrowUp
-        const component = new TagInput();
-        const mockOpenDropdown = (component.openDropdown = jest.fn());
-        const mockMoveUpListItem = (component.moveUpListItem = jest.fn());
-        component.isExpanded = false;
-        component.handleInputArrowUp();
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(1);
-        expect(mockMoveUpListItem).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.isExpanded = true;
-        component.handleInputArrowUp();
-        expect(mockOpenDropdown).toHaveBeenCalledTimes(0);
-        expect(mockMoveUpListItem).toHaveBeenCalledTimes(1);
-        jest.restoreAllMocks();
-      });
-      it("handles input submit", async () => {
-        // submitInput
-        const component = new TagInput();
-        const mockAddTag = (component.addTag = jest.fn(() => ["first", "second"]));
-        const mockAddOption = (component.addOption = jest.fn());
-        const mockResetInput = (component.resetInput = jest.fn());
-        let canAddNew = true;
-        component.submitInput(canAddNew, "new tag");
-        expect(mockAddTag).toHaveBeenCalledTimes(1);
-        expect(mockAddOption).toHaveBeenCalledTimes(1);
-        expect(mockResetInput).toHaveBeenCalledTimes(1);
-        expect((component.charCount = 0));
-        jest.clearAllMocks();
-        component.submitInput(canAddNew, "");
-        expect(mockAddTag).toHaveBeenCalledTimes(0);
-        expect(mockAddOption).toHaveBeenCalledTimes(0);
-        expect(mockResetInput).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.maxTags = 3;
-        component.submitInput(canAddNew, "new tag");
-        expect(mockAddTag).toHaveBeenCalledTimes(1);
-        expect(mockAddOption).toHaveBeenCalledTimes(1);
-        expect(mockResetInput).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        component.maxTags = 2;
-        component.submitInput(canAddNew, "new tag");
-        expect(mockAddTag).toHaveBeenCalledTimes(1);
-        expect(mockAddOption).toHaveBeenCalledTimes(1);
-        expect(mockResetInput).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        canAddNew = false;
-        component.submitInput(canAddNew, "new tag");
-        expect(mockAddTag).toHaveBeenCalledTimes(0);
-        expect(mockAddOption).toHaveBeenCalledTimes(0);
-        expect(mockResetInput).toHaveBeenCalledTimes(0);
-        jest.restoreAllMocks();
-      });
-      it("handles input backspace", async () => {
-        // handleInputBackspace
-        const component = new TagInput();
-        const mockFocus = jest.fn();
-        const tagAreaEl = { focus: mockFocus };
-        jest.spyOn(component, "focusTag").mockImplementation(() => { });
-        const mockRequestAnimationFrame = jest
-          .spyOn(window, "requestAnimationFrame")
-          //@ts-ignore
-          .mockImplementation((cb) => cb());
-        jest.spyOn(component, "tagEls", "get").mockReturnValue([{}]);
-        //@ts-ignore
-        component.tagAreaEl = tagAreaEl;
-        //@ts-ignore
-        component.inputEl = { value: "new tag" };
-        component.tagsList = ["one", "two"];
-        component.handleInputBackspace();
-        expect(mockRequestAnimationFrame).toHaveBeenCalledTimes(0);
-        expect(mockFocus).toHaveBeenCalledTimes(0);
-        //@ts-ignore
-        component.inputEl = { value: "" };
-        component.handleInputBackspace();
-        expect(mockRequestAnimationFrame).toHaveBeenCalledTimes(1);
-        expect(mockFocus).toHaveBeenCalledTimes(1);
-        jest.restoreAllMocks();
-      });
-    });
-    describe("handles list item keys", () => {
-      afterEach(() => {
-        jest.restoreAllMocks();
-      });
-      it("handles list item click", async () => {
-        // handleListItemClick
-        const component = new TagInput();
-        let fooEl = document.createElement("li");
-        fooEl.dataset.option = "two";
-        //@ts-ignore
-        const event = { target: fooEl };
-        const mockAnnounce = (component.announce = jest.fn());
-        const mockResetInput = (component.resetInput = jest.fn());
-        const mockAddTag = (component.addTag = jest.fn());
-        const mockAddOption = (component.addOption = jest.fn());
-        component.tagsList = ["one", "two"];
-        component.handleListItemClick(event.target);
-        expect(mockAnnounce).toHaveBeenCalledTimes(1);
-        expect(mockAnnounce).toHaveBeenLastCalledWith("two has already been added.");
-        expect(mockResetInput).toHaveBeenCalledTimes(0);
-        expect(mockAddTag).toHaveBeenCalledTimes(0);
-        expect(mockAddOption).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.tagsList = ["one"];
-        component.handleListItemClick(event.target);
-        expect(mockAnnounce).toHaveBeenCalledTimes(0);
-        expect(mockResetInput).toHaveBeenCalledTimes(1);
-        expect(mockAddTag).toHaveBeenCalledTimes(1);
-        expect(mockAddOption).toHaveBeenCalledTimes(1);
-        expect(component.focusedElement).toBeUndefined();
-        jest.restoreAllMocks();
-      });
-      it("handles list item key down", async () => {
-        // handleListItemKeyDown
-        const component = new TagInput();
-        const mockTargetClick = jest.fn();
-        const evTarget = { click: mockTargetClick };
-        const mockMoveDownListItem = (component.moveDownListItem = jest.fn());
-        const mockMoveUpListItem = (component.moveUpListItem = jest.fn());
-        const mockFocus = jest.fn();
-        //@ts-ignore
-        const inputEl = { focus: () => { } };
-        // @ts-ignore
-        component.inputEl = inputEl;
-        const mockCloseDropdown = (component.closeDropdown = jest.fn());
-        const mockPreventDefault = jest.fn();
-        let event = {
-          key: "",
-          target: evTarget,
-          preventDefault: mockPreventDefault,
-        };
-        // Enter
-        event.key = "Enter";
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockTargetClick).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // Space
-        event.key = " ";
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockTargetClick).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowDown
-        event.key = "ArrowDown";
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockMoveDownListItem).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowUp
-        event.key = "ArrowUp";
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockMoveUpListItem).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // Escape
-        event.key = "Escape";
-        // @ts-ignore
-        component.inputEl = { focus: mockFocus };
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockFocus).toHaveBeenCalledTimes(1);
-        expect(mockCloseDropdown).toHaveBeenCalledTimes(0);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        // @ts-ignore
-        component.inputEl = inputEl;
-        jest.spyOn(component, "focusedElement", "get").mockReturnValue(inputEl);
-        // @ts-ignore
-        component.handleListItemKeyDown(event);
-        expect(mockFocus).toHaveBeenCalledTimes(0);
-        expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        jest.restoreAllMocks();
-      });
-    });
-    describe("handles tag area keys", () => {
-      afterEach(() => {
-        jest.restoreAllMocks();
-      });
-      it("handles tag area key down", async () => {
-        // handleTagAreaKeyDown
-        const component = new TagInput();
-        const mockMoveLeftTag = (component.moveLeftTag = jest.fn());
-        const mockMoveRightTag = (component.moveRightTag = jest.fn());
-        const mockHandleTagAreaDelete = (component.handleTagAreaDelete = jest.fn());
-        const mockPreventDefault = jest.fn();
-        let event = { key: "", preventDefault: mockPreventDefault };
-        // ArrowLeft
-        event.key = "ArrowLeft";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(1);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(0);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(0);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowUp
-        event.key = "ArrowUp";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(1);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(0);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(0);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowRight
-        event.key = "ArrowRight";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(0);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(1);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(0);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // ArrowDown
-        event.key = "ArrowDown";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(0);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(1);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(0);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        // Backspace
-        event.key = "Backspace";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(0);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(0);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        // Delete
-        event.key = "Delete";
-        //@ts-ignore
-        component.handleTagAreaKeyDown(event);
-        expect(mockMoveLeftTag).toHaveBeenCalledTimes(0);
-        expect(mockMoveRightTag).toHaveBeenCalledTimes(0);
-        expect(mockHandleTagAreaDelete).toHaveBeenCalledTimes(1);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
-      });
-      it("handles tag area delete", async () => {
-        // handleTagAreaDelete
-        const component = new TagInput();
-        const mockRemoveTag = (component.removeTag = jest.fn());
-        let element1 = document.createElement("li");
-        element1.dataset.tag = "one";
-        let element2 = document.createElement("li");
-        element2.dataset.tag = "two";
-        jest.spyOn(component, "tagEls", "get").mockReturnValue([element1, element2]);
-        component.tagsList = ["one", "two"];
-        const mockInputFocus = jest.fn();
-        const mockFocusTag = (component.focusTag = jest.fn());
-        // @ts-ignore
-        component.inputEl = { focus: mockInputFocus };
-        component.focusedTag = element1;
-        component.handleTagAreaDelete();
-        expect(mockRemoveTag).toHaveBeenCalledTimes(1);
-        expect(component.focusedTag).toBe(element1);
-        expect(mockInputFocus).toHaveBeenCalledTimes(0);
-        expect(mockFocusTag).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        component.focusedTag = element2;
-        component.tagsList = [];
-        component.handleTagAreaDelete();
-        expect(mockRemoveTag).toHaveBeenCalledTimes(1);
-        expect(mockInputFocus).toHaveBeenCalledTimes(1);
-        expect(mockFocusTag).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        component.focusedTag = element2;
-        component.tagsList = ["one", "two"];
-        component.handleTagAreaDelete();
-        expect(mockRemoveTag).toHaveBeenCalledTimes(1);
-        expect(mockInputFocus).toHaveBeenCalledTimes(0);
-        expect(mockFocusTag).toHaveBeenCalledTimes(1);
-        expect(component.focusedTag).toBe(element1);
-        jest.clearAllMocks();
-        component.focusedTag = null;
-        component.handleTagAreaDelete();
-        expect(mockRemoveTag).toHaveBeenCalledTimes(0);
-        expect(mockInputFocus).toHaveBeenCalledTimes(0);
-        expect(component.focusedTag).toBe(null);
-        expect(mockFocusTag).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
-      });
-    });
-  });
-  describe("manages focus", () => {
-    it("handles blur of focusable elements", () => {
-      // handleBlur
-      const component = new TagInput();
-      const element1 = {};
-      const element2 = {};
-      const event = { relatedTarget: element1 };
-      const mockDismissTooltip = (component.dismissTooltip = jest.fn());
-      const mockClearCellFocus = (component.clearCellFocus = jest.fn());
-      const mockCloseDropdown = (component.closeDropdown = jest.fn());
-      const div = document.createElement("div");
-      div.classList.add("focused");
-      // @ts-ignore
-      component.fieldWrapperEl = div;
-      component.handleBlur(event, element1);
-      expect(mockCloseDropdown).toHaveBeenCalledTimes(0);
-      expect(mockDismissTooltip).toHaveBeenCalledTimes(1);
-      expect(mockClearCellFocus).toHaveBeenCalledTimes(1);
-      // @ts-ignore
-      expect(component.fieldWrapperEl).toHaveClass("focused");
-      component.handleBlur(event, element2);
-      expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
-      expect(mockDismissTooltip).toHaveBeenCalledTimes(2);
-      expect(mockClearCellFocus).toHaveBeenCalledTimes(2);
-      // @ts-ignore
-      expect(component.fieldWrapperEl).not.toHaveClass("focused");
-      jest.restoreAllMocks();
-    });
-    it("handles focus of tag area", async () => {
-      // handleTagAreaFocus
-      const component = new TagInput();
-      const mockCloseDropdown = (component.closeDropdown = jest.fn());
-      const mockFocusTag = (component.focusTag = jest.fn());
-      const liElement1 = {};
-      const liElement2 = {};
-      jest.spyOn(component, "tagEls", "get").mockReturnValue([liElement1]);
-      jest.spyOn(component, "nonLockedTagEls", "get").mockReturnValue([liElement1]);
-      component.focusedTag = null;
-      component.handleTagAreaFocus();
-      expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
-      expect(mockFocusTag).toHaveBeenCalledTimes(1);
-      expect(mockFocusTag).toHaveBeenLastCalledWith(liElement1);
-      mockCloseDropdown.mockClear();
-      mockFocusTag.mockClear();
-      component.focusedTag = liElement2;
-      component.handleTagAreaFocus();
-      expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
-      expect(mockFocusTag).toHaveBeenCalledTimes(1);
-      expect(mockFocusTag).toHaveBeenLastCalledWith(liElement2);
-      jest.restoreAllMocks();
-    });
-    it("focuses list items", async () => {
-      // focusListItem
-      const component = new TagInput();
-      const mockScrollIntoView = jest.fn();
-      const newInput = document.createElement("input");
-      newInput.setAttribute("aria-activedescendant", "");
-      // @ts-ignore
-      component.inputEl = newInput;
-      const element = document.createElement("li");
-      element.id = "fake-id";
-      element.scrollIntoView = mockScrollIntoView;
-      component.focusListItem(element);
-      expect(component.focusedListItem).toBe(element);
-      // @ts-ignore
-      expect(component.inputEl).toEqualAttribute("aria-activedescendant", "fake-id");
-      expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
-      jest.restoreAllMocks();
-    });
-    it("focuses tags", async () => {
-      jest.spyOn(globalFunctions, "hideTooltip").mockImplementation(() => { });
-      // focusTag
-      const component = new TagInput();
-      const element = document.createElement("li");
-      element.id = "fakeID";
-      //@ts-ignore
-      component.tagAreaEl = document.createElement("ul");
-      component.focusTag(element);
-      expect(component.focusedTag).toBe(element);
-      //@ts-ignore
-      expect(component.tagAreaEl).toEqualAttribute("aria-activedescendant", "fakeID");
-      jest.restoreAllMocks();
-    });
-    it("clears tag focus", async () => {
-      // clearTagFocus
-      const component = new TagInput();
-      const tagArea = document.createElement("ul");
-      tagArea.setAttribute("aria-activedescendant", "fakeID");
-      component.focusedListItem = {};
-      //@ts-ignore
-      component.tagAreaEl = tagArea;
-      //@ts-ignore
-      expect(component.tagAreaEl).toEqualAttribute("aria-activedescendant", "fakeID");
-      component.clearTagFocus();
-      //@ts-ignore
-      expect(component.tagAreaEl).toEqualAttribute("aria-activedescendant", "");
-      expect(component.focusedTag).toBeNull();
-    });
-    it("clears list item focus", async () => {
-      // clearListItemFocus
-      const component = new TagInput();
-      const element1 = document.createElement("li");
-      const element2 = document.createElement("li");
-      const element3 = document.createElement("li");
-      element1.classList.add("focused");
-      element2.classList.add("focused");
-      element3.classList.add("focused");
-      jest.spyOn(component, "listItemEls", "get").mockReturnValue([element1, element2, element3]);
-      const newInput = document.createElement("input");
-      newInput.setAttribute("aria-activedescendant", "fake-id");
-      // @ts-ignore
-      component.inputEl = newInput;
-      component.clearListItemFocus();
-      expect(component.focusedListItem).toBeNull();
-      component.listItemEls.forEach((el) => {
-        expect(el.tabIndex).toBe(-1);
-        expect(el).not.toHaveClass("focused");
-      });
-      // @ts-ignore
-      expect(component.inputEl).toEqualAttribute("aria-activedescendant", "");
-      component.focusedListItem = {};
-      jest.spyOn(component, "listItemEls", "get").mockReturnValue([]);
-      component.clearListItemFocus();
-      expect(component.focusedListItem).toBeNull();
-    });
-  });
-  it("moves down list items", async () => {
-    // moveDownListItem
-    const component = new TagInput();
-    const element1 = {};
-    const element2 = {};
-    const element3 = {};
-    // @ts-ignore
-    element1.nextElementSibling = element2;
-    // @ts-ignore
-    element2.nextElementSibling = element3;
-    const spyListItemEls = jest
-      .spyOn(component, "listItemEls", "get")
-      .mockReturnValue([element1, element2, element3]);
-    const mockFocusListItem = (component.focusListItem = jest.fn());
-    component.focusedListItem = null;
-    component.moveDownListItem();
-    expect(mockFocusListItem).toHaveBeenCalledTimes(1);
-    expect(mockFocusListItem).toHaveBeenLastCalledWith(element1);
-    mockFocusListItem.mockClear();
-    component.focusedListItem = element1;
-    component.moveDownListItem();
-    expect(mockFocusListItem).toHaveBeenCalledTimes(1);
-    expect(mockFocusListItem).toHaveBeenLastCalledWith(element2);
-    mockFocusListItem.mockClear();
-    component.focusedListItem = element2;
-    component.moveDownListItem();
-    expect(mockFocusListItem).toHaveBeenCalledTimes(1);
-    expect(mockFocusListItem).toHaveBeenLastCalledWith(element3);
-    mockFocusListItem.mockClear();
-    component.focusedListItem = element3;
-    component.moveDownListItem();
-    expect(mockFocusListItem).toHaveBeenCalledTimes(1);
-    expect(mockFocusListItem).toHaveBeenLastCalledWith(element1);
-    mockFocusListItem.mockClear();
-    spyListItemEls.mockReturnValue([]);
-    component.moveDownListItem();
-    expect(mockFocusListItem).toHaveBeenCalledTimes(0);
-    mockFocusListItem.mockClear();
-    jest.restoreAllMocks();
-  });
-  it("adds and removes options", async () => {
-    // addOption, removeOption
-    const component = new TagInput();
-    const spyFilterCaseInsensitive = jest.spyOn(component, "filterCaseInsensitive");
-    const optionsList = ["one", "tWo", "THREE"];
-    const removedThree = ["one", "tWo"];
-    // adding
-    component.optionsList = optionsList;
-    expect(component.addOption("WORD")).toStrictEqual([...optionsList, "WORD"]);
-    // removing
-    component.removeOption("three");
-    expect(spyFilterCaseInsensitive).toHaveBeenCalledTimes(1);
-    expect(component.optionsList).toStrictEqual(removedThree);
-    jest.restoreAllMocks();
-  });
-  it("adds and removes tags", async () => {
-    // addTag, removeTag
-    const component = new TagInput();
-    const spyFilterCaseInsensitive = jest.spyOn(component, "filterCaseInsensitive");
-    const mockAnnounce = (component.announce = jest.fn());
-    const mockRemoveOption = (component.removeOption = jest.fn());
-    component.tagsList = ["one", "two", "three"];
-    // adding
-    component.addTag("three");
-    expect(component.tagsList).toStrictEqual(["one", "two", "three"]);
-    expect(mockAnnounce).toHaveBeenCalledTimes(0);
-    component.addTag("four");
-    expect(component.tagsList).toStrictEqual(["one", "two", "three", "four"]);
-    expect(mockAnnounce).toHaveBeenCalledTimes(1);
-    expect(mockAnnounce).toHaveBeenLastCalledWith("four added.");
-    mockAnnounce.mockClear();
-    // removing
-    component.options = "one,two,three";
-    component.tagsList = ["one", "two", "three"];
-    component.removeTag("two");
-    expect(spyFilterCaseInsensitive).toHaveBeenCalledTimes(1);
-    expect(spyFilterCaseInsensitive).toHaveBeenLastCalledWith(["one", "two", "three"], "two");
-    expect(component.tagsList).toStrictEqual(["one", "three"]);
-    expect(mockAnnounce).toHaveBeenCalledTimes(1);
-    expect(mockAnnounce).toHaveBeenLastCalledWith("two removed");
-    expect(mockRemoveOption).toHaveBeenCalledTimes(0);
-    spyFilterCaseInsensitive.mockClear();
-    mockAnnounce.mockClear();
-    mockRemoveOption.mockClear();
-    component.options = "one,two";
-    component.tagsList = ["one", "two", "three"];
-    component.optionsList = ["one", "two", "three"];
-    await component.removeTag("three");
-    expect(spyFilterCaseInsensitive).toHaveBeenCalledTimes(1);
-    expect(spyFilterCaseInsensitive).toHaveBeenLastCalledWith(["one", "two", "three"], "three");
-    expect(component.tagsList).toStrictEqual(["one", "two"]);
-    expect(mockAnnounce).toHaveBeenCalledTimes(1);
-    expect(mockAnnounce).toHaveBeenLastCalledWith("three removed");
-    expect(mockRemoveOption).toHaveBeenCalledTimes(1);
-    spyFilterCaseInsensitive.mockClear();
-    mockAnnounce.mockClear();
-    mockRemoveOption.mockClear();
-    jest.restoreAllMocks();
-  });
-  it("removes tag on remove button click", async () => {
-    const component = new TagInput();
-    const mockMoveLeftTag = (component.moveLeftTag = jest.fn());
-    const mockRemoveTag = (component.removeTag = jest.fn());
-    component.handleRemoveButtonClick("word");
-    expect(mockMoveLeftTag).toHaveBeenCalledTimes(1);
-    expect(mockRemoveTag).toHaveBeenCalledTimes(1);
-    expect(mockRemoveTag).toHaveBeenLastCalledWith("word");
-  });
-  it("resets the input field", async () => {
-    // resetInput
-    const component = new TagInput();
-    const input = { value: "word" };
-    // @ts-ignore
-    component.inputEl = input;
-    component.charCount = 20;
-    component.resetInput();
-    expect(component.charCount).toBe(0);
-    // @ts-ignore
-    expect(component.inputEl.value).toBe("");
-  });
-  it("closes dropdown if not target or child", async () => {
-    // closeIfNotElOrChild
-    const component = new TagInput();
-    const element1 = {};
-    const event = { target: element1 };
-    const mockCloseDropdown = (component.closeDropdown = jest.fn());
-    component.isExpanded = false;
-    component.closeIfNotElOrChild(event);
-    expect(mockCloseDropdown).toHaveBeenCalledTimes(0);
-    jest.clearAllMocks();
-    component.isExpanded = true;
-    component.closeIfNotElOrChild(event);
-    expect(mockCloseDropdown).toHaveBeenCalledTimes(1);
-    jest.restoreAllMocks();
-  });
-  it("sorts case insensitively", () => {
-    const component = new TagInput();
-    const list = ["canteloupe", "Apple", "Banana", "Cranberry", "blueberry", "apricot", "double word", "extra"];
-    const answer = ["Apple", "apricot", "Banana", "blueberry", "canteloupe", "Cranberry", "double word", "extra"];
-    expect(component.sortCaseInsensitive(list)).toStrictEqual(answer);
-  });
-  it("debounces handling resize", () => {
-    const component = new TagInput();
-    const mockDebouncedUpdate = (component.debouncedUpdate = jest.fn());
-    component.debouncedUpdate();
-    expect(mockDebouncedUpdate).toHaveBeenCalledTimes(1);
-    jest.restoreAllMocks();
-    //
-  });
-  it("postions the input element properly", () => {
-    const component = new TagInput();
-    // @ts-ignore
-    component.inputEl = document.createElement("input");
-    // @ts-ignore
-    component.tagAreaEl = document.createElement("ul");
-    // @ts-ignore
-    component.tagAreaEl.getBoundingClientRect = () => {
-      return { right: 200 };
-    };
-    const element1 = {
-      dataset: { tag: "one" },
-    };
-    const element2 = {
-      dataset: { tag: "two" },
-    };
-    jest.spyOn(component, "tagEls", "get").mockReturnValue([element1, element2]);
-    // last tag exists and spaceAvailable
-    element2.getBoundingClientRect = () => {
-      return { right: 0 };
-    };
-    // @ts-ignore
-    element2.offsetTop = 10;
-    component.positionInput();
-    // @ts-ignore
-    expect(component.inputEl.style.position).toBe("absolute");
-    // @ts-ignore
-    expect(component.inputEl.style.top).toBe("10px");
-    // @ts-ignore
-    // 200 - 0 - 8
-    expect(component.inputEl.style.width).toBe("192px");
-    // last tag exists and no spaceAvailable
-    element2.getBoundingClientRect = () => {
-      return { right: 180 };
-    };
-    // @ts-ignore
-    element2.offsetTop = 10;
-    component.positionInput();
-    // @ts-ignore
-    expect(component.inputEl.style.position).toBe("static");
-    // @ts-ignore
-    expect(component.inputEl.style.width).toBe("100%");
-    // no tags exist
-    jest.spyOn(component, "tagEls", "get").mockReturnValue([]);
-    component.positionInput();
-    // @ts-ignore
-    expect(component.inputEl.style.position).toBe("static");
-    // @ts-ignore
-    expect(component.inputEl.style.width).toBe("100%");
-  });
-  it("creates CSV from list", () => {
-    const component = new TagInput();
-    const list1 = ["one", "two", "and three"];
-    expect(component.listToCSV(list1)).toBe("one,two,and three");
-    expect(component.listToCSV([])).toBe("");
-  });
-  describe("handles announcements", () => {
-    it("announces live region notifications", async () => {
-      // announce
-      const component = new TagInput();
-      const div = document.createElement("div");
-      div.textContent = "";
-      //@ts-ignore
-      component.liveRegionEl = div;
-      component.announce("Message");
-      expect(component.liveRegionMessage).toBe("Message");
-    });
-    it("announces existing options", async () => {
-      // announceExistingOptions
-      const component = new TagInput();
-      const element1 = {};
-      const element2 = {};
-      const mockAnnounce = (component.announce = jest.fn());
-      jest.spyOn(component, "optionEls", "get").mockReturnValue([element1, element2]);
-      const spyRequestAnimationFrame = jest
-        .spyOn(window, "requestAnimationFrame")
-        //@ts-ignore
-        .mockImplementation((cb) => cb());
-      component.announceExistingOptions();
-      expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenLastCalledWith("2 existing options.");
-      jest.clearAllMocks();
-      jest.spyOn(component, "optionEls", "get").mockReturnValue([element1]);
-      component.announceExistingOptions();
-      expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenLastCalledWith("1 existing option.");
-      jest.clearAllMocks();
-      jest.spyOn(component, "optionEls", "get").mockReturnValue([]);
-      component.announceExistingOptions();
-      expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenCalledTimes(1);
-      expect(mockAnnounce).toHaveBeenLastCalledWith("0 existing options.");
-      jest.restoreAllMocks();
-    });
-    it("announces character limits warnings", async () => {
-      const component = new TagInput();
-      let message = component.generateCharacterLimitWarning(0, 50);
-      expect(message).toBe("0 of 50 characters entered.");
-      message = component.generateCharacterLimitWarning(30, 50);
-      expect(message).toBe("30 of 50 characters entered.");
-      message = component.generateCharacterLimitWarning(50, 50);
-      expect(message).toBe("50 of 50 characters entered. No additional characters will be entered.");
-      message = component.generateCharacterLimitWarning(75, 50);
-      expect(message).toBe("75 of 50 characters entered. No additional characters will be entered.");
-    });
-  });
-  describe("generates intl messages", () => {
-    it("generates the added tag message", () => {
-      const component = new TagInput();
-      expect(component.generateTagAddedMessage("word")).toBe("word added.");
-    });
-    it("generates the already added tag message", () => {
-      const component = new TagInput();
-      expect(component.generateTagAlreadyAddedMessage("word")).toBe("word has already been added.");
-    });
-    it("configures messages", () => {
-      const component = new TagInput();
-      // defaults are in place
-      expect(component.componentMessages.addNewHelpText).toBe("Press the Enter or Comma key to add a new tag.");
-      expect(component.componentMessages.selectionHelpText).toBe("Search and select a tag.");
-      expect(component.componentMessages.maxTagsReached).toBe("No more tags can be added because the limit has been reached.");
-      expect(component.componentMessages.tagAreaInstructions).toBe("tag selection. Press Backspace or Delete to remove a tag.");
-      expect(component.componentMessages.tagsAdded).toBe("Tags added");
-      // handles partial replacement
-      component.messageConfig =
-        '{"tagAreaInstructions": "tagAreaInstructions replacement", "tagsAdded": "tagsAdded replacement"}';
-      expect(component.componentMessages.addNewHelpText).toBe("Press the Enter or Comma key to add a new tag.");
-      expect(component.componentMessages.selectionHelpText).toBe("Search and select a tag.");
-      expect(component.componentMessages.maxTagsReached).toBe("No more tags can be added because the limit has been reached.");
-      expect(component.componentMessages.tagAreaInstructions).toBe("tagAreaInstructions replacement");
-      expect(component.componentMessages.tagsAdded).toBe("tagsAdded replacement");
-      // handles full replacement
-      component.messageConfig =
-        '{"addNewHelpText": "addNewHelpText replacement", "selectionHelpText": "selectionHelpText replacement", "maxTagsReached": "maxTagsReached replacement", "tagAreaInstructions": "tagAreaInstructions replacement", "tagsAdded": "tagsAdded replacement"}';
-      expect(component.componentMessages.addNewHelpText).toBe("addNewHelpText replacement");
-      expect(component.componentMessages.selectionHelpText).toBe("selectionHelpText replacement");
-      expect(component.componentMessages.maxTagsReached).toBe("maxTagsReached replacement");
-      expect(component.componentMessages.tagAreaInstructions).toBe("tagAreaInstructions replacement");
-      expect(component.componentMessages.tagsAdded).toBe("tagsAdded replacement");
-    });
-  });
-});
-//type table acceptance criteria
-//x table is rendered under input segment
-//x magnifying glass icon is added for both types
-//x styling of the tag-limit area is updated
-//x add new max-tags limit reached message
-//x table rows are zebra-striped
-//x hover state is darker
-//x selected options have new selected style (blueish with saturated border)
-//x -> selected rows styling is overidden by hover styling
-//x locked rows have the lock icon to the left of the first column text
-//x selected locked tags are darker than the rest, and have lock icon instead of delete x
-//x identical names have identical looking tags
-//x table content scrolls while the input segment stays in place
-//x entering text filters across all columns
-//x when no options pass filter, message is shown
-//x user can select or deselect tags by activating the row (Enter & click)
-//x the text in col1 is what is displayed in the tag
-//x component allows for 2-4 columns
-//x component has no character count
-//// Properties of wm-tag-input
-//x selected-tags: in table variant, list of id of the table rows that are selected
-//x tag-input-type: defaults to "dropdown", used "table" for table variant
-//x col-headers: comma separated list of column headers. Required
-//x col-widths: comma separated list of css width values. If a value is blank, it fills rest of available space
-//x -> (defaults to a table cell with no width e.g. "50%,134px,,10%")
-//x col-wrap: comma separated list of values either trunc or wrap. defaults to wrap for all columns, or wrap for all unspecified columns.
-//x -> e.g. if a table has 4 columns, "trunc" is treated as "trunc,wrap,wrap,wrap"
-//// Properties of wm-tag-input-row
-//x id: used to link the row to the tag. the id is what is added to the selected-tags property
-//x col1, col2, col3, col4: the values for each column of the row
-//x locked: whether or not the row can be activated. selected and unselected rows can be locked
-//x -> aria-describedby or similar indicates locked status
-//x input field has combobox role
-//x table has grid role
-//x table has aria-multiselectable
-//x rows have role row
-//x cells have role gridcell
-//x header cells have role columnheader
-//x aria-expanded will NOT be used
-//x table does not have a tab-stop
-//x up, down, left and right arrows navigate the table cells
-//x navigation is handled with aria-activedescendant, true focus remains on the input field
-//x down arrow from the input field navigates to the first row, up arrow goes to the last row
-//x while a cell is "focused" or hovered, a tooltip appears if the text is truncated
-//x cell "focus" is indicated by an inwards purple shadow, like the navigation component
-//x on load, pre-selected tags are handled
-//x while typing, faux focus is cleared
-//x if max-tags reached, make sure focus goes to list instead of input
-//x tooltip disappears on scroll
-// should activating a locked element sr-alert the user?
-// should typing that returns no results sr-alert the user?