@watermarkinsights/ripple 3.24.0 → 3.24.1

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

@@ -1,168 +1,168 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement, c as createEvent } from './index-84a6ae22.js';
-import { g as generateId, i as intl, d as debounce, q as csvToArray } from './functions-c58046f2.js';
-import { a as allChartsDetails, h as handleChartKeydown, g as getDetails, r as renderStackedBar, d as renderDoughnut, e as renderInstructionsText, f as renderLegend, i as renderCompletionMessage, k as exitChart, l as renderLegendItem } from './chartFunctions-e22110b8.js';
+import { g as generateId, i as intl, d as debounce, q as csvToArray } from './functions-1c41e984.js';
+import { a as allChartsDetails, h as handleChartKeydown, g as getDetails, r as renderStackedBar, d as renderDoughnut, e as renderInstructionsText, f as renderLegend, i as renderCompletionMessage, k as exitChart, l as renderLegendItem } from './chartFunctions-b0a9e440.js';
 
 const wmProgressIndicatorCss = ":host,wm-progress-indicator{display:block}: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;outline:none;}: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 .label.custom-width,wm-progress-indicator .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-progress-indicator .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .inner-stacked-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-stacked-bar-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-progress-indicator .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-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-wrapper,wm-progress-indicator .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-progress-indicator .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-progress-indicator .component-wrapper .value-wrapper .value.hidden{visibility:hidden}: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 .stacked-bar-segment:active,wm-progress-indicator .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:focus.stacked-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 .stacked-bar-segment:active.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-progress-indicator .component-wrapper .stacked-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 .stacked-bar-segment::-moz-focus-inner,wm-progress-indicator .component-wrapper .stacked-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.doughnut2plus label,wm-progress-indicator .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-progress-indicator .component-wrapper.doughnut2plus .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 .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 .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-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar .chart-wrapper .inner-stacked-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-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-progress-indicator .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}: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-stacked-bar-wrapper,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-progress-indicator .component-wrapper.bar3 .chart-wrapper .inner-stacked-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.bar3 .hidden-values-warning,wm-progress-indicator .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-progress-indicator .component-wrapper.bar6,:host .component-wrapper.bar7,wm-progress-indicator .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-progress-indicator .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-progress-indicator .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-progress-indicator .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-progress-indicator .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-progress-indicator .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-progress-indicator .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-progress-indicator .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-progress-indicator .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-progress-indicator .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-progress-indicator .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-progress-indicator .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-progress-indicator .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-progress-indicator .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-progress-indicator .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-progress-indicator .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-progress-indicator .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-progress-indicator .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-progress-indicator .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-progress-indicator .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-progress-indicator .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-progress-indicator .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-progress-indicator .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-progress-indicator .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-progress-indicator .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-progress-indicator .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-progress-indicator .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-progress-indicator .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-progress-indicator .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-progress-indicator .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-progress-indicator .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-progress-indicator .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-progress-indicator .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-progress-indicator .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}: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 .component-wrapper .hidden-values-warning,wm-progress-indicator .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-progress-indicator #chart-instructions{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 .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.bar1,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar6{display:none}: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.bar3,wm-progress-indicator .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-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 .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-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.uid = generateId();
-    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-    this.slicesDetails = [];
-    this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
-    this.label = undefined;
-    this.subinfo = undefined;
-    this.completionMessage = undefined;
-    this.showLegend = true;
-    this.isTabbing = false;
-    this.mode = undefined;
-    this.userIsNavigating = false;
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get chartDetails() {
-    return this.mode ? allChartsDetails[this.mode] : undefined;
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  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);
-  }
-  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 getDetails.call(this, this.mode);
-    forceUpdate(this.el);
-  }
-  handleModeUpdate() {
-    if (this.mode) {
-      getDetails.call(this, this.mode);
-    }
-  }
-  renderBarOrDoughnut() {
-    if (this.total > 0 && this.mode === "bar") {
-      return renderStackedBar.call(this, this.mode);
-    }
-    else {
-      return renderDoughnut.call(this, this.mode);
-    }
-  }
-  render() {
-    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, 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) : ""), renderInstructionsText()));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "mode": ["handleModeUpdate"]
-  }; }
-};
+const ProgressIndicator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uid = generateId();
+    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
+    this.slicesDetails = [];
+    this.barLabelsWidth = this.el.parentElement.barLabelsWidth;
+    this.label = undefined;
+    this.subinfo = undefined;
+    this.completionMessage = undefined;
+    this.showLegend = true;
+    this.isTabbing = false;
+    this.mode = undefined;
+    this.userIsNavigating = false;
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+  }
+  get chartDetails() {
+    return this.mode ? allChartsDetails[this.mode] : undefined;
+  }
+  get ariaLabelText() {
+    let text = `${this.label}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  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);
+  }
+  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 getDetails.call(this, this.mode);
+    forceUpdate(this.el);
+  }
+  handleModeUpdate() {
+    if (this.mode) {
+      getDetails.call(this, this.mode);
+    }
+  }
+  renderBarOrDoughnut() {
+    if (this.total > 0 && this.mode === "bar") {
+      return renderStackedBar.call(this, this.mode);
+    }
+    else {
+      return renderDoughnut.call(this, this.mode);
+    }
+  }
+  render() {
+    return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: "0", "aria-roledescription": this.chartRoleDescription, "aria-describedby": `chart-instructions` }, h("label", { id: `label-${this.uid}`, class: `label ${this.barLabelsWidth && this.mode === "bar" ? "custom-width" : ""}`, style: { "--custom-label-width": this.barLabelsWidth }, 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) : ""), renderInstructionsText()));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mode": ["handleModeUpdate"]
+  }; }
+};
 ProgressIndicator.style = wmProgressIndicatorCss;
 
 const wmProgressMonitorCss = ":host .legend-wrapper,wm-progress-monitor .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 .legend-wrapper .legend,wm-progress-monitor .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 .legend-wrapper .legend.bar1,wm-progress-monitor .legend-wrapper .legend.bar1,:host .legend-wrapper .legend.bar6,wm-progress-monitor .legend-wrapper .legend.bar6{display:none}:host .legend-wrapper .legend.--top,wm-progress-monitor .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .legend-wrapper .legend.--top .legend-item,wm-progress-monitor .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .legend-wrapper .legend.--top .legend-color,wm-progress-monitor .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .legend-wrapper .legend.--bottom,wm-progress-monitor .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .legend-wrapper .legend.--bottom .legend-item,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .legend-wrapper .legend.--bottom .legend-color,wm-progress-monitor .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .legend-wrapper .legend .legend-item,wm-progress-monitor .legend-wrapper .legend .legend-item{position:relative}:host .legend-wrapper .legend .legend-item:not(:last-of-type),wm-progress-monitor .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .legend-wrapper .legend .legend-text,wm-progress-monitor .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .legend-wrapper .legend .legend-color,wm-progress-monitor .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .legend-wrapper .legend.bar3,wm-progress-monitor .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host,wm-progress-monitor{display:-ms-flexbox;display:flex}:host .legend-wrapper,wm-progress-monitor .legend-wrapper{-ms-flex-align:start;align-items:flex-start;padding:0 1.25rem}: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);
-    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 delegatesFocus() { return true; }
-  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);
+    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 delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
 ProgressMonitor.style = wmProgressMonitorCss;
 
-const ProgressSlice = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmProgressSliceUpdated = createEvent(this, "wmProgressSliceUpdated", 7);
-    this.legend = undefined;
-    this.amount = undefined;
-    this.popoverTitle = undefined;
-    this.popoverText = undefined;
-    this.popoverButtonText = undefined;
-  }
-  componentDidUpdate() {
-    this.wmProgressSliceUpdated.emit();
-  }
+const ProgressSlice = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmProgressSliceUpdated = createEvent(this, "wmProgressSliceUpdated", 7);
+    this.legend = undefined;
+    this.amount = undefined;
+    this.popoverTitle = undefined;
+    this.popoverText = undefined;
+    this.popoverButtonText = undefined;
+  }
+  componentDidUpdate() {
+    this.wmProgressSliceUpdated.emit();
+  }
 };
 
 export { ProgressIndicator as wm_progress_indicator, ProgressMonitor as wm_progress_monitor, ProgressSlice as wm_progress_slice };

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

@@ -1 +1 @@
-{"file":"wm-progress-indicator.wm-progress-monitor.wm-progress-slice.entry.js","mappings":"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","names":[],"sources":["./src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","./src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","./src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\nwm-progress-indicator {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\nimport { ChartDetails } from \"../../../global/interfaces\";\nimport { generateId, intl } from \"../../../global/functions\";\nimport {\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\n\n@Component({\n  tag: \"wm-progress-indicator\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-indicator.scss\",\n})\nexport class ProgressIndicator {\n  @Element() el!: HTMLWmProgressIndicatorElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() label?: string;\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() showLegend: boolean = true;\n\n  @State() isTabbing: boolean = false;\n  @State() mode?: \"doughnut\" | \"bar\";\n  @State() userIsNavigating: boolean = false;\n\n  private uid: string = generateId();\n  private total!: number;\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\n  private slicesDetails: SliceDetails[] = [];\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\n  }\n  get chartDetails(): ChartDetails | undefined {\n    return this.mode ? allChartsDetails[this.mode] : undefined;\n  }\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\n    });\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  componentWillLoad() {\n    if (!this.label) {\n      console.error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n\n    if (this.el.children.length !== 2) {\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\n    }\n\n    // Listen to parent for initial mode, and future changes\n    this.el.parentElement!.addEventListener(\n      \"wmProgressMonitorModeChange\",\n      (ev) => (this.mode = (ev as CustomEvent).detail)\n    );\n  }\n\n  @Listen(\"wmProgressSliceUpdated\")\n  async handleSliceUpdate() {\n    await getDetails.call(this, this.mode!);\n    forceUpdate(this.el);\n  }\n\n  @Watch(\"mode\")\n  handleModeUpdate() {\n    if (this.mode) {\n      getDetails.call(this, this.mode);\n    }\n  }\n\n  renderBarOrDoughnut() {\n    if (this.total > 0 && this.mode === \"bar\") {\n      return renderStackedBar.call(this, this.mode!);\n    } else {\n      return renderDoughnut.call(this, this.mode!);\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex=\"0\"\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby={`chart-instructions`}\n        >\n          <label\n            id={`label-${this.uid}`}\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\n            htmlFor={`graphic-${this.uid}`}\n          >\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.mode && this.renderBarOrDoughnut()}\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n",":host,\nwm-progress-monitor {\n  display: flex;\n\n  .legend-wrapper {\n    @extend %chart-legend-styles;\n    align-items: flex-start;\n    padding: 0 1.25rem;\n  }\n}\n\n:host(.row) {\n  flex-direction: row;\n}\n\n:host(.column) {\n  flex-direction: column;\n}\n","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","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-indicator.wm-progress-monitor.wm-progress-slice.entry.js","mappings":"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","names":[],"sources":["./src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","./src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","./src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\r\nwm-progress-indicator {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\r\nimport { ChartDetails } from \"../../../global/interfaces\";\r\nimport { generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-indicator\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-indicator.scss\",\r\n})\r\nexport class ProgressIndicator {\r\n  @Element() el!: HTMLWmProgressIndicatorElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() showLegend: boolean = true;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() mode?: \"doughnut\" | \"bar\";\r\n  @State() userIsNavigating: boolean = false;\r\n\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\r\n  private slicesDetails: SliceDetails[] = [];\r\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\r\n  }\r\n  get chartDetails(): ChartDetails | undefined {\r\n    return this.mode ? allChartsDetails[this.mode] : undefined;\r\n  }\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n\r\n    if (this.el.children.length !== 2) {\r\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\r\n    }\r\n\r\n    // Listen to parent for initial mode, and future changes\r\n    this.el.parentElement!.addEventListener(\r\n      \"wmProgressMonitorModeChange\",\r\n      (ev) => (this.mode = (ev as CustomEvent).detail)\r\n    );\r\n  }\r\n\r\n  @Listen(\"wmProgressSliceUpdated\")\r\n  async handleSliceUpdate() {\r\n    await getDetails.call(this, this.mode!);\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Watch(\"mode\")\r\n  handleModeUpdate() {\r\n    if (this.mode) {\r\n      getDetails.call(this, this.mode);\r\n    }\r\n  }\r\n\r\n  renderBarOrDoughnut() {\r\n    if (this.total > 0 && this.mode === \"bar\") {\r\n      return renderStackedBar.call(this, this.mode!);\r\n    } else {\r\n      return renderDoughnut.call(this, this.mode!);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex=\"0\"\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby={`chart-instructions`}\r\n        >\r\n          <label\r\n            id={`label-${this.uid}`}\r\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\r\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\r\n            htmlFor={`graphic-${this.uid}`}\r\n          >\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.mode && this.renderBarOrDoughnut()}\r\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host,\r\nwm-progress-monitor {\r\n  display: flex;\r\n\r\n  .legend-wrapper {\r\n    @extend %chart-legend-styles;\r\n    align-items: flex-start;\r\n    padding: 0 1.25rem;\r\n  }\r\n}\r\n\r\n:host(.row) {\r\n  flex-direction: row;\r\n}\r\n\r\n:host(.column) {\r\n  flex-direction: column;\r\n}\r\n","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","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"],"version":3}