@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.2

package/dist/collection/components/selects/wm-option/wm-option.e2e.js

@@ -1,22 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-option", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent("<wm-select id='test' label='select something'><wm-option id='first' disabled onClick='action()'>First option</wm-option><wm-option id='second' disabled>Second option</wm-option><wm-option id='third'>Third option</wm-option></wm-select><script>function action() {document.getElementById('second').textContent = 'the function ran!'}</script>");
-    });
-    // RENDER
-    it("renders", async () => {
-        const element = await page.find("wm-option");
-        expect(element).not.toBeNull();
-    });
-    it("prevents action on disabled option", async () => {
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter"); // dropdown opens
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // Enter on disabled option
-        await page.waitForChanges();
-        let changedOption = await page.find("wm-option#second");
-        expect(changedOption.textContent).toEqual("Second option"); // the function that shouldn't run replaces this text by: "the function ran!"
-    });
-});

package/dist/collection/components/selects/wm-option/wm-option.js

@@ -1,530 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class Option {
-    constructor() {
-        this.value = undefined;
-        this.subinfo = undefined;
-        this.disabled = false;
-        this.selected = false;
-        this.focused = false;
-        this.searchTerm = "";
-    }
-    get hostClasses() {
-        let classes = [];
-        if (this.subinfo) {
-            classes.push("hassubinfo");
-        }
-        if (this.parentOptionList.multiple) {
-            classes.push("multi-option");
-        }
-        if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
-            classes.push("filtered-out");
-        }
-        return classes.join(" ");
-    }
-    get parentOptionList() {
-        if (this.el.classList.contains("clone")) {
-            return this.el.closest("priv-option-list");
-        }
-        else {
-            return this.el.assignedSlot.closest("priv-option-list");
-        }
-    }
-    handleKeydown(ev) {
-        switch (ev.key) {
-            case "ArrowUp":
-                ev.preventDefault();
-                this.wmKeyUpPressed.emit(this.el);
-                break;
-            case "ArrowDown":
-                ev.preventDefault();
-                this.wmKeyDownPressed.emit(this.el);
-                break;
-            case "Enter":
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.el.click();
-                    this.wmEnterKeyPressed.emit(this.el);
-                }
-                break;
-            case "Escape":
-                ev.preventDefault();
-                ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal
-                this.wmEscKeyPressed.emit();
-                break;
-            case "Home":
-                ev.preventDefault();
-                this.wmHomeKeyPressed.emit();
-                break;
-            case "End":
-                ev.preventDefault();
-                this.wmEndKeyPressed.emit();
-                break;
-            case "ArrowLeft":
-                ev.preventDefault();
-                this.wmKeyLeftPressed.emit();
-                break;
-            default:
-                if (ev.key.length === 1) {
-                    ev.preventDefault();
-                    // emit for single characters ("a","l","5", etc), avoid others ("shift", "control", etc)
-                    this.wmLetterPressed.emit({ letter: ev.key, optionEl: this.el });
-                }
-        }
-    }
-    handleSelection() {
-        // using ev.detail because ev.target returns the wm-select for clone options
-        if (!this.disabled) {
-            if (this.el.classList.contains("clone")) {
-                this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
-            }
-            else {
-                if (this.parentOptionList.multiple) {
-                    this.selected
-                        ? this.wmOptionDeselected.emit(this.el)
-                        : this.wmOptionSelected.emit(this.el);
-                }
-                else {
-                    this.wmOptionSelected.emit(this.el);
-                }
-            }
-        }
-    }
-    handleBlur(ev) {
-        this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });
-    }
-    syncAriaSelected() {
-        // this function only keeps the aria-selected attr in sync with the selected prop
-        // all the logic for selecting / deselecting happens in the parent wm-select
-        this.selected ? this.el.setAttribute("aria-selected", "true") : this.el.setAttribute("aria-selected", "false");
-    }
-    syncAriaDisabled() {
-        this.disabled ? this.el.setAttribute("aria-disabled", "true") : this.el.removeAttribute("aria-disabled");
-    }
-    updateDisabledOnClick() {
-        if (this.disabled && this.el.onclick) {
-            this.onClickFunc = this.el.onclick;
-            this.el.onclick = null;
-        }
-        else if (!this.disabled && this.onClickFunc) {
-            this.el.onclick = this.onClickFunc;
-        }
-    }
-    handleSearch(ev) {
-        // filter is case-insensitive, so
-        this.searchTerm = ev.detail.searchTerm.toLowerCase();
-        if (this.searchTerm && this.el.textContent.toLowerCase().includes(this.searchTerm)) {
-            // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as "hel lo"
-            // aria-hidden and sr-only is used to circumvent this
-            // Because setting innerHTML unescapes < > and treats them as html tags,
-            // the option text must be seperated into normal, bold, normal sections then set via textContent
-            const matchIndex = this.el.textContent.toLowerCase().indexOf(this.searchTerm);
-            const beforeMatch = this.el.textContent.slice(0, matchIndex);
-            const duringMatch = this.el.textContent.slice(matchIndex, matchIndex + this.searchTerm.length);
-            const afterMatch = this.el.textContent.slice(matchIndex + this.searchTerm.length);
-            const bgSpan = document.createElement("span");
-            bgSpan.textContent = beforeMatch;
-            const midSpan = document.createElement("strong");
-            midSpan.textContent = duringMatch;
-            const endSpan = document.createElement("span");
-            endSpan.textContent = afterMatch;
-            this.textEl.innerHTML = ``;
-            this.textEl.appendChild(bgSpan);
-            this.textEl.appendChild(midSpan);
-            this.textEl.appendChild(endSpan);
-        }
-        else {
-            this.textEl.textContent = this.el.textContent;
-        }
-    }
-    componentWillLoad() {
-        this.syncAriaSelected();
-        this.syncAriaDisabled();
-        this.updateDisabledOnClick();
-        this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
-    }
-    render() {
-        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
-    }
-    static get is() { return "wm-option"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-option.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-option.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "null | string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "value",
-                "reflect": false
-            },
-            "subinfo": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "subinfo",
-                "reflect": false,
-                "defaultValue": "undefined"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "selected",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "focused": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "focused",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "searchTerm": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmOptionSelected",
-                "name": "wmOptionSelected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmOptionDeselected",
-                "name": "wmOptionDeselected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "intCloneClicked",
-                "name": "intCloneClicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmKeyUpPressed",
-                "name": "wmKeyUpPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmKeyDownPressed",
-                "name": "wmKeyDownPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmKeyLeftPressed",
-                "name": "wmKeyLeftPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "wmEscKeyPressed",
-                "name": "wmEscKeyPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmHomeKeyPressed",
-                "name": "wmHomeKeyPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmEndKeyPressed",
-                "name": "wmEndKeyPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmEnterKeyPressed",
-                "name": "wmEnterKeyPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "HTMLWmOptionElement",
-                    "resolved": "HTMLWmOptionElement",
-                    "references": {
-                        "HTMLWmOptionElement": {
-                            "location": "global",
-                            "id": "global::HTMLWmOptionElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmLetterPressed",
-                "name": "wmLetterPressed",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ optionEl: HTMLElement; letter: string }",
-                    "resolved": "{ optionEl: HTMLElement; letter: string; }",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmOptionBlurred",
-                "name": "wmOptionBlurred",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ relatedTarget: EventTarget | null }",
-                    "resolved": "{ relatedTarget: EventTarget | null; }",
-                    "references": {
-                        "EventTarget": {
-                            "location": "global",
-                            "id": "global::EventTarget"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selected",
-                "methodName": "syncAriaSelected"
-            }, {
-                "propName": "disabled",
-                "methodName": "syncAriaDisabled"
-            }, {
-                "propName": "disabled",
-                "methodName": "updateDisabledOnClick"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleSelection",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "blur",
-                "method": "handleBlur",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/selects/wm-option/wm-option.spec.js

@@ -1,63 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { Option } from "./wm-option";
-import { Select } from "../wm-select/wm-select";
-// mock MutationObserver
-global.MutationObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
-describe("wm-option", () => {
-    it("builds", async () => {
-        const page = await newSpecPage({
-            components: [Option],
-            html: `<wm-select label="abel">
-      <wm-option>1</wm-option>
-      <wm-option value="second">2</wm-option>
-      </wm-select>`,
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-    it("has the role of option", async () => {
-        const page = await newSpecPage({
-            components: [Option],
-            html: `<wm-select label="label">
-      <wm-option>1</wm-option>
-      <wm-option value="second">2</wm-option>
-      </wm-select>`,
-        });
-        expect(page.root).toEqualAttribute("role", "option");
-    });
-    it("returns the value", async () => {
-        // if devs set the value attribute or property,
-        // the component should return it on comp.value
-        const page = await newSpecPage({
-            components: [Select, Option],
-            html: `<wm-select label="abel">
-      <wm-option>1</wm-option>
-      <wm-option value="second">2</wm-option>
-      </wm-select>`,
-        });
-        const select = page.root;
-        const options = select.querySelectorAll("wm-option");
-        expect(options[0].value).toBeUndefined();
-        expect(options[1].value).toBe("second");
-    });
-    it("handles disabled onClick function", async () => {
-        const page = await newSpecPage({
-            components: [Option],
-            html: `<wm-select label="label">
-      <wm-option>1</wm-option>
-      <wm-option value="second">2</wm-option>
-      </wm-select>`,
-        });
-        const menuItem = page.root;
-        const onClickFunc = () => console.log("Message");
-        menuItem.onclick = onClickFunc;
-        expect(menuItem.onclick).toEqual(onClickFunc);
-        menuItem.disabled = true;
-        expect(menuItem.onclick).toBe(null);
-        menuItem.disabled = false;
-        expect(menuItem.onclick).toEqual(onClickFunc);
-    });
-});