@watermarkinsights/ripple 5.11.0 → 5.12.0-1

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

@@ -810,6 +810,8 @@
 
 :host {
   --button-size: 16px;
+  --offset-x: 0px;
+  --offset-y: 0px;
 }
 
 :host(.size-small) {
@@ -853,6 +855,7 @@
   align-items: center;
   position: relative;
   cursor: pointer;
+  anchor-name: --button;
 }
 :host .button .svg-info {
   color: var(--wmcolor-toggletip-icon-background);
@@ -895,12 +898,25 @@
   position: absolute;
   max-width: 13.75rem;
   width: max-content;
+  overflow: visible;
+  inset: auto;
+  margin: 0;
   padding: 0.5rem 0.75rem;
+  border: none;
   border-radius: 0.1875rem;
   background: var(--wmcolor-toggletip-background);
   color: var(--wmcolor-toggletip-text);
-  font-size: 14px;
-  z-index: 30;
+  font-size: 0.875rem;
+  position-anchor: --button;
+}
+:host .toggletip.hidden {
+  visibility: hidden;
+}
+:host .toggletip.top {
+  position-area: block-start center;
+}
+:host .toggletip.top.small {
+  translate: 0 -0.75rem;
 }
 :host .toggletip.top:before {
   content: "";
@@ -917,6 +933,12 @@
   margin-left: -0.375rem;
   left: 50%;
 }
+:host .toggletip.bottom {
+  position-area: block-end center;
+}
+:host .toggletip.bottom.small {
+  translate: 0 0.75rem;
+}
 :host .toggletip.bottom:before {
   content: "";
   position: absolute;
@@ -932,6 +954,12 @@
   margin-left: -0.375rem;
   left: 50%;
 }
+:host .toggletip.right {
+  position-area: center inline-end;
+}
+:host .toggletip.right.small {
+  translate: 0.75rem 0;
+}
 :host .toggletip.right:before {
   content: "";
   position: absolute;
@@ -948,6 +976,12 @@
   top: calc(50% - 6px);
   left: -0.1875rem;
 }
+:host .toggletip.left {
+  position-area: center inline-start;
+}
+:host .toggletip.left.small {
+  translate: -0.75rem 0;
+}
 :host .toggletip.left:before {
   content: "";
   position: absolute;
@@ -964,6 +998,15 @@
   top: calc(50% - 6px);
   right: -0.1875rem;
 }
+:host .toggletip.bottom-right {
+  position-area: end;
+}
+:host .toggletip.bottom-right.small {
+  translate: -1.75rem 0.75rem;
+}
+:host .toggletip.bottom-right.large {
+  translate: -2.5rem 0;
+}
 :host .toggletip.bottom-right:before {
   content: "";
   position: absolute;
@@ -981,6 +1024,15 @@
   margin-left: unset;
   left: 0.875rem;
 }
+:host .toggletip.bottom-left {
+  position-area: block-end inline-start;
+}
+:host .toggletip.bottom-left.small {
+  translate: 1.75rem 0.75rem;
+}
+:host .toggletip.bottom-left.large {
+  translate: 2.5rem 0;
+}
 :host .toggletip.bottom-left:before {
   content: "";
   position: absolute;
@@ -999,6 +1051,15 @@
   margin-left: unset;
   right: 0.875rem;
 }
+:host .toggletip.top-right {
+  position-area: block-start inline-end;
+}
+:host .toggletip.top-right.small {
+  translate: -1.75rem -0.75rem;
+}
+:host .toggletip.top-right.large {
+  translate: -2.5rem 0;
+}
 :host .toggletip.top-right:before {
   content: "";
   position: absolute;
@@ -1016,6 +1077,15 @@
   margin-left: unset;
   left: 0.875rem;
 }
+:host .toggletip.top-left {
+  position-area: start;
+}
+:host .toggletip.top-left.small {
+  translate: 1.75rem -0.75rem;
+}
+:host .toggletip.top-left.large {
+  translate: 2.5rem 0;
+}
 :host .toggletip.top-left:before {
   content: "";
   position: absolute;
@@ -1034,38 +1104,6 @@
   margin-left: unset;
   right: 0.875rem;
 }
-:host .toggletip.hidden {
-  transform: scale(0, 0) !important;
-  visibility: hidden;
-}
-:host .toggletip {
-  top: calc(var(--button-size) / 2);
-  left: calc(var(--button-size) / 2);
-}
-:host .toggletip.top {
-  transform: translate(-50%, calc(-100% - 18px));
-}
-:host .toggletip.bottom {
-  transform: translate(-50%, 18px);
-}
-:host .toggletip.right {
-  transform: translate(18px, -50%);
-}
-:host .toggletip.left {
-  transform: translate(calc(-100% - 18px), -50%);
-}
-:host .toggletip.bottom-right {
-  transform: translate(-20px, 18px);
-}
-:host .toggletip.bottom-left {
-  transform: translate(calc(-100% + 20px), 18px);
-}
-:host .toggletip.top-right {
-  transform: translate(-20px, calc(-100% - 18px));
-}
-:host .toggletip.top-left {
-  transform: translate(calc(-100% + 20px), calc(-100% - 18px));
-}
 :host .sr-only {
   position: absolute !important;
   width: 1px !important;
@@ -1077,4 +1115,39 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
+}
+
+@supports not (top: anchor(bottom)) {
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  :host .toggletip {
+    z-index: 30;
+  }
+  :host .toggletip.top.small, :host .toggletip.top.large {
+    translate: var(--offset-x) calc(-50% - 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.bottom.small, :host .toggletip.bottom.large {
+    translate: var(--offset-x) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.right.small, :host .toggletip.right.large {
+    translate: calc(50% + 1.25rem + var(--offset-x)) var(--offset-y);
+  }
+  :host .toggletip.left.small, :host .toggletip.left.large {
+    translate: calc(-50% - 1.25rem + var(--offset-x)) var(--offset-y);
+  }
+  :host .toggletip.bottom-right.small, :host .toggletip.bottom-right.large {
+    translate: calc(50% - 1.25rem + var(--offset-x)) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.bottom-left.small, :host .toggletip.bottom-left.large {
+    translate: calc(-50% + 1.25rem + var(--offset-x)) calc(50% + 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.top-right.small, :host .toggletip.top-right.large {
+    translate: calc(50% - 1.25rem + var(--offset-x)) calc(-50% - 1.25rem + var(--offset-y));
+  }
+  :host .toggletip.top-left.small, :host .toggletip.top-left.large {
+    translate: calc(-50% + 1.25rem + var(--offset-x)) calc(-50% - 1.25rem + var(--offset-y));
+  }
 }

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

@@ -1,16 +1,47 @@
 import { Host, h } from "@stencil/core";
-import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, } from "../../global/functions";
+import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, debounce, findScrollableParent, } from "../../global/functions";
 export class Toggletip {
     constructor() {
         this.tooltipMessage = intl.formatMessage({
             id: "toggletip.moreInformation",
             defaultMessage: "More information",
         });
+        this.debouncedReveal = debounce(() => {
+            if (this.scrollableParent) {
+                this.el.style.setProperty("--offset-x", "-" + this.scrollableParent.scrollLeft + "px");
+                this.el.style.setProperty("--offset-y", "-" + this.scrollableParent.scrollTop + "px");
+            }
+            this.isHidden = false;
+        }, 100);
         this.label = undefined;
         this.tooltip = undefined;
         this.tooltipPosition = "bottom-right";
         this.targetSize = "small";
-        this.isOpen = false;
+        this.isHidden = true;
+    }
+    get isOpen() {
+        return this.toggletipEl.matches(":popover-open");
+    }
+    get toggletipPosition() {
+        // prop tooltipPosition is unfortunately named. It's the position of the toggletip.
+        // it needs to be adjusted when too close to the edge of the screen, hence this getter
+        let position = this.tooltipPosition;
+        // toggletip position
+        // Vertical
+        if (position.includes("bottom") && shouldOpenUp(this.el, this.toggletipEl.clientHeight)) {
+            position = position.replace("bottom", "top");
+        }
+        else if (position.includes("top") && shouldOpenDown(this.el, this.toggletipEl.clientHeight)) {
+            position = position.replace("top", "bottom");
+        }
+        // Horizontal
+        if (position.includes("left") && shouldShiftRight(this.el, this.toggletipEl.clientWidth)) {
+            position = position.replace("left", "right");
+        }
+        else if (position.includes("right") && shouldShiftLeft(this.el, this.toggletipEl.clientWidth)) {
+            position = position.replace("right", "left");
+        }
+        return position;
     }
     componentWillLoad() {
         const validTooltipPlacement = [
@@ -33,18 +64,32 @@ export class Toggletip {
             console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPlacement}`);
         }
     }
+    componentDidLoad() {
+        if (!CSS.supports("top", "anchor(bottom)")) {
+            this.scrollableParent = findScrollableParent(this.el);
+            if (!!this.scrollableParent) {
+                this.scrollableParent.addEventListener("scroll", () => {
+                    if (this.isOpen) {
+                        if (!this.isHidden)
+                            this.isHidden = true;
+                        this.debouncedReveal();
+                    }
+                });
+            }
+        }
+    }
     handleKeydown(ev) {
         switch (ev.key) {
             case "Escape":
                 ev.preventDefault();
                 if (this.isOpen) {
                     ev.stopPropagation(); // prevent closing modal if within one
-                    this.close();
+                    this.toggletipEl.hidePopover();
                 }
                 break;
             case "Tab":
                 if (this.isOpen) {
-                    this.close();
+                    this.toggletipEl.hidePopover();
                 }
         }
     }
@@ -55,24 +100,30 @@ export class Toggletip {
                 // Re-announce if clicking any part of the component while open
                 this.announceToggletip();
             }
-            else {
-                this.close();
-            }
         }
     }
     open() {
+        // the popover API takes care of the actual opening.
+        // toggletip is visually hidden by default so it can be measured and repositioned.
         hideTooltip();
-        this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
-        this.isOpen = true;
+        requestAnimationFrame(() => {
+            this.toggletipEl.classList.add(this.toggletipPosition);
+            // handling scroll offset for older browsers (currently FF and Safari)
+            if (!CSS.supports("top", "anchor(bottom)")) {
+                this.scrollableParent = findScrollableParent(this.el);
+                if (!!this.scrollableParent) {
+                    this.el.style.setProperty("--offset-x", "-" + this.scrollableParent.scrollLeft + "px");
+                    this.el.style.setProperty("--offset-y", "-" + this.scrollableParent.scrollTop + "px");
+                }
+            }
+            this.toggletipEl.classList.remove("hidden");
+        });
+        this.isHidden = false;
         this.announceToggletip();
     }
-    close() {
-        this.isOpen = false;
-        hideTooltip();
-    }
     handleBlur() {
         hideTooltip();
-        // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
+        // clear live region on blur to prevent old announcement text from being picked up by screen readers
         this.liveRegionEl.innerHTML = "";
     }
     announceToggletip() {
@@ -81,26 +132,10 @@ export class Toggletip {
             this.liveRegionEl.innerHTML = this.tooltip;
         }, 10);
     }
-    setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
-        // Vertical
-        if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
-            pos = pos.replace("bottom", "top");
-        }
-        else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
-            pos = pos.replace("top", "bottom");
-        }
-        // Horizontal
-        if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
-            pos = pos.replace("left", "right");
-        }
-        else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
-            pos = pos.replace("right", "left");
-        }
-    }
     render() {
-        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
-            // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { class: "svg-icon svg-info" })), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+        return (h(Host, { key: '219169df634cd85cae107312f75f23b944957b26', class: `size-${this.targetSize}` }, h("button", { key: '3843b7beda8f8923559d560dea80823ee8594726', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+            // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { key: '39435167fb98008650f14cbd93e8c229e662a7f0', class: "svg-icon svg-info" })), h("div", { key: '2cff6c7e049fc832e074131a7d9240eab712890c', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '09731a8efb293c6227e3326841680c5d41c1048f', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -136,7 +171,7 @@ export class Toggletip {
             },
             "tooltip": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -153,7 +188,7 @@ export class Toggletip {
             },
             "tooltipPosition": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "TooltipPlacement",
                     "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
@@ -172,7 +207,7 @@ export class Toggletip {
                     "text": ""
                 },
                 "attribute": "tooltip-position",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "\"bottom-right\""
             },
             "targetSize": {
@@ -197,7 +232,7 @@ export class Toggletip {
     }
     static get states() {
         return {
-            "isOpen": {}
+            "isHidden": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -300,9 +300,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, { class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { 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: '05fa03d63ba14665a196bece2c82eabb4882ba82', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'fd2c2779cc8f5e8aab480fdb68ac0e482905785d', 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", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '2a5c1d00d2a98bd40fa9ac8dbc248209cca470ba', 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"; }

package/dist/{cjs/global-c1e0f0f6.js → esm/app-globals-7fb0e89a.js}

@@ -1,6 +1,6 @@
-'use strict';
+import './index-130e07bb.js';
 
-const version = "5.11.0";
+const version = "5.12.0-1";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length
@@ -83,3 +83,8 @@ tooltipStyles.textContent = `
 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-d2ecde7f.js → chartFunctions-ef4089f9.js}

@@ -1,5 +1,5 @@
-import { h } from './index-558b5a82.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-8800c690.js';
+import { h } from './index-130e07bb.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-a3c016ae.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -69,7 +69,7 @@ const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray,
+            colors.gray, // this is only used if prop notStartedColor is set
             colors.lavender,
             colors.midnight,
             "#0089e4",