var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  return value;
};
import { H as HTMLElementSSR, c as createCustomError } from "./index-CSnBqUsQ.js";
class Popover extends HTMLElementSSR() {
  constructor() {
    super();
    __publicField(this, "_slot");
    __publicField(this, "popoverBlock");
    __publicField(this, "popoverContent");
    __publicField(this, "popoverArrow");
    __publicField(this, "popoverInner");
    __publicField(this, "popoverInnerBlock");
    __publicField(this, "removePopoverTimeId");
    __publicField(this, "createContent", (content) => {
      if (!content)
        return;
      if (!this.popoverContent) {
        const div = document.createElement("div");
        this.popoverContent = document.createElement("div");
        this.popoverContent.setAttribute("class", "ran-popover-content");
        this.popoverContent.addEventListener("click", this.clickContent);
        this.popoverArrow = document.createElement("div");
        this.popoverArrow.setAttribute("class", "ran-popover-content-arrow");
        this.popoverInner = document.createElement("div");
        this.popoverInner.setAttribute("class", "ran-popover-content-inner");
        this.popoverInnerBlock = document.createElement("div");
        this.popoverInnerBlock.setAttribute("class", "ran-popover-content-inner-block");
        this.popoverContent.appendChild(this.popoverArrow);
        this.popoverContent.appendChild(this.popoverInner);
        this.popoverInner.appendChild(this.popoverInnerBlock);
        div.appendChild(this.popoverContent);
        document.body.appendChild(div);
      }
      if (this.popoverInnerBlock && content.length > 0) {
        this.popoverInnerBlock.innerHTML = "";
        const Fragment = document.createDocumentFragment();
        for (const child of content) {
          Fragment.appendChild(child);
        }
        this.popoverInnerBlock.appendChild(Fragment);
      }
    });
    __publicField(this, "watchContent", (e) => {
      const { value } = e.detail;
      this.createContent(value.content);
      this.placementPosition();
    });
    __publicField(this, "placementPosition", () => {
      var _a, _b, _c, _d;
      if (!this.popoverInnerBlock || !this.popoverContent)
        return;
      (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "block");
      (_b = this.popoverContent) == null ? void 0 : _b.style.setProperty("opacity", "1");
      const rect = this.getBoundingClientRect();
      const { top, left, bottom, width } = rect;
      this.popoverContent.style.setProperty("--ran-x", `${(left + window.scrollX).toFixed(2)}px`);
      this.popoverContent.style.setProperty("--ran-y", `${(top + window.scrollY).toFixed(2)}px`);
      let popoverTop = bottom + window.scrollY;
      let popoverLeft = left + window.scrollX;
      const root = document.getElementById(this.getPopupContainerId);
      const arrowHeight = 8;
      let popoverArrowTransform = `translateX(-50%) translateY(-40%) rotate(0deg)`;
      let popoverArrowTop = -arrowHeight;
      let popoverArrowLeft = left + this.popoverContent.clientWidth / 2 - arrowHeight / 2;
      if (this.placement === "top") {
        popoverTop = top + window.scrollY - this.popoverContent.clientHeight - arrowHeight;
        if (this.getPopupContainerId && root) {
          popoverTop = top - root.getBoundingClientRect().top - this.popoverContent.clientHeight;
          popoverLeft = left - root.getBoundingClientRect().left;
        }
        popoverArrowTransform = "translateX(-50%) translateY(40%) rotate(180deg)";
        popoverArrowTop = this.popoverContent.clientHeight - arrowHeight;
        popoverArrowLeft = width / 2;
      }
      (_c = this.popoverArrow) == null ? void 0 : _c.style.setProperty("inset", `${popoverArrowTop}px auto auto ${popoverArrowLeft}px`);
      (_d = this.popoverArrow) == null ? void 0 : _d.style.setProperty("transform", popoverArrowTransform);
      this.popoverContent.style.setProperty("inset", `${popoverTop}px auto auto ${popoverLeft}px`);
    });
    __publicField(this, "hoverPopover", () => {
      if (this.removePopoverTimeId) {
        clearTimeout(this.removePopoverTimeId);
        this.removePopoverTimeId = void 0;
      }
    });
    __publicField(this, "clickContent", (e) => {
      e.stopPropagation();
    });
    __publicField(this, "clickPopover", (e) => {
      e.stopPropagation();
      this.placementPosition();
    });
    __publicField(this, "clickRemovePopover", () => {
      this.hoverRemovePopover();
    });
    __publicField(this, "popoverTrigger", () => {
      this.removeEventListener("mouseenter", this.hoverPopover);
      this.removeEventListener("click", this.hoverPopover);
      this.removeEventListener("mouseleave", this.hoverRemovePopover);
      this.removeEventListener("click", this.clickPopover);
      document.removeEventListener("click", this.clickRemovePopover);
      if (this.trigger === "hover") {
        this.addEventListener("mouseenter", this.placementPosition);
        this.addEventListener("mouseleave", this.hoverRemovePopover);
      } else {
        this.addEventListener("click", this.clickPopover);
        document.addEventListener("click", this.clickRemovePopover);
      }
    });
    __publicField(this, "hoverRemovePopover", () => {
      if (this.removePopoverTimeId) {
        clearTimeout(this.removePopoverTimeId);
        this.removePopoverTimeId = void 0;
      }
      this.removePopoverTimeId = setTimeout(() => {
        var _a;
        (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("opacity", "0");
        setTimeout(() => {
          var _a2;
          (_a2 = this.popoverContent) == null ? void 0 : _a2.style.setProperty("display", "none");
        }, 300);
      }, 100);
    });
    this._slot = document.createElement("slot");
    this.popoverBlock = document.createElement("div");
    this.popoverBlock.setAttribute("class", "ran-popover-block");
    this.popoverBlock.setAttribute("role", "tooltip");
    this.popoverBlock.appendChild(this._slot);
  }
  static get observedAttributes() {
    return ["placement", "arrow", "trigger"];
  }
  get placement() {
    return this.getAttribute("placement") || "top";
  }
  set placement(value) {
    this.setAttribute("placement", value);
  }
  get arrow() {
    return this.getAttribute("arrow") || "";
  }
  set arrow(value) {
    this.setAttribute("arrow", value);
  }
  get trigger() {
    return this.getAttribute("trigger") || "";
  }
  set trigger(value) {
    this.setAttribute("trigger", value);
  }
  get getPopupContainerId() {
    return this.getAttribute("getPopupContainerId") || "";
  }
  set getPopupContainerId(value) {
    this.setAttribute("getPopupContainerId", value);
  }
  connectedCallback() {
    this.setAttribute("class", "ran-popover");
    this.appendChild(this.popoverBlock);
    for (const element of this.children) {
      if (element.tagName === "R-CONTENT") {
        element.addEventListener("change", this.watchContent);
        this.createContent(element.children);
      }
    }
    this.popoverTrigger();
  }
  disconnectCallback() {
    var _a;
    this.removeEventListener("mouseenter", this.hoverPopover);
    this.removeEventListener("mouseleave", this.hoverRemovePopover);
    this.removeEventListener("click", this.hoverPopover);
    this.removeEventListener("click", this.placementPosition);
    document.removeEventListener("click", this.clickRemovePopover);
    (_a = this.popoverContent) == null ? void 0 : _a.removeEventListener("click", this.clickContent);
  }
  attributeChangedCallback(n, o, v) {
    if (o !== v) {
      if (n === "trigger") {
        this.popoverTrigger();
      }
    }
  }
}
function Custom() {
  if (typeof document !== "undefined" && !customElements.get("r-popover")) {
    customElements.define("r-popover", Popover);
    return Popover;
  } else {
    return createCustomError("document is undefined or r-popover is exist");
  }
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  Popover,
  default: index
}, Symbol.toStringTag, { value: "Module" }));
export {
  Popover as P,
  index as a,
  index$1 as i
};
