import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { L as Logger } from './log.js';
import { B as BEM } from './bem.js';
import { b as balBrowser } from './browser.js';
import { b as balDevice } from './device.js';
import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom.esm.js';
import { d as defineCustomElement$2 } from './bal-stack2.js';

const showContainerElement = (containerEl) => {
    if (containerEl) {
        showElement(containerEl);
    }
};
const hideContainerElement = (containerEl) => {
    if (containerEl) {
        hideElement(containerEl);
    }
};
const showArrowElement = (arrowEl) => {
    if (arrowEl) {
        showElement(arrowEl);
    }
};
const hideArrowElement = (arrowEl) => {
    if (arrowEl) {
        Object.assign(arrowEl.style, {
            left: '',
            top: '',
            display: 'none',
            visibility: 'hidden',
        });
    }
};
const showElement = (element) => {
    if (element) {
        element.style.setProperty('display', 'block');
        element.style.setProperty('visibility', 'visible');
    }
};
const hideElement = (element) => {
    if (element) {
        element.style.removeProperty('display');
        element.style.removeProperty('visibility');
    }
};

const balTooltipCss = ":host{--bal-tooltip-container-background:var(--bal-color-primary-6);--bal-tooltip-max-width:auto;--bal-tooltip-radius:var(--bal-radius-normal);--bal-tooltip-shadow:var(--bal-shadow-large);--bal-tooltip-arrow-background:var(--bal-color-primary-6);--bal-tooltip-font-family:var(--bal-font-family-text);--bal-tooltip-font-size:var(--bal-size-small)}:host{position:static;display:inline;z-index:var(--bal-z-index-tooltip)}.bal-tooltip__container{background-color:var(--bal-tooltip-container-background);display:none;visibility:hidden;color:#fff;padding:var(--bal-space-x-small);border-radius:var(--bal-tooltip-radius);-webkit-box-shadow:var(--bal-tooltip-shadow);box-shadow:var(--bal-tooltip-shadow);width:var(--bal-tooltip-max-width);position:absolute;top:0;left:0}.bal-tooltip__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 8rem)}.bal-tooltip__inner__content{width:100%;font-family:var(--bal-tooltip-font-family);font-size:var(--bal-tooltip-font-size)}.bal-tooltip__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:.5rem;height:.5rem;background:var(--bal-tooltip-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-tooltip-variant-popover-trigger,.bal-tooltip-permanent-trigger{z-index:calc(var(--bal-z-index-tooltip) + 1) !important;position:relative !important}";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const Tooltip = proxyCustomElement(class Tooltip extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
        this.tooltipId = `bal-to-${tooltipIds++}`;
        this.reference = '';
        this.placement = 'bottom';
        this.offset = 0;
        this.demo = false;
        this.presented = false;
        this.contentWidth = undefined;
    }
    createLogger(log) {
        this.log = log;
    }
    contentWidthChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            if (newValue === undefined) {
                this.el.style.removeProperty('--bal-tooltip-max-width');
            }
            else {
                this.el.style.setProperty('--bal-tooltip-max-width', `${this.contentWidth}px`);
            }
        }
    }
    componentDidLoad() {
        this.contentWidthChanged(this.contentWidth, 0);
        if (!balDevice.hasTouchScreen) {
            let showEvents = [];
            let hideEvents = [];
            showEvents = ['mouseenter', 'focus'];
            hideEvents = ['mouseleave', 'blur'];
            showEvents.forEach(event => {
                if (this.triggerElement) {
                    this.triggerElement.addEventListener(event, () => this.present());
                }
            });
            hideEvents.forEach(event => {
                if (this.triggerElement) {
                    this.triggerElement.addEventListener(event, () => this.dismiss());
                }
            });
        }
        if (this.demo) {
            this.present();
        }
    }
    async present() {
        if (!this.trigger && balBrowser.hasDocument) {
            const firstTrigger = Array.from(document.querySelectorAll(`[id="${this.reference}"]`))[0];
            this.trigger = firstTrigger;
        }
        if (this.trigger && this.containerEl && this.arrowEl) {
            this.balWillAnimate.emit();
            const triggerVariantAttr = this.trigger.attributes.getNamedItem('bal-tooltip-placement');
            if (triggerVariantAttr) {
                this.placement = triggerVariantAttr.value;
            }
            else {
                this.placement = this.placement;
            }
            showContainerElement(this.containerEl);
            showArrowElement(this.arrowEl);
            this.trigger.classList.add('bal-tooltip-trigger');
            this.presented = true;
            this.cleanup = autoUpdate(this.trigger, this.containerEl, () => {
                this.update();
            }, {
                ancestorScroll: true,
                ancestorResize: true,
                elementResize: false,
                layoutShift: true,
                animationFrame: true,
            });
            this.balDidAnimate.emit();
            return true;
        }
        return false;
    }
    async dismiss() {
        if (this.containerEl && this.arrowEl && this.trigger) {
            this.balWillAnimate.emit();
            if (this.cleanup) {
                this.cleanup();
            }
            this.trigger.classList.remove('bal-tooltip-trigger');
            hideContainerElement(this.containerEl);
            hideArrowElement(this.arrowEl);
            this.presented = false;
            this.balDidAnimate.emit();
            return true;
        }
        return false;
    }
    async update() {
        if (this.trigger && this.containerEl && this.arrowEl) {
            this.balWillAnimate.emit();
            let isInFrame = false;
            if (balBrowser.hasWindow) {
                isInFrame = !!window.frameElement;
            }
            computePosition(this.trigger, this.containerEl, {
                placement: this.placement,
                middleware: [
                    isInFrame ? undefined : shift(),
                    flip(),
                    offset(8),
                    arrow({
                        element: this.arrowEl,
                        padding: 4,
                    }),
                ],
            }).then(({ x, y, middlewareData, placement }) => {
                const side = placement.split('-')[0];
                const staticSide = {
                    top: 'bottom',
                    right: 'left',
                    bottom: 'top',
                    left: 'right',
                }[side];
                if (this.containerEl) {
                    Object.assign(this.containerEl.style, {
                        left: `${x}px`,
                        top: `${y}px`,
                    });
                }
                if (middlewareData.arrow && this.arrowEl) {
                    const arrowPosition = middlewareData.arrow;
                    Object.assign(this.arrowEl.style, {
                        left: x != null && arrowPosition.x != null ? `${arrowPosition.x}px` : '',
                        top: y != null && arrowPosition.y != null ? `${arrowPosition.y}px` : '',
                        right: '',
                        bottom: '',
                        [staticSide]: `${-4}px`,
                    });
                }
            });
            this.balDidAnimate.emit();
            return true;
        }
        return false;
    }
    get triggerElement() {
        return document.querySelector(`[id="${this.reference}"]`);
    }
    render() {
        const block = BEM.block('tooltip');
        const containerBlock = block.element('container');
        const arrowBlock = block.element('arrow');
        const innerBlock = block.element('inner');
        const innerContentBlock = innerBlock.element('content');
        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", null))))));
    }
    get el() { return this; }
    static get watchers() { return {
        "contentWidth": ["contentWidthChanged"]
    }; }
    static get style() { return balTooltipCss; }
}, [1, "bal-tooltip", {
        "reference": [1],
        "placement": [1],
        "offset": [2],
        "demo": [4],
        "contentWidth": [2, "content-width"],
        "presented": [32],
        "present": [64],
        "dismiss": [64],
        "update": [64]
    }, undefined, {
        "contentWidth": ["contentWidthChanged"]
    }]);
__decorate([
    Logger('bal-tooltip')
], Tooltip.prototype, "createLogger", null);
let tooltipIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-tooltip", "bal-stack"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Tooltip);
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalTooltip = Tooltip;
const defineCustomElement = defineCustomElement$1;

export { BalTooltip, defineCustomElement };
