@watermarkinsights/ripple 3.24.0 → 3.24.1

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

@@ -1,144 +1,144 @@
-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);
-    }
-    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"; }
-}
-//# sourceMappingURL=wm-progress-monitor.js.map
+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);
+    }
+    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"; }
+}
+//# sourceMappingURL=wm-progress-monitor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wm-progress-monitor.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,WAAW,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAOvE,MAAM,OAAO,eAAe;;IAMlB,kBAAa,GAAG,GAAG,CAAC;IAEpB,oBAAe,GAAY,KAAK,CAAC;IAkCzC,oBAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;;;;;EAhC3D,IAAI,gBAAgB;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC9F,oGAAoG;IACpG,wCAAwC;IACxC,MAAM,QAAQ,GAAG,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;IAC3E,OAAO,QAAQ,CAAC;EAClB,CAAC;EAED,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;EAC1E,CAAC;EAED,iBAAiB;IACf,oDAAoD;IACpD,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;IACxE,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EAClC,CAAC;EAED,gBAAgB;IACd,2FAA2F;IAC3F,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;EAC9B,CAAC;EAED,mBAAmB;IACjB,mFAAmF;IACnF,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,EAAE;MAC/B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClD;IACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;EAC5B,CAAC;EAID,UAAU,CAAC,GAAoB;IAC7B,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;IAChC,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC7C,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC;EAC7B,CAAC;EAED,YAAY;IACV,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,WAAY,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC;IAE3C,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QACrB,MAAM,UAAU,GAAe,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;QAChE,OAAO,gBAAgB,CAAC,UAAU,CAAC,CAAC;MACtC,CAAC,CAAC,CACE,CACF,CACP,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;MAErD,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,YAAY,EAAE;MACtF,IAAI,CAAC,eAAe,IAAI,eAAQ,CAC5B,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\nimport { csvToArray, debounce } from \"../../../global/functions\";\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\nimport { LegendItem } from \"../../../global/interfaces\";\n@Component({\n  tag: \"wm-progress-monitor\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-monitor.scss\",\n})\nexport class ProgressMonitor {\n  @Element() el!: HTMLWmProgressMonitorElement;\n  @Prop() breakpoint?: number | string;\n  @Prop() groupLegend?: string;\n  @Prop() barLabelsWidth?: string;\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\n  private doughnutWidth = 300;\n  private prevMode?: string;\n  private modeInitialized: boolean = false;\n\n  get parsedBreakpoint() {\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\n    // e.g. 4 -> 1200px, while 768 -> 768 px\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\n    return asPixels;\n  }\n\n  get mode(): \"doughnut\" | \"bar\" {\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\n  }\n\n  componentWillLoad() {\n    // rerender on resize in case layout needs to change\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidLoad() {\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\n    this.wmProgressMonitorModeChange.emit(this.mode);\n    this.modeInitialized = true;\n  }\n\n  componentWillUpdate() {\n    // store prevMode before every render except first to determine when it has changed\n    if (this.prevMode !== this.mode) {\n      this.wmProgressMonitorModeChange.emit(this.mode);\n    }\n    this.prevMode = this.mode;\n  }\n\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\n\n  parseToNum(num: string | number): number {\n    const asString = num.toString();\n    const withoutPx = asString.replace(\"px\", \"\");\n    return parseInt(withoutPx);\n  }\n\n  renderLegend() {\n    const keys = csvToArray(this.groupLegend!);\n    const colors = allChartsDetails.bar.colors;\n\n    return (\n      <div class=\"legend-wrapper\">\n        <div class=\"legend\">\n          {keys.map((key, idx) => {\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\n            return renderLegendItem(legendItem);\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\n        {this.modeInitialized && <slot />}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"wm-progress-monitor.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\r\nimport { csvToArray, debounce } from \"../../../global/functions\";\r\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\r\nimport { LegendItem } from \"../../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-progress-monitor\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-monitor.scss\",\r\n})\r\nexport class ProgressMonitor {\r\n  @Element() el!: HTMLWmProgressMonitorElement;\r\n  @Prop() breakpoint?: number | string;\r\n  @Prop() groupLegend?: string;\r\n  @Prop() barLabelsWidth?: string;\r\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\r\n  private doughnutWidth = 300;\r\n  private prevMode?: string;\r\n  private modeInitialized: boolean = false;\r\n\r\n  get parsedBreakpoint() {\r\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\r\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\r\n    // e.g. 4 -> 1200px, while 768 -> 768 px\r\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\r\n    return asPixels;\r\n  }\r\n\r\n  get mode(): \"doughnut\" | \"bar\" {\r\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // rerender on resize in case layout needs to change\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\r\n    this.wmProgressMonitorModeChange.emit(this.mode);\r\n    this.modeInitialized = true;\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    // store prevMode before every render except first to determine when it has changed\r\n    if (this.prevMode !== this.mode) {\r\n      this.wmProgressMonitorModeChange.emit(this.mode);\r\n    }\r\n    this.prevMode = this.mode;\r\n  }\r\n\r\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\r\n\r\n  parseToNum(num: string | number): number {\r\n    const asString = num.toString();\r\n    const withoutPx = asString.replace(\"px\", \"\");\r\n    return parseInt(withoutPx);\r\n  }\r\n\r\n  renderLegend() {\r\n    const keys = csvToArray(this.groupLegend!);\r\n    const colors = allChartsDetails.bar.colors;\r\n\r\n    return (\r\n      <div class=\"legend-wrapper\">\r\n        <div class=\"legend\">\r\n          {keys.map((key, idx) => {\r\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\r\n            return renderLegendItem(legendItem);\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\r\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\r\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\r\n        {this.modeInitialized && <slot />}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,122 +1,122 @@
-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": {}
-        }
-      }];
-  }
-}
-//# sourceMappingURL=wm-progress-slice.js.map
+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": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=wm-progress-slice.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wm-progress-slice.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAMrE,MAAM,OAAO,aAAa;;;;;;;;EAQxB,kBAAkB;IAChB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;EACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-progress-slice\",\n  shadow: true,\n})\nexport class ProgressSlice {\n  @Prop() legend?: string;\n  @Prop() amount?: string;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() popoverButtonText?: string;\n\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\n  componentDidUpdate() {\n    this.wmProgressSliceUpdated.emit();\n  }\n}\n"]}
+{"version":3,"file":"wm-progress-slice.js","sourceRoot":"","sources":["../../../../../src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAMrE,MAAM,OAAO,aAAa;;;;;;;;EAQxB,kBAAkB;IAChB,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;EACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-slice\",\r\n  shadow: true,\r\n})\r\nexport class ProgressSlice {\r\n  @Prop() legend?: string;\r\n  @Prop() amount?: string;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() popoverButtonText?: string;\r\n\r\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\r\n  componentDidUpdate() {\r\n    this.wmProgressSliceUpdated.emit();\r\n  }\r\n}\r\n"]}