@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -2,206 +2,206 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { generateId, intl } from "../../../global/functions";
 import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
 export class ProgressIndicator {
-  constructor() {
-    this.uid = generateId();
-    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-    this.slicesDetails = [];
-    this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
-    this.label = undefined;
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.showLegend = true;
-    this.isTabbing = false;
-    this.mode = undefined;
-    this.userIsNavigating = false;
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get chartDetails() {
-    return this.mode ? allChartsDetails[this.mode] : undefined;
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  get chartRoleDescription() {
-    return intl.formatMessage({
-      id: "chart.roleDescription",
-      defaultMessage: "Interactive chart",
-      description: "For screen readers only, a description clarifying the role of the chart widget",
-    });
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeydown(ev) {
-    handleChartKeydown.call(this, ev);
-  }
-  componentWillLoad() {
-    if (!this.label) {
-      console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    if (this.el.children.length !== 2) {
-      console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
-    }
-    // Listen to parent for initial mode, and future changes
-    this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
-  }
-  async handleSliceUpdate() {
-    await getDetails.call(this, this.mode);
-    forceUpdate(this.el);
-  }
-  handleModeUpdate() {
-    if (this.mode) {
-      getDetails.call(this, this.mode);
-    }
-  }
-  renderBarOrDoughnut() {
-    if (this.total > 0 && this.mode === "bar") {
-      return renderStackedBar.call(this, this.mode);
-    }
-    else {
-      return renderDoughnut.call(this, this.mode);
-    }
-  }
-  render() {
-    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
-  }
-  static get is() { return "wm-progress-indicator"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-progress-indicator.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-progress-indicator.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
-      },
-      "subinfo": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "subinfo",
-        "reflect": false
-      },
-      "completionMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "completion-message",
-        "reflect": false
-      },
-      "showLegend": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-legend",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {},
-      "mode": {},
-      "userIsNavigating": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "mode",
-        "methodName": "handleModeUpdate"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "handleKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmProgressSliceUpdated",
-        "method": "handleSliceUpdate",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    constructor() {
+        this.uid = generateId();
+        // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
+        this.slicesDetails = [];
+        this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
+        this.label = undefined;
+        this.subinfo = undefined;
+        this.completionMessage = undefined;
+        this.showLegend = true;
+        this.isTabbing = false;
+        this.mode = undefined;
+        this.userIsNavigating = false;
+    }
+    get popoverEl() {
+        return this.el.shadowRoot.querySelector("priv-chart-popover");
+    }
+    get sliceEls() {
+        return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+    }
+    get chartDetails() {
+        return this.mode ? allChartsDetails[this.mode] : undefined;
+    }
+    get ariaLabelText() {
+        let text = `${this.label}`;
+        if (this.subinfo) {
+            text += ` ${this.subinfo}`;
+        }
+        return text;
+    }
+    get chartRoleDescription() {
+        return intl.formatMessage({
+            id: "chart.roleDescription",
+            defaultMessage: "Interactive chart",
+            description: "For screen readers only, a description clarifying the role of the chart widget",
+        });
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleKeydown(ev) {
+        handleChartKeydown.call(this, ev);
+    }
+    componentWillLoad() {
+        if (!this.label) {
+            console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+        }
+        if (this.el.children.length !== 2) {
+            console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
+        }
+        // Listen to parent for initial mode, and future changes
+        this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
+    }
+    async handleSliceUpdate() {
+        await getDetails.call(this, this.mode);
+        forceUpdate(this.el);
+    }
+    handleModeUpdate() {
+        if (this.mode) {
+            getDetails.call(this, this.mode);
+        }
+    }
+    renderBarOrDoughnut() {
+        if (this.total > 0 && this.mode === "bar") {
+            return renderStackedBar.call(this, this.mode);
+        }
+        else {
+            return renderDoughnut.call(this, this.mode);
+        }
+    }
+    render() {
+        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.mode && this.renderBarOrDoughnut(), this.mode === "doughnut" ? renderLegend.call(this, this.mode) : "", h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.mode === "doughnut" ? renderCompletionMessage.call(this) : ""), renderInstructionsText()));
+    }
+    static get is() { return "wm-progress-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-progress-indicator.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
+            },
+            "subinfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "subinfo",
+                "reflect": false
+            },
+            "completionMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "completion-message",
+                "reflect": false
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-legend",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "mode": {},
+            "userIsNavigating": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "handleModeUpdate"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmProgressSliceUpdated",
+                "method": "handleSliceUpdate",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.e2e.js

@@ -1,10 +1,10 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("Progress Monitor", () => {
-  let page;
-  async function createPageHelper() {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
     <wm-progress-monitor id="first-monitor">
       <wm-progress-indicator label="First Indicator">
         <wm-progress-slice amount="5" popover-title="5/20 Completed" popover-text="Popover text" popover-button-text="Button text" legend="completed" </wm-progress-slice>
@@ -16,54 +16,54 @@ describe("Progress Monitor", () => {
       </wm-progress-indicator>
     </wm-progress-monitor>
   </main></body></html>`);
-  }
-  it("passes Axe checks", async () => {
-    await createPageHelper();
-    const results = await new AxePuppeteer(page).analyze();
-    expect(results.violations.length).toBe(0);
-  });
-  // Monitor toggles Indicator modes
-  it("toggles indicator modes", async () => {
-    await createPageHelper();
-    const indicator = await page.find("wm-progress-indicator");
-    page.setViewport({ width: 500, height: 900 });
-    await page.waitForChanges();
-    let classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
-    expect(classes).toContain("bar");
-    page.setViewport({ width: 700, height: 900 });
-    await page.waitForChanges();
-    classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
-    expect(classes).toContain("doughnut");
-  });
-  /* can't get the popover to show
-  // Slices read x of y {{popover text}}
-  it("announces the slice to SR", async () => {
-    await createPageHelper();
-    const indicator = await page.find("wm-progress-indicator");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    const popover = indicator.shadowRoot.querySelector("priv-chart-popover");
-    const results = await page.compareScreenshot();
-    expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
-
-    popover.open = true;
-    const liveRegion = popover.querySelector(".live-region");
-    expect(liveRegion.textContent).toBe("");
-  });
-    */
-  /*** E2E ***/
-  // Doughnuts display in row, bars display in column
-  // Popovers automatically appear when navigating via keyboard
-  // Popovers emit wmProgressIndicatorButtonTriggered
-  // Tab navigates through indicators, no tab stop on Monitor
-  // Clicking a slice opens the popover
-  // Clicking outside or hitting escape closes the popover
-  /*** CAN'T BE TESTED? ***/
-  // Default breakpoint is the width of all children
-  // Breakpoint is customizable
-  //// including "px" makes it px
-  //// # less than 100 refers to # of charts
-  //// # greater than 100 refers to px
+    }
+    it("passes Axe checks", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // Monitor toggles Indicator modes
+    it("toggles indicator modes", async () => {
+        await createPageHelper();
+        const indicator = await page.find("wm-progress-indicator");
+        page.setViewport({ width: 500, height: 900 });
+        await page.waitForChanges();
+        let classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("bar");
+        page.setViewport({ width: 700, height: 900 });
+        await page.waitForChanges();
+        classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("doughnut");
+    });
+    /* can't get the popover to show
+    // Slices read x of y {{popover text}}
+    it("announces the slice to SR", async () => {
+      await createPageHelper();
+      const indicator = await page.find("wm-progress-indicator");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      const popover = indicator.shadowRoot.querySelector("priv-chart-popover");
+      const results = await page.compareScreenshot();
+      expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
+  
+      popover.open = true;
+      const liveRegion = popover.querySelector(".live-region");
+      expect(liveRegion.textContent).toBe("");
+    });
+      */
+    /*** E2E ***/
+    // Doughnuts display in row, bars display in column
+    // Popovers automatically appear when navigating via keyboard
+    // Popovers emit wmProgressIndicatorButtonTriggered
+    // Tab navigates through indicators, no tab stop on Monitor
+    // Clicking a slice opens the popover
+    // Clicking outside or hitting escape closes the popover
+    /*** CAN'T BE TESTED? ***/
+    // Default breakpoint is the width of all children
+    // Breakpoint is customizable
+    //// including "px" makes it px
+    //// # less than 100 refers to # of charts
+    //// # greater than 100 refers to px
 });