@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -2,142 +2,142 @@ import { h, Host, forceUpdate } from "@stencil/core";
 import { csvToArray, debounce } from "../../../global/functions";
 import { renderLegendItem, allChartsDetails } from "../chartFunctions";
 export class ProgressMonitor {
-  constructor() {
-    this.doughnutWidth = 300;
-    this.modeInitialized = false;
-    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
-    this.breakpoint = undefined;
-    this.groupLegend = undefined;
-    this.barLabelsWidth = undefined;
-  }
-  get parsedBreakpoint() {
-    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);
-    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
-    // e.g. 4 -> 1200px, while 768 -> 768 px
-    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
-    return asPixels;
-  }
-  get mode() {
-    return this.el.clientWidth > this.parsedBreakpoint ? "doughnut" : "bar";
-  }
-  componentWillLoad() {
-    // rerender on resize in case layout needs to change
-    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
-    resizeObserver.observe(this.el);
-  }
-  componentDidLoad() {
-    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
-    this.wmProgressMonitorModeChange.emit(this.mode);
-    this.modeInitialized = true;
-  }
-  componentWillUpdate() {
-    // store prevMode before every render except first to determine when it has changed
-    if (this.prevMode !== this.mode) {
-      this.wmProgressMonitorModeChange.emit(this.mode);
+    constructor() {
+        this.doughnutWidth = 300;
+        this.modeInitialized = false;
+        this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
+        this.breakpoint = undefined;
+        this.groupLegend = undefined;
+        this.barLabelsWidth = undefined;
     }
-    this.prevMode = this.mode;
-  }
-  parseToNum(num) {
-    const asString = num.toString();
-    const withoutPx = asString.replace("px", "");
-    return parseInt(withoutPx);
-  }
-  renderLegend() {
-    const keys = csvToArray(this.groupLegend);
-    const colors = allChartsDetails.bar.colors;
-    return (h("div", { class: "legend-wrapper" }, h("div", { class: "legend" }, keys.map((key, idx) => {
-      const legendItem = { key: key, color: colors[idx] };
-      return renderLegendItem(legendItem);
-    }))));
-  }
-  render() {
-    return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", null)));
-  }
-  static get is() { return "wm-progress-monitor"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-progress-monitor.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-progress-monitor.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "breakpoint": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "number | string",
-          "resolved": "number | string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "breakpoint",
-        "reflect": false
-      },
-      "groupLegend": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "group-legend",
-        "reflect": false
-      },
-      "barLabelsWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bar-labels-width",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmProgressMonitorModeChange",
-        "name": "wmProgressMonitorModeChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    get parsedBreakpoint() {
+        const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);
+        // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
+        // e.g. 4 -> 1200px, while 768 -> 768 px
+        const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
+        return asPixels;
+    }
+    get mode() {
+        return this.el.clientWidth > this.parsedBreakpoint ? "doughnut" : "bar";
+    }
+    componentWillLoad() {
+        // rerender on resize in case layout needs to change
+        const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
+        resizeObserver.observe(this.el);
+    }
+    componentDidLoad() {
+        // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
+        this.wmProgressMonitorModeChange.emit(this.mode);
+        this.modeInitialized = true;
+    }
+    componentWillUpdate() {
+        // store prevMode before every render except first to determine when it has changed
+        if (this.prevMode !== this.mode) {
+            this.wmProgressMonitorModeChange.emit(this.mode);
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
+        this.prevMode = this.mode;
+    }
+    parseToNum(num) {
+        const asString = num.toString();
+        const withoutPx = asString.replace("px", "");
+        return parseInt(withoutPx);
+    }
+    renderLegend() {
+        const keys = csvToArray(this.groupLegend);
+        const colors = allChartsDetails.bar.colors;
+        return (h("div", { class: "legend-wrapper" }, h("div", { class: "legend" }, keys.map((key, idx) => {
+            const legendItem = { key: key, color: colors[idx] };
+            return renderLegendItem(legendItem);
+        }))));
+    }
+    render() {
+        return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", null)));
+    }
+    static get is() { return "wm-progress-monitor"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-progress-monitor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-progress-monitor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "breakpoint": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "breakpoint",
+                "reflect": false
+            },
+            "groupLegend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "group-legend",
+                "reflect": false
+            },
+            "barLabelsWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "bar-labels-width",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmProgressMonitorModeChange",
+                "name": "wmProgressMonitorModeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
 }

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

@@ -8,14 +8,14 @@ jest.spyOn(globalFuncs, "generateId");
 globalFuncs.generateId.mockImplementation(() => "random-id");
 // mock ResizeObserver
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
 }));
 async function createPageHelper() {
-  return await newSpecPage({
-    components: [ProgressMonitor, ProgressIndicator, ProgressSlice],
-    html: `<wm-progress-monitor id="first-monitor">
+    return await newSpecPage({
+        components: [ProgressMonitor, ProgressIndicator, ProgressSlice],
+        html: `<wm-progress-monitor id="first-monitor">
       <wm-progress-indicator label="First Indicator">
         <wm-progress-slice
           amount="5"
@@ -49,31 +49,31 @@ async function createPageHelper() {
         ></wm-progress-slice>
       </wm-progress-indicator>
     </wm-progress-monitor>`,
-  });
+    });
 }
 describe("Progress Monitor", () => {
-  it("builds", async () => {
-    const page = await createPageHelper();
-    expect(page.root).toMatchSnapshot();
-  });
-  it("properties and attributes", async () => {
-    var _a;
-    const page = await createPageHelper();
-    const indicator = page.root.querySelector("wm-progress-indicator");
-    expect(indicator).toHaveProperty("label");
-    expect(indicator).toHaveProperty("subinfo");
-    expect(indicator).toHaveProperty("completionMessage");
-    expect(indicator).toHaveProperty("showLegend");
-    const indicatorComponentWrapper = (_a = indicator.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".component-wrapper");
-    expect(indicatorComponentWrapper).toEqualAttribute("role", "application");
-    expect(indicatorComponentWrapper).toEqualAttribute("aria-label", "First Indicator");
-    expect(indicatorComponentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
-    expect(indicatorComponentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
-    const slice = page.root.querySelector("wm-progress-slice");
-    expect(slice).toHaveProperty("amount");
-    expect(slice).toHaveProperty("legend");
-    expect(slice).toHaveProperty("popoverTitle");
-    expect(slice).toHaveProperty("popoverText");
-    expect(slice).toHaveProperty("popoverButtonText");
-  });
+    it("builds", async () => {
+        const page = await createPageHelper();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        var _a;
+        const page = await createPageHelper();
+        const indicator = page.root.querySelector("wm-progress-indicator");
+        expect(indicator).toHaveProperty("label");
+        expect(indicator).toHaveProperty("subinfo");
+        expect(indicator).toHaveProperty("completionMessage");
+        expect(indicator).toHaveProperty("showLegend");
+        const indicatorComponentWrapper = (_a = indicator.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".component-wrapper");
+        expect(indicatorComponentWrapper).toEqualAttribute("role", "application");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-label", "First Indicator");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+        const slice = page.root.querySelector("wm-progress-slice");
+        expect(slice).toHaveProperty("amount");
+        expect(slice).toHaveProperty("legend");
+        expect(slice).toHaveProperty("popoverTitle");
+        expect(slice).toHaveProperty("popoverText");
+        expect(slice).toHaveProperty("popoverButtonText");
+    });
 });

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

@@ -1,121 +1,121 @@
 export class ProgressSlice {
-  constructor() {
-    this.legend = undefined;
-    this.amount = undefined;
-    this.popoverTitle = undefined;
-    this.popoverText = undefined;
-    this.popoverButtonText = undefined;
-  }
-  componentDidUpdate() {
-    this.wmProgressSliceUpdated.emit();
-  }
-  static get is() { return "wm-progress-slice"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() {
-    return {
-      "legend": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "legend",
-        "reflect": false
-      },
-      "amount": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "amount",
-        "reflect": false
-      },
-      "popoverTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-title",
-        "reflect": false
-      },
-      "popoverText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-text",
-        "reflect": false
-      },
-      "popoverButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-button-text",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmProgressSliceUpdated",
-        "name": "wmProgressSliceUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
+    constructor() {
+        this.legend = undefined;
+        this.amount = undefined;
+        this.popoverTitle = undefined;
+        this.popoverText = undefined;
+        this.popoverButtonText = undefined;
+    }
+    componentDidUpdate() {
+        this.wmProgressSliceUpdated.emit();
+    }
+    static get is() { return "wm-progress-slice"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "legend",
+                "reflect": false
+            },
+            "amount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "amount",
+                "reflect": false
+            },
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-title",
+                "reflect": false
+            },
+            "popoverText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-text",
+                "reflect": false
+            },
+            "popoverButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "popover-button-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmProgressSliceUpdated",
+                "name": "wmProgressSliceUpdated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }