@watermarkinsights/ripple 5.12.0-9 → 5.14.0-alpha.0

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

@@ -1,289 +0,0 @@
-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: 'b515bcbf26c9848d6bac1b9865c445bf7d38fb51', class: `size-${this.targetSize}` }, h("button", { key: '803eac8a3732cf04cd5a4e6fad460faee04f7f68', 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: 'c3bd15da06234bd1e8d3238e0e8cdd9bf8653473', class: "svg-icon svg-info" })), h("div", { key: '75a94cb1f55130dc8e6b0376ca7fdfbf2678f0d8', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'f86c3e78eba66ca25c5d2f47e38ee81a09fe6d4c', 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
-            }];
-    }
-}