@watermarkinsights/ripple 5.13.0-alpha.9 → 5.13.1-0

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

@@ -0,0 +1,289 @@
+import { Host, h } from "@stencil/core";
+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.debouncedResize = debounce(() => {
+            this.scrollableParent = findScrollableParent(this.el);
+        }, 200);
+        this.label = undefined;
+        this.tooltip = undefined;
+        this.tooltipPosition = "bottom-right";
+        this.targetSize = "small";
+        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("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",
+                "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\""
+            }
+        };
+    }
+    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
+            }];
+    }
+}