@watermarkinsights/ripple 5.13.0 → 5.13.1-alpha.0

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

@@ -0,0 +1,295 @@
+import { Host, h } from "@stencil/core";
+import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, debounce, findScrollableParent, } from "../../global/functions";
+export class Toggletip {
+    constructor() {
+        this.tooltipPosition = "bottom-right";
+        this.targetSize = "small";
+        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.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.debouncedResize = debounce(() => {
+            this.scrollableParent = findScrollableParent(this.el);
+        }, 200);
+    }
+    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("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;
+    }
+    componentWillLoad() {
+        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.scrollableParent = findScrollableParent(this.el);
+            if (!!this.scrollableParent) {
+                this.scrollableParent.addEventListener("scroll", () => {
+                    if (this.isOpen) {
+                        if (!this.isHidden)
+                            this.isHidden = true;
+                        this.debouncedReveal();
+                    }
+                });
+            }
+        }
+    }
+    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();
+            }
+        }
+    }
+    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)")) {
+                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();
+    }
+    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);
+    }
+    render() {
+        return (h(Host, { key: 'c4f1f99b1b4991ef7bef8763f36cf684100e44ec', class: `size-${this.targetSize}` }, h("button", { key: '9ca73e3a4d53c58ed96c148a6c1c184d2360bd35', 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: '46e7410232d32cac61fe4cd29a195fcd689251d7', class: "svg-icon svg-info" })), h("div", { key: '9a689f66818b357e2729654099a52075a624f5f6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'd792b4e03c3628cd44978e63969cb780481d8003', 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",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltip": {
+                "type": "string",
+                "attribute": "tooltip",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "tooltipPosition": {
+                "type": "string",
+                "attribute": "tooltip-position",
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"bottom-right\""
+            },
+            "targetSize": {
+                "type": "string",
+                "attribute": "target-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"large\"",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"small\""
+            }
+        };
+    }
+    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
+            }];
+    }
+}