@watermarkinsights/ripple 4.2.0-1 → 4.2.0

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -1,108 +1,108 @@
 import { Host, h } from "@stencil/core";
 import { generateId } from "../../../global/functions";
 export class TabPanel {
-    constructor() {
-        this.active = false;
-        this.tabId = "";
-    }
-    componentWillLoad() {
-        !this.el.id && this.el.setAttribute("id", generateId());
-    }
-    componentDidLoad() {
-        this.tabPanelLoaded.emit({ tabId: this.tabId });
-    }
-    toggleTabbingOn() {
-        this.el.classList.add("user-is-tabbing");
-    }
-    toggleTabbingOff() {
-        this.el.classList.remove("user-is-tabbing");
-    }
-    render() {
-        return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
-    }
-    static get is() { return "wm-tab-panel"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-tab-panel.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-tab-panel.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "active": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates whether the panel should be displayed or not."
-                },
-                "attribute": "active",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "tabId": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The id of the panel, linked to a tabItem in the tablist."
-                },
-                "attribute": "tab-id",
-                "reflect": false,
-                "defaultValue": "\"\""
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "tabPanelLoaded",
-                "name": "tabPanelLoaded",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ tabId: string }",
-                    "resolved": "{ tabId: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "toggleTabbingOn",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "toggleTabbingOff",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
+  constructor() {
+    this.active = false;
+    this.tabId = "";
+  }
+  componentWillLoad() {
+    !this.el.id && this.el.setAttribute("id", generateId());
+  }
+  componentDidLoad() {
+    this.tabPanelLoaded.emit({ tabId: this.tabId });
+  }
+  toggleTabbingOn() {
+    this.el.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.el.classList.remove("user-is-tabbing");
+  }
+  render() {
+    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+  }
+  static get is() { return "wm-tab-panel"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the panel should be displayed or not."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tabId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The id of the panel, linked to a tabItem in the tablist."
+        },
+        "attribute": "tab-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabPanelLoaded",
+        "name": "tabPanelLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "toggleTabbingOn",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "toggleTabbingOff",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/wm-tabs/wm-tabs.e2e.js

@@ -1,9 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("wm-tab-item", () => {
-    let page; //, mock: any;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en' dir="ltr">
+  let page; //, mock: any;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<html lang='en' dir="ltr">
       <head><title>Page</title></head>
         <body>
           <main style="height: 3000px">
@@ -19,80 +19,80 @@ describe("wm-tab-item", () => {
           </main>
         </body>
       </html>`);
-        await page.evaluate(async () => {
-            const container = document.querySelector("#tab-container");
-            container.addEventListener("wmTabSelected", (ev) => {
-                const tabList = document.querySelector("#test-tab");
-                tabList.selectedTab = ev.detail.tabId;
-            });
-        });
-        await page.waitForChanges();
-    });
-    it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
-        const tabItem = await page.find("wm-tab-item");
-        const listItem = await tabItem.shadowRoot.querySelector("li");
-        expect(listItem).not.toBeNull();
-        expect(listItem.getAttribute("role")).toEqual("presentation");
-        const link = await tabItem.shadowRoot.querySelector("a");
-        expect(link).not.toBeNull();
-        expect(link.getAttribute("role")).toEqual("tab");
-    });
-    it("has an aria-controls attribute that references a tab panel on the page that has the same tabId", async () => {
-        //Uncontrolled variant
-        const firstTabUncontrolled = await page.find("#first-tab");
-        const firstLinkUncontrolled = await firstTabUncontrolled.shadowRoot.querySelector("#tab-link-first");
-        const firstLinkRefUncontrolled = await firstLinkUncontrolled.getAttribute("aria-controls");
-        expect(firstLinkRefUncontrolled).toEqual("dynamic-panel");
-    });
-    it("emits an event when clicked or enter is pressed", async () => {
-        const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
-        jest.restoreAllMocks();
-    });
-    it("has an aria-selected attribute set to true when it is selected", async () => {
-        await page.keyboard.press("Tab"); // To next tab component
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
-        const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
-        expect(selectedStatusUncontrolled).toBe("true");
-    });
-    it("renders an unordered list with a role of tablist", async () => {
-        const ulElement = await page.find("wm-tab-list >>> ul");
-        expect(ulElement).not.toBeNull();
-        expect(ulElement.getAttribute("role")).toEqual("tablist");
-    });
-    it("has a role of tabpanel", async () => {
-        const tabPanel = await page.find("wm-tab-panel");
-        expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
-    });
-    it("displays if the tab item with the same tabId is selected", async () => {
-        const dynamicPanel = await page.find("#dynamic-panel");
-        expect(dynamicPanel).not.toHaveClass("tab-hidden");
-    });
-    it("does not display if the tab item with the same tabId is not selected", async () => { });
-    it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
-        //uncontrolled -- tab panel attribute is dynamic
-        let changingTabPanel = await page.find("#dynamic-panel");
-        const label = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(label).toEqual("tab-link-first");
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        await secondTabItemUncontrolled.click();
-        await page.waitForChanges();
-        changingTabPanel = await page.find("#dynamic-panel");
-        const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(newLabel).toEqual("tab-link-second");
-    });
-    it("switches to a dropdown at the appropriate breakpoint", async () => {
-        const comp = await page.find("wm-tab-list");
-        expect(comp).toMatchSnapshot();
-        page.setViewport({ width: 300, height: 900 });
-        await page.waitForChanges();
-        expect(comp).toMatchSnapshot();
+    await page.evaluate(async () => {
+      const container = document.querySelector("#tab-container");
+      container.addEventListener("wmTabSelected", (ev) => {
+        const tabList = document.querySelector("#test-tab");
+        tabList.selectedTab = ev.detail.tabId;
+      });
     });
+    await page.waitForChanges();
+  });
+  it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
+    const tabItem = await page.find("wm-tab-item");
+    const listItem = await tabItem.shadowRoot.querySelector("li");
+    expect(listItem).not.toBeNull();
+    expect(listItem.getAttribute("role")).toEqual("presentation");
+    const link = await tabItem.shadowRoot.querySelector("a");
+    expect(link).not.toBeNull();
+    expect(link.getAttribute("role")).toEqual("tab");
+  });
+  it("has an aria-controls attribute that references a tab panel on the page that has the same tabId", async () => {
+    //Uncontrolled variant
+    const firstTabUncontrolled = await page.find("#first-tab");
+    const firstLinkUncontrolled = await firstTabUncontrolled.shadowRoot.querySelector("#tab-link-first");
+    const firstLinkRefUncontrolled = await firstLinkUncontrolled.getAttribute("aria-controls");
+    expect(firstLinkRefUncontrolled).toEqual("dynamic-panel");
+  });
+  it("emits an event when clicked or enter is pressed", async () => {
+    const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("Enter");
+    expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
+    jest.restoreAllMocks();
+  });
+  it("has an aria-selected attribute set to true when it is selected", async () => {
+    await page.keyboard.press("Tab"); // To next tab component
+    await page.keyboard.press("ArrowRight");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    let secondTabItemUncontrolled = await page.find("#second-tab");
+    const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
+    const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
+    expect(selectedStatusUncontrolled).toBe("true");
+  });
+  it("renders an unordered list with a role of tablist", async () => {
+    const ulElement = await page.find("wm-tab-list >>> ul");
+    expect(ulElement).not.toBeNull();
+    expect(ulElement.getAttribute("role")).toEqual("tablist");
+  });
+  it("has a role of tabpanel", async () => {
+    const tabPanel = await page.find("wm-tab-panel");
+    expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
+  });
+  it("displays if the tab item with the same tabId is selected", async () => {
+    const dynamicPanel = await page.find("#dynamic-panel");
+    expect(dynamicPanel).not.toHaveClass("tab-hidden");
+  });
+  it("does not display if the tab item with the same tabId is not selected", async () => { });
+  it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
+    //uncontrolled -- tab panel attribute is dynamic
+    let changingTabPanel = await page.find("#dynamic-panel");
+    const label = await changingTabPanel.getAttribute("aria-labelledby");
+    expect(label).toEqual("tab-link-first");
+    let secondTabItemUncontrolled = await page.find("#second-tab");
+    await secondTabItemUncontrolled.click();
+    await page.waitForChanges();
+    changingTabPanel = await page.find("#dynamic-panel");
+    const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
+    expect(newLabel).toEqual("tab-link-second");
+  });
+  it("switches to a dropdown at the appropriate breakpoint", async () => {
+    const comp = await page.find("wm-tab-list");
+    expect(comp).toMatchSnapshot();
+    page.setViewport({ width: 300, height: 900 });
+    await page.waitForChanges();
+    expect(comp).toMatchSnapshot();
+  });
 });

package/dist/collection/components/wm-tabs/wm-tabs.spec.js

@@ -2,11 +2,11 @@ import { newSpecPage } from "@stencil/core/testing";
 import { TabList } from "./wm-tab-list/wm-tab-list";
 import { TabItem } from "./wm-tab-item/wm-tab-item";
 describe("wm-tabs", () => {
-    it("builds", async () => {
-        const page = await newSpecPage({
-            components: [TabList, TabItem],
-            html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
-        });
-        expect(page.root).toMatchSnapshot();
+  it("builds", async () => {
+    const page = await newSpecPage({
+      components: [TabList, TabItem],
+      html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
     });
+    expect(page.root).toMatchSnapshot();
+  });
 });

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

@@ -48,10 +48,12 @@
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
-  --wmcolor-taginput-tag-background-focus: var(--wmcolor-palelilacgray-dark); /* EXCEPTION */
+  --wmcolor-taginput-tag-background-focus: var(--wmcolor-palelilacgray-dark);
+  /* EXCEPTION */
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
-  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
+  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray);
+  /* EXCEPTION */
   --wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
   --wmcolor-taginput-tag-text: var(--wmcolor-text);
   --wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-button-background-icononly-hover);