import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ca411ad2.js';

const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
    if (elem == undefined)
        return;
    const rect = elem.getBoundingClientRect();
    const contentRect = overlay.getBoundingClientRect();
    // Exit the function if the placement is not set
    if (!elemPlacement || elemPlacement == "")
        return;
    switch (true) {
        case elemPlacement.includes("right"):
            overlay.style.top = '50%';
            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
            overlay.style.transform = 'translateY(-50%)';
            if (elemPlacement.includes("start")) {
                overlay.style.top = '0';
                overlay.style.transform = 'translateY(0)';
            }
            if (elemPlacement.includes("end")) {
                overlay.style.bottom = '0';
                overlay.style.top = 'initial';
                overlay.style.transform = 'translateY(0)';
            }
            break;
        case elemPlacement.includes("left"):
            overlay.style.top = '50%';
            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
            overlay.style.transform = 'translateY(-50%)';
            if (elemPlacement.includes("start")) {
                overlay.style.top = '0';
                overlay.style.transform = 'translateY(0)';
            }
            if (elemPlacement.includes("end")) {
                overlay.style.bottom = '0';
                overlay.style.top = 'initial';
                overlay.style.transform = 'translateY(0)';
            }
            break;
        case elemPlacement.includes("bottom"):
            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
            overlay.style.left = '50%';
            overlay.style.transform = 'translateX(-50%)';
            if (elemPlacement.includes("start")) {
                overlay.style.left = '0';
                overlay.style.transform = 'translateX(0)';
            }
            if (elemPlacement.includes("end")) {
                overlay.style.left = 'initial';
                overlay.style.right = '0';
                overlay.style.transform = 'translateX(0)';
            }
            break;
        case elemPlacement.includes("top"):
            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
            overlay.style.left = '50%';
            overlay.style.transform = 'translateX(-50%)';
            if (elemPlacement.includes("start")) {
                overlay.style.left = '0';
                overlay.style.transform = 'translateX(0)';
            }
            if (elemPlacement.includes("end")) {
                overlay.style.left = 'initial';
                overlay.style.right = '0';
                overlay.style.transform = 'translateX(0)';
            }
            break;
    }
};

const pdsTooltipCss = ":host{--border-radius-overlay:var(--pine-border-radius-125);--border-width-arrow-down:var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-left:var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;--border-width-arrow-right:var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);--border-width-arrow-up:0 var(--sizing-arrow-default) var(--sizing-arrow-default);--box-shadow-default:var(--pine-box-shadow-md);--color-background-default:var(--pine-color-charcoal-400);--color-text-default:var(--pine-color-white);--font-size-overlay:var(--pine-font-size-087);--line-height-overlay:var(--pine-line-height-125);--sizing-arrow-default:6px;--sizing-arrow-offset:14px;--sizing-width-default:320px;--spacing-padding-overlay:var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;white-space:normal;width:var(--sizing-width-default)}.pds-tooltip__content{background-color:var(--color-background-default);border-radius:var(--border-radius-overlay);-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default);color:var(--color-text-default);font-size:var(--font-size-overlay);line-height:var(--line-height-overlay);opacity:0;padding:var(--spacing-padding-overlay);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);bottom:var(--sizing-arrow-offset);left:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--color-background-default);border-width:var(--border-width-arrow-left);left:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:var(--sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--color-background-default);border-width:var(--border-width-arrow-down);bottom:calc(var(--sizing-arrow-default) * -1);left:initial;right:var(--sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);bottom:var(--sizing-arrow-offset);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--color-background-default);border-width:var(--border-width-arrow-right);left:initial;right:calc(var(--sizing-arrow-default) * -1);top:var(--sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:50%;top:calc(var(--sizing-arrow-default) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:initial;right:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--color-background-default);border-width:var(--border-width-arrow-up);left:var(--sizing-arrow-offset);top:calc(var(--sizing-arrow-default) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
const PdsTooltipStyle0 = pdsTooltipCss;

const PdsTooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pdsTooltipHide = createEvent(this, "pdsTooltipHide", 7);
        this.pdsTooltipShow = createEvent(this, "pdsTooltipShow", 7);
        this.handleHide = () => {
            this.hideTooltip();
            this.pdsTooltipHide.emit();
        };
        this.handleShow = () => {
            this.showTooltip();
            this.pdsTooltipShow.emit();
        };
        this.isOpen = false;
        this.content = undefined;
        this.componentId = undefined;
        this.hasArrow = true;
        this.htmlContent = false;
        this.placement = 'right';
        this.opened = false;
    }
    handleOpenToggle() {
        if (this.opened) {
            this.handleShow();
        }
        else {
            this.handleHide();
        }
    }
    componentWillLoad() {
        if (this.opened) {
            this.showTooltip();
        }
        this.el.addEventListener('blur', this.handleHide, true);
        this.el.addEventListener('focus', this.handleShow, true);
    }
    componentDidUpdate() {
        if (this.opened) {
            this.showTooltip();
        }
    }
    componentDidRender() {
        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
    }
    /**
     * Shows the tooltip by enabling the opened property
     */
    async showTooltip() {
        this.opened = true;
    }
    /**
     * Hides the tooltip by disabling the opened property
     */
    async hideTooltip() {
        this.opened = false;
    }
    render() {
        return (h(Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', class: `
            pds-tooltip
            pds-tooltip--${this.placement}
            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
            ${this.opened ? 'pds-tooltip--is-open' : ''}
            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
          ` }, h("span", { key: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "opened": ["handleOpenToggle"]
    }; }
};
PdsTooltip.style = PdsTooltipStyle0;

export { PdsTooltip as pds_tooltip };

//# sourceMappingURL=pds-tooltip.entry.js.map