@reforma/components 0.0.0-stage → 0.1.0

package/dist/Modal/Modal.js

@@ -0,0 +1,1071 @@
+var Et = (h) => {
+  throw TypeError(h);
+};
+var gt = (h, t, e) => t.has(h) || Et("Cannot " + e);
+var d = (h, t, e) => (gt(h, t, "read from private field"), e ? e.call(h) : t.get(h)), O = (h, t, e) => t.has(h) ? Et("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, e), g = (h, t, e, i) => (gt(h, t, "write to private field"), i ? i.call(h, e) : t.set(h, e), e), ht = (h, t, e) => (gt(h, t, "access private method"), e);
+import { getRandomId as Ut, clamp as Tt } from "@reforma/lib";
+import { makeObservable as Yt } from "@reforma/lib/observers";
+import { runInAction as St, observableRef as Lt, observable as X, computed as Kt, action as P } from "mobx";
+import { animate as ct } from "motion";
+import Vt from "react";
+import { flushSync as Xt } from "react-dom";
+import { createRoot as Gt } from "react-dom/client";
+import { evaluateValue as xt, disableFocusByTab as Jt, enableFocusByTab as Qt, distanceBetween as Zt } from "./helpers.js";
+import te from "./ModalInteractions.js";
+import ft from "./styles/Modal.module.css.js";
+import { ModalRoot as ee } from "./views/ModalRoot.js";
+let Ct, Mt, Rt, Wt, It, kt, _t, At, Dt;
+function ie(h, t, e, i, s, l) {
+  function o(m, r, a) {
+    return function(y, p) {
+      return a && a(y), m[r].call(y, p);
+    };
+  }
+  function u(m, r) {
+    for (var a = 0; a < m.length; a++) m[a].call(r);
+    return r;
+  }
+  function c(m, r, a, y) {
+    if (typeof m != "function" && (y || m !== void 0)) throw new TypeError(r + " must " + (a || "be") + " a function" + (y ? "" : " or undefined"));
+    return m;
+  }
+  function n(m, r, a, y, p, w, I, D, z, C, S, x, k) {
+    function $(L) {
+      if (!k(L)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var M, j = r[0], q = r[3], V = !D;
+    if (!V) {
+      a || Array.isArray(j) || (j = [j]);
+      var b = {}, N = [], _ = p === 3 ? "get" : p === 4 || x ? "set" : "value";
+      C ? (S || x ? b = { get: Pt(function() {
+        return q(this);
+      }, y, "get"), set: function(L) {
+        r[4](this, L);
+      } } : b[_] = q, S || Pt(b[_], y, p === 2 ? "" : _)) : S || (b = Object.getOwnPropertyDescriptor(m, y));
+    }
+    for (var R = m, ut = j.length - 1; ut >= 0; ut -= a ? 2 : 1) {
+      var yt = j[ut], wt = a ? j[ut - 1] : void 0, bt = {}, at = { kind: ["field", "accessor", "method", "getter", "setter", "class"][p], name: y, metadata: w, addInitializer: (function(L, U) {
+        if (L.v) throw Error("attempted to call addInitializer after decoration was finished");
+        c(U, "An initializer", "be", !0), I.push(U);
+      }).bind(null, bt) };
+      try {
+        if (V) (M = c(yt.call(wt, R, at), "class decorators", "return")) && (R = M);
+        else {
+          var lt, pt;
+          at.static = z, at.private = C, C ? p === 2 ? lt = function(L) {
+            return $(L), b.value;
+          } : (p < 4 && (lt = o(b, "get", $)), p !== 3 && (pt = o(b, "set", $))) : (lt = function(L) {
+            return L[y];
+          }, (p < 2 || p === 4) && (pt = function(L, U) {
+            L[y] = U;
+          }));
+          var Ot = at.access = { has: C ? k.bind() : function(L) {
+            return y in L;
+          } };
+          if (lt && (Ot.get = lt), pt && (Ot.set = pt), R = yt.call(wt, x ? { get: b.get, set: b.set } : b[_], at), x) {
+            if (typeof R == "object" && R) (M = c(R.get, "accessor.get")) && (b.get = M), (M = c(R.set, "accessor.set")) && (b.set = M), (M = c(R.init, "accessor.init")) && N.push(M);
+            else if (R !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else c(R, (S ? "field" : "method") + " decorators", "return") && (S ? N.push(R) : b[_] = R);
+        }
+      } finally {
+        bt.v = !0;
+      }
+    }
+    return (S || x) && D.push(function(L, U) {
+      for (var mt = N.length - 1; mt >= 0; mt--) U = N[mt].call(L, U);
+      return U;
+    }), S || V || (C ? x ? D.push(o(b, "get"), o(b, "set")) : D.push(p === 2 ? b[_] : o.call.bind(b[_])) : Object.defineProperty(m, y, b)), R;
+  }
+  function f(m, r) {
+    return Object.defineProperty(m, Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: r });
+  }
+  if (arguments.length >= 6) var E = l[Symbol.metadata || /* @__PURE__ */ Symbol.for("Symbol.metadata")];
+  var T = Object.create(E ?? null), v = (function(m, r, a, y) {
+    var p, w, I = [], D = function(_) {
+      return ne(_) === m;
+    }, z = /* @__PURE__ */ new Map();
+    function C(_) {
+      _ && I.push(u.bind(null, _));
+    }
+    for (var S = 0; S < r.length; S++) {
+      var x = r[S];
+      if (Array.isArray(x)) {
+        var k = x[1], $ = x[2], M = x.length > 3, j = 16 & k, q = !!(8 & k), V = (k &= 7) == 0, b = $ + "/" + q;
+        if (!V && !M) {
+          var N = z.get(b);
+          if (N === !0 || N === 3 && k !== 4 || N === 4 && k !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + $);
+          z.set(b, !(k > 2) || k);
+        }
+        n(q ? m : m.prototype, x, j, M ? "#" + $ : se($), k, y, q ? w = w || [] : p = p || [], I, q, M, V, k === 1, q && M ? D : a);
+      }
+    }
+    return C(p), C(w), I;
+  })(h, t, s, T);
+  return e.length || f(h, T), { e: v, get c() {
+    var m = [];
+    return e.length && [f(n(h, [e], i, h.name, 5, T, m), T), u.bind(null, m, h)];
+  } };
+}
+function se(h) {
+  var t = oe(h, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function oe(h, t) {
+  if (typeof h != "object" || !h) return h;
+  var e = h[Symbol.toPrimitive];
+  if (e !== void 0) {
+    var i = e.call(h, t);
+    if (typeof i != "object") return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(h);
+}
+function Pt(h, t, e) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(h, "name", { configurable: !0, value: e ? e + " " + t : t });
+  } catch {
+  }
+  return h;
+}
+function ne(h) {
+  if (Object(h) !== h) throw TypeError("right-hand side of 'in' should be an object, got " + (h !== null ? typeof h : "null"));
+  return h;
+}
+const re = 35, ae = 100, vt = "[data-modal-clickout-layer]", Ht = 0.2, Bt = 0.15;
+let zt = !1;
+var G, J, Q, Z, tt, et, it, st, F, ot, dt, A, nt, rt, H, Y, K, B, $t, jt, qt, Nt;
+const W = class W {
+  constructor(t) {
+    O(this, B);
+    O(this, G);
+    O(this, J);
+    O(this, Q);
+    O(this, Z);
+    O(this, tt);
+    O(this, et);
+    O(this, it);
+    O(this, st);
+    O(this, F);
+    O(this, ot);
+    O(this, dt);
+    O(this, A);
+    O(this, nt);
+    O(this, rt);
+    O(this, H);
+    O(this, Y);
+    O(this, K);
+    if (g(this, G, (Ct(this), Mt(this))), this.type = "window", g(this, J, Rt(this, !1)), g(this, Q, Wt(this, !1)), this.isSaved = !0, g(this, Z, It(this, !1)), g(this, tt, kt(this, null)), g(this, et, _t(this, {})), g(this, it, At(this, null)), g(this, st, Dt(this, 0)), this.windowEl = null, this.isDragging = !1, g(this, F, null), g(this, H, null), g(this, K, []), W.list.add(this), typeof t.getOptions == "function" && (t = {
+      ...t,
+      ...t.getOptions(this)
+    }), t.fromModal === void 0 && (t.type ?? "window") !== "overlay" && t.overlay !== !0) {
+      const i = W.parentOf(this);
+      i && (t = {
+        ...t,
+        fromModal: i
+      });
+    }
+    const e = this.normalizeOptions(t);
+    this.options = e, this.id = e.id || `modal:${Ut(8)}`, this.name = e.name ?? this.id, this.type = e.type, g(this, dt, e.clickOutInclude || [document]), g(this, A, new AbortController()), g(this, rt, /* @__PURE__ */ new WeakMap()), this.interactions = new te(this), St(() => {
+      this.responsiveMode = xt(e.initialResponsiveMode) ?? null, this.setTabOptions(this.defaultTabId);
+    }), requestAnimationFrame(() => {
+      e.loading && this.setLoader(), e.reactHost || this.createModalRoot(), ht(this, B, $t).call(this), this.interactions.initDraggable(), this.interactions.initResizable(), this.currentOptions.onInit?.(this), this.open(!0);
+    });
+  }
+  static get opened() {
+    return Array.from(this.list);
+  }
+  static get visible() {
+    return this.opened.filter((t) => !t.hidden && t.type !== "sidebar");
+  }
+  /** Top visible modal, excluding `child`. Used to nest window-type dialogs. */
+  static parentOf(t) {
+    return this.visible.filter((i) => i !== t).at(-1);
+  }
+  static create(t = {}) {
+    zt || (zt = !0, window.addEventListener("popstate", (n) => {
+      if (n.direction === "backward" && n.oldState?.modalId) {
+        const f = Array.from(this.list).find((E) => n.oldState.modalId === E.id);
+        f && f.close(!1);
+      }
+    }));
+    const e = Array.from(this.list), i = t.name || t.id, s = {
+      ...t,
+      name: i
+    }, l = t.duplicate === !0, o = t.reuseExisting ?? !l, u = t.id ? e.find((n) => n.id === t.id) : void 0, c = i ? e.find((n) => n.name === i) : void 0;
+    if (u)
+      return u.canReuseWith(s, o) ? u.reuse(s) : u.show(), u;
+    if (c) {
+      if (c.canReuseWith(s, o))
+        return c.reuse(s), c;
+      if (t.hideOnClose || !l)
+        return c.show(), c;
+    }
+    return new this(s);
+  }
+  get options() {
+    return d(this, G);
+  }
+  set options(t) {
+    g(this, G, t);
+  }
+  get hidden() {
+    return d(this, J);
+  }
+  set hidden(t) {
+    g(this, J, t);
+  }
+  get disabled() {
+    return d(this, Q);
+  }
+  set disabled(t) {
+    g(this, Q, t);
+  }
+  get loading() {
+    return d(this, Z);
+  }
+  set loading(t) {
+    g(this, Z, t);
+  }
+  get activeTab() {
+    return d(this, tt);
+  }
+  set activeTab(t) {
+    g(this, tt, t);
+  }
+  get tabOptions() {
+    return d(this, et);
+  }
+  set tabOptions(t) {
+    g(this, et, t);
+  }
+  get responsiveMode() {
+    return d(this, it);
+  }
+  set responsiveMode(t) {
+    g(this, it, t);
+  }
+  get contentRevision() {
+    return d(this, st);
+  }
+  set contentRevision(t) {
+    g(this, st, t);
+  }
+  get currentOptions() {
+    const t = this.tabOptions, e = this.responsiveMode, i = t, s = i.adaptive ? i.adaptive[e ?? "all"] || i.adaptive.all || {} : {};
+    return {
+      ...this.options,
+      ...t,
+      ...s,
+      props: {
+        ...this.options.props,
+        ...t.props,
+        ...s.props
+      }
+    };
+  }
+  /**
+   * Get default tab ID - returns activeTab from signal/options or first tab ID
+   */
+  get defaultTabId() {
+    const t = this.activeTab || this.options.activeTab, e = this.options.tabs || [];
+    return e.length > 0 && (t == null || !e.find((s) => s.id === t)) ? e[0]?.id || null : t || null;
+  }
+  /**
+   * Set tab options based on active tab ID
+   * Internal method - use selectTab() for public API
+   */
+  setTabOptions(t = this.defaultTabId) {
+    const e = this.options.tabs ?? [];
+    if (!e.length)
+      this.activeTab = null, this.tabOptions = {
+        ...this.options
+      };
+    else {
+      const i = e.find((l) => l.id === t) || {}, s = i?.getOptions?.(this) || {};
+      this.activeTab = t, this.tabOptions = this.normalizeOptions({
+        ...this.options,
+        ...i,
+        ...s
+      });
+    }
+  }
+  /**
+   * Normalize options - builds full Opts from partial options
+   * Override in extended classes (e.g., EditorModal) to add custom defaults
+   */
+  normalizeOptions(t) {
+    const e = t.type || "window", i = e === "overlay", s = e === "window", l = t.target ?? t.fromModal?.windowEl, o = {
+      type: e,
+      handle: i ? void 0 : "[data-modal-title]",
+      animate: !0,
+      duplicate: !1,
+      reuseExisting: !0,
+      loading: !1,
+      fromModal: null,
+      position: ["center", "center"],
+      positionFrom: l ? "target" : "screen",
+      closeOnTargetLost: !!l && e === "window",
+      target: l,
+      component: null,
+      props: null,
+      class: [],
+      overlayClass: [],
+      theme: t.fromModal?.currentOptions.theme || "light",
+      tabs: [],
+      modalActions: [],
+      title: null,
+      closeButton: !i || !!t.title,
+      width: null,
+      minWidth: null,
+      height: null,
+      padding: null,
+      scrollable: !0,
+      overlay: !1,
+      shadow: !!t.overlay,
+      // Enable shadow if overlay is active
+      clickOut: s,
+      clickOutExclude: t.clickOutExclude || [],
+      clickOutInclude: t.clickOutInclude || [document],
+      closeOnEscape: !0,
+      hideOnClose: !1,
+      reactHost: !1,
+      initialResponsiveMode: "all",
+      responsiveModes: {
+        all: {
+          icon: "all.svg",
+          iconSize: 16,
+          tip: "All"
+        },
+        mobile: {
+          icon: "mobile.svg",
+          iconSize: 16,
+          tip: "Mobile"
+        },
+        tablet: {
+          icon: "tablet.svg",
+          iconSize: 16,
+          tip: "Tablet"
+        },
+        desktop: {
+          icon: "desktop.svg",
+          iconSize: 16,
+          tip: "Desktop"
+        }
+      },
+      // Callbacks
+      onInit() {
+      },
+      onOpen() {
+      },
+      onOpened() {
+      },
+      onCancel() {
+      },
+      onClose() {
+      },
+      onBeforeReuse() {
+      },
+      onShow() {
+      },
+      onHide() {
+      },
+      ...t,
+      limit: {
+        overflow: !0,
+        top: 15,
+        left: 15,
+        right: 15,
+        bottom: 15,
+        ...t.limit || {}
+      }
+    };
+    return typeof o.class == "string" && (o.class = [o.class]), typeof o.overlayClass == "string" && (o.overlayClass = [o.overlayClass]), o.scrollable === !0 && (o.scrollable = "window"), o.scrollable === !1 && (o.scrollable = "hidden"), o.scrollable === "overlay" && o.type === "window" && (o.handle = !1), typeof o.padding == "number" && (o.padding = `${o.padding}px`), o.duplicate = o.duplicate === !0, o.hideOnClose && (o.duplicate = !1), o.reuseExisting = t.reuseExisting ?? (!o.duplicate && !o.hideOnClose), o.fromModal && o.type !== "overlay" && t.overlay !== !0 ? (o.shadow = !1, o.overlay = !1) : o.shadow && (o.overlay = !0), o.tabs = (o.tabs ?? []).filter((u) => u && !u.hide), o.tabs?.forEach((u, c) => {
+      u.id || (u.id = `tab-${c}`);
+      const n = u.adaptive;
+      n && Object.entries(n).forEach(([f, E]) => {
+        E || delete n[f];
+      });
+    }), o;
+  }
+  /**
+   * Triggers a global event on the Modal class
+   */
+  triggerEvent(t) {
+    W.events.emit(t, this);
+  }
+  /**
+   * Updates options
+   */
+  updateOptions(t) {
+    const e = this.currentOptions.width, i = this.currentOptions.height;
+    let s = {
+      ...this.options,
+      ...t
+    };
+    typeof s.getOptions == "function" && (s = {
+      ...s,
+      ...s.getOptions(this)
+    }), this.options = this.normalizeOptions(s), this.type = this.options.type, this.setTabOptions(this.defaultTabId), (this.currentOptions.width !== e || this.currentOptions.height !== i) && this.refreshLayout();
+  }
+  /**
+   * Replace options for a reused instance without carrying stale caller options.
+   */
+  replaceOptions(t) {
+    let e = {
+      id: this.id,
+      name: this.name,
+      ...t
+    };
+    typeof e.getOptions == "function" && (e = {
+      ...e,
+      ...e.getOptions(this)
+    }), this.options = this.normalizeOptions(e), this.name = this.options.name ?? this.name, this.id = this.options.id ?? this.id, this.type = this.options.type, this.setTabOptions(this.defaultTabId);
+  }
+  canReuseWith(t, e = t.reuseExisting ?? !t.duplicate) {
+    return !!e && !t.reactHost && !t.hideOnClose && !this.currentOptions.hideOnClose;
+  }
+  /**
+   * Reuse this instance for a new Modal.create call with the same id/name.
+   */
+  reuse(t) {
+    const e = this.currentOptions;
+    t.target != null && e.target === t.target || e.onBeforeReuse?.(this), this.replaceOptions(t), St(() => {
+      this.responsiveMode = xt(this.options.initialResponsiveMode) ?? null, this.contentRevision += 1;
+    }), this.options.loading ? this.setLoader() : this.loading && this.removeLoader(), this.hidden && this.show(), requestAnimationFrame(() => {
+      this.refreshLayout();
+    }), this.focus();
+  }
+  /**
+   * Overlay-scroll and fullscreen overlay skip JS position / max-height —
+   * the overlay is the scrollport, the window stays in flow.
+   */
+  skipsWindowPositioning() {
+    const {
+      type: t,
+      scrollable: e
+    } = this.currentOptions;
+    return t === "overlay" || e === "overlay";
+  }
+  /**
+   * Keep a dragged window where the user put it. Otherwise place it from the anchor.
+   * A size change only pulls a dragged window back on screen.
+   */
+  applyPosition() {
+    if (this.currentOptions.handle && this.interactions.hasUserMoved) {
+      ht(this, B, jt).call(this);
+      return;
+    }
+    this.updatePosition();
+  }
+  /**
+   * Recalculate dimensions and position after options change.
+   */
+  refreshLayout() {
+    if (this.skipsWindowPositioning()) {
+      this.stopTargetWatcher();
+      return;
+    }
+    this.windowEl && (this.syncTargetWatcher(), this.updateBounds(), this.updateStyles({
+      width: this.currentOptions.width ?? "",
+      height: this.currentOptions.height ?? ""
+    }, !0), this.updateBounds(), this.applyPosition());
+  }
+  /**
+   * Close anchored windows when their target leaves the visible UI.
+   */
+  syncTargetWatcher() {
+    if (this.currentOptions.closeOnTargetLost) {
+      this.initTargetWatcher();
+      return;
+    }
+    this.stopTargetWatcher();
+  }
+  initTargetWatcher() {
+    if (d(this, H) != null || !this.currentOptions.closeOnTargetLost)
+      return;
+    const t = () => {
+      this.hidden || !this.isTargetLost() || this.cancel({
+        restoreFocus: !1
+      });
+    };
+    g(this, H, window.setInterval(t, 150)), this.addDisposer(() => {
+      d(this, H) != null && this.stopTargetWatcher();
+    }), t();
+  }
+  stopTargetWatcher() {
+    d(this, H) != null && (window.clearInterval(d(this, H)), g(this, H, null));
+  }
+  isTargetLost() {
+    const t = this.currentOptions;
+    if (!t.closeOnTargetLost || t.type === "overlay" || t.positionFrom !== "target")
+      return !1;
+    const e = this.getPositionTarget();
+    if (!e || e === e.ownerDocument.body || e === e.ownerDocument.documentElement)
+      return !1;
+    if (!e.isConnected)
+      return !0;
+    const i = e.ownerDocument.defaultView?.frameElement;
+    return i && (this.isElementInvisible(i) || !i.isConnected) ? !0 : this.isElementInvisible(e);
+  }
+  getPositionTarget() {
+    const t = this.currentOptions;
+    return t.target || t.fromModal?.windowEl || null;
+  }
+  isElementInvisible(t) {
+    const e = t.ownerDocument.defaultView?.getComputedStyle(t);
+    if (e?.display === "none" || e?.visibility === "hidden")
+      return !0;
+    const i = t.getBoundingClientRect();
+    return t.getClientRects().length === 0 || !i.width && !i.height;
+  }
+  /**
+   * Creates modal root using React
+   */
+  createModalRoot() {
+    const t = document.createElement("div");
+    t.setAttribute("data-modal-root-container", this.name), document.body.appendChild(t);
+    const e = Gt(t);
+    Xt(() => {
+      e.render(/* @__PURE__ */ Vt.createElement(ee, {
+        modal: this
+      }));
+    }), this.addDisposer(() => {
+      e.unmount(), t.remove();
+    });
+  }
+  setOverlay(t) {
+    t && (this.overlay = t);
+  }
+  setWindow(t) {
+    this.windowEl = t;
+  }
+  /**
+   * open - Open modal
+   *
+   * @param {type} isNew Description
+   */
+  async open(t = !1) {
+    const {
+      options: e
+    } = this, i = this.overlay, s = this.windowEl, l = () => {
+      this.triggerEvent("open"), i.style.transform = "", i.style.opacity = "", i.style.visibility = "", s && (s.style.transform = "", s.style.opacity = "", i.style.visibility = ""), e.onOpened?.(this);
+    };
+    e.fromModal && e.fromModal.disable();
+    const o = e.type === "overlay";
+    o && t && history.pushState({
+      modalId: this.id
+    }, window.document.title, ""), (o || e.overlay) && document.body.classList.add("overflow");
+    const u = e.animate && t && s;
+    if (this.skipsWindowPositioning() || (this.updateBounds(), this.updateStyles(), this.initResizeObserver(), this.syncTargetWatcher(), this.updatePosition()), u && s) {
+      i.style.opacity = String(o ? 0.6 : 0), i.style.visibility = "visible";
+      const c = [ct(i, {
+        opacity: 1
+      }, {
+        duration: Ht,
+        ease: "easeOut"
+      }), ct(s, {
+        scale: [0.98, 1],
+        y: [10, 0]
+      }, {
+        duration: Ht,
+        ease: "circOut"
+      })];
+      await Promise.all(c), l();
+    } else
+      l();
+    e.onOpen?.(this), this.focus();
+  }
+  /**
+   * Close modal
+   *
+   * @param {boolean} [popstate] Need fire popstate event
+   */
+  async close(t = !0, {
+    restoreFocus: e = !0
+  } = {}) {
+    const {
+      options: i
+    } = this, s = i.type === "overlay";
+    s && t && window.dispatchEvent(new PopStateEvent("popstate")), d(this, A).abort(), typeof d(this, Y)?.disconnect == "function" && d(this, Y).disconnect();
+    const l = this.overlay?.querySelector(":focus");
+    l && "blur" in l && typeof l.blur == "function" && l.blur();
+    const o = this.windowEl, u = this.overlay;
+    if (i.animate && o && u && await Promise.all([ct(o, {
+      scale: 0.98,
+      y: 10,
+      opacity: 0
+    }, {
+      duration: Bt,
+      ease: "circOut"
+    }), ct(u, {
+      opacity: 0
+    }, {
+      duration: Bt,
+      ease: "easeOut"
+    })]), i.onClose?.(this), W.list.delete(this), this.disposeAll(), this.triggerEvent("close"), i.fromModal) {
+      i.fromModal.enable();
+      return;
+    }
+    e && d(this, nt) && d(this, nt).focus(), (s || i.overlay) && document.body.classList.remove("overflow");
+  }
+  updateBounds() {
+    const t = this.windowEl;
+    if (!t)
+      return;
+    const {
+      overlay: e,
+      options: i
+    } = this, s = t.offsetWidth, l = t.offsetHeight, o = e.offsetWidth, u = e.offsetHeight, c = i.limit ?? {
+      top: 15,
+      left: 15,
+      right: 15,
+      bottom: 15
+    };
+    this.bounds = {
+      windowWidth: s,
+      windowHeight: l,
+      overlayWidth: o,
+      overlayHeight: u,
+      limits: {
+        minLeft: c.left ?? 15,
+        maxLeft: o - s - (c.right ?? 15),
+        minTop: c.top ?? 15,
+        maxTop: u - l - (c.bottom ?? 15),
+        overflowMinLeft: (c.left ?? 15) - s,
+        overflowMaxLeft: o - (c.right ?? 15),
+        overflowMinTop: c.top ?? 15,
+        overflowMaxTop: u - (c.bottom ?? 15)
+      }
+    };
+  }
+  /**
+   * Updates window size/position
+   *
+   * @param {object?} args - css params for modal
+   * @param allowOverflow
+   */
+  updateStyles(t = {}, e = !1) {
+    const {
+      overlay: i,
+      options: s
+    } = this;
+    if (this.skipsWindowPositioning())
+      return;
+    const l = this.windowEl;
+    if (!l)
+      return;
+    const {
+      overlayWidth: o,
+      overlayHeight: u,
+      limits: c
+    } = this.bounds;
+    let n = {
+      position: null,
+      top: 0,
+      left: 0,
+      width: this.currentOptions.width ?? "",
+      height: this.currentOptions.height ?? "",
+      maxWidth: null,
+      maxHeight: null
+    };
+    n = {
+      ...n,
+      ...this.styles,
+      ...t
+    };
+    const f = e ? c.overflowMinLeft : c.minLeft, E = e ? c.overflowMaxLeft : c.maxLeft, T = e ? c.overflowMinTop : c.minTop, v = e ? c.overflowMaxTop : c.maxTop;
+    s.position && (n.top = n.top > v ? v : n.top < T ? T : n.top, n.left = n.left > E ? E : n.left < f ? f : n.left);
+    const m = s.limit ?? {
+      top: 15,
+      left: 15,
+      right: 15,
+      bottom: 15
+    };
+    n.maxWidth = o - (m.left ?? 15) - (m.right ?? 15), n.maxHeight = u - (m.top ?? 15) - (m.bottom ?? 15), Object.assign(l.style, {
+      position: n.position || "",
+      top: typeof n.top == "number" ? `${n.top}px` : String(n.top),
+      left: typeof n.left == "number" ? `${n.left}px` : String(n.left),
+      width: typeof n.width == "number" ? `${n.width}px` : String(n.width),
+      height: typeof n.height == "number" ? `${n.height}px` : String(n.height),
+      maxWidth: n.maxWidth ? typeof n.maxWidth == "number" ? `${n.maxWidth}px` : String(n.maxWidth) : "",
+      maxHeight: n.maxHeight ? typeof n.maxHeight == "number" ? `${n.maxHeight}px` : String(n.maxHeight) : ""
+    }), this.styles = {
+      ...n,
+      position: n.position
+    }, i.dispatchEvent(new CustomEvent("updatePosition", {
+      detail: n
+    }));
+  }
+  /**
+   * Positions the window based on given options (next to element or in part of screen)
+   */
+  updatePosition() {
+    const {
+      overlay: t,
+      options: e
+    } = this, i = this.windowEl;
+    if (!e.position || this.skipsWindowPositioning() || !i)
+      return;
+    if (this.isTargetLost()) {
+      this.cancel({
+        restoreFocus: !1
+      });
+      return;
+    }
+    let s, l;
+    const o = this.getPositionTarget(), u = {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    }, c = t?.getBoundingClientRect(), n = o?.getBoundingClientRect()?.toJSON(), f = i.getBoundingClientRect().toJSON(), E = this.currentOptions.width, T = this.currentOptions.height;
+    if (typeof E == "number" && (f.width = E), typeof T == "number" && (f.height = T), o && n && t && o.ownerDocument !== t.ownerDocument) {
+      const C = o.ownerDocument.defaultView?.frameElement;
+      if (C) {
+        const S = C.getBoundingClientRect();
+        n.top += S.top, n.left += S.left;
+      }
+    }
+    const v = e.positionFrom === "target" && n || c;
+    if (!v || e.positionFrom === "target" && !v.width && !v.height)
+      return;
+    const [m, r] = e.position || ["center", "center"], a = m.includes("around") ? 7 : 0, y = r.includes("around") ? 7 : 0, {
+      x: p,
+      y: w
+    } = {
+      x: a,
+      y,
+      ...e.positionOffset
+    }, I = {
+      start: "end",
+      start_around: "end_around",
+      end: "start",
+      end_around: "start_around",
+      center: "center"
+    }, D = {
+      start: v.left + p,
+      start_around: v.left - f.width - p,
+      end: v.left + v.width - f.width - p,
+      end_around: v.left + v.width + p,
+      center: v.left + v.width / 2 - f.width / 2 + p
+    }, z = {
+      start: v.top + w,
+      start_around: v.top - f.height - w,
+      end: v.top + v.height - f.height - w,
+      end_around: v.top + v.height + w,
+      center: v.top + v.height / 2 - f.height / 2 + w
+    };
+    l = D[m], s = z[r], (l < 0 && v.left + f.width + p < u.width || l + f.width > u.width && v.left > f.width + p) && (l = D[I[m]]), (s < 0 && v.bottom + f.height + w < u.height || s + f.height > u.height && v.top - f.height - w > 0) && (s = z[I[r]]), l = Tt(0, l, u.width - f.width), s = Tt(e.limit?.top ?? 15, s, u.height - f.height), this.updateStyles({
+      position: "absolute",
+      top: s,
+      left: l
+    });
+  }
+  updateView() {
+  }
+  /**
+   * Select a tab by ID
+   */
+  selectTab(t) {
+    const e = this.activeTab;
+    if (t === e)
+      return;
+    const i = this.windowEl;
+    i && i.classList.add(ft.noanimate), this.setTabOptions(t), this.interactions.restoreDimensions(), this.options.onSelectTab?.(t, this), requestAnimationFrame(() => {
+      const s = this.windowEl;
+      s && s.classList.remove(ft.noanimate);
+    });
+  }
+  /**
+   * Toggle responsive mode for the modal
+   */
+  toggleResponsiveMode(t) {
+    if (t === this.responsiveMode)
+      return;
+    const e = this.windowEl;
+    e && e.classList.add(ft.noanimate), this._setResponsiveMode(t), this.updateStyles({
+      width: this.currentOptions.width,
+      height: this.currentOptions.height
+    }), requestAnimationFrame(() => {
+      const i = this.windowEl;
+      i && i.classList.remove(ft.noanimate);
+    });
+  }
+  /**
+   * Set responsive mode for the modal
+   */
+  _setResponsiveMode(t) {
+    this.responsiveMode = t;
+  }
+  /**
+   * Watch for window size changes and fix position if necessary
+   */
+  initResizeObserver() {
+    const t = () => {
+      if (this.hidden || this.interactions.isDragging || this.interactions.isResizing)
+        return;
+      const {
+        windowHeight: e,
+        windowWidth: i
+      } = this.bounds;
+      this.updateBounds(), this.applyPosition();
+      const {
+        windowHeight: s,
+        windowWidth: l
+      } = this.bounds;
+      (e !== s || i !== l) && this.options.onResize?.(this);
+    };
+    window.addEventListener("resize", t, {
+      signal: d(this, A).signal
+    }), g(this, Y, new ResizeObserver(() => t())), this.windowEl && d(this, Y).observe(this.windowEl);
+  }
+  /**
+   * Hide modal from screen
+   */
+  hide({
+    trigger: t = !0,
+    hideParent: e = !0
+  } = {}) {
+    this.hidden || (ht(this, B, qt).call(this), this.hidden = !0, e && this.options.fromModal && this.options.fromModal.hide(), document.body.classList.remove("overflow"), t && (this.overlay.dispatchEvent(new CustomEvent("hide")), this.options.onHide?.(this), this.triggerEvent("hide")));
+  }
+  /**
+   * Show hidden modal
+   */
+  show({
+    trigger: t = !0,
+    showParent: e = !0
+  } = {}) {
+    !W.list.has(this) || !this.hidden || (e && this.options.fromModal && this.options.fromModal.show(), this.hidden = !1, ht(this, B, Nt).call(this), this.focus(), t && (this.overlay.dispatchEvent(new CustomEvent("show")), this.options.onShow?.(this), this.triggerEvent("show")));
+  }
+  /**
+   * Focus current modal
+   */
+  focus() {
+    this.windowEl && (this.overlay.contains(document.activeElement) && document.activeElement !== this.overlay || document.activeElement !== this.overlay && (g(this, nt, document.activeElement), this.overlay.focus()));
+  }
+  /**
+   * Shake it
+   */
+  shake(t = 300) {
+    this.overlay && (this.overlay.classList.add("shake"), setTimeout(() => {
+      this.overlay.classList.remove("shake");
+    }, t));
+  }
+  /**
+   * Make window unactive
+   */
+  disable() {
+    const t = this.windowEl;
+    t && Jt([t]), this.disabled = !0;
+  }
+  /**
+   * Make window active
+   */
+  enable() {
+    const t = this.windowEl;
+    t && Qt([t]), this.disabled = !1, this.focus();
+  }
+  /**
+   * sets the flag that modal is saved
+   */
+  saved() {
+    this.isSaved = !0;
+  }
+  /**
+   * sets the flag that modal is not saved
+   */
+  unsaved() {
+    this.isSaved = !1;
+  }
+  /**
+   * Shows loader on the entire editor window
+   */
+  setLoader() {
+    this.disable(), this.loading = !0;
+  }
+  /**
+   * Removes loader
+   */
+  removeLoader() {
+    this.enable(), this.loading = !1;
+  }
+  /**
+   * Show confirmation dialog for unsaved changes
+   * Override in extended classes (e.g., EditorModal) for custom confirmation dialogs
+   */
+  async showConfirm() {
+    return window.confirm("You have unsaved changes. Are you sure you want to close?");
+  }
+  /**
+   * Close modal and show confirmation when data is not saved
+   */
+  cancel({
+    restoreFocus: t = !0
+  } = {}) {
+    const e = () => {
+      typeof this.options.onCancel == "function" && this.options.onCancel(this), this.options.hideOnClose ? this.hide() : this.close(!0, {
+        restoreFocus: t
+      });
+    };
+    return this.isSaved ? (e(), !0) : (this.showConfirm().then((i) => {
+      i && e();
+    }), !1);
+  }
+  /**
+   * Add a disposer function to be called when modal is closed
+   */
+  addDisposer(t) {
+    d(this, K).push(t);
+  }
+  /**
+   * Dispose all registered disposers
+   */
+  disposeAll() {
+    d(this, K).forEach((t) => t()), g(this, K, []);
+  }
+};
+G = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), Z = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), it = new WeakMap(), st = new WeakMap(), F = new WeakMap(), ot = new WeakMap(), dt = new WeakMap(), A = new WeakMap(), nt = new WeakMap(), rt = new WeakMap(), H = new WeakMap(), Y = new WeakMap(), K = new WeakMap(), B = new WeakSet(), /**
+ * Init core modal events (close on ESC or overlay and other)
+ */
+$t = function() {
+  const {
+    overlay: t
+  } = this, e = this.windowEl, i = () => {
+    const r = W.visible;
+    if (r.length > 1) {
+      const a = r.findIndex((w) => w.id === this.id);
+      if (!r.slice(a + 1).every((w) => w.cancel()))
+        return !1;
+    }
+    this.cancel();
+  }, s = (r, a) => r.matches(a) ? !0 : r.closest(a) !== null, l = (r) => r.querySelector(vt) !== null;
+  t.addEventListener("keydown", (r) => {
+    !this.currentOptions.closeOnEscape || r.key !== "Escape" || (this.cancel(), r.preventDefault(), r.stopImmediatePropagation());
+  }, {
+    signal: d(this, A).signal
+  });
+  const o = "[data-modal-close], header .close, footer .close", u = (r) => {
+    const a = r.target;
+    if (a && s(a, o)) {
+      const {
+        pageX: y,
+        pageY: p
+      } = r;
+      g(this, F, {
+        pageX: y,
+        pageY: p
+      });
+    }
+  }, c = (r) => {
+    const a = r.target;
+    if (!(!a || !s(a, o)))
+      if (d(this, F) != null) {
+        const {
+          pageX: y,
+          pageY: p
+        } = r;
+        +Zt([y, p], [d(this, F).pageX, d(this, F).pageY]).toFixed(0) <= re && i(), g(this, F, null);
+      } else
+        i();
+  };
+  t.addEventListener("pointerdown", u, {
+    signal: d(this, A).signal
+  }), t.addEventListener("pointerup", c, {
+    signal: d(this, A).signal
+  });
+  let n = !1, f = null, E = !1;
+  const T = () => {
+    n = !1, f = null, E = !1;
+  };
+  t.addEventListener("contextmenu", (r) => {
+    r.target === t && r.preventDefault();
+  }, {
+    signal: d(this, A).signal
+  });
+  const v = (r) => {
+    const a = r.target;
+    if (!a) {
+      n = !0;
+      return;
+    }
+    f = a;
+    const y = this.currentOptions, p = W.visible, w = p[p.length - 1], I = e?.contains(a) ?? !1, D = y.target?.contains(a) ?? !1, z = y.clickOutExclude?.some((x) => s(a, x)) ?? !1, C = s(a, vt), S = l(a.ownerDocument);
+    E = w === this, n = r.button !== 0 || I || D || z || C || S;
+  }, m = (r) => {
+    if (n || !f) {
+      T();
+      return;
+    }
+    f = null;
+    const a = r.target;
+    if (!a) {
+      T();
+      return;
+    }
+    const y = this.currentOptions, p = s(a, "[data-modal-close]"), w = !!document.querySelector("body .dropdown-balloon");
+    if (p || w) {
+      T();
+      return;
+    }
+    if (!E || this.hidden || this.interactions.isDragging) {
+      T();
+      return;
+    }
+    if (T(), e?.contains(a))
+      return;
+    if (!y.clickOut) {
+      y.animate && e && ct(e, {
+        scale: [1, 1.02, 1]
+      }, {
+        duration: 0.18,
+        ease: "circInOut"
+      });
+      return;
+    }
+    if (s(a, vt))
+      return;
+    const I = this.contentRevision;
+    setTimeout(() => {
+      !W.list.has(this) || this.contentRevision !== I || this.cancel({
+        restoreFocus: !1
+      });
+    }, ae);
+  };
+  d(this, dt).forEach((r) => {
+    r.addEventListener("pointerdown", (a) => v(a), {
+      capture: !0,
+      signal: d(this, A).signal
+    }), r.addEventListener("pointerup", (a) => m(a), {
+      capture: !0,
+      signal: d(this, A).signal
+    });
+  });
+}, jt = function() {
+  const {
+    limits: t
+  } = this.bounds, {
+    top: e,
+    left: i
+  } = this.styles;
+  let s = i, l = e;
+  l < t.minTop ? l = t.minTop : l > t.maxTop && (l = t.maxTop), s < t.minLeft ? s = t.minLeft : s > t.maxLeft && (s = t.maxLeft), this.updateStyles({
+    top: l,
+    left: s
+  });
+}, qt = function() {
+  g(this, ot, Array.from(this.overlay.querySelectorAll(".scrollable-content"))), d(this, ot).forEach((t) => {
+    d(this, rt).set(t, {
+      top: t.scrollTop || 0,
+      left: t.scrollLeft || 0
+    });
+  });
+}, Nt = function() {
+  d(this, ot)?.forEach((t) => {
+    const e = d(this, rt).get(t);
+    e && t.scrollTo(e.left, e.top);
+  });
+}, [Mt, Rt, Wt, It, kt, _t, At, Dt, Ct] = ie(W, [[Lt, 1, "options"], [X, 1, "hidden"], [X, 1, "disabled"], [X, 1, "loading"], [X, 1, "activeTab"], [Lt, 1, "tabOptions"], [X, 1, "responsiveMode"], [X, 1, "contentRevision"], [Kt, 3, "currentOptions"], [P, 2, "setTabOptions"], [P, 2, "updateOptions"], [P, 2, "replaceOptions"], [P, 2, "selectTab"], [P, 2, "hide"], [P, 2, "show"], [P, 2, "disable"], [P, 2, "enable"], [P, 2, "setLoader"], [P, 2, "removeLoader"]], []).e, W.events = Yt({}), W.list = /* @__PURE__ */ new Set();
+let Ft = W;
+export {
+  Ft as default
+};
+//# sourceMappingURL=Modal.js.map