@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/cjs/wm-chart.cjs.entry.js

@@ -2,176 +2,176 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fae02cd7.js');
-const functions = require('./functions-91da05e9.js');
-const chartFunctions = require('./chartFunctions-2c3e010e.js');
-const intl = require('./intl-fa3bb4ae.js');
+const index = require('./index-f8ef86de.js');
+const functions = require('./functions-4208c444.js');
+const chartFunctions = require('./chartFunctions-cecf8134.js');
+const intl = require('./intl-3fafc6d1.js');
 
 const wmChartCss = ":host{--wmcolor-chart-label-text-negative:var(--wmcolor-text-negative);--wmcolor-chart-label-text-positive:var(--wmcolor-text-positive);--wmcolor-chart-label-text:var(--wmcolor-text);--wmcolor-chart-subinfo-text:var(--wmcolor-text);--wmcolor-chart-value-text:var(--wmcolor-text);display:block}:host .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{display:block;margin:0;padding-bottom:0.25rem;font-weight:600;position:relative}:host .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:var(--wmcolor-chart-subinfo-text)}:host .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .label.--none{display:none}:host .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .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{display:-ms-flexbox;display:flex}:host .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){margin-right:2px}:host .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{cursor:pointer}:host .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){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,:host .component-wrapper path:hover,:host .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .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,:host .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2b label,:host .component-wrapper.doughnut2b .label-text,:host .component-wrapper.doughnut3 label,:host .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.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .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.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .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.bar{-ms-flex-direction:row;flex-direction:row}:host .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.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .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,:host .component-wrapper.bar2b,:host .component-wrapper.bar3,:host .component-wrapper.bar4,:host .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar2b .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar2b .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .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 .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{stroke:var(--wmcolor-chart-gridline);stroke-width:1px}:host .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{margin-top:1.25rem}:host .component-wrapper.bar6,:host .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, var(--wmcolor-chart-gridline) 1px, transparent 1px);background-position:-1px;border-left:1px solid var(--wmcolor-chart-gridline);border-bottom:1px solid var(--wmcolor-chart-gridline);background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,:host .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,:host .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,:host .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,:host .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,:host .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,:host .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,:host .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{-ms-flex-direction:row;flex-direction:row}:host .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{font-size:0.75rem;font-style:italic;max-width:100%}:host #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{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{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.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .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{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}: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 Chart = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.uid = functions.generateId();
-    this.slicesDetails = [];
-    this.handleStackedBarResize = functions.debounce(async () => {
-      // if any value text overlaps with another, hide it and display warning
-      let hasHiddenBarValue = false;
-      const textEls = this.el.shadowRoot.querySelectorAll(".value");
-      if (textEls.length > 0) {
-        let prevTextEls = [];
-        const margin = 4;
-        textEls.forEach((textEl) => {
-          textEl.classList.remove("hidden");
-          const currentValue = parseInt(textEl.dataset.value);
-          // only proceed if there are prevTextEls to check for overlap
-          if (prevTextEls.length > 0) {
-            const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
-            // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
-            prevTextEls.forEach((prevTextEl) => {
-              const prevValue = parseInt(prevTextEl.dataset.value);
-              const valuesOverlap = prevTextEl.getBoundingClientRect().right > currentLeftEdge;
-              if (valuesOverlap) {
-                const smallerValueEl = currentValue < prevValue ? textEl : prevTextEl;
-                smallerValueEl.classList.add("hidden");
-                hasHiddenBarValue = true;
-              }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.uid = functions.generateId();
+        this.slicesDetails = [];
+        this.handleStackedBarResize = functions.debounce(async () => {
+            // if any value text overlaps with another, hide it and display warning
+            let hasHiddenBarValue = false;
+            const textEls = this.el.shadowRoot.querySelectorAll(".value");
+            if (textEls.length > 0) {
+                let prevTextEls = [];
+                const margin = 4;
+                textEls.forEach((textEl) => {
+                    textEl.classList.remove("hidden");
+                    const currentValue = parseInt(textEl.dataset.value);
+                    // only proceed if there are prevTextEls to check for overlap
+                    if (prevTextEls.length > 0) {
+                        const currentLeftEdge = textEl.getBoundingClientRect().left - margin;
+                        // check for overlap with all prevTextEls & hide the smaller value if overlap occurs
+                        prevTextEls.forEach((prevTextEl) => {
+                            const prevValue = parseInt(prevTextEl.dataset.value);
+                            const valuesOverlap = prevTextEl.getBoundingClientRect().right > currentLeftEdge;
+                            if (valuesOverlap) {
+                                const smallerValueEl = currentValue < prevValue ? textEl : prevTextEl;
+                                smallerValueEl.classList.add("hidden");
+                                hasHiddenBarValue = true;
+                            }
+                        });
+                    }
+                    // prevTextEls only need to be checked if they are visible and have a non-zero value
+                    if (!textEl.classList.contains("hidden") && currentValue > 0) {
+                        prevTextEls.push(textEl);
+                    }
+                });
+            }
+            this.hasHiddenBarValue = hasHiddenBarValue;
+        }, 100);
+        this.debouncedUpdate = functions.debounce(async () => {
+            index.forceUpdate(this.el);
+        }, 10);
+        this.debouncedSliceUpdate = functions.debounce(async () => {
+            await chartFunctions.getDetails.call(this, this.currentChartType);
+            index.forceUpdate(this.el);
+        }, 100);
+        this.chartType = "doughnut1";
+        this.label = undefined;
+        this.labelWidth = "150px";
+        this.subinfo = undefined;
+        this.valueFormat = "none";
+        this.showGrid = true;
+        this.showLegend = true;
+        this.showBarLegend = false;
+        this.notStartedColor = false;
+        this.labelPosition = "top";
+        this.isTabbing = false;
+        this.userIsNavigating = false;
+        this.hasHiddenBarValue = false;
+    }
+    get popoverEl() {
+        return this.el.shadowRoot.querySelector("priv-chart-popover");
+    }
+    get sliceEls() {
+        return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
+    }
+    get currentChartType() {
+        let current = this.chartType;
+        if (this.chartType === "doughnut2" && this.el.children.length > 3) {
+            // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
+            current = "doughnut2b";
+        }
+        else if (this.chartType === "bar2" && this.el.children.length > 4) {
+            // render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
+            current = "bar2b";
+        }
+        return current;
+    }
+    get chartDetails() {
+        return chartFunctions.allChartsDetails[this.currentChartType];
+    }
+    get ariaLabelText() {
+        let text = `${this.label}`;
+        if (this.subinfo) {
+            text += ` ${this.subinfo}`;
+        }
+        return text;
+    }
+    get isDoughnut() {
+        return this.chartDetails.category === "doughnut";
+    }
+    get isStackedBar() {
+        return this.chartDetails.category === "stackedBar";
+    }
+    get isSimpleBar() {
+        return this.chartDetails.category === "simpleBar";
+    }
+    get isBar() {
+        return this.isStackedBar || this.isSimpleBar;
+    }
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    handleKeydown(ev) {
+        chartFunctions.handleChartKeydown.call(this, ev);
+    }
+    /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
+    async componentWillLoad() {
+        if (!this.label) {
+            throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+        }
+        await chartFunctions.getDetails.call(this, this.currentChartType);
+        // rerender on resize
+        // unnecessary for doughnuts as layout doesn't change
+        if (!this.isDoughnut) {
+            const resizeObserver = new ResizeObserver(() => {
+                this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
             });
-          }
-          // prevTextEls only need to be checked if they are visible and have a non-zero value
-          if (!textEl.classList.contains("hidden") && currentValue > 0) {
-            prevTextEls.push(textEl);
-          }
-        });
-      }
-      this.hasHiddenBarValue = hasHiddenBarValue;
-    }, 100);
-    this.debouncedUpdate = functions.debounce(async () => {
-      index.forceUpdate(this.el);
-    }, 10);
-    this.debouncedSliceUpdate = functions.debounce(async () => {
-      await chartFunctions.getDetails.call(this, this.currentChartType);
-      index.forceUpdate(this.el);
-    }, 100);
-    this.chartType = "doughnut1";
-    this.label = undefined;
-    this.labelWidth = "150px";
-    this.subinfo = undefined;
-    this.valueFormat = "none";
-    this.showGrid = true;
-    this.showLegend = true;
-    this.showBarLegend = false;
-    this.notStartedColor = false;
-    this.labelPosition = "top";
-    this.isTabbing = false;
-    this.userIsNavigating = false;
-    this.hasHiddenBarValue = false;
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll(".segment"));
-  }
-  get currentChartType() {
-    let current = this.chartType;
-    if (this.chartType === "doughnut2" && this.el.children.length > 3) {
-      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices
-      current = "doughnut2b";
-    }
-    else if (this.chartType === "bar2" && this.el.children.length > 4) {
-      // render an internal type (that includes an additional color) if bar2 has more than 4 slices ("conditonally met" color)
-      current = "bar2b";
-    }
-    return current;
-  }
-  get chartDetails() {
-    return chartFunctions.allChartsDetails[this.currentChartType];
-  }
-  get ariaLabelText() {
-    let text = `${this.label}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  get isDoughnut() {
-    return this.chartDetails.category === "doughnut";
-  }
-  get isStackedBar() {
-    return this.chartDetails.category === "stackedBar";
-  }
-  get isSimpleBar() {
-    return this.chartDetails.category === "simpleBar";
-  }
-  get isBar() {
-    return this.isStackedBar || this.isSimpleBar;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeydown(ev) {
-    chartFunctions.handleChartKeydown.call(this, ev);
-  }
-  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */
-  async componentWillLoad() {
-    if (!this.label) {
-      throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    await chartFunctions.getDetails.call(this, this.currentChartType);
-    // rerender on resize
-    // unnecessary for doughnuts as layout doesn't change
-    if (!this.isDoughnut) {
-      const resizeObserver = new ResizeObserver(() => {
-        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();
-      });
-      resizeObserver.observe(this.el);
-    }
-  }
-  handleSliceUpdate() {
-    this.debouncedSliceUpdate();
-  }
-  /* RENDERING */
-  renderBarText(s, idx) {
-    let val;
-    if (this.valueFormat === "percentage") {
-      // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
-      val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
-    }
-    else if (this.valueFormat === "amount") {
-      val = s.amount;
-    }
-    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
-    // in order to not disturb the positioning of the other value texts in the entire row
-    return (index.h("div", { class: "value-wrapper", style: {
-        width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
+            resizeObserver.observe(this.el);
+        }
+    }
+    handleSliceUpdate() {
+        this.debouncedSliceUpdate();
+    }
+    /* RENDERING */
+    renderBarText(s, idx) {
+        let val;
+        if (this.valueFormat === "percentage") {
+            // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
+            val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
+        }
+        else if (this.valueFormat === "amount") {
+            val = s.amount;
+        }
+        // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper
+        // in order to not disturb the positioning of the other value texts in the entire row
+        return (index.h("div", { class: "value-wrapper", style: {
+                width: `calc(${chartFunctions.amountToPercent(s.amount, this.total, false)}%
         ${idx !== this.slicesDetails.length - 1 ? " - 2px" : ""}`,
-      } }, index.h("span", { class: "value", "data-value": s.amount }, s.amount > 0 && val)));
-  }
-  drawAxis() {
-    if (this.currentChartType === "bar3") {
-      return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
-    }
-  }
-  renderChart() {
-    if (this.isSimpleBar) {
-      return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
-    }
-    else if (this.isStackedBar && this.total > 0) {
-      return chartFunctions.renderStackedBar.call(this, this.currentChartType);
-    }
-    else if (this.isDoughnut && this.total > 0) {
-      return chartFunctions.renderDoughnut.call(this, this.currentChartType);
-    }
-  }
-  render() {
-    return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, index.h("label", { id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
+            } }, index.h("span", { class: "value", "data-value": s.amount }, s.amount > 0 && val)));
+    }
+    drawAxis() {
+        if (this.currentChartType === "bar3") {
+            return (index.h("svg", { class: "axis" }, index.h("line", { x1: "0", x2: "100%", y1: "0", y2: "0" }), index.h("line", { x1: "0", x2: "0", y1: "0", y2: "-85px" }), index.h("line", { class: "tick", x1: "0.5", x2: "0.5", y1: "0", y2: "6" }), index.h("text", { x: "0.5", y: "-6" }, "0%"), index.h("line", { class: "tick", x1: "100%", x2: "100%", y1: "0", y2: "6" }), index.h("text", { x: "100%", y: "-6" }, "100%")));
+        }
+    }
+    renderChart() {
+        if (this.isSimpleBar) {
+            return chartFunctions.renderSimpleBar.call(this, this.currentChartType);
+        }
+        else if (this.isStackedBar && this.total > 0) {
+            return chartFunctions.renderStackedBar.call(this, this.currentChartType);
+        }
+        else if (this.isDoughnut && this.total > 0) {
+            return chartFunctions.renderDoughnut.call(this, this.currentChartType);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { onBlur: () => chartFunctions.exitChart.call(this) }, index.h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": intl.chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, index.h("label", { id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, index.h("span", { class: "label-text" }, this.label), this.subinfo ? index.h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && chartFunctions.renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && chartFunctions.renderLegend.call(this, this.currentChartType), index.h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }), this.hasHiddenBarValue && chartFunctions.renderHiddenValuesMessage()), chartFunctions.renderInstructionsText()));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return index.getElement(this); }
 };
 Chart.style = wmChartCss;