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

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

@@ -1,366 +0,0 @@
-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
-            }];
-    }
-}