import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

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 baseCss = ":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";
const PdsTooltipStyle0 = baseCss;

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-200);--color-background-default:var(--pine-color-grey-950);--color-text-default:var(--pine-color-white);--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;max-width:var(--sizing-width-default);white-space:normal}.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);max-width:var(--sizing-width-default);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 PdsTooltipStyle1 = pdsTooltipCss;

const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.handleHide = () => {
            this.hideTooltip();
        };
        this.handleShow = () => {
            this.showTooltip();
        };
        this.isOpen = false;
        this.content = undefined;
        this.componentId = undefined;
        this.hasArrow = true;
        this.htmlContent = false;
        this.placement = 'right';
        this.maxWidth = '352px';
        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: 'f4a8cd19668e7cc20a70ae13a0f6dcf0f809df65', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'b83498c6ea8e404b2abc25cc75daa95807649dba', 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: '47ace7d3f543f0d86987389c76b25da0ad6be9b7', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '45bae92d87b8a67c00608c18f76aa9333d8d82a7' })), h("div", { key: 'a745ce513f1563cb8ea5a86bf27ee31f3e0d4392', 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", style: { maxWidth: this.maxWidth } }, h("slot", { key: '8c46fe5951624e2de4128bd0f819e1e55155a7b5', name: "content" }), this.content))));
    }
    get el() { return this; }
    static get watchers() { return {
        "opened": ["handleOpenToggle"]
    }; }
    static get style() { return PdsTooltipStyle0 + PdsTooltipStyle1; }
}, [1, "pds-tooltip", {
        "content": [1],
        "componentId": [1, "component-id"],
        "hasArrow": [4, "has-arrow"],
        "htmlContent": [4, "html-content"],
        "placement": [513],
        "maxWidth": [1, "max-width"],
        "opened": [1540],
        "isOpen": [32],
        "showTooltip": [64],
        "hideTooltip": [64]
    }, undefined, {
        "opened": ["handleOpenToggle"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pds-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "pds-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PdsTooltip$1);
            }
            break;
    } });
}

const PdsTooltip = PdsTooltip$1;
const defineCustomElement = defineCustomElement$1;

export { PdsTooltip, defineCustomElement };

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