npm - @watermarkinsights/ripple - Versions diffs - 5.10.0-14 → 5.10.0-16 - Mend

@watermarkinsights/ripple 5.10.0-14 → 5.10.0-16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (432) hide show

package/dist/collection/components/wm-tag-input/wm-tag-input.e2e.js ADDED Viewed

@@ -0,0 +1,204 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-tag-input", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, input;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'>
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        el = await page.find("wm-tag-input");
+        input = await page.find("wm-tag-input >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it.skip("uses Enter and Comma to add a new tag", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'></wm-tag-input>
+      </main></body></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("Hello");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[0].textContent).toBe("Hello");
+        await page.keyboard.type("Apple");
+        await page.waitForChanges();
+        await page.keyboard.type(",");
+        await page.waitForChanges();
+        tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[1].textContent).toBe("Apple");
+        // it clears the input when adding a tag
+        const input = await page.find("wm-tag-input >>> input");
+        const inputValue = await input.getProperty("value");
+        expect(inputValue).toBe("");
+        // it includes user-added options in the dropdown
+        const listItems = await page.findAll("wm-tag-input >>> .option");
+        expect(listItems[0].textContent).toBe("Apple");
+        expect(listItems[1].textContent).toBe("Hello");
+        // it shows tags in the order they are added
+        await page.keyboard.type("Third");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[0].textContent).toBe("Hello");
+        expect(tags[1].textContent).toBe("Apple");
+        expect(tags[2].textContent).toBe("Third");
+    });
+    it("displays column1 text instead of id for table variant", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input
+        tag-input-type="table"
+        label="Share Access"
+        col-headers="Name,Email,Role"
+        col-widths=",40%,20%"
+        col-wrap="wrap,trunc,wrap"
+      >
+        <wm-tag-option selected id="johnprice1" col1="John Price" col2="john.price1@university.edu" col3="Admin" locked></wm-tag-option>
+        <wm-tag-option id="johnprice2" col1="John Price" col2="john.price2@university.edu" col3="Faculty"></wm-tag-option>
+        <wm-tag-option id="samsandwich" col1="Sam Sandwich" col2="sam.sandwich@university.edu" col3="Faculty"></wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let tagTextList = await page.findAll("wm-tag-input >>> .tag-text");
+        expect(tagTextList[0].textContent).toBe("John Price");
+    });
+    it("does not allow adding tags if add-new prop is false", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label' add-new="false"></wm-tag-input>
+      </main></body></html>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("New Tag");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags.length).toBe(0);
+    });
+    it("does not allow duplicate tags to be added", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'>
+        <wm-tag-option selected>one</wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags.length).toBe(1);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("one");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Delete");
+        await page.keyboard.press("Delete");
+        await page.keyboard.press("Delete");
+        await page.waitForChanges();
+        // it is case insensitive
+        await page.keyboard.type("OnE");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(tags.length).toBe(1);
+    });
+    it("opens dropdown when input field is focused", async () => {
+        const dropdown = await page.find("wm-tag-input >>> .dropdown-wrapper");
+        expect(dropdown).not.toHaveClass("open");
+        await input.focus();
+        expect(dropdown).toHaveClass("open");
+    });
+    it("closes dropdown", async () => {
+        //
+        // when pressing escape twice
+        // when clicking outside of component
+        // when tabbing out of component
+        // not while tabbing inside of component
+    });
+    it("renders the add new button when typing in the input", async () => { });
+    it("removes only user-added tags from the dropdown", async () => {
+        // Removing a pre-existing tag will have it still in the dropdown
+        // removing a user-added tag will remove it from the dropdown
+    });
+    it("navigates the dropdown with arrow keys", async () => {
+        let options = await page.findAll("wm-tag-input >>> .option");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).toHaveClass("focused");
+    });
+    it("navigates tags with left and right keys", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'>
+        <wm-tag-option selected>One</wm-tag-option>
+        <wm-tag-option selected>Two</wm-tag-option>
+        <wm-tag-option selected>Three</wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(tags[0]).toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        expect(tags[0]).not.toHaveClass("focused");
+        expect(tags[1]).toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        expect(tags[0]).toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        expect(tags[0]).not.toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).toHaveClass("focused");
+    });
+});

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

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '51341c91480a0bd8775351040958472ca3b8e6f4', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd5093793857d3acaa0804a04ad4700fbf7f7fb86', class: "label-wrapper" }, h("label", { key: 'c93f0345c518adb313f8f5327059075023184c56', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '9f869a28e6527a81de52187dc8c08c27dba9963b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '181fb132ea36b1d4110350d33c4a2f4d05af068c', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '77467753c43ff806af4ac24471fafe4f7eef8e9d', class: "upper-row" }, h("div", { key: '59f80d6730140201dc2f3e9d4f314536fa63cd1e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'ee08bc08d3758af611737d1a161d7966d10c5dae', 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) => {
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${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: '6b5e4f09d0b3de33a0c049cc0f1331c0d3c2a680', 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) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} 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: '5fec93cbea741cab80bdad46097f3b2ed7538d8d', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'cc343e8be2c9ad89b7187b4fef79f18c6ac30cda', id: "info", class: "info-text" }, this.info)), h("div", { key: '0079bb76abad9795adf09ca24d5a51e001506ea1', id: "error" }, this.errorMessage), h("div", { key: 'a1d74cef536f2431ef9c3e3c1ae127f6b45faf23', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { 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"; }

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

@@ -0,0 +1,195 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TagInput } from "./wm-tag-input";
+import { TagOption } from "./wm-tag-option/wm-tag-option";
+import * as globalFuncs from "../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock observers
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+global.MutationObserver = 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, TagOption],
+            html: `<wm-tag-input id="input" label="label">
+        <wm-tag-option>one</wm-tag-option>
+        <wm-tag-option>two</wm-tag-option>
+        <wm-tag-option>three</wm-tag-option>
+        <wm-tag-option>four</wm-tag-option>
+      </wm-tag-input>`,
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label" info="info text">
+        <wm-tag-option selected>one</wm-tag-option>
+        <wm-tag-option>two</wm-tag-option>
+        <wm-tag-option selected>three</wm-tag-option>
+        <wm-tag-option>four</wm-tag-option>
+      </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, TagOption],
+            html: `<wm-tag-input label="label" add-new="false">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        const el = page.root;
+        let helpText = await el.shadowRoot.querySelector(".help-text");
+        expect(helpText.textContent).toBe("Search and select a tag.");
+        // editable with options
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </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, TagOption],
+            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">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+    </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, TagOption],
+            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, TagOption],
+            html: `<wm-tag-input label="label" add-new="false">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Search and select a tag");
+    });
+    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 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.");
+        });
+    });
+});

package/dist/collection/components/wm-textarea/wm-textarea.css CHANGED Viewed

@@ -58,7 +58,7 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-add-tag:before {
+.svg-icon.svg-add-outline:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
 }
@@ -74,10 +74,6 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
 }
-.svg-icon.svg-apps:before {
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16,20H20V16H16M16,14H20V10H16M10,8H14V4H10M16,8H20V4H16M10,14H14V10H10M4,14H8V10H4M4,20H8V16H4M10,20H14V16H10M4,8H8V4H4V8Z'/%3E%3C/svg%3E%0A");
-}
 .svg-icon.svg-attach:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
@@ -202,6 +198,10 @@
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
 }
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
 .svg-icon.svg-restore:before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");

package/dist/collection/components/wm-textarea/wm-textarea.e2e.js ADDED Viewed

@@ -0,0 +1,41 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-textarea", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, textarea;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-textarea label='label' character-limit="20"></wm-textarea>
+      </main></body></html>`);
+        el = await page.find("wm-textarea");
+        textarea = await page.find("wm-textarea >>> textarea");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("updates character count on text entry", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        const characterCount = await page.find("wm-textarea >>> .character-count");
+        expect(characterCount.textContent).toBe("4/20");
+    });
+    it("emits event on value change", async () => {
+        const eventSpy = await el.spyOnEvent("wmTextareaValueChanged");
+        await el.focus();
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        expect(eventSpy).toHaveReceivedEventTimes(0);
+        await page.keyboard.press("Tab");
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+        await el.focus();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // expect event to still have fired only once, because value has not changed
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/wm-textarea/wm-textarea.js CHANGED Viewed

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'da640972074f4fc3559d5f96d38b67ca6e318344', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e94d0f36b0b3227b373ed28249836de792c1eab6', class: "label-wrapper" }, h("label", { key: 'cb23b31a548b758fedf30d48921ea5a9dc6d448a', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '7ff30e1c193960fda58d12d7dd86d1d24c410a29', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '497e378c7f6276a8bf19055385caac60689bc0d7', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9a8ff59bb09e83999547ed1f4f2206eef4050a05', class: "inner-wrapper" }, h("div", { key: '6359e4f7919a6414b49d146b98cedc5bcdc44e4d', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '411f5b3abbd1a0dcde085b5b18b0738ea7f0929f', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'aa2ce03ed1a2ff9731b898c7bc1e71741f3bd780', id: "info", class: "info" }, this.info)), h("div", { key: 'd90b9eca7192178d8267ddaa6ff4d7879d15f349', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'f226ad7a61e0f7cfef69f98bcc1b03ee75fa06c8', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.spec.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "./wm-textarea";
+// mock observers
+// global.ResizeObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+// global.MutationObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+describe("textarea", () => {
+    let page;
+    let component;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label"></wm-textarea>`,
+        });
+        component = page.root;
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" disabled required-field></wm-textarea>`,
+        });
+        const textarea = await page.root.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("aria-describedby", "info error");
+        expect(textarea).toHaveAttribute("disabled");
+        const error = await page.root.shadowRoot.querySelector("#error");
+        expect(error).toEqualAttribute("aria-live", "assertive");
+        const livePolite = await page.root.shadowRoot.querySelector("#live-polite");
+        expect(livePolite).toEqualAttribute("aria-live", "polite");
+    });
+    it("sets initial value from textcontent", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label">Initial value</wm-textarea>`,
+        });
+        component = page.root;
+        expect(component.value).toBe("Initial value");
+    });
+    it("renders character limit", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" character-limit="20">Hello</wm-textarea>`,
+        });
+        component = page.root;
+        const characterLimitArea = await page.root.shadowRoot.querySelector(".character-count");
+        expect(characterLimitArea.textContent).toBe("5/20");
+    });
+    it("properties override height and width", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" input-width="200px" input-height="300px"></wm-textarea>`,
+        });
+        component = page.root;
+        const textarea = await component.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("style", "height: 300px;");
+        const widthWrapper = await component.shadowRoot.querySelector(".inputfield-wrapper");
+        expect(widthWrapper).toEqualAttribute("style", "width: 200px;");
+    });
+    it("displays info and error-message properties", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" info="example info text" error-message="example error text"></wm-textarea>`,
+        });
+        component = page.root;
+        const info = await component.shadowRoot.querySelector("#info");
+        expect(info.textContent).toBe("example info text");
+        const error = await component.shadowRoot.querySelector("#error");
+        expect(error.textContent).toBe("example error text");
+    });
+});