'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-c18b5a7b.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{--background-color:var(--pine-color-neutral-charcoal-400);--box-shadow:var(--pine-box-shadow-md);--color:var(--pine-color-base-white);--width:320px;--arrow-size:6px;--arrow-offset:14px;--overlay-border-radius:var(--pine-border-radius-md);--overlay-font-size:var(--pine-font-size-body-sm);--overlay-line-height:var(--pine-line-height-sm);--overlay-padding:var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);--arrow-pointing-down:var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-to-the-right:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);--arrow-pointing-to-the-left:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;--arrow-pointing-up:0 var(--arrow-size) var(--arrow-size);display:inline-block;position:relative}:host ::slotted([slot=content]){white-space:normal;width:var(--width)}.pds-tooltip__content{background-color:var(--background-color);border-radius:var(--overlay-border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);color:var(--color);font-size:var(--overlay-font-size);line-height:var(--overlay-line-height);opacity:0;padding:var(--overlay-padding);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(--arrow-pointing-to-the-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);bottom:var(--arrow-offset);left:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--background-color);border-width:var(--arrow-pointing-to-the-left);left:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -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(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:var(--arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--background-color);border-width:var(--arrow-pointing-down);bottom:calc(var(--arrow-size) * -1);left:initial;right:var(--arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);bottom:var(--arrow-offset);left:initial;right:calc(var(--arrow-size) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--background-color);border-width:var(--arrow-pointing-to-the-right);left:initial;right:calc(var(--arrow-size) * -1);top:var(--arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:50%;top:calc(var(--arrow-size) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:initial;right:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--background-color);border-width:var(--arrow-pointing-up);left:var(--arrow-offset);top:calc(var(--arrow-size) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
const PdsTooltipStyle0 = pdsTooltipCss;

const PdsTooltip = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.pdsTooltipHide = index.createEvent(this, "pdsTooltipHide", 7);
        this.pdsTooltipShow = index.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 (index.h(index.Host, { key: '55301f414d765eb7508c1c9cadf21d0ce64459b3', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: 'e2c600c9461499b8069d0163fd05318ea209fcaa', 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'}
          ` }, index.h("span", { key: '29080a266b672409e5dc51c80378b0fda4486ab6', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '45203a3ed1f30e140439298deb8a7c9f44212d10' })), index.h("div", { key: '85fe22686930b4060302b315eda0fcd0689a5a02', 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" }, index.h("slot", { key: '1926a065c45a2450fc97f6c1c9ba496d6e5fa8b5', name: "content" }), this.content))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "opened": ["handleOpenToggle"]
    }; }
};
PdsTooltip.style = PdsTooltipStyle0;

exports.pds_tooltip = PdsTooltip;

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