@watermarkinsights/ripple 3.14.1 → 3.15.0-2

package/dist/esm/wm-progress-indicator_3.entry.js

@@ -1,142 +1,142 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement, c as createEvent } from './index-17c79cc6.js';
-import { g as generateId, i as intl, d as debounce } from './functions-11c0c4e2.js';
-import { t as types, h as handleChartKeydown, g as getData, a as renderBar, b as renderDoughnut, r as renderLegend, c as renderCompletionMessage, e as exitChart } from './chartFunctions-6f90586d.js';
+import { g as generateId, i as intl, d as debounce } from './functions-b4b62a23.js';
+import { t as types, h as handleChartKeydown, g as getData, a as renderBar, b as renderDoughnut, r as renderLegend, c as renderCompletionMessage, e as exitChart } from './chartFunctions-a310b9d0.js';
 
 const wmProgressIndicatorCss = ":host .component-wrapper,wm-progress-indicator .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;}:host .component-wrapper .label,wm-progress-indicator .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-progress-indicator .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .legend-wrapper,wm-progress-indicator .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-progress-indicator .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;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,wm-progress-indicator .component-wrapper .inner-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-progress-indicator .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-progress-indicator .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value,wm-progress-indicator .component-wrapper .value{display:inline-block;text-align:center}:host .component-wrapper .value:not(:last-of-type),wm-progress-indicator .component-wrapper .value:not(:last-of-type){margin-right:2px}:host .component-wrapper path:active,wm-progress-indicator .component-wrapper path:active,:host .component-wrapper path:hover,wm-progress-indicator .component-wrapper path:hover,:host .component-wrapper path:focus,wm-progress-indicator .component-wrapper path:focus,:host .component-wrapper .bar-segment:active,wm-progress-indicator .component-wrapper .bar-segment:active,:host .component-wrapper .bar-segment:hover,wm-progress-indicator .component-wrapper .bar-segment:hover,:host .component-wrapper .bar-segment:focus,wm-progress-indicator .component-wrapper .bar-segment:focus{outline:none}:host .component-wrapper .bar-segment:active.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:active.bar-segment,:host .component-wrapper .bar-segment:hover.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.bar-segment,:host .component-wrapper .bar-segment:focus.bar-segment,wm-progress-indicator .component-wrapper .bar-segment:focus.bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-progress-indicator .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-progress-indicator .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-progress-indicator .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:active.doughnut-segment,:host .component-wrapper .bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:hover.doughnut-segment,:host .component-wrapper .bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-progress-indicator .component-wrapper path::-moz-focus-inner,:host .component-wrapper .bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-progress-indicator .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-progress-indicator .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-progress-indicator .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-progress-indicator .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut3 label,wm-progress-indicator .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-progress-indicator .component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-progress-indicator .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-progress-indicator .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-progress-indicator .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-progress-indicator .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-progress-indicator .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,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:-ms-flexbox;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{padding-top:0.625rem}:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-progress-indicator .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,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{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-progress-indicator .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-progress-indicator .component-wrapper.bar1,:host .component-wrapper.bar,wm-progress-indicator .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-progress-indicator .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-progress-indicator .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-progress-indicator .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-progress-indicator .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-progress-indicator .component-wrapper.bar2,:host .component-wrapper.bar3,wm-progress-indicator .component-wrapper.bar3,:host .component-wrapper.bar4,wm-progress-indicator .component-wrapper.bar4,:host .component-wrapper.bar5,wm-progress-indicator .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper,:host .component-wrapper.bar4 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper,:host .component-wrapper.bar5 .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-bar-wrapper.show-values,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;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.left-label,wm-progress-indicator .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-progress-indicator .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";
 
-const ProgressIndicator = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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) : "")));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "mode": ["handleModeUpdate"]
-  }; }
-};
+const ProgressIndicator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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) : "")));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mode": ["handleModeUpdate"]
+  }; }
+};
 ProgressIndicator.style = wmProgressIndicatorCss;
 
 const wmProgressMonitorCss = ":host,wm-progress-monitor{display:-ms-flexbox;display:flex}:host(.row){-ms-flex-direction:row;flex-direction:row}:host(.column){-ms-flex-direction:column;flex-direction:column}";
 
-const ProgressMonitor = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmProgressMonitorModeChange = createEvent(this, "wmProgressMonitorModeChange", 7);
-    this.doughnutWidth = 300;
-    this.modeInitialized = false;
-    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
-  }
-  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);
-  }
-  render() {
-    return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
+const ProgressMonitor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmProgressMonitorModeChange = createEvent(this, "wmProgressMonitorModeChange", 7);
+    this.doughnutWidth = 300;
+    this.modeInitialized = false;
+    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
+  }
+  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);
+  }
+  render() {
+    return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
 ProgressMonitor.style = wmProgressMonitorCss;
 
-const ProgressSlice = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmProgressSliceUpdated = createEvent(this, "wmProgressSliceUpdated", 7);
-  }
-  componentDidUpdate() {
-    this.wmProgressSliceUpdated.emit();
-  }
+const ProgressSlice = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmProgressSliceUpdated = createEvent(this, "wmProgressSliceUpdated", 7);
+  }
+  componentDidUpdate() {
+    this.wmProgressSliceUpdated.emit();
+  }
 };
 
 export { ProgressIndicator as wm_progress_indicator, ProgressMonitor as wm_progress_monitor, ProgressSlice as wm_progress_slice };