@watermarkinsights/ripple 5.16.0-alpha.10 → 5.16.0-alpha.12

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -2,12 +2,6 @@ import { h, Host } from "@stencil/core";
 import { intl, shouldOpenUp, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../global/functions";
 export class Timepicker {
     constructor() {
-        this.disabled = false;
-        this.value = "";
-        this.label = "";
-        this.labelPosition = "top";
-        this.requiredField = false;
-        this.isExpanded = false;
         this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
         this.twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;
         this.timeFormat = "hh:mm";
@@ -18,6 +12,14 @@ export class Timepicker {
             defaultMessage: "Select time",
             description: "Button text for screen readers.",
         });
+        this.disabled = false;
+        this.value = "";
+        this.errorMessage = undefined;
+        this.label = "";
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.preselected = undefined;
+        this.isExpanded = false;
     }
     get selectedOption() {
         return this.optionsList.filter((option) => option.tabIndex === 0)[0];
@@ -304,7 +306,6 @@ export class Timepicker {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -317,14 +318,12 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -337,14 +336,12 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "errorMessage": {
                 "type": "string",
-                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -357,13 +354,11 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error-message",
                 "reflect": false
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -376,14 +371,12 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -396,14 +389,12 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "requiredField": {
                 "type": "boolean",
-                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -416,14 +407,12 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required-field",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "preselected": {
                 "type": "string",
-                "attribute": "preselected",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -436,8 +425,7 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "preselected",
                 "reflect": false
             }
         };

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -2,10 +2,6 @@ import { Host, h } from "@stencil/core";
 import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, debounce, findAllScrollableParents, getCumulativeScrollOffset, } from "../../global/functions";
 export class Toggletip {
     constructor() {
-        this.tooltipPosition = "bottom-right";
-        this.targetSize = "small";
-        this.toggletipType = "info";
-        this.isHidden = true; // initially toggletip is hidden so it can be measured and replaced before it is displayed. It is also hidden while the user is scrolling in browsers that don't fully implement the popover API (as of this day FF and Safari don't know about anchor())
         this.scrollableParents = [];
         this.tooltipInfoMessage = intl.formatMessage({
             id: "toggletip.moreInformation",
@@ -24,6 +20,12 @@ export class Toggletip {
         this.debouncedResize = debounce(() => {
             this.scrollableParents = findAllScrollableParents(this.el);
         }, 200);
+        this.label = undefined;
+        this.tooltip = undefined;
+        this.tooltipPosition = "bottom-right";
+        this.targetSize = "small";
+        this.toggletipType = "info";
+        this.isHidden = true;
     }
     get isOpen() {
         return this.toggletipEl.matches(":popover-open");
@@ -240,7 +242,6 @@ export class Toggletip {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -253,13 +254,11 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,13 +271,11 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "tooltip",
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPlacement",
@@ -297,14 +294,12 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "tooltip-position",
                 "reflect": false,
                 "defaultValue": "\"bottom-right\""
             },
             "targetSize": {
                 "type": "string",
-                "attribute": "target-size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"large\"",
@@ -317,14 +312,12 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "target-size",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "toggletipType": {
                 "type": "string",
-                "attribute": "toggletip-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"info\" | \"ai\"",
@@ -337,8 +330,7 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "toggletip-type",
                 "reflect": false,
                 "defaultValue": "\"info\""
             }

package/dist/collection/components/wm-uploader/wm-uploader.js

@@ -3,16 +3,23 @@ import { uploaderMessages } from "../../global/intl";
 import { intl, hideTooltip, showTooltip } from "../../global/functions";
 export class Uploader {
     constructor() {
+        this.batchCount = 0; // used to calculate the aggregate upload progress
+        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
+        this.fileIdToDelete = "";
+        this.label = undefined;
         this.uploaderType = "select";
         this.dropArea = "component";
+        this.buttonText = undefined;
+        this.icon = undefined;
         this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
+        this.maxSize = undefined;
+        this.maxFiles = undefined;
+        this.errorMessage = undefined;
+        this.requiredField = undefined;
         this.showInfo = "time";
         this.isTabbing = false;
-        this.notif = ""; // for upload notifications
+        this.notif = "";
         this.isCondensed = false;
-        this.batchCount = 0; // used to calculate the aggregate upload progress
-        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
-        this.fileIdToDelete = "";
     }
     get isDisabled() {
         // disable if is the uploader is maxed out or if something is uploading
@@ -173,6 +180,7 @@ export class Uploader {
             mutationRecord.oldValue &&
             parseInt(mutationRecord.oldValue) < 100) {
             // if final file progress completes
+            this.uploadButtonEl.value = "";
             this.notif = uploaderMessages.finishedUploading;
             this.announce(uploaderMessages.finishedUploading, this.assertiveLiveRegionEl);
             clearInterval(this.srProgress);
@@ -214,6 +222,9 @@ export class Uploader {
                 this.announce(uploaderMessages.fileLimitReached, this.assertiveLiveRegionEl);
             }
         }
+        else {
+            this.uploadButtonEl.value = ""; // when making a new selection, always reset the value so onChange is triggered (even if the same file is selected)
+        }
     }
     handleUploadButtonChange() {
         if (this.uploadButtonEl.files) {
@@ -222,7 +233,6 @@ export class Uploader {
                 this.batchCount = files.length;
                 this.wmUploaderFilesSelected.emit(files);
             }
-            this.uploadButtonEl.value = ""; // reset to ensure that onChange is triggered when the same file is selected a second time
         }
     }
     handleLabelMouseEnter(ev) {
@@ -299,9 +309,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: '80063eb0604b5921b8b3df54db97f9cd02b04851', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'd9a54dbd010eecb135879700d44e16268c1f56ba', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: '5e31c446aa655b9f43fd0067791ff78d0598b7c3', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'b506e26760d3e6ea6f91936e9738837d6ff5019a', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '07ab092da14b6aa0b93e80e5d68cd119bc62e10d', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: 'ce16fc6627ec05dc8b44d48b19f89f79276745ae', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }
@@ -320,7 +330,6 @@ export class Uploader {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -333,13 +342,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "uploaderType": {
                 "type": "string",
-                "attribute": "uploader-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"select\" | \"drop\"",
@@ -352,14 +359,12 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "uploader-type",
                 "reflect": false,
                 "defaultValue": "\"select\""
             },
             "dropArea": {
                 "type": "string",
-                "attribute": "drop-area",
                 "mutable": false,
                 "complexType": {
                     "original": "\"component\" | \"page\"",
@@ -372,14 +377,12 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "drop-area",
                 "reflect": false,
                 "defaultValue": "\"component\""
             },
             "buttonText": {
                 "type": "string",
-                "attribute": "button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -392,13 +395,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "button-text",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -411,13 +412,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "icon",
                 "reflect": false
             },
             "fileTypes": {
                 "type": "string",
-                "attribute": "file-types",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -430,14 +429,12 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "file-types",
                 "reflect": false,
                 "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
             },
             "maxSize": {
                 "type": "string",
-                "attribute": "max-size",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -450,13 +447,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "max-size",
                 "reflect": false
             },
             "maxFiles": {
                 "type": "number",
-                "attribute": "max-files",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -469,13 +464,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "max-files",
                 "reflect": false
             },
             "errorMessage": {
                 "type": "string",
-                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -488,13 +481,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error-message",
                 "reflect": false
             },
             "requiredField": {
                 "type": "boolean",
-                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -507,13 +498,11 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required-field",
                 "reflect": false
             },
             "showInfo": {
                 "type": "string",
-                "attribute": "show-info",
                 "mutable": false,
                 "complexType": {
                     "original": "\"size\" | \"time\" | \"none\"",
@@ -526,8 +515,7 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "show-info",
                 "reflect": false,
                 "defaultValue": "\"time\""
             }

package/dist/esm/app-globals-1087214a.js

@@ -0,0 +1,90 @@
+import './index-130e07bb.js';
+
+const version = "5.16.0-alpha.12";
+
+// 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);
+// 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;
+}
+`;
+document.head.appendChild(tooltipStyles);
+tooltipContainer.appendChild(tooltipEl);
+document.querySelector("body").appendChild(tooltipContainer);
+const globalFn = () => { };
+
+const globalScripts = globalFn;
+
+export { globalScripts as g };

package/dist/esm/{chartFunctions-BocRhQ0T.js → chartFunctions-ebe4f673.js}

@@ -1,10 +1,11 @@
-import { h } from './index-C20glyTb.js';
-import { i as intl, s as safeMultiplyFloat, c as checkForActiveElInShadow, a as getPosition } from './functions-B9BrPorY.js';
+import { h } from './index-130e07bb.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-fbf8519f.js';
 
 const colors = {
     salmon: "#ff5f4e",
     cyan: "#19a1a9",
     forest: "#088000",
+    sleet: "#7f97ad",
     midnight: "#2e1b46",
     lavender: "#8b86ca",
     periwinkle: "#575195",
@@ -721,4 +722,4 @@ function renderHiddenValuesMessage() {
         seeDetailsMessage));
 }
 
-export { allChartsDetails as a, amountToPercent as b, renderSimpleBar as c, renderStackedBar as d, renderDoughnut as e, renderInstructionsText as f, getDetails as g, handleChartKeydown as h, renderLegend as i, renderHiddenValuesMessage as j, exitChart as k, getInterval as l, abbrNumber as m, renderCompletionMessage as n, renderLegendItem as o, removeSegmentInfoHighlight as r };
+export { allChartsDetails as a, renderSimpleBar as b, renderStackedBar as c, renderDoughnut as d, renderInstructionsText as e, renderLegend as f, getDetails as g, handleChartKeydown as h, renderHiddenValuesMessage as i, exitChart as j, amountToPercent as k, renderCompletionMessage as l, renderLegendItem as m, abbrNumber as n, getInterval as o, removeSegmentInfoHighlight as r };