@watermarkinsights/ripple 5.16.0-alpha.2 → 5.16.0-alpha.5

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

@@ -0,0 +1,366 @@
+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.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.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) {
+            const isElOrChild = ev.composedPath().includes(this.el);
+            if (isElOrChild) {
+                // Re-announce if clicking any part of the component while open
+                this.announceToggletip();
+            }
+        }
+    }
+    handleScroll() {
+        if (this.isOpen) {
+            if (!this.isHidden)
+                this.isHidden = true;
+            this.debouncedReveal();
+        }
+    }
+    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();
+    }
+    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: '5d8d7bd25f7ed0e9626944a09f18c7a534b35181', class: `size-${this.targetSize}` }, h("button", { key: '414f8f09f3a1d20b9e8641cab03632ccd91f8f71', 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: '8d032e897502ded7631b494314f201d35dd3acb3', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '4cc15a0db02fb19faa8d8ac7e9253c29e74e7ac5', 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
+            }];
+    }
+}