@watermarkinsights/ripple 5.33.0-alpha.0 → 5.33.0-alpha.1

package/dist/cjs/app-globals-k3bip5HZ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var index = require('./index-BKdkswfl.js');
+
+const appGlobalScript = index.global || (() => {});
+const globalScripts = appGlobalScript;
+
+exports.globalScripts = globalScripts;

package/dist/cjs/{chartFunctions-0d47b1f4.js → chartFunctions-fWIttqIZ.js}

@@ -1,13 +1,12 @@
 'use strict';
 
-const index = require('./index-bb947bd5.js');
-const functions = require('./functions-761cb9f2.js');
+var index = require('./index-BKdkswfl.js');
+var functions = require('./functions-Bag4HsFG.js');
 
 const colors = {
     salmon: "#ff5f4e",
     cyan: "#19a1a9",
     forest: "#088000",
-    sleet: "#7f97ad",
     midnight: "#2e1b46",
     lavender: "#8b86ca",
     periwinkle: "#575195",
@@ -435,15 +434,7 @@ function renderInstructionsText() {
     return index.h("div", { id: "chart-instructions" }, chartInstructions);
 }
 function renderFilter() {
-    return (index.h("defs", null,
-        index.h("filter", { id: "wmHoverDropShadow" },
-            index.h("feGaussianBlur", { stdDeviation: "3" }),
-            index.h("feOffset", { result: "offsetblur" }),
-            index.h("feFlood", { "flood-color": "#333" }),
-            index.h("feComposite", { operator: "in", in2: "offsetblur" }),
-            index.h("feMerge", null,
-                index.h("feMergeNode", null),
-                index.h("feMergeNode", { in: "SourceGraphic" })))));
+    return (index.h("defs", null, index.h("filter", { id: "wmHoverDropShadow" }, index.h("feGaussianBlur", { stdDeviation: "3" }), index.h("feOffset", { result: "offsetblur" }), index.h("feFlood", { "flood-color": "#333" }), index.h("feComposite", { operator: "in", in2: "offsetblur" }), index.h("feMerge", null, index.h("feMergeNode", null), index.h("feMergeNode", { in: "SourceGraphic" })))));
 }
 function applyMinimumAngle(minimumAngle, slicesDetails, total) {
     const allAngles = slicesDetails.map((s) => amountToDegree(s.amount, total));
@@ -494,12 +485,7 @@ function renderDoughnut(chartType) {
     else {
         perc = perc + "%";
     }
-    return (index.h("div", { class: "chart-wrapper doughnut-wrapper" },
-        index.h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
-            renderFilter(),
-            slicesDetails.map((s) => renderPath.call(this, s, chartType)),
-            renderFocusOutline.call(this),
-            isProgressIndicator ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+    return (index.h("div", { class: "chart-wrapper doughnut-wrapper" }, index.h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" }, renderFilter(), slicesDetails.map((s) => renderPath.call(this, s, chartType)), renderFocusOutline.call(this), isProgressIndicator ? (index.h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
 }
 function highlightSegmentInfo(infoEls, s) {
     infoEls.forEach((el) => {
@@ -518,14 +504,10 @@ function removeSegmentInfoHighlight(infoEls) {
 }
 function renderPath(s, chartType) {
     const percentageValue = amountToPercent(s.amount, this.total, true) + "%";
-    return (!isNaN(s.amount) && (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
-        index.h("path", { id: s.id, class: "segment doughnut-segment", fill: s.visualAmount ? s.color : "transparent", d: getPathData.call(this, s.visualAmount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
+    return (!isNaN(s.amount) && (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, index.h("path", { id: s.id, class: "segment doughnut-segment", fill: s.visualAmount ? s.color : "transparent", d: getPathData.call(this, s.visualAmount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
 }
 function renderFocusOutline() {
-    return this.isTabbing ? (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
-        index.h("use", { tabindex: -1, id: "kfbg1", xlinkHref: `#${this.focusedSliceId}` }),
-        index.h("use", { tabindex: -1, id: "kfstroke", xlinkHref: `#${this.focusedSliceId}` }),
-        index.h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
+    return this.isTabbing ? (index.h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` }, index.h("use", { tabindex: -1, id: "kfbg1", xlinkHref: `#${this.focusedSliceId}` }), index.h("use", { tabindex: -1, id: "kfstroke", xlinkHref: `#${this.focusedSliceId}` }), index.h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
 }
 function renderDoughnutText(s) {
     const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
@@ -581,16 +563,7 @@ function renderStackedBar(chartType) {
             (this.isBar || this.isDoughnut) && this.showHiddenValuesMessage(showMsg);
         });
     }
-    return (index.h("div", { class: "chart-wrapper bar-wrapper" },
-        isHybridBar ? (index.h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""),
-        this.chartType === "bar3" && this.drawAxis(),
-        index.h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.valueFormat)}` },
-            !isHybridBar ? (index.h("div", { class: `values ${this.valueFormat}` }, this.slicesDetails.map((s) => this.renderBarText(s, 5)))) : (""),
-            index.h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s) => renderStackedBarSegment.call(this, s, 5))),
-            isHybridBar ? renderCompletionMessage.call(this) : ""),
-        this.chartType === "bar3" ? (index.h("div", { class: "bar3-axis-label", "aria-hidden": "true" },
-            index.h("span", null, "0%"),
-            index.h("span", null, "100%"))) : ("")));
+    return (index.h("div", { class: "chart-wrapper bar-wrapper" }, isHybridBar ? (index.h("div", { class: "single-perc" }, amountToPercent(this.slicesDetails[0].amount, this.total, true) + "%")) : (""), this.chartType === "bar3" && this.drawAxis(), index.h("div", { class: `inner-stacked-bar-wrapper ${showValue(this.valueFormat)}` }, !isHybridBar ? (index.h("div", { class: `values ${this.valueFormat}` }, this.slicesDetails.map((s) => this.renderBarText(s, 5)))) : (""), index.h("div", { class: "stacked-bar-segments-wrapper" }, this.slicesDetails.map((s) => renderStackedBarSegment.call(this, s, 5))), isHybridBar ? renderCompletionMessage.call(this) : ""), this.chartType === "bar3" ? (index.h("div", { class: "bar3-axis-label", "aria-hidden": "true" }, index.h("span", null, "0%"), index.h("span", null, "100%"))) : ("")));
 }
 function renderStackedBarSegment(s, minimumWidth) {
     const segmentPercentage = amountToPercent(s.amount, this.total, false);
@@ -608,8 +581,7 @@ function renderStackedBarSegment(s, minimumWidth) {
     return (index.h("div", { class: `segment stacked-bar-segment ${amountToPercent(s.amount, this.total, false) === 0 ? "zero" : ""} ${meetsSizeMinimum ? "" : "fixed-width"}`, style: {
             backgroundColor: s.color,
             width: renderedWidth,
-        }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), "data-segmentindex": s.index },
-        index.h("span", { class: "sr-only" }, `${s.legend} ${segmentValue}`)));
+        }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), "data-segmentindex": s.index }, index.h("span", { class: "sr-only" }, `${s.legend} ${segmentValue}`)));
 }
 function renderSimpleBar(chartType) {
     // find largest number and get interval, numTicks, chartMaxVal for all.
@@ -644,18 +616,10 @@ function renderSimpleBar(chartType) {
     const ticks = [];
     for (let i = 1; i <= numTicks; i++) {
         const tickVal = abbrNumber(functions.safeMultiplyFloat(i, interval));
-        ticks.push(index.h("div", { class: "tick" },
-            index.h("span", null, tickVal)));
+        ticks.push(index.h("div", { class: "tick" }, index.h("span", null, tickVal)));
     }
     const showGrid = chartType === "bar6" && this.showGrid && this.el.getBoundingClientRect().width > 300;
-    return (index.h("div", { class: "chart-wrapper simple-bar-wrapper" },
-        index.h("div", { class: `chart ${showValue(this.valueFormat)}` },
-            showGrid && index.h("div", { class: "gridlines" }),
-            index.h("div", { class: "rows" }, rows)),
-        showGrid && (index.h("div", { class: "x-axis", "aria-hidden": "true" },
-            index.h("div", { class: "zero" },
-                index.h("span", null, "0")),
-            ticks))));
+    return (index.h("div", { class: "chart-wrapper simple-bar-wrapper" }, index.h("div", { class: `chart ${showValue(this.valueFormat)}` }, showGrid && index.h("div", { class: "gridlines" }), index.h("div", { class: "rows" }, rows)), showGrid && (index.h("div", { class: "x-axis", "aria-hidden": "true" }, index.h("div", { class: "zero" }, index.h("span", null, "0")), ticks))));
 }
 function renderSimpleBarLegend(legend, show, chartType) {
     // not sure how to collapse the left column to 0 width with CSS grid. text should still be available to SR.
@@ -677,25 +641,22 @@ function renderSimpleBarItem(s, interval, ticks, largest) {
     return (index.h("div", { class: "bar segment", style: {
             backgroundColor: s.color,
             width: cssWidth,
-        }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), "data-segmentindex": s.index },
-        index.h("div", { class: "value" }, displayValue)));
+        }, onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), "data-segmentindex": s.index }, index.h("div", { class: "value" }, displayValue)));
 }
 function renderLegend(chartType) {
     // legend is hidden for bar1 and bar6 types regardless of showLegend value
     if (this.showLegend) {
         const showMsg = this.slicesDetails.reduce((hasCluster, cur) => (hasCluster = cur.inSmallCluster ? true : hasCluster), false);
         this.isDoughnut && this.showHiddenValuesMessage(showMsg);
-        return (index.h("div", { class: "legend-wrapper" },
-            index.h("div", { class: `legend ${chartType} ${this.mode === "bar" ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.slicesDetails.map((s) => {
-                const printValue = this.printModeFormat == "amount"
-                    ? `${s.amount}/${this.total}`
-                    : `${amountToPercent(s.amount, this.total, true)}%`;
-                // when both legend and amount are omitted, the legend is not shown for that particular option (it's been deactivated by the user)
-                if (!!s.amount || !!s.legend) {
-                    return renderLegendItem.call(this, { key: s.legend, color: s.color }, printValue, s);
-                }
-            })),
-            this.isDoughnut && !this.printMode && renderHiddenValuesMessage()));
+        return (index.h("div", { class: "legend-wrapper" }, index.h("div", { class: `legend ${chartType} ${this.mode === "bar" ? "--top" : "--bottom"}`, "aria-hidden": "true" }, this.slicesDetails.map((s) => {
+            const printValue = this.printModeFormat == "amount"
+                ? `${s.amount}/${this.total}`
+                : `${amountToPercent(s.amount, this.total, true)}%`;
+            // when both legend and amount are omitted, the legend is not shown for that particular option (it's been deactivated by the user)
+            if (!!s.amount || !!s.legend) {
+                return renderLegendItem.call(this, { key: s.legend, color: s.color }, printValue, s);
+            }
+        })), this.isDoughnut && !this.printMode && renderHiddenValuesMessage()));
     }
 }
 function renderLegendItem(legendItem, printValue = "", s = null) {
@@ -706,13 +667,7 @@ function renderLegendItem(legendItem, printValue = "", s = null) {
             highlightSegmentInfo(Array.from(this.el.shadowRoot.querySelectorAll("[data-segmentindex")), s);
         }
     };
-    return (index.h("div", { class: "legend-item", onClick: (ev) => handleLegendItemClick(ev), "data-segmentindex": s ? s.index : null },
-        index.h("div", { class: "legend-color", style: { backgroundColor: legendItem.color } }),
-        index.h("div", { class: "legend-text" },
-            legendItem.key,
-            printValue && index.h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` },
-                ": ",
-                printValue))));
+    return (index.h("div", { class: "legend-item", onClick: (ev) => handleLegendItemClick(ev), "data-segmentindex": s ? s.index : null }, index.h("div", { class: "legend-color", style: { backgroundColor: legendItem.color } }), index.h("div", { class: "legend-text" }, legendItem.key, printValue && index.h("span", { class: `print-value ${this.printMode ? "force-visible" : ""}` }, ": ", printValue))));
 }
 function renderCompletionMessage() {
     if (this.completionMessage) {
@@ -720,10 +675,7 @@ function renderCompletionMessage() {
     }
 }
 function renderHiddenValuesMessage() {
-    return (index.h("div", { class: "hidden-values-warning hidden" },
-        textHiddenMessage,
-        index.h("br", null),
-        seeDetailsMessage));
+    return (index.h("div", { class: "hidden-values-warning hidden" }, textHiddenMessage, index.h("br", null), seeDetailsMessage));
 }
 function formatDisplayValue(amount, amountTotal, valueFormat, decimalPlaces = 0) {
     switch (valueFormat) {