@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,217 +1,376 @@
-import { Component, Host, h, Element, Prop, State, Listen } from "@stencil/core";
-import { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from "../../global/functions";
+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.isOpen = false;
-    this.isTabbing = false;
-    this.tooltipMessage = intl.formatMessage({
-      id: "toggletip.moreInformation",
-      defaultMessage: "More information",
-    });
-  }
-  componentWillLoad() {
-    const validTooltipPositions = [
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "top-right",
-      "top-left",
-      "bottom-right",
-      "bottom-left",
-    ];
-    if (!this.label) {
-      console.error("wm-toggletip must have a label property");
-    }
-    if (!this.tooltipText) {
-      console.error("wm-toggletip must have a tooltip-text property");
-    }
-    if (!validTooltipPositions.includes(this.tooltipPosition)) {
-      console.error(`wm-toggletip property tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPositions}`);
-    }
-    this.el.focus = function () {
-      this.shadowRoot.querySelector("button").focus();
-    };
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "Escape":
-        ev.preventDefault();
+    constructor() {
+        this.scrollableParents = [];
+        this.tooltipInfoMessage = intl.formatMessage({
+            id: "toggletip.moreInformation",
+            defaultMessage: "More information",
+        });
+        this.tooltipAITooltip = intl.formatMessage({
+            id: "toggletip.aiTooltip",
+            defaultMessage: "Powered by AI",
+        });
+        this.debouncedReveal = debounce(() => {
+            const { x, y } = getCumulativeScrollOffset(this.el);
+            this.el.style.setProperty("--offset-x", "-" + x + "px");
+            this.el.style.setProperty("--offset-y", "-" + y + "px");
+            this.isHidden = false;
+        }, 100);
+        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 && this.toggletipEl.matches(":popover-open");
+    }
+    get tooltipMessage() {
+        switch (this.toggletipType) {
+            case "ai":
+                return this.tooltipAITooltip;
+            case "info":
+                return this.tooltipInfoMessage;
+            default:
+                return this.tooltipInfoMessage;
+        }
+    }
+    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("top") && shouldOpenUp(this.el, this.toggletipEl.clientHeight)) {
+            if (position.includes("bottom")) {
+                position = position.replace("bottom", "top");
+            }
+            else {
+                position = ("top-" + position);
+            }
+        }
+        else if (!position.includes("bottom") && shouldOpenDown(this.el, this.toggletipEl.clientHeight)) {
+            if (position.includes("top")) {
+                position = position.replace("top", "bottom");
+            }
+            else {
+                position = ("bottom-" + position);
+            }
+        }
+        // Horizontal
+        if (!position.includes("right") && shouldShiftRight(this.el, this.toggletipEl.clientWidth)) {
+            if (position.includes("left")) {
+                position = position.replace("left", "right");
+            }
+            else {
+                position = (position + "-right");
+            }
+        }
+        else if (!position.includes("left") && shouldShiftLeft(this.el, this.toggletipEl.clientWidth)) {
+            if (position.includes("right")) {
+                position = position.replace("right", "left");
+            }
+            else {
+                position = (position + "-left");
+            }
+        }
+        return position;
+    }
+    /**
+     * Register CSS custom properties for AI gradient animations
+     * These need to be registered in JS since @property doesn't work in shadow DOM
+     */
+    registerCSSProperties() {
+        if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
+            try {
+                CSS.registerProperty({
+                    name: "--ai-gradient-start",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "red", // Should always be overwritten. Technically optional, but needed to animate.
+                });
+                CSS.registerProperty({
+                    name: "--ai-gradient-end",
+                    syntax: "<color>",
+                    inherits: false,
+                    initialValue: "blue", // Should always be overwritten. Technically optional, but needed to animate.
+                });
+            }
+            catch (e) {
+                // Properties might already be registered, or CSS.registerProperty might not be supported
+                // This is fine, the animations will still work but might be less smooth
+            }
+        }
+    }
+    componentWillLoad() {
+        this.registerCSSProperties();
+        const validTooltipPlacement = [
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "top-right",
+            "top-left",
+            "bottom-right",
+            "bottom-left",
+        ];
+        if (!this.label) {
+            console.error("wm-toggletip must have a label property");
+        }
+        if (!this.tooltip) {
+            console.error("wm-toggletip must have a tooltip property");
+        }
+        if (!validTooltipPlacement.includes(this.tooltipPosition)) {
+            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.scrollableParents = findAllScrollableParents(this.el);
+            // Add scroll listeners to all scrollable parents
+            this.scrollableParents.forEach((parent) => {
+                if (parent === document.documentElement) {
+                    // For document element, listen to window scroll event
+                    window.addEventListener("scroll", () => this.handleScroll());
+                }
+                else {
+                    // For regular elements, listen to their scroll event
+                    parent.addEventListener("scroll", () => this.handleScroll());
+                }
+            });
+        }
+    }
+    handleResize() {
+        if (!CSS.supports("top", "anchor(bottom)")) {
+            this.debouncedResize();
+        }
+    }
+    handleKeydown(ev) {
+        switch (ev.key) {
+            case "Escape":
+                ev.preventDefault();
+                if (this.isOpen) {
+                    ev.stopPropagation(); // prevent closing modal if within one
+                    this.toggletipEl.hidePopover();
+                }
+                break;
+            case "Tab":
+                if (this.isOpen) {
+                    this.toggletipEl.hidePopover();
+                }
+        }
+    }
+    handleClick(ev) {
         if (this.isOpen) {
-          ev.stopPropagation(); // prevent closing modal if within one
-          this.close();
+            const isElOrChild = ev.composedPath().includes(this.el);
+            if (isElOrChild) {
+                // Re-announce if clicking any part of the component while open
+                this.announceToggletip();
+            }
         }
-        break;
-      case "Tab":
+    }
+    handleScroll() {
         if (this.isOpen) {
-          this.close();
-        }
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleClick(ev) {
-    if (this.isOpen) {
-      if (ev.target === this.el || this.el.contains(ev.target)) {
-        // Re-announce if clicking any part of the component while open
+            if (!this.isHidden)
+                this.isHidden = true;
+            this.debouncedReveal();
+        }
+    }
+    handlePopoverToggle(ev) {
+        if (ev.newState === "open") {
+            this.buttonEl.classList.add("toggletip-visible");
+        }
+        else {
+            this.buttonEl.classList.remove("toggletip-visible");
+        }
+    }
+    open() {
+        // the popover API takes care of the actual opening.
+        // toggletip is visually hidden by default so it can be measured and repositioned.
+        hideTooltip();
+        requestAnimationFrame(() => {
+            this.toggletipEl.classList.remove("top", "bottom", "left", "right", "top-right", "top-left", "bottom-right", "bottom-left");
+            this.toggletipEl.classList.add(this.toggletipPosition);
+            // handling scroll offset for older browsers (currently FF and Safari)
+            if (!CSS.supports("top", "anchor(bottom)")) {
+                const { x, y } = getCumulativeScrollOffset(this.el);
+                this.el.style.setProperty("--offset-x", "-" + x + "px");
+                this.el.style.setProperty("--offset-y", "-" + y + "px");
+            }
+            this.toggletipEl.classList.remove("hidden");
+        });
+        this.isHidden = false;
         this.announceToggletip();
-      }
-      else {
-        this.close();
-      }
-    }
-  }
-  open() {
-    this.isOpen = true;
-    this.announceToggletip();
-  }
-  close() {
-    this.isOpen = false;
-    this.hideTooltip();
-  }
-  showTooltip() {
-    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
-    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
-    this.setToggletipPosition();
-    this.tooltipEl.classList.add("hover");
-  }
-  hideTooltip() {
-    this.tooltipEl.classList.remove("hover");
-  }
-  announceToggletip() {
-    this.liveRegionEl.innerHTML = "";
-    setTimeout(() => {
-      this.liveRegionEl.innerHTML = this.tooltipText;
-    }, 10);
-  }
-  setToggletipPosition() {
-    // Vertical
-    if (this.tooltipPosition.includes("bottom") && shouldOpenUp(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
-    }
-    else if (this.tooltipPosition.includes("top") && shouldOpenDown(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
-    }
-    // Horizontal
-    if (this.tooltipPosition.includes("left") && shouldShiftRight(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("left", "right");
-    }
-    else if (this.tooltipPosition.includes("right") && shouldShiftLeft(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("right", "left");
-    }
-  }
-  render() {
-    return (h(Host, null,
-      h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => {
-          this.setToggletipPosition();
-          this.open();
-        }, 
-        // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-        onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip() }),
-      h("div", { ref: (el) => (this.tooltipEl = el), class: `tooltip ${this.tooltipPosition} ${this.isOpen ? "hidden" : ""}`, "aria-hidden": "true" }, this.tooltipMessage),
-      h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltipText),
-      h("div", { 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"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-toggletip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-toggletip.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "tooltipText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "tooltip-text",
-      "reflect": false
-    },
-    "tooltipPosition": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "TooltipPosition",
-        "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
-        "references": {
-          "TooltipPosition": {
-            "location": "import",
-            "path": "../../global/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "tooltip-position",
-      "reflect": true,
-      "defaultValue": "\"bottom-right\""
-    }
-  }; }
-  static get states() { return {
-    "isOpen": {},
-    "isTabbing": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }]; }
+    }
+    handleBlur() {
+        hideTooltip();
+        // clear live region on blur to prevent old announcement text from being picked up by screen readers
+        this.liveRegionEl.innerHTML = "";
+    }
+    announceToggletip() {
+        this.liveRegionEl.innerHTML = "";
+        setTimeout(() => {
+            this.liveRegionEl.innerHTML = this.tooltip;
+        }, 10);
+    }
+    renderIcon() {
+        switch (this.toggletipType) {
+            case "info":
+                return h("div", { class: "svg-icon svg-info" });
+            case "ai":
+                return (h("div", { id: "ai-icon" }, h("div", { class: "svg-icon svg-ai-sparkles main" }), h("div", { class: "svg-icon svg-ai-sparkles tiny top-star" }), h("div", { class: "svg-icon svg-ai-sparkles tiny bottom-star" })));
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f092227f4bef97b0af667d65564c7b622e4869dd', class: `size-${this.targetSize}` }, h("button", { key: '534fe3691633dda67bcc62e8661416ff07ee1eee', ref: (el) => (this.buttonEl = el), 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() }, this.renderIcon()), h("div", { key: '193014bb248c664aa6249cab22717a512a74f6b6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '6e5e17ccfcda3b26be9762841fc346419625e7c0', 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"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-toggletip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-toggletip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tooltip",
+                "reflect": false
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPlacement",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "TooltipPlacement": {
+                            "location": "import",
+                            "path": "../../global/interfaces",
+                            "id": "src/global/interfaces.ts::TooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tooltip-position",
+                "reflect": false,
+                "defaultValue": "\"bottom-right\""
+            },
+            "targetSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"large\"",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "target-size",
+                "reflect": false,
+                "defaultValue": "\"small\""
+            },
+            "toggletipType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"info\" | \"ai\"",
+                    "resolved": "\"ai\" | \"info\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "toggletip-type",
+                "reflect": false,
+                "defaultValue": "\"info\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHidden": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }