import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-ad30f2f0.js';
import { ElementIDUtils } from '@sankhyalabs/core';

const ezTooltipCss = ":host{--ez-tooltip--triangle-size:var(--space--8);--ez-tooltip--z-index:var(--elevation--24);--ez-tooltip--padding:var(--space--4) var(--space--8);--ez-tooltip--border-radius:var(--border--radius-8);--ez-tooltip--font-family:var(--font--pattern);--ez-tooltip--font-size:var(--font-size--small);--ez-tooltip--font-weight:var(--font-weight--regular);width:100%}.tooltip{position:absolute;z-index:var(--ez-tooltip--z-index);padding:var(--ez-tooltip--padding);border-radius:var(--ez-tooltip--border-radius);box-sizing:border-box;font-family:var(--ez-tooltip--font-family);font-size:var(--ez-tooltip--font-size);font-weight:var(--ez-tooltip--font-weight);text-align:center;width:max-content;display:none}.tooltip[data-strategy=\"fixed\"]{position:fixed}.arrow{position:absolute;width:var(--ez-tooltip--triangle-size);height:var(--ez-tooltip--triangle-size);transform:rotate(45deg)}.tooltip[data-type=\"default\"]{background:var(--color--petroleum-600);color:var(--color--gray-70)}.tooltip[data-type=\"default\"] .arrow{background:var(--color--petroleum-600)}.tooltip[data-type=\"error\"]{background:var(--color--red-600);color:var(--color--red-100)}.tooltip[data-type=\"error\"] .arrow{background:var(--color--red-600)}.tooltip[data-type=\"success\"]{background:var(--color--green-600);color:var(--color--green-100)}.tooltip[data-type=\"success\"] .arrow{background:var(--color--green-600)}.tooltip[data-type=\"warning\"]{background:var(--color--yellow-600);color:var(--color--yellow-100)}.tooltip[data-type=\"warning\"] .arrow{background:var(--color--yellow-600)}.tooltip[data-active=\"false\"]{display:none !important}";

const EzTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this._opened = false;
    this._eventsRegistered = false;
    this.message = undefined;
    this.anchoringElement = undefined;
    this.placement = 'bottom';
    this.gapOptions = { horizontalGap: 0, verticalGap: 0 };
    this.type = 'default';
    this.debouncingTime = 500;
    this.active = true;
    this.maxWidth = 200;
    this.useAnchorSize = false;
    this.strategy = 'absolute';
  }
  watchAnchoringElement(newValue, oldValue) {
    if (newValue) {
      this.setEvents(newValue);
      this.removeEvents(oldValue);
    }
  }
  watchMessage(newValue) {
    if (!newValue) {
      this.closeTooltip();
      return;
    }
    this.updatePosition();
  }
  openTooltip() {
    if (this.message && this.active) {
      if (this._debouncingTimeout) {
        clearTimeout(this._debouncingTimeout);
      }
      this._debouncingTimeout = setTimeout(() => {
        this._opened = true;
        this._tooltipElement.style.display = 'block';
        this.updatePosition();
      }, this.debouncingTime);
    }
  }
  closeTooltip() {
    clearTimeout(this._debouncingTimeout);
    this._tooltipElement.style.display = 'none';
    this._opened = false;
  }
  async updatePosition(element = this.anchoringElement) {
    if (!element || !this._opened) {
      return;
    }
    if (this.useAnchorSize) {
      const anchorSize = element.getBoundingClientRect().width;
      this._tooltipElement.style.width = `${anchorSize}px`;
    }
    if (this._cleanup) {
      this._cleanup();
    }
    this._cleanup = autoUpdate(element, this._tooltipElement, () => {
      computePosition(element, this._tooltipElement, {
        placement: this.placement,
        strategy: this.strategy,
        middleware: [
          offset(5),
          flip(),
          shift({ padding: 8 }),
          arrow({ element: this._arrowElement })
        ],
      }).then(({ x, y, placement, middlewareData }) => {
        const newTop = placement.includes("bottom") ? y + this.gapOptions.verticalGap : y - this.gapOptions.verticalGap;
        const newLeft = placement.includes("start") ? x + this.gapOptions.horizontalGap : x - this.gapOptions.horizontalGap;
        Object.assign(this._tooltipElement.style, {
          top: `${newTop}px`,
          left: `${newLeft}px`,
        });
        if (middlewareData.arrow) {
          const { x } = middlewareData.arrow;
          const onBottom = placement.includes("bottom");
          Object.assign(this._arrowElement.style, {
            left: `${x}px`,
            top: onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
            bottom: !onBottom ? `${-this._arrowElement.offsetHeight / 2}px` : '',
          });
        }
      });
    });
  }
  handleSlotChange(ev) {
    const slot = ev.target;
    const content = slot.assignedElements()[0];
    this.anchoringElement = content;
  }
  setEvents(element = this.anchoringElement) {
    if (!element) {
      return;
    }
    this.removeEvents(element);
    this._mouseEnterHandler = () => this.openTooltip();
    this._mouseLeaveHandler = () => this.closeTooltip();
    element.addEventListener('mouseenter', this._mouseEnterHandler);
    element.addEventListener('mouseleave', this._mouseLeaveHandler);
    this._eventsRegistered = true;
  }
  removeEvents(element = this.anchoringElement) {
    if (!element) {
      return;
    }
    if (this._mouseEnterHandler) {
      element.removeEventListener('mouseenter', this._mouseEnterHandler);
    }
    if (this._mouseLeaveHandler) {
      element.removeEventListener('mouseleave', this._mouseLeaveHandler);
    }
    this._eventsRegistered = false;
  }
  initializeTooltip() {
    if (this._element && this.anchoringElement && !this._eventsRegistered) {
      this.setEvents();
      this.addInfoId();
    }
  }
  connectedCallback() {
    this.initializeTooltip();
  }
  componentDidLoad() {
    this.initializeTooltip();
  }
  addInfoId() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
  }
  disconnectedCallback() {
    this.removeEvents();
    if (this._cleanup) {
      this._cleanup();
    }
    clearTimeout(this._debouncingTimeout);
  }
  render() {
    return (h(Host, null, h("div", Object.assign({ ref: ref => this._tooltipElement = ref }, { inert: true }, { class: "tooltip", "data-type": this.type, "data-active": this.active.toString(), "data-strategy": this.strategy, style: {
        maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
      }, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
  }
  get _element() { return getElement(this); }
  static get watchers() { return {
    "anchoringElement": ["watchAnchoringElement"],
    "message": ["watchMessage"]
  }; }
};
EzTooltip.style = ezTooltipCss;

export { EzTooltip as ez_tooltip };
