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

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

@@ -0,0 +1,106 @@
+'use strict';
+
+require('./index-bb947bd5.js');
+
+const version = "5.33.0-alpha.2";
+
+// PRINT RIPPLE VERSION IN CONSOLE
+// test envs return 0 for plugin.length
+// do not print version number there as it causes issues
+if (window.navigator.plugins.length > 0) {
+    console.log("%cRipple component library %c%s", "color: #575195; font-weight: bold", "font-weight: bold", version);
+}
+// Dispatching events to track whether user is navigating with keyboard or mouse
+// no longer necessary for keyboard focus indicators (thanks to :focus-visible)
+// but still used in several components for other things (search for isTabbing)
+function wmComponentKeys(ev) {
+    if (ev.key == "Tab") {
+        var event = new Event("wmUserIsTabbing");
+        window.dispatchEvent(event);
+        document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+    }
+    if (ev.key == "ArrowLeft" || ev.key == "ArrowUp" || ev.key == "ArrowRight" || ev.key == "ArrowDown") {
+        var event = new Event("wmUserIsKeying");
+        window.dispatchEvent(event);
+        document.querySelector("body").classList.add("wmcl-user-is-keying");
+    }
+}
+function wmComponentMouseDownOnce() {
+    var event = new Event("wmUserIsNotTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
+    document.querySelector("body").classList.remove("wmcl-user-is-keying");
+}
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+// MODES (FOR PRODUCT-SPECIFIC STYLING)
+//Checks for mode attribute explicitly set on the document. If "mode" is set on component, it will override the global mode. Falls back to default (Planning styles)
+const appGlobalScript = () => {
+};
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
+tooltipEl.setAttribute("aria-hidden", "true");
+const tooltipStyles = document.createElement("style");
+tooltipStyles.textContent = `
+.wm-tooltip {
+  position: fixed;
+  overflow: hidden;
+  pointer-events: none;
+  line-height: normal;
+  font-family: inherit;
+  font-size: 0.875rem;
+  text-transform: none;
+  font-weight: normal;
+  background: var(--wmcolor-tooltip-background);
+  color: var(--wmcolor-tooltip-text);
+  z-index: 999999;
+  max-width: var(--wmTooltipMaxWidth, 13.75rem);
+  margin-right: 1.5rem;
+  padding: 0.375rem;
+  transition-property: opacity;
+  transition-delay: 0s;
+  opacity: 0;
+  inset: unset;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+  will-change: transform;
+  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
+  border: none;
+}
+
+.wm-tooltip:popover-open {
+  opacity: 0;
+}
+
+.wm-tooltip.show {
+  transition-delay: 500ms;
+  opacity: 1;
+}
+`;
+const body = document.querySelector("body");
+if (body) {
+    document.head.appendChild(tooltipStyles);
+    tooltipContainer.appendChild(tooltipEl);
+    body.appendChild(tooltipContainer);
+}
+else {
+    document.addEventListener("DOMContentLoaded", () => {
+        const body = document.querySelector("body");
+        document.head.appendChild(tooltipStyles);
+        tooltipContainer.appendChild(tooltipEl);
+        body.appendChild(tooltipContainer);
+    });
+}
+
+const globalScripts = appGlobalScript;
+
+exports.globalScripts = globalScripts;

package/dist/cjs/{chartFunctions-fWIttqIZ.js → chartFunctions-3be4f639.js}

@@ -1,12 +1,13 @@
 'use strict';
 
-var index = require('./index-BKdkswfl.js');
-var functions = require('./functions-Bag4HsFG.js');
+const index = require('./index-bb947bd5.js');
+const functions = require('./functions-4cad2b20.js');
 
 const colors = {
     salmon: "#ff5f4e",
     cyan: "#19a1a9",
     forest: "#088000",
+    sleet: "#7f97ad",
     midnight: "#2e1b46",
     lavender: "#8b86ca",
     periwinkle: "#575195",
@@ -434,7 +435,15 @@ 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));
@@ -485,7 +494,12 @@ 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) => {
@@ -504,10 +518,14 @@ 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);
@@ -563,7 +581,16 @@ 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);
@@ -581,7 +608,8 @@ 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.
@@ -616,10 +644,18 @@ 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.
@@ -641,22 +677,25 @@ 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) {
@@ -667,7 +706,13 @@ 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) {
@@ -675,7 +720,10 @@ 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) {