@watermarkinsights/ripple 4.2.0-0 → 4.2.0

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -1,219 +1,218 @@
 import { Host, h } from "@stencil/core";
 import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, } from "../../global/functions";
 export class Toggletip {
-    constructor() {
-        this.tooltipMessage = intl.formatMessage({
-            id: "toggletip.moreInformation",
-            defaultMessage: "More information",
-        });
-        this.label = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = "bottom-right";
-        this.isOpen = false;
-        this.isTabbing = false;
-    }
-    componentWillLoad() {
-        const validTooltipPlacement = [
-            "top",
-            "right",
-            "bottom",
-            "left",
-            "top-right",
-            "top-left",
-            "bottom-right",
-            "bottom-left",
-        ];
-        if (!this.label) {
-            console.error("wm-toggletip must have a label property");
-        }
-        if (!this.tooltip) {
-            console.error("wm-toggletip must have a tooltip property");
-        }
-        if (!validTooltipPlacement.includes(this.tooltipPosition)) {
-            console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPlacement}`);
-        }
-    }
-    handleKeydown(ev) {
-        switch (ev.key) {
-            case "Escape":
-                ev.preventDefault();
-                if (this.isOpen) {
-                    ev.stopPropagation(); // prevent closing modal if within one
-                    this.close();
-                }
-                break;
-            case "Tab":
-                if (this.isOpen) {
-                    this.close();
-                }
+  constructor() {
+    this.tooltipMessage = intl.formatMessage({
+      id: "toggletip.moreInformation",
+      defaultMessage: "More information",
+    });
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.tooltipPosition = "bottom-right";
+    this.isOpen = false;
+    this.isTabbing = false;
+  }
+  componentWillLoad() {
+    const validTooltipPlacement = [
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "top-right",
+      "top-left",
+      "bottom-right",
+      "bottom-left",
+    ];
+    if (!this.label) {
+      console.error("wm-toggletip must have a label property");
+    }
+    if (!this.tooltip) {
+      console.error("wm-toggletip must have a tooltip property");
+    }
+    if (!validTooltipPlacement.includes(this.tooltipPosition)) {
+      console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPlacement}`);
+    }
+  }
+  handleKeydown(ev) {
+    switch (ev.key) {
+      case "Escape":
+        ev.preventDefault();
+        if (this.isOpen) {
+          ev.stopPropagation(); // prevent closing modal if within one
+          this.close();
         }
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
-    }
-    handleClick(ev) {
+        break;
+      case "Tab":
         if (this.isOpen) {
-            if (ev.target === this.el || this.el.contains(ev.target)) {
-                // Re-announce if clicking any part of the component while open
-                this.announceToggletip();
-            }
-            else {
-                this.close();
-            }
+          this.close();
         }
     }
-    open() {
-        hideTooltip();
-        this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
-        this.isOpen = true;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleClick(ev) {
+    if (this.isOpen) {
+      if (ev.target === this.el || this.el.contains(ev.target)) {
+        // Re-announce if clicking any part of the component while open
         this.announceToggletip();
-    }
-    close() {
-        this.isOpen = false;
-        hideTooltip();
-    }
-    handleBlur() {
-        hideTooltip();
-        // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
-        this.liveRegionEl.innerHTML = "";
-    }
-    announceToggletip() {
-        this.liveRegionEl.innerHTML = "";
-        setTimeout(() => {
-            this.liveRegionEl.innerHTML = this.tooltip;
-        }, 10);
-    }
-    setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
-        // Vertical
-        if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
-            pos = pos.replace("bottom", "top");
-        }
-        else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
-            pos = pos.replace("top", "bottom");
-        }
-        // Horizontal
-        if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
-            pos = pos.replace("left", "right");
-        }
-        else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
-            pos = pos.replace("right", "left");
-        }
-    }
-    render() {
-        return (h(Host, null, h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => this.open(),
-            // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
-    }
-    static get is() { return "wm-toggletip"; }
-    static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-toggletip.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-toggletip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "tooltip": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "tooltip",
-                "reflect": false
-            },
-            "tooltipPosition": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "TooltipPlacement",
-                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
-                    "references": {
-                        "TooltipPlacement": {
-                            "location": "import",
-                            "path": "../../global/interfaces",
-                            "id": "src/global/interfaces.ts::TooltipPlacement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "tooltip-position",
-                "reflect": true,
-                "defaultValue": "\"bottom-right\""
+      }
+      else {
+        this.close();
+      }
+    }
+  }
+  open() {
+    hideTooltip();
+    this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
+    this.isOpen = true;
+    this.announceToggletip();
+  }
+  close() {
+    this.isOpen = false;
+    hideTooltip();
+  }
+  handleBlur() {
+    hideTooltip();
+    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
+    this.liveRegionEl.innerHTML = "";
+  }
+  announceToggletip() {
+    this.liveRegionEl.innerHTML = "";
+    setTimeout(() => {
+      this.liveRegionEl.innerHTML = this.tooltip;
+    }, 10);
+  }
+  setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
+    // Vertical
+    if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
+      pos = pos.replace("bottom", "top");
+    }
+    else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
+      pos = pos.replace("top", "bottom");
+    }
+    // Horizontal
+    if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
+      pos = pos.replace("left", "right");
+    }
+    else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
+      pos = pos.replace("right", "left");
+    }
+  }
+  render() {
+    return (h(Host, null, h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => this.open(),
+      // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
+      onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+  }
+  static get is() { return "wm-toggletip"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-toggletip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-toggletip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
+      },
+      "tooltipPosition": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "TooltipPlacement",
+          "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+          "references": {
+            "TooltipPlacement": {
+              "location": "import",
+              "path": "../../global/interfaces"
             }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "isTabbing": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsTabbing",
-                "method": "toggleTabbingOn",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "wmUserIsNotTabbing",
-                "method": "toggleTabbingOff",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "handleClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip-position",
+        "reflect": true,
+        "defaultValue": "\"bottom-right\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {},
+      "isTabbing": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeydown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsTabbing",
+        "method": "toggleTabbingOn",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "wmUserIsNotTabbing",
+        "method": "toggleTabbingOff",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,21 +1,21 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Toggletip } from "./wm-toggletip";
 describe("toggletip", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [Toggletip],
-            html: `<wm-toggletip label="More information" tooltip="Further explanation"></wm-toggletip>`,
-        });
-    });
-    it("builds", async () => {
-        expect(page.root).toMatchSnapshot();
-    });
-    it("has proper aria roles & attributes", async () => {
-        const liveRegion = page.root.shadowRoot.querySelector(".live-region");
-        const button = page.root.shadowRoot.querySelector("button");
-        expect(liveRegion).toEqualAttribute("role", "status");
-        expect(button).toEqualAttribute("type", "button");
-        expect(button).toEqualAttribute("aria-label", "More information");
+  let page;
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [Toggletip],
+      html: `<wm-toggletip label="More information" tooltip="Further explanation"></wm-toggletip>`,
     });
+  });
+  it("builds", async () => {
+    expect(page.root).toMatchSnapshot();
+  });
+  it("has proper aria roles & attributes", async () => {
+    const liveRegion = page.root.shadowRoot.querySelector(".live-region");
+    const button = page.root.shadowRoot.querySelector("button");
+    expect(liveRegion).toEqualAttribute("role", "status");
+    expect(button).toEqualAttribute("type", "button");
+    expect(button).toEqualAttribute("aria-label", "More information");
+  });
 });

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

@@ -1,70 +1,70 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-uploader", () => {
-    let page, input, label;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+  let page, input, label;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
       <wm-uploader button-text="Upload new document">
         <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
         <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
       </wm-uploader>
       </main></body></html>`);
-        input = await page.find("wm-uploader >>> input[type='file']");
-        label = await page.find("wm-uploader >>> label");
-        await page.waitForChanges();
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    it("renders the component", async () => {
-        expect(input).not.toBeNull();
-        expect(label).not.toBeNull();
-    });
-    it("focuses previous file when deleting with the keyboard", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    input = await page.find("wm-uploader >>> input[type='file']");
+    label = await page.find("wm-uploader >>> label");
+    await page.waitForChanges();
+  });
+  it("passes Axe checks", async () => {
+    const results = await new AxePuppeteer(page).analyze();
+    expect(results.violations.length).toBe(0);
+  });
+  it("renders the component", async () => {
+    expect(input).not.toBeNull();
+    expect(label).not.toBeNull();
+  });
+  it("focuses previous file when deleting with the keyboard", async () => {
+    page = await newE2EPage();
+    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
       <wm-uploader button-text="Upload new document">
         <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
         <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
       </wm-uploader>
       </main></body></html>`);
-        await page.waitForChanges();
-        let fileEls = await page.findAll("wm-file");
-        let secondFileEl = fileEls[1];
-        // inital check of file count
-        expect(fileEls.length).toBe(2);
-        // user must be tabbing for these changes to occur
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        // check focused element is last file, delete button
-        let activeElId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElId).toBe("file2");
-        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
-        expect(activeElButtonType).toBe("delete-button");
-        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
-        //@ts-ignore
-        mockFileDeleteEvent.target = secondFileEl;
-        secondFileEl.dispatchEvent(mockFileDeleteEvent);
-        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
-        await page.waitForChanges();
-        // confirm file has been removed
-        fileEls = await page.findAll("wm-file");
-        expect(fileEls.length).toBe(1);
-        // check focused element is last file, delete button
-        activeElId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElId).toBe("file1");
-        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
-        expect(activeElButtonType).toBe("delete-button");
-    });
-    //  it("disables the button dynamically", async () => {
-    // disabled when maxed out
-    // disabled while a file is uploading
-    // not disabled after upload
-    // });
+    await page.waitForChanges();
+    let fileEls = await page.findAll("wm-file");
+    let secondFileEl = fileEls[1];
+    // inital check of file count
+    expect(fileEls.length).toBe(2);
+    // user must be tabbing for these changes to occur
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    // check focused element is last file, delete button
+    let activeElId = await page.evaluate(() => document.activeElement.id);
+    expect(activeElId).toBe("file2");
+    let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+    expect(activeElButtonType).toBe("delete-button");
+    let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+    //@ts-ignore
+    mockFileDeleteEvent.target = secondFileEl;
+    secondFileEl.dispatchEvent(mockFileDeleteEvent);
+    await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+    await page.waitForChanges();
+    // confirm file has been removed
+    fileEls = await page.findAll("wm-file");
+    expect(fileEls.length).toBe(1);
+    // check focused element is last file, delete button
+    activeElId = await page.evaluate(() => document.activeElement.id);
+    expect(activeElId).toBe("file1");
+    activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+    expect(activeElButtonType).toBe("delete-button");
+  });
+  //  it("disables the button dynamically", async () => {
+  // disabled when maxed out
+  // disabled while a file is uploading
+  // not disabled after upload
+  // });
 });