npm - @watermarkinsights/ripple - Versions diffs - 3.25.0-2 → 3.25.0 - Mend

@watermarkinsights/ripple 3.25.0-2 → 3.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

package/dist/collection/components/charts/wm-chart/wm-chart.js CHANGED Viewed

@@ -1,447 +1,447 @@
-import { h, Host } from "@stencil/core";
-import { forceUpdate } from "@stencil/core";
-import { debounce, generateId, intl } from "../../../global/functions";
-import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderCompletionMessage, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
-export class Chart {
-  constructor() {
-    this.uid = generateId();
-    this.slicesDetails = [];
-    this.handleStackedBarResize = debounce(async () => {
-      let hasHiddenBarValue = false;
-      // if any value text overlaps with another, hide it and display warning
-      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
-      if (valueEls.length) {
-        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
-        let margin = 4;
-        valueEls.forEach((valueEl, idx) => {
-          // checks are to the left of each valueEl, so skip the first one
-          if (idx > 0) {
-            const bounds = valueEl.getBoundingClientRect();
-            if (bounds.left - margin < lastVisibleRightEdge) {
-              // left edge of current value is overlapping right edge of last visible value
-              valueEl.classList.add("hidden");
-              hasHiddenBarValue = true;
-            }
-            else {
-              valueEl.classList.remove("hidden");
-              lastVisibleRightEdge = bounds.right;
-            }
-          }
-        });
-      }
-      this.hasHiddenBarValue = hasHiddenBarValue;
-    }, 100);
-    this.debouncedUpdate = debounce(async () => {
-      forceUpdate(this.el);
-    }, 10);
-    this.debouncedSliceUpdate = debounce(async () => {
-      await getDetails.call(this, this.currentChartType);
-      forceUpdate(this.el);
-    }, 100);
-    this.chartType = "doughnut1";
-    this.label = undefined;
-    this.labelWidth = "150px";
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.valueFormat = undefined;
-    this.showValues = undefined;
-    this.showGrid = true;
-    this.showLegend = true;
-    this.showBarLegend = false;
-    this.notStartedColor = false;
-    this.labelPosition = "top";
-    this.isTabbing = false;
-    this.userIsNavigating = false;
-    this.hasHiddenBarValue = false;
-  }
-  get tempValueFormat() {
-    // use of this getter should be replaced with dateFormat when showValues is fully phased out
-    return this.valueFormat || this.showValues || "none";
-  }
-  get hybridType() {
-    return window.innerWidth > 1340 ? "doughnut0" : "bar1";
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get currentChartType() {
-    let current = this.chartType;
-    if (this.chartType === "hybrid") {
-      current = this.hybridType;
-    }
-    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
-      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
-      current = "doughnut2plus";
-    }
-    return current;
-  }
-  get chartDetails() {
-    return allChartsDetails[this.currentChartType];
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  get isDoughnut() {
-    return this.chartDetails.category === "doughnut";
-  }
-  get isStackedBar() {
-    return this.chartDetails.category === "stackedBar";
-  }
-  get isSimpleBar() {
-    return this.chartDetails.category === "simpleBar";
-  }
-  get isBar() {
-    return this.isStackedBar || this.isSimpleBar;
-  }
-  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);
-  }
-  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
-  async componentWillLoad() {
-    if (!this.label) {
-      throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    if (this.showValues) {
-      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
-    }
-    await getDetails.call(this, this.currentChartType);
-    // rerender on resize
-    // unnecessary for doughnuts (except hybrid) as layout doesn't change
-    if (this.chartType === "hybrid" || !this.isDoughnut) {
-      const resizeObserver = new ResizeObserver(() => {
-        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
-      });
-      resizeObserver.observe(this.el);
-    }
-  }
-  handleSliceUpdate() {
-    this.debouncedSliceUpdate();
-  }
-  /* RENDERING */
-  renderBarText(s, idx) {
-    let val;
-    if (this.tempValueFormat === "percentage") {
-      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
-      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
-    }
-    else if (this.tempValueFormat === "amount") {
-      val = s.amount;
-    }
-    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
-    // in order to not disturb the positioning of the other value texts in the entire row
-    return (h("div", { class: "value-wrapper", style: {
-        width: `calc(${amountToPercent(s.amount, this.total, false)}%
-        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
-      } }, h("span", { class: "value" }, s.amount > 0 && val)));
-  }
-  drawAxis() {
-    if (this.currentChartType === "bar3") {
-      return (h("svg", { class: "axis" }, h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), h("text", { x: "0.5", y: "-6" }, "0%"), h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), h("text", { x: "100%", y: "-6" }, "100%")));
-    }
-  }
-  renderChart() {
-    if (this.total > 0) {
-      if (this.isStackedBar) {
-        return renderStackedBar.call(this, this.currentChartType);
-      }
-      else if (this.isSimpleBar) {
-        return renderSimpleBar.call(this, this.currentChartType);
-      }
-      else if (this.isDoughnut) {
-        return renderDoughnut.call(this, this.currentChartType);
-      }
-    }
-  }
-  render() {
-    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && renderHiddenValuesMessage()), renderInstructionsText()));
-  }
-  static get is() { return "wm-chart"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-chart.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-chart.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "chartType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ChartType | \"hybrid\"",
-          "resolved": "\"bar\" | \"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"bar6\" | \"bar7\" | \"doughnut\" | \"doughnut0\" | \"doughnut1\" | \"doughnut2\" | \"doughnut2plus\" | \"doughnut3\" | \"hybrid\"",
-          "references": {
-            "ChartType": {
-              "location": "import",
-              "path": "../../../global/interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "chart-type",
-        "reflect": false,
-        "defaultValue": "\"doughnut1\""
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-width",
-        "reflect": false,
-        "defaultValue": "\"150px\""
-      },
-      "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
-      },
-      "valueFormat": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"percentage\" | \"amount\"",
-          "resolved": "\"amount\" | \"percentage\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value-format",
-        "reflect": false
-      },
-      "showValues": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"percentage\" | \"amount\"",
-          "resolved": "\"amount\" | \"percentage\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-values",
-        "reflect": false
-      },
-      "showGrid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-grid",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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"
-      },
-      "showBarLegend": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-bar-legend",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "notStartedColor": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "not-started-color",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"left\" | \"top\"",
-          "resolved": "\"left\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "\"top\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {},
-      "userIsNavigating": {},
-      "hasHiddenBarValue": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  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": "wmChartSliceUpdated",
-        "method": "handleSliceUpdate",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=wm-chart.js.map
+import { h, Host } from "@stencil/core";
+import { forceUpdate } from "@stencil/core";
+import { debounce, generateId, intl } from "../../../global/functions";
+import { amountToPercent, exitChart, getDetails, handleChartKeydown, renderStackedBar, renderSimpleBar, renderCompletionMessage, renderDoughnut, renderHiddenValuesMessage, renderInstructionsText, renderLegend, allChartsDetails, } from "../chartFunctions";
+export class Chart {
+  constructor() {
+    this.uid = generateId();
+    this.slicesDetails = [];
+    this.handleStackedBarResize = debounce(async () => {
+      let hasHiddenBarValue = false;
+      // if any value text overlaps with another, hide it and display warning
+      const valueEls = this.el.shadowRoot.querySelectorAll(".value");
+      if (valueEls.length) {
+        let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;
+        let margin = 4;
+        valueEls.forEach((valueEl, idx) => {
+          // checks are to the left of each valueEl, so skip the first one
+          if (idx > 0) {
+            const bounds = valueEl.getBoundingClientRect();
+            if (bounds.left - margin < lastVisibleRightEdge) {
+              // left edge of current value is overlapping right edge of last visible value
+              valueEl.classList.add("hidden");
+              hasHiddenBarValue = true;
+            }
+            else {
+              valueEl.classList.remove("hidden");
+              lastVisibleRightEdge = bounds.right;
+            }
+          }
+        });
+      }
+      this.hasHiddenBarValue = hasHiddenBarValue;
+    }, 100);
+    this.debouncedUpdate = debounce(async () => {
+      forceUpdate(this.el);
+    }, 10);
+    this.debouncedSliceUpdate = debounce(async () => {
+      await getDetails.call(this, this.currentChartType);
+      forceUpdate(this.el);
+    }, 100);
+    this.chartType = "doughnut1";
+    this.label = undefined;
+    this.labelWidth = "150px";
+    this.subinfo = undefined;
+    this.completionMessage = undefined;
+    this.valueFormat = undefined;
+    this.showValues = undefined;
+    this.showGrid = true;
+    this.showLegend = true;
+    this.showBarLegend = false;
+    this.notStartedColor = false;
+    this.labelPosition = "top";
+    this.isTabbing = false;
+    this.userIsNavigating = false;
+    this.hasHiddenBarValue = false;
+  }
+  get tempValueFormat() {
+    // use of this getter should be replaced with dateFormat when showValues is fully phased out
+    return this.valueFormat || this.showValues || "none";
+  }
+  get hybridType() {
+    return window.innerWidth > 1340 ? "doughnut0" : "bar1";
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get currentChartType() {
+    let current = this.chartType;
+    if (this.chartType === "hybrid") {
+      current = this.hybridType;
+    }
+    else if (this.chartType === "doughnut2" && this.el.children.length > 3) {
+      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
+      current = "doughnut2plus";
+    }
+    return current;
+  }
+  get chartDetails() {
+    return allChartsDetails[this.currentChartType];
+  }
+  get ariaLabelText() {
+    let text = `${this.label}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  get isDoughnut() {
+    return this.chartDetails.category === "doughnut";
+  }
+  get isStackedBar() {
+    return this.chartDetails.category === "stackedBar";
+  }
+  get isSimpleBar() {
+    return this.chartDetails.category === "simpleBar";
+  }
+  get isBar() {
+    return this.isStackedBar || this.isSimpleBar;
+  }
+  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);
+  }
+  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
+  async componentWillLoad() {
+    if (!this.label) {
+      throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+    }
+    if (this.showValues) {
+      console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.");
+    }
+    await getDetails.call(this, this.currentChartType);
+    // rerender on resize
+    // unnecessary for doughnuts (except hybrid) as layout doesn't change
+    if (this.chartType === "hybrid" || !this.isDoughnut) {
+      const resizeObserver = new ResizeObserver(() => {
+        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
+      });
+      resizeObserver.observe(this.el);
+    }
+  }
+  handleSliceUpdate() {
+    this.debouncedSliceUpdate();
+  }
+  /* RENDERING */
+  renderBarText(s, idx) {
+    let val;
+    if (this.tempValueFormat === "percentage") {
+      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
+      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
+    }
+    else if (this.tempValueFormat === "amount") {
+      val = s.amount;
+    }
+    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
+    // in order to not disturb the positioning of the other value texts in the entire row
+    return (h("div", { class: "value-wrapper", style: {
+        width: `calc(${amountToPercent(s.amount, this.total, false)}%
+        ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
+      } }, h("span", { class: "value" }, s.amount > 0 && val)));
+  }
+  drawAxis() {
+    if (this.currentChartType === "bar3") {
+      return (h("svg", { class: "axis" }, h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), h("text", { x: "0.5", y: "-6" }, "0%"), h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), h("text", { x: "100%", y: "-6" }, "100%")));
+    }
+  }
+  renderChart() {
+    if (this.total > 0) {
+      if (this.isStackedBar) {
+        return renderStackedBar.call(this, this.currentChartType);
+      }
+      else if (this.isSimpleBar) {
+        return renderSimpleBar.call(this, this.currentChartType);
+      }
+      else if (this.isDoughnut) {
+        return renderDoughnut.call(this, this.currentChartType);
+      }
+    }
+  }
+  render() {
+    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": this.chartRoleDescription, "aria-describedby": "chart-instructions" }, h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.currentChartType === "doughnut0" ? renderCompletionMessage.call(this) : "", this.hasHiddenBarValue && renderHiddenValuesMessage()), renderInstructionsText()));
+  }
+  static get is() { return "wm-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartType | \"hybrid\"",
+          "resolved": "\"bar\" | \"bar1\" | \"bar2\" | \"bar3\" | \"bar4\" | \"bar5\" | \"bar6\" | \"bar7\" | \"doughnut\" | \"doughnut0\" | \"doughnut1\" | \"doughnut2\" | \"doughnut2plus\" | \"doughnut3\" | \"hybrid\"",
+          "references": {
+            "ChartType": {
+              "location": "import",
+              "path": "../../../global/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-type",
+        "reflect": false,
+        "defaultValue": "\"doughnut1\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-width",
+        "reflect": false,
+        "defaultValue": "\"150px\""
+      },
+      "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
+      },
+      "valueFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"percentage\" | \"amount\"",
+          "resolved": "\"amount\" | \"percentage\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value-format",
+        "reflect": false
+      },
+      "showValues": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"percentage\" | \"amount\"",
+          "resolved": "\"amount\" | \"percentage\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-values",
+        "reflect": false
+      },
+      "showGrid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-grid",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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"
+      },
+      "showBarLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-bar-legend",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "notStartedColor": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "not-started-color",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"top\"",
+          "resolved": "\"left\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"top\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isTabbing": {},
+      "userIsNavigating": {},
+      "hasHiddenBarValue": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  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": "wmChartSliceUpdated",
+        "method": "handleSliceUpdate",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=wm-chart.js.map