import { r as registerInstance, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { C as Colors } from './colors-U40vKHrs.js';
import { S as Sizes } from './sizes-BcQO4NH2.js';
import { p as pick } from './utils-CQvUntGY.js';
import { c as createID } from './string.utils-vN03FcXN.js';
import { g as govHost, a as toBoolAttr } from './template-CoD1xawt.js';
import { d as documentNode } from './gov.log-BtqD9K8d.js';
import { t as tick } from './stencil.utils-Cjg0wpDG.js';

const TooltipColors = pick(Colors, ['PRIMARY', 'NEUTRAL']);
const TooltipSize = pick(Sizes, ['_S', '_M', '_L']);
var TooltipPosition;
(function (TooltipPosition) {
    TooltipPosition["TOP"] = "top";
    TooltipPosition["RIGHT"] = "right";
    TooltipPosition["BOTTOM"] = "bottom";
    TooltipPosition["LEFT"] = "left";
})(TooltipPosition || (TooltipPosition = {}));
const TooltipClass = {
    root: 'gov-tooltip',
};
const TooltipContentClass = {
    root: 'gov-tooltip-content',
};

const GovTooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.tooltipContentId = undefined;
        this.tooltipId = undefined;
        /**
         * Style variation of the tooltip
         */
        this.color = TooltipColors.PRIMARY;
        /**
         * Tooltip’s size.
         */
        this.size = TooltipSize._M;
        /**
         * Tooltip display position
         */
        this.position = "right";
        /**
         * Information contained in the tooltip
         */
        this.message = undefined;
        /**
         * Trigger is just an icon
         */
        this.icon = undefined;
        this.persist = false;
        this.h = govHost(this.host);
        this.tooltipId = createID("GovTooltip");
        this.tooltipContentId = createID("GovContentTooltip");
    }
    validateColor(newValue) {
        validateProp(TooltipColors, newValue, TooltipClass.root);
    }
    validateSize(newValue) {
        validateProp(TooltipSize, newValue, TooltipClass.root);
    }
    validatePosition(newValue) {
        validateProp(TooltipPosition, newValue, TooltipClass.root);
    }
    rerenderMessage() {
        this.createContentWrapper();
    }
    connectedCallback() {
        this.createContentWrapper();
        this.registerListeners();
    }
    componentWillLoad() {
        this.validateColor(this.color);
        this.validateSize(this.size);
        this.validatePosition(this.position);
    }
    componentDidUpdate() {
        this.createContentWrapper();
    }
    disconnectedCallback() {
        this.removeContent();
    }
    createContentWrapper() {
        var _a;
        if (this.tooltipContent) {
            if (this.message) {
                this.tooltipContent.innerHTML = this.message;
            }
            else if (this.insideContent) {
                this.tooltipContent.innerHTML = this.insideContent.innerHTML;
            }
            return;
        }
        let content;
        if (this.insideContent) {
            content = this.insideContent;
        }
        else {
            content = documentNode().createElement(TooltipContentClass.root);
            content.innerHTML = this.message;
        }
        content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
        content.setAttribute("parent-id", this.tooltipId);
        content.setAttribute("color", this.color);
        content.setAttribute("size", this.size);
        documentNode().body.appendChild(content);
    }
    get tooltipContent() {
        var _a;
        return documentNode().body.querySelector(`#${(_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId}`);
    }
    get insideContent() {
        return this.host.querySelector(TooltipContentClass.root);
    }
    registerListeners() {
        this.host.addEventListener("click", e => {
            e.preventDefault();
            this.persist = true;
            if (this.tooltipContent) {
                this.tooltipContent.setAttribute("persist", "true");
            }
            this.showTooltip();
        });
        this.host.addEventListener("mouseenter", e => {
            e.preventDefault();
            this.showTooltip();
        });
        this.host.addEventListener("mouseleave", e => {
            e.preventDefault();
            if (this.persist === false) {
                this.hideTooltip();
            }
        });
    }
    verifyPositionSpace() {
        const offset = 12;
        const windowWidth = window.innerWidth - (window.innerWidth - document.documentElement.clientWidth);
        const trigger = this.host.getBoundingClientRect();
        const trgWidth = this.host.offsetWidth;
        const trgHeight = this.host.offsetHeight;
        const contentWidth = this.tooltipContent.offsetWidth;
        const contentHeight = this.tooltipContent.offsetHeight;
        const triggerPos = {
            left: trigger.left + document.documentElement.scrollLeft,
            top: trigger.top + document.documentElement.scrollTop,
        };
        const isRightSpace = ((triggerPos.left + offset + trigger.width) + contentWidth) <= windowWidth;
        const isLeftSpace = triggerPos.left > contentWidth;
        // LEFT/RIGHT
        if (this.position === TooltipPosition.LEFT || this.position === TooltipPosition.RIGHT) {
            this.tooltipContent.style.top = (triggerPos.top - ((contentHeight - trgHeight) / 2)) + "px";
            if (isRightSpace === false && isLeftSpace === false) {
                this.position = TooltipPosition.TOP;
                this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
            }
            if (isLeftSpace && isRightSpace === false && this.position === TooltipPosition.RIGHT) {
                this.position = TooltipPosition.LEFT;
            }
            if (isRightSpace && isLeftSpace === false && this.position === TooltipPosition.LEFT) {
                this.position = TooltipPosition.RIGHT;
            }
        }
        if (this.position === TooltipPosition.RIGHT) {
            this.tooltipContent.setAttribute("position", TooltipPosition.RIGHT);
            this.tooltipContent.style.left = (triggerPos.left + offset + trigger.width) + "px";
        }
        if (this.position === TooltipPosition.LEFT) {
            this.tooltipContent.setAttribute("position", TooltipPosition.LEFT);
            this.tooltipContent.style.left = (triggerPos.left - (contentWidth + offset)) + "px";
        }
        // LEFT/RIGHT FOR TOP/BOTTOM
        if (this.position === TooltipPosition.TOP || this.position === TooltipPosition.BOTTOM) {
            if (contentWidth > trgWidth) {
                let leftPosition = (triggerPos.left - ((contentWidth - trgWidth) / 2));
                const isNotLeftSpace = leftPosition < 0;
                const isNotRightSpace = (leftPosition + contentWidth) > windowWidth;
                if (isNotLeftSpace && isNotRightSpace) {
                    this.tooltipContent.style.width = "auto";
                    this.tooltipContent.style.left = offset + "px";
                    this.tooltipContent.style.right = offset + "px";
                }
                else {
                    if (isNotLeftSpace) {
                        leftPosition = offset;
                    }
                    if (isNotRightSpace) {
                        leftPosition = leftPosition - ((windowWidth - (leftPosition + contentWidth + offset)) * -1);
                    }
                    this.tooltipContent.style.left = leftPosition + "px";
                }
            }
            else {
                const leftPosition = (triggerPos.left + ((trgWidth - contentWidth) / 2));
                this.tooltipContent.style.left = leftPosition + "px";
            }
        }
        if (this.position === TooltipPosition.TOP) {
            this.tooltipContent.setAttribute("position", TooltipPosition.TOP);
            this.tooltipContent.style.top = (triggerPos.top - (contentHeight + offset)) + "px";
        }
        if (this.position === TooltipPosition.BOTTOM) {
            this.tooltipContent.setAttribute("position", TooltipPosition.BOTTOM);
            this.tooltipContent.style.top = (triggerPos.top + (trgHeight + offset)) + "px";
        }
        this.tooltipContent.style.opacity = '1';
    }
    showTooltip() {
        if (this.tooltipContent) {
            this.tooltipContent.style.opacity = '0';
            this.tooltipContent.hidden = false;
            this.tooltipContent.setAttribute("is-visible", "true");
            tick(() => {
                this.verifyPositionSpace();
            });
        }
    }
    hideTooltip() {
        if (this.tooltipContent) {
            this.tooltipContent.setAttribute("is-visible", "false");
            this.tooltipContent.setAttribute("persist", "false");
            this.tooltipContent.removeAttribute('style');
        }
    }
    removeContent() {
        const contentEl = document.getElementById(this.tooltipContentId);
        if (contentEl) {
            contentEl.remove();
        }
    }
    render() {
        var _a;
        return (h(Host, { key: 'f64ba7c26358426ead39dadbb17687a39a4fb876', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, h("span", { key: 'd51fc3b886df342fe8fbcaa9452be316658c24b2', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
                if (this.persist === false) {
                    this.hideTooltip();
                }
            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, h("slot", { key: '6687d0562b3e99ea0e44ec97dadc5a2e085ff0a8' }))));
    }
    /**
     * Showing the modal
     */
    async show() {
        this.showTooltip();
    }
    /**
     * Hiding the modal
     */
    async hide() {
        this.persist = false;
        this.hideTooltip();
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "color": ["validateColor"],
        "size": ["validateSize"],
        "position": ["validatePosition"],
        "message": ["rerenderMessage"]
    }; }
};

const GovTooltipContent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Style variation of the tooltip
         */
        this.color = TooltipColors.PRIMARY;
        /**
         * Tooltip’s size.
         */
        this.size = TooltipSize._M;
        /**
         * Tooltip is still visible.
         */
        this.persist = false;
        /**
         * Indicates display of tooltip content
         */
        this.isVisible = false;
        /**
         * Indicates display of tooltip content
         */
        this.parentId = null;
    }
    visibleContent(newValue) {
        clearTimeout(this.timeout);
        if (newValue === false) {
            this.timeout = setTimeout(() => {
                this.host.style.visibility = "hidden";
            }, 250);
        }
        else {
            this.host.style.visibility = "visible";
        }
    }
    hideContent() {
        this.isVisible = false;
        this.persist = false;
        const parentEl = document.getElementById(this.parentId);
        if (parentEl) {
            parentEl.hide().catch();
        }
    }
    render() {
        return (h(Host, { key: 'a826527fe9f7851ad25f700156d987c1b29f3adc', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, h("slot", { key: 'd3891d8a3f3df7ee7f852db8485c7ecc2f61992c' }), this.persist ? (h("gov-button", { "on-gov-click": this.hideContent.bind(this), color: this.color, size: this.size, type: "base" }, h("gov-icon", { slot: "icon-start", name: "x-lg", type: "components" }))) : null));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "isVisible": ["visibleContent"]
    }; }
};

export { GovTooltip as gov_tooltip, GovTooltipContent as gov_tooltip_content };
//# sourceMappingURL=gov-tooltip.gov-tooltip-content.entry.js.map

//# sourceMappingURL=gov-tooltip_2.entry.js.map