@watermarkinsights/ripple 3.16.0 → 3.17.0-2

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

@@ -64,76 +64,6 @@ wm-progress-indicator .component-wrapper .label .subinfo {
   width: 100%;
   color: #6b6b6b;
 }
-:host .component-wrapper .legend-wrapper,
-wm-progress-indicator .component-wrapper .legend-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-:host .component-wrapper .legend-wrapper .legend,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  text-align: center;
-  padding-top: 0.25rem;
-  padding-bottom: 0.75rem;
-  box-sizing: border-box;
-}
-:host .component-wrapper .legend-wrapper .legend.--top,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top {
-  margin-top: -0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend.--top .legend-item,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item {
-  padding-top: 0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend.--top .legend-color,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color {
-  top: 0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend.--bottom,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom {
-  margin-bottom: -0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item {
-  padding-bottom: 0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color {
-  top: -0.75rem;
-}
-:host .component-wrapper .legend-wrapper .legend .legend-item,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item {
-  position: relative;
-}
-:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),
-wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type) {
-  padding-right: 1.25rem;
-}
-:host .component-wrapper .legend-wrapper .legend .legend-text,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text {
-  padding-left: 1rem;
-  line-height: 1;
-}
-:host .component-wrapper .legend-wrapper .legend .legend-color,
-wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  margin: auto;
-  width: 0.6875rem;
-  height: 0.6875rem;
-}
-:host .component-wrapper .legend-wrapper .cluster-warning,
-wm-progress-indicator .component-wrapper .legend-wrapper .cluster-warning {
-  font-size: 0.75rem;
-  font-style: italic;
-  max-width: 100%;
-}
 :host .component-wrapper .doughnut-svg,
 wm-progress-indicator .component-wrapper .doughnut-svg,
 :host .component-wrapper .inner-bar-wrapper,
@@ -269,11 +199,6 @@ wm-progress-indicator .component-wrapper.doughnut0 label .subinfo, :host .compon
 wm-progress-indicator .component-wrapper.doughnut label .subinfo {
   position: absolute;
 }
-:host .component-wrapper.doughnut0 .legend,
-wm-progress-indicator .component-wrapper.doughnut0 .legend, :host .component-wrapper.doughnut .legend,
-wm-progress-indicator .component-wrapper.doughnut .legend {
-  display: flex;
-}
 :host .component-wrapper.doughnut0 .completion-message,
 wm-progress-indicator .component-wrapper.doughnut0 .completion-message, :host .component-wrapper.doughnut .completion-message,
 wm-progress-indicator .component-wrapper.doughnut .completion-message {
@@ -296,11 +221,6 @@ wm-progress-indicator .component-wrapper.bar1 label .subinfo, :host .component-w
 wm-progress-indicator .component-wrapper.bar label .subinfo {
   position: initial;
 }
-:host .component-wrapper.bar1 .legend,
-wm-progress-indicator .component-wrapper.bar1 .legend, :host .component-wrapper.bar .legend,
-wm-progress-indicator .component-wrapper.bar .legend {
-  display: none;
-}
 :host .component-wrapper.bar1 .chart-wrapper,
 wm-progress-indicator .component-wrapper.bar1 .chart-wrapper, :host .component-wrapper.bar .chart-wrapper,
 wm-progress-indicator .component-wrapper.bar .chart-wrapper {
@@ -379,10 +299,6 @@ wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper.show-values {
   height: 60px;
   margin-top: 0;
 }
-:host .component-wrapper.bar3 .legend,
-wm-progress-indicator .component-wrapper.bar3 .legend {
-  padding-bottom: 1.25rem;
-}
 :host .component-wrapper.bar3 .chart-wrapper,
 wm-progress-indicator .component-wrapper.bar3 .chart-wrapper {
   position: relative;
@@ -436,6 +352,87 @@ wm-progress-indicator .component-wrapper.left-label .label {
   align-items: center;
 }
 
+:host .component-wrapper .legend-wrapper,
+wm-progress-indicator .component-wrapper .legend-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+:host .component-wrapper .legend-wrapper .legend,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  text-align: center;
+  padding-top: 0.25rem;
+  padding-bottom: 0.75rem;
+  box-sizing: border-box;
+}
+:host .component-wrapper .legend-wrapper .legend.--top,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top {
+  margin-top: -0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend.--top .legend-item,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-item {
+  padding-top: 0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend.--top .legend-color,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--top .legend-color {
+  top: 0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend.--bottom,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom {
+  margin-bottom: -0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-item {
+  padding-bottom: 0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.--bottom .legend-color {
+  top: -0.75rem;
+}
+:host .component-wrapper .legend-wrapper .legend .legend-item,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item {
+  position: relative;
+}
+:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),
+wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type) {
+  padding-right: 1.25rem;
+}
+:host .component-wrapper .legend-wrapper .legend .legend-text,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-text {
+  font-size: 0.875rem;
+  padding-left: 1rem;
+  line-height: 1;
+}
+:host .component-wrapper .legend-wrapper .legend .legend-color,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend .legend-color {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  width: 0.6875rem;
+  height: 0.6875rem;
+}
+:host .component-wrapper .legend-wrapper .legend.bar1,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1, :host .component-wrapper .legend-wrapper .legend.bar,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar {
+  display: none;
+}
+:host .component-wrapper .legend-wrapper .legend.bar3,
+wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3 {
+  padding-bottom: 1.25rem;
+}
+:host .component-wrapper .legend-wrapper .cluster-warning,
+wm-progress-indicator .component-wrapper .legend-wrapper .cluster-warning {
+  font-size: 0.75rem;
+  font-style: italic;
+  max-width: 100%;
+}
+
 :host(:focus) {
   outline: none;
 }

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

@@ -1,195 +1,194 @@
-import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from "@stencil/core";
-import { generateId, intl } from "../../../global/functions";
-import { exitChart, getData, handleChartKeydown, renderBar, renderCompletionMessage, renderDoughnut, renderLegend, types, } from "../../../global/chartFunctions";
-export class ProgressIndicator {
-  constructor() {
-    this.showLegend = true;
-    this.isTabbing = false;
-    this.userIsNavigating = false;
-    this.uid = generateId();
-    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-    this.slicesData = [];
-    this.chartLabelMessage = intl.formatMessage({
-      id: "chart.interactiveChart",
-      defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
-    });
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get chartData() {
-    return this.mode ? types[this.mode] : undefined;
-  }
-  get ariaLabelText() {
-    let text = `${this.label}, ${this.chartLabelMessage}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  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 getData.call(this, this.mode);
-    forceUpdate(this.el);
-  }
-  handleModeUpdate() {
-    if (this.mode) {
-      getData.call(this, this.mode);
-    }
-  }
-  renderBarOrDoughnut() {
-    if (this.total > 0 && this.mode === "bar") {
-      return renderBar.call(this, this.mode);
-    }
-    else {
-      return renderDoughnut.call(this, this.mode);
-    }
-  }
-  render() {
-    return (h(Host, { role: "application", "aria-label": this.ariaLabelText, tabindex: "0", onBlur: () => exitChart.call(this) },
-      h("div", { class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}` },
-        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.mode === "bar" ? renderLegend.call(this) : "",
-        this.mode && this.renderBarOrDoughnut(),
-        this.mode === "doughnut" ? renderLegend.call(this) : "",
-        h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }),
-        this.mode === "doughnut" ? renderCompletionMessage.call(this) : "")));
-  }
-  static get is() { return "wm-progress-indicator"; }
-  static get encapsulation() { return "shadow"; }
-  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
-    }]; }
-}
+import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from "@stencil/core";
+import { generateId, intl } from "../../../global/functions";
+import { exitChart, getData, handleChartKeydown, renderBar, renderCompletionMessage, renderDoughnut, renderLegend, types, } from "../../../global/chartFunctions";
+export class ProgressIndicator {
+  constructor() {
+    this.showLegend = true;
+    this.isTabbing = false;
+    this.userIsNavigating = false;
+    this.uid = generateId();
+    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
+    this.slicesData = [];
+    this.chartLabelMessage = intl.formatMessage({
+      id: "chart.interactiveChart",
+      defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
+    });
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get chartData() {
+    return this.mode ? types[this.mode] : undefined;
+  }
+  get ariaLabelText() {
+    let text = `${this.label}, ${this.chartLabelMessage}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  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 getData.call(this, this.mode);
+    forceUpdate(this.el);
+  }
+  handleModeUpdate() {
+    if (this.mode) {
+      getData.call(this, this.mode);
+    }
+  }
+  renderBarOrDoughnut() {
+    if (this.total > 0 && this.mode === "bar") {
+      return renderBar.call(this, this.mode);
+    }
+    else {
+      return renderDoughnut.call(this, this.mode);
+    }
+  }
+  render() {
+    return (h(Host, { role: "application", "aria-label": this.ariaLabelText, tabindex: "0", onBlur: () => exitChart.call(this) },
+      h("div", { class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}` },
+        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.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) : "")));
+  }
+  static get is() { return "wm-progress-indicator"; }
+  static get encapsulation() { return "shadow"; }
+  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
+    }]; }
+}