@watermarkinsights/ripple 5.12.0 → 5.14.0-alpha.0

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

@@ -1,195 +0,0 @@
-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-tag-input/wm-tag-option/wm-tag-option.js

@@ -1,243 +0,0 @@
-import { generateId } from "../../../global/functions";
-export class TagOption {
-    constructor() {
-        this.selected = false;
-        this.locked = false;
-        this.col1 = undefined;
-        this.col2 = undefined;
-        this.col3 = undefined;
-        this.col4 = undefined;
-    }
-    async emitSelectedEvent() {
-        this.wmTagOptionSelected.emit();
-    }
-    async emitDeselectedEvent() {
-        this.wmTagOptionDeselected.emit();
-    }
-    componentWillLoad() {
-        if (!this.el.id) {
-            this.el.id = generateId();
-        }
-    }
-    handleSelected() {
-        // to update tag input when options state change.
-        this.selected ? this.privTagOptionSelected.emit() : this.privTagOptionDeselected.emit();
-    }
-    static get is() { return "wm-tag-option"; }
-    static get properties() {
-        return {
-            "selected": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "selected",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "locked": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "locked",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "col1": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "col1",
-                "reflect": false
-            },
-            "col2": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "col2",
-                "reflect": false
-            },
-            "col3": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "col3",
-                "reflect": false
-            },
-            "col4": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "col4",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "privTagOptionSelected",
-                "name": "privTagOptionSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "privTagOptionDeselected",
-                "name": "privTagOptionDeselected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "wmTagOptionSelected",
-                "name": "wmTagOptionSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmTagOptionDeselected",
-                "name": "wmTagOptionDeselected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "emitSelectedEvent": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "emitDeselectedEvent": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selected",
-                "methodName": "handleSelected"
-            }];
-    }
-}