@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -1,218 +1,219 @@
 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();
+    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}`);
         }
-        break;
-      case "Tab":
+    }
+    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();
+                }
+        }
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleClick(ev) {
         if (this.isOpen) {
-          this.close();
+            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();
+            }
         }
     }
-  }
-  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
+    open() {
+        hideTooltip();
+        this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
+        this.isOpen = true;
         this.announceToggletip();
-      }
-      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"
+    }
+    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\""
             }
-          }
-        },
-        "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
-      }];
-  }
+        };
+    }
+    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>`,
+    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");
     });
-  });
-  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
+    // });
 });