@watermarkinsights/ripple 4.3.0 → 4.4.0-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.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.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>',
+    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();
     });
-    expect(page.root).toMatchSnapshot();
-  });
 });

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

@@ -48,12 +48,10 @@
   --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);