Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-sanitize/index.cjs");
const require_style = require("./style.css?inline.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
let tippy_js = require("tippy.js");
tippy_js = require_runtime.__toESM(tippy_js, 1);
//#region src/components/lukso-tooltip/index.ts
var LuksoTooltip = class LuksoTooltip extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.variant = "light";
		this.size = "medium";
		this.placement = "top";
		this.trigger = "mouseenter";
		this.text = "";
		this.maxWidth = 300;
		this.show = false;
		this.hideOnClick = "true";
		this.isClipboardCopy = false;
		this.copyText = "";
		this.copyValue = "";
		this.offset = 10;
		this.showArrow = true;
		this.showDelay = 300;
		this.hideDelay = 300;
		this.showCopy = false;
		this.tooltipInstance = void 0;
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				tooltip: "hidden",
				trigger: "cursor-pointer flex flex-col items-center"
			},
			variants: { hasNoText: { true: { trigger: "cursor-default" } } }
		});
		this.handleSlotChange = () => {
			const textSlot = this.shadowRoot?.querySelector("slot[name=\"text\"]");
			if (textSlot) setTimeout(() => {
				const html = textSlot.assignedNodes({ flatten: true }).map((node) => {
					if (node.nodeType === Node.ELEMENT_NODE) return node.innerHTML;
					if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim() || "";
					return "";
				}).filter(Boolean).join("").replace(/<!--\?lit\$.*?\$-->/g, "");
				const decoded = this.decodeHtmlEntities(html);
				if (decoded && `<div>${decoded}</div>` !== this.text) {
					this.text = `<div>${decoded}</div>`;
					this.initTooltip();
				}
			}, 0);
		};
	}
	hideOnClickCheck() {
		if (this.hideOnClick === "toggle") return this.hideOnClick;
		if (this.hideOnClick === "true") return true;
		if (this.hideOnClick === "false") return false;
	}
	initTooltip() {
		const trigger = this.shadowRoot.getElementById("trigger");
		const tooltip = this.shadowRoot.getElementById("tooltip");
		if (this.tooltipInstance) {
			this.tooltipInstance?.destroy();
			this.tooltipInstance = void 0;
		}
		if (!this.text) return;
		this.tooltipInstance = (0, tippy_js.default)(trigger, {
			content: tooltip.innerHTML,
			allowHTML: true,
			arrow: this.showArrow,
			animation: "fade",
			interactive: true,
			appendTo: () => document.body,
			trigger: this.trigger,
			placement: this.placement,
			maxWidth: this.maxWidth,
			theme: `${this.variant}-${this.size}`,
			offset: [0, this.offset],
			hideOnClick: this.hideOnClickCheck(),
			delay: [this.showDelay, this.hideDelay],
			aria: {
				content: null,
				expanded: false
			}
		});
	}
	handleClick() {
		if (!this.isClipboardCopy || !this.copyText || !this.copyValue) return;
		this.showCopy = true;
		navigator.clipboard.writeText(this.copyValue);
		setTimeout(() => {
			this.showCopy = false;
		}, 1e3);
	}
	async willUpdate(changedProperties) {
		await this.updateComplete;
		if (changedProperties.has("show") && this.trigger === "manual") {
			if (this.show) {
				if (!this.tooltipInstance) this.initTooltip();
				this.tooltipInstance?.show();
			} else this.tooltipInstance?.hide();
			return;
		}
		if (changedProperties.has("text")) if (this.text !== "") this.initTooltip();
		else {
			this.tooltipInstance?.destroy();
			this.tooltipInstance = void 0;
		}
	}
	connectedCallback() {
		super.connectedCallback();
		setTimeout(() => {
			const textSlot = this.shadowRoot?.querySelector("slot[name=\"text\"]");
			if (textSlot) {
				textSlot.addEventListener("slotchange", this.handleSlotChange);
				this.handleSlotChange();
			}
		}, 0);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.tooltipInstance?.destroy();
		const textSlot = this.shadowRoot?.querySelector("slot[name=\"text\"]");
		if (textSlot) textSlot.removeEventListener("slotchange", this.handleSlotChange);
	}
	decodeHtmlEntities(str) {
		const txt = document.createElement("textarea");
		txt.innerHTML = str;
		return txt.value;
	}
	render() {
		const styles = this.styles({ hasNoText: !this.text });
		return lit.html`
      <div id="tooltip" role="tooltip" class=${styles.tooltip()}>
        ${lit.html`<lukso-sanitize html-content=${this.text}></lukso-sanitize>`}
      </div>
      <slot name="text" class="hidden"></slot>
      ${this.isClipboardCopy ? lit.html`<lukso-tooltip
            variant=${this.variant}
            size=${this.size}
            placement=${this.placement}
            max-width=${this.maxWidth}
            offset=${this.offset}
            trigger="manual"
            ?show=${this.showCopy ? true : void 0}
            text=${this.copyText}
          >
            <div
              id="trigger"
              class=${styles.trigger()}
              @click=${this.handleClick}
            >
              <slot></slot>
            </div>
          </lukso-tooltip>` : lit.html`<div
            id="trigger"
            class=${styles.trigger()}
            @click=${this.handleClick}
          >
            <slot></slot>
          </div>`}
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTooltip.prototype, "variant", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTooltip.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTooltip.prototype, "placement", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTooltip.prototype, "trigger", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTooltip.prototype, "text", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Number,
	attribute: "max-width"
})], LuksoTooltip.prototype, "maxWidth", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Boolean })], LuksoTooltip.prototype, "show", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "hide-on-click"
})], LuksoTooltip.prototype, "hideOnClick", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-clipboard-copy"
})], LuksoTooltip.prototype, "isClipboardCopy", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "copy-text"
})], LuksoTooltip.prototype, "copyText", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "copy-value"
})], LuksoTooltip.prototype, "copyValue", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: Number })], LuksoTooltip.prototype, "offset", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "show-arrow"
})], LuksoTooltip.prototype, "showArrow", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Number,
	attribute: "show-delay"
})], LuksoTooltip.prototype, "showDelay", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Number,
	attribute: "hide-delay"
})], LuksoTooltip.prototype, "hideDelay", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoTooltip.prototype, "showCopy", void 0);
LuksoTooltip = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-tooltip")], LuksoTooltip);
//#endregion
Object.defineProperty(exports, "LuksoTooltip", {
	enumerable: true,
	get: function() {
		return LuksoTooltip;
	}
});
