import { p as proxyCustomElement, H, h, d as Host } from './p-CUAGH_8P.js';
import { c as createPopper } from './p-BfP9ezJQ.js';

const verdocsToolbarIconCss = "verdocs-toolbar-icon{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";

const VerdocsToolbarIcon = /*@__PURE__*/ proxyCustomElement(class VerdocsToolbarIcon extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        /**
         * Help text to display on hover/focus
         */
        this.text = '';
        /**
         * SVG icon to display
         */
        this.icon = '';
        /**
         * Override the Popper "placement" setting
         */
        this.placement = 'bottom';
        /**
         * Triggered when the icon is pressed
         */
        // @Event({composed: true}) press: EventEmitter;
        this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
    }
    componentDidLoad() {
        this.popperInstance = createPopper(this.iconEl, this.tooltip, {
            placement: this.placement,
            modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
        });
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        // });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    show() {
        var _a, _b;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    hide() {
        var _a;
        (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
    }
    // handlePress() {
    //   this.press?.emit();
    // }
    render() {
        return (h(Host, { key: 'f8516f47ac92cf82f1b833d76a8e13d819c597bd', class: {} }, h("div", { key: '1d7a381d4d662bfcad7519da73535151bb99ecd2', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: 'c4704c4cd442985192999bf4a26307e43923a54c', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, h("div", { key: '4e25e78425814b991913d1e537b9cf049053185f', "data-popper-arrow": "true", class: "arrow" }))));
    }
    static get style() { return verdocsToolbarIconCss; }
}, [256, "verdocs-toolbar-icon", {
        "text": [1],
        "icon": [1],
        "placement": [1],
        "containerId": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-toolbar-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-toolbar-icon":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsToolbarIcon);
            }
            break;
    } });
}

export { VerdocsToolbarIcon as V, defineCustomElement as d };
//# sourceMappingURL=p-Cif8CeGC.js.map

//# sourceMappingURL=p-Cif8CeGC.js.map