@opengis/gis 0.1.65 → 0.1.67

package/dist/index.js

@@ -0,0 +1,3656 @@
+import { computed as M, createElementBlock as p, openBlock as c, normalizeStyle as fe, createCommentVNode as F, createElementVNode as r, toDisplayString as S, Fragment as B, renderList as W, normalizeClass as K, ref as A, onMounted as xe, resolveDirective as ut, withDirectives as ne, watch as he, vModelText as Ne, vModelCheckbox as qe, defineComponent as Ye, reactive as pt, onBeforeUnmount as ht, createBlock as X, renderSlot as We, Teleport as Ke, createVNode as N, Transition as ft, withCtx as Z, vShow as Ee, nextTick as $e, resolveComponent as G, unref as Ze, createTextVNode as ae, createStaticVNode as Oe, withModifiers as gt, resolveDynamicComponent as De, withKeys as vt, onUnmounted as mt, mergeProps as yt } from "vue";
+import bt from "@opengis/filter";
+const H = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, s] of t)
+    o[n] = s;
+  return o;
+}, wt = {
+  key: 0,
+  class: "p-5 pb-0 flex justify-between items-center"
+}, xt = { class: "inline-block font-semibold text-lg text-gray-800" }, _t = { class: "flex flex-col gap-1 p-5" }, kt = { class: "flex items-center justify-between w-full text-sm text-gray-800 ml-2" }, Lt = {
+  key: 0,
+  class: "ms-2 text-xs text-gray-500"
+}, Ct = {
+  __name: "vs-legend-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = e, o = M(() => {
+      var s;
+      return ((s = t.config) == null ? void 0 : s.items) || [];
+    }), n = M(() => {
+      var s;
+      return ((s = t.config) == null ? void 0 : s.title) || "";
+    });
+    return (s, i) => (c(), p("div", {
+      class: "legend-widget flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl z-10 relative",
+      style: fe({ width: e.config.width || "100%" })
+    }, [
+      n.value ? (c(), p("div", wt, [
+        r("h2", xt, S(n.value), 1)
+      ])) : F("", !0),
+      r("div", _t, [
+        (c(!0), p(B, null, W(o.value, (d) => (c(), p("div", {
+          class: "flex items-center",
+          key: d.label
+        }, [
+          r("span", {
+            class: K(["shrink-0 size-2.5 inline-block me-2.5 h-[10px] w-[10px]", [
+              d.shape === "square" ? "rounded-sm" : "",
+              d.shape === "circle" ? "rounded-full" : "",
+              d.shape === "line" ? "w-6 h-0.5" : "",
+              d.shape === "dashed-line" ? "w-6 h-0.5 dashed-line" : ""
+            ]]),
+            style: fe({ backgroundColor: d.color })
+          }, null, 6),
+          r("span", kt, [
+            r("span", null, S(d.label), 1),
+            d.count !== void 0 ? (c(), p("span", Lt, " (" + S(d.count) + ") ", 1)) : F("", !0)
+          ])
+        ]))), 128))
+      ])
+    ], 4));
+  }
+}, $t = /* @__PURE__ */ H(Ct, [["__scopeId", "data-v-dd12cf90"]]), It = { class: "flex flex-row gap-x-3 z-10 relative" }, Vt = ["onClick"], St = ["src", "alt"], Ft = {
+  __name: "vs-basemaps-widget",
+  props: {
+    map: {
+      type: Object,
+      required: !0
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    position: {
+      type: String,
+      default: "bottom-left"
+    }
+  },
+  setup(e) {
+    const t = e, o = A("voyager"), n = M(() => {
+      var g;
+      if (!((g = t.config) != null && g.layers)) return [];
+      const v = t.config.layers.map((l) => ({
+        id: l.id,
+        title: l.label || l.title,
+        url: l.url,
+        service: l.type,
+        category: "Базові карти",
+        attribution: l.attribution,
+        image: l.image,
+        enabled: !0,
+        owner: l.owner || "Unknown"
+      }));
+      return v.push({
+        id: "__none__",
+        title: "Без підложки",
+        url: "",
+        service: "",
+        category: "Базові карти",
+        attribution: "",
+        enabled: !0,
+        owner: ""
+      }), v;
+    });
+    function s(v) {
+      return {
+        version: 8,
+        sources: {
+          [v.id]: {
+            type: "raster",
+            tiles: [v.url],
+            tileSize: 256,
+            attribution: v.attribution || ""
+          }
+        },
+        layers: [
+          {
+            id: v.id,
+            type: "raster",
+            source: v.id
+          }
+        ]
+      };
+    }
+    const i = (v) => {
+      if (!t.map) return;
+      const g = t.map.getStyle(), l = n.value.map((h) => h.id), u = g.layers.filter((h) => !l.includes(h.id)), a = {};
+      for (const h in g.sources)
+        l.includes(h) || (a[h] = g.sources[h]);
+      if (v.id === "__none__") {
+        const h = {
+          version: 8,
+          sources: { ...a },
+          layers: [...u]
+        };
+        t.map.setStyle(h);
+        return;
+      }
+      const m = s(v);
+      t.map.setStyle(m), t.map.once("styledata", () => {
+        for (const [h, f] of Object.entries(a))
+          t.map.getSource(h) || t.map.addSource(h, f);
+        for (const h of u)
+          t.map.getLayer(h.id) || t.map.addLayer(h);
+      });
+    }, d = (v) => {
+      o.value = v;
+      const g = n.value.find((l) => l.id === v);
+      g && t.map && i(g);
+    };
+    return xe(() => {
+      var v;
+      (v = t.config) != null && v.default && (o.value = t.config.default), d(o.value);
+    }), (v, g) => {
+      const l = ut("tooltip");
+      return c(), p("div", It, [
+        (c(!0), p(B, null, W(n.value, (u) => ne((c(), p("div", {
+          trigger: "hover",
+          placement: "top",
+          key: u.id
+        }, [
+          r("div", {
+            class: K([
+              "w-14 h-14 flex items-center justify-center bg-gray-200 rounded-xl shadow-2xs cursor-pointer transition-all border-4",
+              o.value === u.id ? "border-blue-400" : "border-transparent"
+            ]),
+            onClick: (a) => d(u.id)
+          }, [
+            u.image ? (c(), p("img", {
+              key: 0,
+              src: u.image,
+              alt: u.title,
+              class: K(["object-cover rounded-lg", u.id === "__none__" ? "w-10 h-10" : "w-12 h-12"])
+            }, null, 10, St)) : F("", !0)
+          ], 10, Vt)
+        ])), [
+          [l, u.title]
+        ])), 128))
+      ]);
+    };
+  }
+};
+function Ie(e) {
+  if (!e.attrType || !e.attribute || !e.rules)
+    return e.color || "#ccc";
+  const t = e.rules.map((o) => [
+    ["==", ["get", e.attribute], o.id || o.value],
+    o.color
+  ]);
+  return t.push(e.color || "#ccc"), ["case", ...t.flat()];
+}
+function jt(e) {
+  if (!e.attrType || e.attrType !== "icon-by-attribute" || !e.attribute || !e.rules)
+    return e.default_icon || null;
+  const t = e.rules.map((o) => [
+    ["==", ["get", e.attribute], o.value],
+    o.icon
+  ]);
+  return t.push(e.default_icon || "marker.svg"), ["case", ...t.flat()];
+}
+function Xe(e) {
+  if (!e.attrType || e.attrType !== "attribute-pattern" || !e.attribute || !e.rules)
+    return e.fillPattern || "";
+  const t = e.rules.map((o) => [
+    ["==", ["get", e.attribute], o.value],
+    o.fillPattern || ""
+  ]);
+  return t.push(e.fillPattern || ""), ["case", ...t.flat()];
+}
+function pe(e, t = "stroke", o = "#ccc") {
+  return [
+    "case",
+    ["boolean", ["feature-state", "hovered"], !1],
+    "#ff0000",
+    ["boolean", ["feature-state", "selected"], !1],
+    "#ff0000",
+    e[t] || o
+  ];
+}
+function Pt(e) {
+  const t = [
+    {
+      type: "fill",
+      minzoom: e.pointZoom || 0,
+      paint: {
+        "fill-color": Ie(e),
+        "fill-outline-color": pe(e, "stroke", "#ccc"),
+        "fill-opacity": e.opacity || 1,
+        ...e.attrType === "attribute-pattern" && {
+          "fill-pattern": Xe(e)
+        },
+        ...e.fillPattern && !e.attrType && { "fill-pattern": e.fillPattern }
+      }
+    },
+    {
+      type: "line",
+      paint: {
+        "line-color": pe(e, "stroke", "#ccc"),
+        "line-width": e.width || 2,
+        "line-opacity": e.lineOpacity || e.opacity || 1
+      }
+    }
+  ];
+  return e.pointZoom && t.push({
+    type: "circle",
+    maxzoom: e.pointZoom,
+    paint: {
+      "circle-color": e.color || "#ccc",
+      "circle-stroke-color": pe(e, "stroke", "#ccc"),
+      "circle-stroke-width": e.width || 2,
+      "circle-opacity": e.opacity || 1
+    }
+  }), t;
+}
+function Et(e) {
+  return [
+    {
+      type: "line",
+      paint: {
+        "line-color": pe(e, "color", Ie(e)),
+        "line-width": e.width || 2,
+        "line-opacity": e.opacity || 1,
+        ...e.dashArray && { "line-dasharray": e.dashArray }
+      },
+      layout: {
+        ...e.lineCap && { "line-cap": e.lineCap },
+        ...e.lineJoin && { "line-join": e.lineJoin }
+      }
+    }
+  ];
+}
+function Mt(e) {
+  const t = [
+    {
+      type: "circle",
+      maxzoom: e.icon && +e.iconZoom || 22,
+      paint: {
+        "circle-radius": e.radius || 6,
+        "circle-stroke-color": pe(e, "stroke", "#ccc"),
+        "circle-stroke-width": e.width || 2,
+        "circle-color": Ie(e),
+        "circle-opacity": e.opacity || 1
+      }
+    }
+  ];
+  return e != null && e.clusterZoom ? (t.push({
+    type: "circle",
+    filter: ["has", "point_count"],
+    paint: {
+      "circle-color": ["step", ["get", "point_count"], "#51bbd6", 100, "#f1f075", 750, "#f28cb1"],
+      "circle-radius": ["step", ["get", "point_count"], 20, 100, 30, 750, 40]
+    }
+  }), t.push({
+    type: "symbol",
+    filter: ["has", "point_count"],
+    layout: {
+      "text-field": ["get", "point_count"],
+      "text-font": ["Open Sans Regular"],
+      "text-size": 12
+    }
+  })) : e.icon && t.push({
+    type: "symbol",
+    minzoom: +e.iconZoom || 16,
+    layout: {
+      "icon-image": e.icon,
+      "icon-allow-overlap": !0
+    }
+  }), t;
+}
+function Tt(e, t, o) {
+  const n = e.type || "point";
+  return n === "polygon" ? [
+    {
+      type: "fill",
+      ...o !== void 0 ? { maxzoom: o } : {},
+      paint: {
+        "fill-color": Ie(e),
+        "fill-outline-color": pe(e, "stroke", "#ccc"),
+        "fill-opacity": e.opacity || 1,
+        ...e.attrType === "attribute-pattern" && {
+          "fill-pattern": Xe(e)
+        },
+        ...e.fillPattern && !e.attrType && { "fill-pattern": e.fillPattern }
+      }
+    },
+    {
+      type: "line",
+      ...o !== void 0 ? { maxzoom: o } : {},
+      paint: {
+        "line-color": pe(e, "stroke", "#ccc"),
+        "line-width": e.width || 2,
+        "line-opacity": e.lineOpacity || e.opacity || 1
+      }
+    }
+  ] : n === "line" ? [
+    {
+      type: "line",
+      ...o !== void 0 ? { maxzoom: o } : {},
+      paint: {
+        "line-color": pe(e, "color", Ie(e)),
+        "line-width": e.width || 2,
+        "line-opacity": e.opacity || 1,
+        ...e.dashArray && { "line-dasharray": e.dashArray }
+      },
+      layout: {
+        ...e.lineCap && { "line-cap": e.lineCap },
+        ...e.lineJoin && { "line-join": e.lineJoin }
+      }
+    }
+  ] : [
+    {
+      type: "circle",
+      ...o !== void 0 ? { maxzoom: o } : {},
+      paint: {
+        "circle-radius": e.radius || 6,
+        "circle-stroke-color": pe(e, "stroke", "#ccc"),
+        "circle-stroke-width": e.width || 2,
+        "circle-color": Ie(e),
+        "circle-opacity": e.opacity || 1
+      }
+    }
+  ];
+}
+function et(e) {
+  var o, n;
+  if (!e) return null;
+  if (e.attrType === "icon-by-attribute" && e.iconZoom) {
+    const s = jt(e), i = Array.isArray(s) && s[0] === "case" ? s : [
+      "case",
+      ["==", ["get", e.attribute], ((n = (o = e.rules) == null ? void 0 : o[0]) == null ? void 0 : n.value) || ""],
+      s,
+      s
+    ], d = Tt(e, void 0, +e.iconZoom), v = {
+      type: "symbol",
+      minzoom: +e.iconZoom,
+      layout: {
+        "icon-image": i,
+        "icon-size": (e == null ? void 0 : e.icon_size) || 1,
+        "icon-allow-overlap": !0,
+        "icon-anchor": (e == null ? void 0 : e.icon_anchor) || "bottom"
+      },
+      paint: {
+        "icon-opacity": e.opacity || 1
+      }
+    };
+    return [...d, v];
+  }
+  const t = e.type || "point";
+  return t === "polygon" ? Pt(e) : t === "line" ? Et(e) : Mt(e);
+}
+function zt(e) {
+  return e.startsWith("http") ? e : `${window.location.origin}${e}`;
+}
+function At(e) {
+  const {
+    id: t,
+    sourceLayer: o,
+    url: n,
+    bounds: s,
+    title: i,
+    style: d,
+    service: v,
+    service_type: g,
+    source_type: l,
+    data: u
+  } = e, a = zt(n), m = g || v || l || "vector";
+  switch (m) {
+    case "vtile":
+    case "vector":
+      return Ot(
+        t,
+        o,
+        a,
+        s,
+        i,
+        d
+      );
+    case "raster":
+      return Dt(t, a, s, i, d);
+    case "geojson":
+      return Ut(t, u || a, s, i, d);
+    default:
+      throw new Error(`Unsupported layer service type: ${m}`);
+  }
+}
+function Bt(e) {
+  switch (e) {
+    case "polygon":
+      return { type: "polygon", color: "#3388ff", opacity: 0.5 };
+    case "line":
+      return { type: "line", color: "#3388ff", opacity: 1 };
+    case "point":
+    default:
+      return { type: "point", color: "#3388ff", radius: 6, opacity: 1 };
+  }
+}
+function Ot(e, t, o, n, s, i) {
+  const d = t || (o.match(/\/vtile\/([^/]+)/) || [])[1] || e, v = {
+    type: "vector",
+    tiles: [o],
+    ...n && { bounds: n }
+  }, u = et(i || {}).map((a, m) => ({
+    ...a,
+    id: `${e}-${m}`,
+    "source-layer": d,
+    source: e
+  }));
+  return {
+    id: e,
+    title: s,
+    source: v,
+    layers: u,
+    visible: !0
+  };
+}
+function Dt(e, t, o, n, s) {
+  const i = {
+    type: "raster",
+    tiles: [t],
+    tileSize: 256,
+    ...o && { bounds: o }
+  }, d = s || {}, v = {
+    id: e,
+    type: "raster",
+    source: e,
+    layout: {
+      visibility: "visible"
+    },
+    ...d && { paint: d }
+  };
+  return {
+    id: e,
+    title: n,
+    source: i,
+    layers: [v],
+    visible: !0
+  };
+}
+function Ut(e, t, o, n, s) {
+  var u;
+  const i = {
+    type: "geojson",
+    data: t,
+    ...o && { bounds: o }
+  };
+  let d = "point";
+  if (t && t.features && t.features.length > 0) {
+    const a = (u = t.features[0].geometry) == null ? void 0 : u.type;
+    a === "Polygon" || a === "MultiPolygon" ? d = "polygon" : a === "LineString" || a === "MultiLineString" ? d = "line" : d = "point";
+  }
+  const v = s || Bt(d), l = et(v).map((a, m) => ({
+    ...a,
+    id: `${e}-${m}`,
+    source: e
+  }));
+  return {
+    id: e,
+    title: n,
+    source: i,
+    layers: l,
+    visible: !0
+  };
+}
+function Rt(e) {
+  if (!e || e.attrType !== "icon-by-attribute") return [];
+  const t = /* @__PURE__ */ new Set();
+  return e.default_icon && t.add(e.default_icon), Array.isArray(e.rules) && e.rules.forEach((o) => {
+    o.icon && t.add(o.icon);
+  }), Array.from(t).map((o) => ({
+    name: o,
+    url: (e.icon_base_url || "") + o
+  }));
+}
+function Ht(e) {
+  const t = /* @__PURE__ */ new Set();
+  function o(n) {
+    typeof n == "string" ? t.add(n) : Array.isArray(n) && n.forEach(o);
+  }
+  return e && e["icon-image"] && o(e["icon-image"]), Array.from(t);
+}
+async function tt(e, t) {
+  const o = t.map(async ({ name: n, url: s }) => {
+    const i = await e.loadImage(s);
+    return { name: n, data: i.data };
+  });
+  try {
+    const n = await Promise.all(o);
+    for (const { name: s, data: i } of n)
+      e.hasImage(s) || e.addImage(s, i);
+  } catch (n) {
+    console.error("Failed to load icons:", n);
+  }
+}
+function Wt(e, t, o = "/icons/") {
+  const s = Ht(t).map((i) => ({ name: i, url: o + i }));
+  return tt(e, s);
+}
+async function we(e, t) {
+  const o = At(t), n = Rt(t.style);
+  n.length > 0 && await tt(e, n), t.layout && t.layout["icon-image"] && await Wt(e, t.layout), e.getSource(o.id) || e.addSource(o.id, o.source);
+  for (const s of o.layers)
+    t.visible !== void 0 && (s.layout = {
+      ...s.layout,
+      visibility: t.visible ? "visible" : "none"
+    }), e.getLayer(s.id) ? e.setLayoutProperty(
+      s.id,
+      "visibility",
+      t.visible ? "visible" : "none"
+    ) : await e.addLayer(s);
+  return o;
+}
+function Ce(e, t) {
+  e.getStyle().layers.filter((s) => s.source === t).forEach((s) => {
+    e.removeLayer(s.id);
+  }), e.getSource(t) && e.removeSource(t);
+}
+const Nt = { class: "w-full flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl z-10 relative" }, Zt = { class: "flex flex-col justify-between h-full pb-5 px-5" }, qt = {
+  key: 0,
+  class: "relative mb-[10px]"
+}, Gt = {
+  width: "16",
+  height: "17",
+  viewBox: "0 0 16 17",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "absolute top-1/2 left-[8px] w-[16px] h-[16px]",
+  style: { transform: "translate(0px, -50%)" }
+}, Jt = {
+  key: 1,
+  class: "mb-4"
+}, Qt = { class: "" }, Yt = { class: "space-y-2" }, Kt = { class: "flex items-center gap-[10px] text-gray-500" }, Xt = { class: "dataset-checkbox-container flex" }, eo = ["onUpdate:modelValue", "onChange"], to = { class: "text-sm" }, oo = ["onClick"], ro = ["innerHTML"], so = {
+  key: 0,
+  class: "text-sm text-gray-500 text-center py-2"
+}, no = {
+  __name: "vs-layers-widget",
+  props: {
+    map: {
+      type: Object,
+      required: !0
+    },
+    history: {
+      type: Boolean,
+      default: !1
+    },
+    config: {
+      type: Object,
+      default: () => ({
+        layers: [],
+        search: !1,
+        allow_toggle_all: !1
+      })
+    },
+    position: {
+      type: String,
+      default: "bottom-left"
+    },
+    hasFilters: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["set-filter-layer", "update:enabledLayerIds"],
+  setup(e, { emit: t }) {
+    const o = e, n = t, s = A(""), i = A([]);
+    function d() {
+      const f = new URLSearchParams(window.location.search).get("layers");
+      return f ? f.split(",") : [];
+    }
+    function v(h) {
+      const f = new URLSearchParams(window.location.search);
+      h.length > 0 ? f.set("layers", h.join(",")) : f.delete("layers");
+      const L = `${window.location.pathname}?${f.toString()}`;
+      window.history.replaceState({}, "", L);
+    }
+    xe(() => {
+      let h = [];
+      o.history && (h = d()), h.length > 0 ? i.value = o.config.layers.map((f) => ({
+        ...f,
+        visible: h.includes(String(f.id))
+      })) : i.value = o.config.layers.map((f) => ({
+        ...f,
+        visible: f.visible ?? !1
+      })), i.value.forEach((f) => {
+        f.visible && we(o.map, f);
+      }), n("update:enabledLayerIds", u());
+    });
+    const g = M(() => {
+      if (!s.value) return i.value;
+      const h = s.value.toLowerCase();
+      return i.value.filter((f) => (f.title || f.name || f.label || "").toLowerCase().includes(h));
+    }), l = M(() => i.value.every((h) => h.visible)), u = () => i.value.filter((h) => h.visible).map((h) => h.id), a = (h) => {
+      h.visible ? we(o.map, h) : (Ce(o.map, h.id), n("set-filter-layer", null)), o.map.getStyle().layers.filter((j) => j.source === h.id).forEach((j) => {
+        o.map.setLayoutProperty(
+          j.id,
+          "visibility",
+          h.visible ? "visible" : "none"
+        );
+      }), n("update:enabledLayerIds", u());
+    }, m = () => {
+      const h = !l.value;
+      i.value.forEach((f) => {
+        f.visible = h, h ? we(o.map, f) : Ce(o.map, f.id);
+      }), h || n("set-filter-layer", null), n("update:enabledLayerIds", u());
+    };
+    return he(
+      () => u(),
+      (h) => {
+        o.history && v(h);
+      },
+      { deep: !0 }
+    ), (h, f) => (c(), p("div", Nt, [
+      f[2] || (f[2] = r("div", { class: "p-5 pb-3 flex justify-between items-center" }, [
+        r("h2", { class: "inline-block font-semibold text-lg text-gray-800" }, "Шари")
+      ], -1)),
+      r("div", Zt, [
+        e.config.search ? (c(), p("div", qt, [
+          ne(r("input", {
+            type: "text",
+            "onUpdate:modelValue": f[0] || (f[0] = (L) => s.value = L),
+            placeholder: "Введіть назву шару...",
+            class: "py-[7px] ps-8 pe-8 block w-full bg-gray-100 border-transparent rounded-lg text-sm focus:bg-white focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+          }, null, 512), [
+            [Ne, s.value]
+          ]),
+          (c(), p("svg", Gt, [...f[1] || (f[1] = [
+            r("path", {
+              d: "M7.33333 13.1667C10.2789 13.1667 12.6667 10.7789 12.6667 7.83333C12.6667 4.88781 10.2789 2.5 7.33333 2.5C4.38781 2.5 2 4.88781 2 7.83333C2 10.7789 4.38781 13.1667 7.33333 13.1667Z",
+              stroke: "#6B7280",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, -1),
+            r("path", {
+              d: "M13.9995 14.5L11.1328 11.6333",
+              stroke: "#6B7280",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, null, -1)
+          ])]))
+        ])) : F("", !0),
+        e.config.allow_toggle_all ? (c(), p("div", Jt, [
+          r("button", {
+            onClick: m,
+            class: "w-full py-[7px] bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+          }, S(l.value ? "Вимкнути всі" : "Увімкнути всі"), 1)
+        ])) : F("", !0),
+        r("div", Qt, [
+          r("ul", Yt, [
+            (c(!0), p(B, null, W(g.value, (L) => (c(), p("li", {
+              key: L.id,
+              class: "flex flex-wrap justify-between items-center gap-x-2"
+            }, [
+              r("label", Kt, [
+                r("span", Xt, [
+                  ne(r("input", {
+                    class: "dataset-checkbox",
+                    type: "checkbox",
+                    "onUpdate:modelValue": (j) => L.visible = j,
+                    onChange: () => a(L)
+                  }, null, 40, eo), [
+                    [qe, L.visible]
+                  ])
+                ]),
+                r("span", to, S(L.title || L.name || L.label), 1)
+              ]),
+              L.actions && L.visible ? (c(!0), p(B, { key: 0 }, W(L.actions, (j) => (c(), p("div", {
+                key: j.id
+              }, [
+                r("button", {
+                  class: "text-sm text-gray-500",
+                  onClick: (T) => h.$emit("show-widget", j.widget)
+                }, [
+                  r("div", {
+                    innerHTML: j.icon
+                  }, null, 8, ro)
+                ], 8, oo)
+              ]))), 128)) : F("", !0)
+            ]))), 128)),
+            s.value && g.value.length === 0 ? (c(), p("li", so, " Шарів не знайдено ")) : F("", !0)
+          ])
+        ])
+      ])
+    ]));
+  }
+};
+Ye({
+  props: {
+    modelValue: { type: Boolean, default: () => !1 },
+    title: { type: String, default: () => "" },
+    disabled: { type: Boolean, default: () => !1 }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.modelValue || this.$emit("update:modelValue", !1);
+  },
+  computed: {
+    modelState: {
+      get() {
+        return this.modelValue;
+      },
+      set(e) {
+        this.$emit("update:modelValue", e);
+      }
+    },
+    labelCursorClasses() {
+      return [
+        { "cursor-not-allowed": this.disabled },
+        { "cursor-pointer": !this.disabled }
+      ];
+    }
+  },
+  methods: {
+    handleEnterDown(e) {
+      const { keyCode: t } = e;
+      t === 13 && (this.modelState = !this.modelState);
+    },
+    addKeyHandler() {
+      window.addEventListener("keydown", this.handleEnterDown);
+    },
+    removeKeyHandler() {
+      window.removeEventListener("keydown", this.handleEnterDown);
+    }
+  }
+});
+const Pe = async (e, t, o, n = 10) => {
+  var L, j, T, k;
+  if (!t || !o) return;
+  await $e();
+  const s = await (o == null ? void 0 : o.getBoundingClientRect()), i = await (t == null ? void 0 : t.getBoundingClientRect());
+  if (!i || !s) return;
+  const d = await parseInt((L = t == null ? void 0 : t.getBoundingClientRect()) == null ? void 0 : L.height), v = await parseInt((j = t == null ? void 0 : t.getBoundingClientRect()) == null ? void 0 : j.width), g = await parseInt((T = o == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : T.height), l = await parseInt((k = o == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : k.width), u = await window.innerHeight, a = await window.innerWidth;
+  let m = 0, h = 0;
+  const f = i.bottom + n + g;
+  switch (e) {
+    case "top":
+      i.top - s.height - n < 0 ? m = i.top - s.height + n + g + d : m = i.top - s.height - n, a > l + i.right + 30 ? h = i.left - s.width / 2 + i.width / 2 : h = a - 30 - l;
+      break;
+    case "bottom":
+      u > f ? m = i.bottom + n : m = i.bottom - n - g - d, h = i.left - s.width / 2 + i.width / 2;
+      break;
+    case "left":
+      m = i.top - s.height / 2 + i.height / 2, i.left - s.width - n > 0 ? h = i.left - s.width - n : h = 10;
+      break;
+    case "right":
+      m = i.top - s.height / 2 + i.height / 2, a - v > l ? h = i.right + n : h = a - 30 - l;
+      break;
+    case "top-right":
+      i.top - s.height - n < 0 ? m = i.top - s.height + n + g + d : m = i.top - s.height - n, a - v > l ? h = i.right + n : h = a - 30 - l;
+      break;
+    case "top-left":
+      i.top - s.height - n < 0 ? m = i.top - s.height + n + g + d : m = i.top - s.height - n, i.left - s.width - n > 0 ? h = i.left - s.width - n : h = 10;
+      break;
+    case "top-start":
+      i.top - s.height - n < 0 ? m = i.top - s.height + n + g + d : m = i.top - s.height - n, i.left > 0 ? h = i.left : h = 10;
+      break;
+    case "bottom-right":
+      u > f ? m = i.bottom + n : m = i.bottom - n - g - d, a - v > l ? h = i.left : h = a - 30 - l;
+      break;
+    case "bottom-left":
+      u > f ? m = i.bottom + n : m = i.bottom - n - g - d, i.left > 0 ? h = i.right - l : h = 10;
+      break;
+    case "bottom-start":
+      u > f ? m = i.bottom + n : m = i.bottom - n - g - d, i.left > 0 ? h = i.left : h = 10;
+      break;
+  }
+  m + g > u ? m = u - g - n : m < 0 && (m = n), h + l > a ? h = a - l - n : h < 0 && (h = n), o instanceof HTMLElement && (o.style.top = `${m}px`, o.style.left = `${h}px`, o.style.position = "fixed");
+}, io = { class: "text-center" }, ao = { class: "py-2 px-4 w-full text-sm text-stone-800 bg-white shadow-[0_10px_40px_10px_rgba(0,0,0,0.08)] rounded-lg focus:outline-none focus:bg-stone-100 dark:bg-neutral-900 dark:text-neutral-200 dark:focus:bg-neutral-800 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full" }, Ve = /* @__PURE__ */ Ye({
+  __name: "vs-popover",
+  props: {
+    isOpen: { type: Boolean, default: !1 },
+    placement: { default: "top" },
+    gap: { default: 8 },
+    width: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    trigger: { default: "click" },
+    teleport: { default: "body" }
+  },
+  emits: ["isvisible"],
+  setup(e, { expose: t, emit: o }) {
+    const n = e, s = o, i = A(!1), d = A([]), v = A(null), g = A(null), l = A(null), u = (_) => {
+      var D, le;
+      if (!_) {
+        i.value = !1;
+        return;
+      }
+      (D = g.value) != null && D.contains(_.target) || (le = l.value) != null && le.contains(_.target) || (i.value = !1);
+    }, a = (_) => {
+      i.value && l.value && !l.value.contains(_.target) && (i.value = !1);
+    }, m = () => {
+      i.value = !1;
+    }, h = () => {
+      i.value && (i.value = !1);
+    }, f = () => {
+      let _ = v.value;
+      for (; _ && _ !== document.body; )
+        (_.scrollHeight > _.clientHeight || _.scrollWidth > _.clientWidth) && (_.addEventListener("scroll", m), d.value.push(_)), _ = _.parentElement;
+      document.body && (document.body.addEventListener("scroll", m), d.value.push(document.body));
+    }, L = () => {
+      d.value.forEach((_) => {
+        _.removeEventListener("scroll", m);
+      }), d.value = [];
+    };
+    he(i, (_) => {
+      _ ? (f(), window.addEventListener("resize", () => Pe(n.placement, g.value, l.value)), Pe(n.placement, g.value, l.value)) : window.removeEventListener("resize", () => Pe(n.placement, g.value, l.value)), s("isvisible", _);
+    }), xe(() => {
+      window.addEventListener("click", u), window.addEventListener("popstate", h), window.addEventListener("scroll", a, !0), f();
+    }), ht(() => {
+      window.removeEventListener("click", u), window.removeEventListener("popstate", h), L();
+    });
+    const j = () => {
+      i.value = !0, Pe(n.placement, g.value, l.value);
+    }, T = () => {
+      i.value = !1;
+    }, k = async () => {
+      await Pe(n.placement, g.value, l.value), i.value = !i.value;
+    };
+    return t({
+      togglePopover: k
+    }), (_, D) => (c(), p("div", {
+      ref_key: "popover",
+      ref: v,
+      class: "vs-popover inline-block"
+    }, [
+      r("div", io, [
+        _.trigger === "click" ? (c(), p("div", {
+          key: 0,
+          ref_key: "popoverRef",
+          ref: g,
+          onClick: k,
+          class: K({ "pointer-events-none": _.disabled })
+        }, [
+          We(_.$slots, "reference", {}, () => [
+            D[0] || (D[0] = r("button", null, "Click me!", -1))
+          ])
+        ], 2)) : F("", !0),
+        _.trigger === "hover" ? (c(), p("div", {
+          key: 1,
+          ref_key: "popoverRef",
+          ref: g,
+          onMouseover: j,
+          onMouseleave: T,
+          class: K({ "pointer-events-none": _.disabled })
+        }, [
+          We(_.$slots, "reference", {}, () => [
+            D[1] || (D[1] = r("button", null, "Click me!", -1))
+          ])
+        ], 34)) : F("", !0),
+        (c(), X(Ke, { to: _.teleport }, [
+          N(ft, { name: "fade" }, {
+            default: Z(() => [
+              ne(r("div", {
+                class: K(["vsTailwind vs-popover__content", _.placement]),
+                ref_key: "contentPop",
+                ref: l,
+                style: fe({
+                  width: _.width ? _.width + "px" : "fit-content",
+                  zIndex: 10002
+                })
+              }, [
+                r("div", ao, [
+                  We(_.$slots, "default", {}, () => [
+                    D[2] || (D[2] = r("span", null, "Popover content", -1))
+                  ])
+                ])
+              ], 6), [
+                [Ee, i.value]
+              ])
+            ]),
+            _: 3
+          })
+        ], 8, ["to"]))
+      ])
+    ], 512));
+  }
+});
+pt({ visible: !0 });
+const lo = { class: "legend-widget flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl z-10 relative" }, co = {
+  key: 0,
+  class: "p-5 pb-3 flex justify-between items-start gap-[30px]"
+}, uo = { class: "inline-block font-semibold text-lg text-gray-800 dark:text-neutral-200" }, po = { class: "flex flex-col gap-1" }, ho = { class: "flex flex-col gap-1 p-5 pt-0" }, fo = ["innerHTML"], go = {
+  __name: "vs-info-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = e, o = M(() => {
+      var i;
+      return ((i = t.config) == null ? void 0 : i.title) || "";
+    }), n = M(() => {
+      var i;
+      return ((i = t.config) == null ? void 0 : i.content) || "";
+    }), s = M(() => {
+      var i;
+      return ((i = t.config) == null ? void 0 : i.goTo) || [];
+    });
+    return (i, d) => {
+      var g, l;
+      const v = G("router-link");
+      return c(), p("div", lo, [
+        o.value || (g = s.value) != null && g.length ? (c(), p("div", co, [
+          r("h2", uo, S(o.value), 1),
+          (l = s.value) != null && l.length ? (c(), X(Ze(Ve), {
+            key: 0,
+            placement: "bottom"
+          }, {
+            reference: Z(() => [
+              N(Ze(Ve), {
+                trigger: "hover",
+                placement: "right"
+              }, {
+                reference: Z(() => [...d[0] || (d[0] = [
+                  r("div", { class: "flex items-center justify-center h-8 w-8 transition-colors rounded-full hover:bg-gray-100 cursor-pointer" }, [
+                    r("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg"
+                    }, [
+                      r("path", {
+                        d: "M4 12H20",
+                        stroke: "#000000",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      }),
+                      r("path", {
+                        d: "M4 6H20",
+                        stroke: "#000000",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      }),
+                      r("path", {
+                        d: "M4 18H20",
+                        stroke: "#000000",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round"
+                      })
+                    ])
+                  ], -1)
+                ])]),
+                default: Z(() => [
+                  d[1] || (d[1] = ae(" Перейти на карту ", -1))
+                ]),
+                _: 1
+              })
+            ]),
+            default: Z(() => [
+              r("div", po, [
+                (c(!0), p(B, null, W(s.value, (u) => (c(), p("div", {
+                  key: u.label
+                }, [
+                  u.url ? (c(), X(v, {
+                    key: 0,
+                    to: u.url,
+                    class: "text-sm text-gray-800 dark:text-neutral-200 hover:bg-gray-100 hover:text-blue-600 transition-colors rounded px-2 py-1 block"
+                  }, {
+                    default: Z(() => [
+                      ae(S(u.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["to"])) : F("", !0)
+                ]))), 128))
+              ])
+            ]),
+            _: 1
+          })) : F("", !0)
+        ])) : F("", !0),
+        r("div", ho, [
+          r("div", { innerHTML: n.value }, null, 8, fo)
+        ])
+      ]);
+    };
+  }
+}, vo = /* @__PURE__ */ H(go, [["__scopeId", "data-v-629caa82"]]), mo = { class: "w-full flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl z-10 relative overflow-hidden" }, yo = {
+  key: 0,
+  class: "p-5 pb-3 flex justify-between items-center"
+}, bo = { class: "inline-block font-semibold text-lg text-gray-800" }, wo = {
+  key: 1,
+  class: "flex"
+}, xo = { class: "flex items-center mx-[8px]" }, _o = { class: "min-h-[34px] max-h-[34px] overflow-hidden min-w-[34px] flex justify-center items-center bg-stone-100 text-stone-800 py-2 px-3 text-sm rounded-lg" }, ko = { class: "min-h-[34px] flex justify-center items-center text-stone-500 py-2 px-1.5 text-sm" }, Lo = { class: "flex flex-col justify-between pb-5 px-5 h-full overflow-y-auto flex-1 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent" }, Co = {
+  key: 0,
+  class: "text-center"
+}, $o = {
+  key: 1,
+  class: "text-red-500"
+}, Io = { key: 2 }, Vo = ["innerHTML"], So = {
+  key: 1,
+  class: "flow-root"
+}, Fo = { class: "-my-3 divide-y divide-gray-100 text-sm" }, jo = { class: "font-medium text-gray-900" }, Po = { class: "text-gray-700 sm:col-span-2" }, Eo = {
+  key: 2,
+  class: "vs-map-card-info__nodata"
+}, Mo = {
+  key: 3,
+  class: "pt-4 flex justify-end"
+}, To = ["href"], ot = {
+  __name: "vs-card-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    },
+    cardValues: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["close", "content-resize"],
+  setup(e, { emit: t }) {
+    const o = e, n = t, s = M(() => {
+      var T;
+      return ((T = o.config) == null ? void 0 : T.title) || "";
+    }), i = M(
+      () => !!(typeof window.app == "object" && window.app && window.app.config)
+    ), d = A([]), v = A(!1), g = A(null), l = A(0), u = M(() => l.value + 1), a = M(() => {
+      var T;
+      return ((T = o.info) == null ? void 0 : T.length) || 0;
+    }), m = M(() => d.value[l.value]), h = M(() => {
+      if (!m.value) return {};
+      const { rows: T, columns: k } = m.value;
+      return !T || !k ? {} : k.reduce((_, D) => (!D.hide && !["geom", "geodata", "id"].includes(D.name) && (_[D.ua] = T[D.name] ?? "-"), _), {});
+    });
+    async function f() {
+      var T, k, _, D, le, ce;
+      v.value = !0, g.value = null;
+      try {
+        const te = {
+          id: (T = o.cardValues) == null ? void 0 : T.id,
+          layer: typeof ((k = o.cardValues) == null ? void 0 : k.layer) == "object" ? (D = (_ = o.cardValues) == null ? void 0 : _.layer) == null ? void 0 : D.id : (le = o.cardValues) == null ? void 0 : le.layer,
+          map: (ce = o.cardValues) == null ? void 0 : ce.map
+        }, Ue = await fetch("/api/map-format?" + new URLSearchParams(te)).then((Me) => Me.json());
+        d.value[l.value] = Ue;
+      } catch (te) {
+        g.value = (te == null ? void 0 : te.message) || "Помилка запиту";
+      } finally {
+        v.value = !1, await $e(), n("content-resize");
+      }
+    }
+    function L() {
+      l.value < o.info.length - 1 && (l.value += 1, d.value[l.value] || f());
+    }
+    function j() {
+      l.value > 0 && (l.value -= 1, d.value[l.value] || f());
+    }
+    return xe(async () => {
+      await $e(), f();
+    }), he(
+      () => o.info,
+      () => {
+        l.value = 0, f(), n("content-resize");
+      },
+      { deep: !0 }
+    ), he([() => o.cardValues, () => o.config], async () => {
+      await $e(), f(), n("content-resize");
+    }), (T, k) => {
+      var _, D;
+      return c(), p("div", mo, [
+        s.value ? (c(), p("div", yo, [
+          r("h2", bo, S(s.value), 1),
+          r("button", {
+            type: "button",
+            class: "size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600 ml-2",
+            onClick: k[0] || (k[0] = (le) => n("close"))
+          }, [...k[1] || (k[1] = [
+            r("svg", {
+              class: "shrink-0 size-4 cursor-pointer",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              r("path", { d: "M18 6 6 18" }),
+              r("path", { d: "m6 6 12 12" })
+            ], -1)
+          ])])
+        ])) : F("", !0),
+        a.value > 1 ? (c(), p("div", wo, [
+          r("button", {
+            type: "button",
+            class: K([{
+              "opacity-flex items-center justify-between border-b px-[16px] py-[8px]50 pointer-events-none": u.value === 1
+            }, "min-h-[34px] min-w-[34px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-stone-800 hover:bg-stone-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-stone-100"]),
+            onClick: j
+          }, " ◀ ", 2),
+          r("div", xo, [
+            r("span", _o, S(u.value), 1),
+            k[2] || (k[2] = r("span", { class: "min-h-[34px] flex justify-center items-center text-stone-500 py-2 px-1.5 text-sm" }, "з", -1)),
+            r("span", ko, S(a.value), 1)
+          ]),
+          r("button", {
+            type: "button",
+            onClick: L,
+            class: K([{
+              "opacity-50 pointer-events-none": u.value === a.value
+            }, "min-h-[34px] min-w-[34px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-stone-800 hover:bg-stone-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-stone-100"])
+          }, " ▶ ", 2)
+        ])) : F("", !0),
+        r("div", Lo, [
+          v.value ? (c(), p("div", Co, "Завантаження даних...")) : g.value ? (c(), p("div", $o, " Помилка завантаження даних ")) : (c(), p("div", Io, [
+            (_ = m.value) != null && _.html ? (c(), p("div", {
+              key: 0,
+              innerHTML: m.value.html,
+              class: "custom-table-html border-b"
+            }, null, 8, Vo)) : Object.keys(h.value).length ? (c(), p("div", So, [
+              r("dl", Fo, [
+                (c(!0), p(B, null, W(h.value, (le, ce) => (c(), p("div", {
+                  key: ce,
+                  class: "grid grid-cols-1 gap-1 py-3 even:bg-gray-50 sm:grid-cols-3 sm:gap-4"
+                }, [
+                  r("dt", jo, S(ce), 1),
+                  r("dd", Po, S(le), 1)
+                ]))), 128))
+              ])
+            ])) : (c(), p("div", Eo, "Даних не знайдено."))
+          ])),
+          (D = m.value) != null && D.cardInterface && i.value ? (c(), p("div", Mo, [
+            r("a", {
+              href: `/card/${m.value.cardInterface}/${m.value.id}`,
+              target: "_blank",
+              class: "w-full !cursor-pointer text-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 transition text-sm font-medium"
+            }, " Перейти в реєстр ", 8, To)
+          ])) : F("", !0)
+        ])
+      ]);
+    };
+  }
+}, zo = { class: "size-full flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl dark:bg-neutral-800 dark:border-neutral-700" }, Ao = {
+  key: 0,
+  class: "p-5 pb-0 items-center"
+}, Bo = { class: "inline-block font-semibold text-lg text-gray-800 dark:text-neutral-200" }, Oo = { class: "h-full p-5" }, Do = { class: "h-full flex flex-col justify-between space-y-4" }, Uo = { class: "space-y-4" }, Ro = {
+  key: 0,
+  class: "flex gap-x-1 w-full h-2.5 rounded-full overflow-hidden"
+}, Ho = ["aria-valuenow"], Wo = { class: "text-sm text-gray-500 px-2 w-full py-2 cursor-pointer !flex flex-row items-center rounded-lg group hover:bg-gray-100" }, No = ["for"], Zo = {
+  key: 0,
+  width: "16",
+  height: "auto",
+  src: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTYgMTYnIGZpbGw9J3doaXRlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J00xMi4yMDcgNC43OTNhMSAxIDAgMDEwIDEuNDE0bC01IDVhMSAxIDAgMDEtMS40MTQgMGwtMi0yYTEgMSAwIDAxMS40MTQtMS40MTRMNi41IDkuMDg2bDQuMjkzLTQuMjkzYTEgMSAwIDAxMS40MTQgMHonLz48L3N2Zz4="
+}, qo = ["id", "onUpdate:modelValue"], Go = { class: "ml-2 text-gray-800 dark:text-neutral-200" }, Jo = {
+  key: 0,
+  class: "ms-auto text-xs text-gray-500 dark:text-neutral-500"
+}, Qo = {
+  __name: "vs-attributre-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    },
+    map: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = e, o = M(() => {
+      var g;
+      return ((g = t.config) == null ? void 0 : g.title) || "";
+    }), n = A([]), s = M(() => t.config.layer.style.rules.some(
+      (g) => g.count !== void 0
+    )), i = M(() => t.config.layer.style.rules.reduce(
+      (g, l) => g + (l.count || 0),
+      0
+    )), d = (g) => !g || i.value === 0 ? 0 : Math.round(g / i.value * 100), v = () => {
+      const l = t.config.layer.style.rules.filter(
+        (u, a) => n.value[a]
+      ).map((u) => u.id || u.value).join(",");
+      if (t.config.layer.id) {
+        const u = t.map.getSource(t.config.layer.id);
+        if (u) {
+          const m = u.tiles[0].split("?filter=")[0], h = l ? `${m}?filter=${t.config.layer.style.attribute}=${l}` : m;
+          u.setTiles([h]);
+        }
+      }
+    };
+    return xe(() => {
+      var g;
+      (g = t.config) != null && g.layer && (we(t.map, t.config.layer), n.value = new Array(t.config.layer.style.rules.length).fill(
+        !1
+      ));
+    }), (g, l) => (c(), p("div", zo, [
+      o.value ? (c(), p("div", Ao, [
+        r("div", null, [
+          r("h2", Bo, S(o.value), 1)
+        ])
+      ])) : F("", !0),
+      r("div", Oo, [
+        r("div", Do, [
+          r("div", Uo, [
+            s.value ? (c(), p("div", Ro, [
+              (c(!0), p(B, null, W(e.config.layer.style.rules, (u, a) => (c(), p("div", {
+                key: a,
+                class: "flex flex-col justify-center overflow-hidden text-xs text-white text-center whitespace-nowrap",
+                style: fe({
+                  width: `${d(u.count)}%`,
+                  backgroundColor: u.color
+                }),
+                role: "progressbar",
+                "aria-valuenow": d(u.count),
+                "aria-valuemin": "0",
+                "aria-valuemax": "100"
+              }, null, 12, Ho))), 128))
+            ])) : F("", !0),
+            r("ul", null, [
+              (c(!0), p(B, null, W(e.config.layer.style.rules, (u, a) => (c(), p("li", { key: a }, [
+                r("div", Wo, [
+                  r("label", {
+                    for: `filter-${a}`,
+                    class: "flex items-center w-full cursor-pointer"
+                  }, [
+                    r("div", {
+                      class: "w-[18px] h-[18px] border rounded-[4px] flex items-center justify-center",
+                      style: fe({
+                        background: n.value[a] ? u.color || "#2563eb" : "#fff",
+                        borderColor: n.value[a] ? u.color || "#2563eb" : u.color || "#d9d9d9"
+                      })
+                    }, [
+                      n.value[a] ? (c(), p("img", Zo)) : F("", !0)
+                    ], 4),
+                    ne(r("input", {
+                      type: "checkbox",
+                      id: `filter-${a}`,
+                      "onUpdate:modelValue": (m) => n.value[a] = m,
+                      onChange: v,
+                      class: "hidden",
+                      disabled: !1
+                    }, null, 40, qo), [
+                      [qe, n.value[a]]
+                    ]),
+                    r("span", Go, S(u.label || u.text), 1),
+                    s.value ? (c(), p("span", Jo, "(" + S(u.count) + ")", 1)) : F("", !0)
+                  ], 8, No)
+                ])
+              ]))), 128))
+            ])
+          ])
+        ])
+      ])
+    ]));
+  }
+}, Yo = { class: "hover:bg-gray-100 rounded-lg flex items-center ml-[20px] py-[8px] px-[8px]" }, Ko = ["for"], Xo = { class: "custom-checkbox-wrapper" }, er = ["id", "checked"], tr = { class: "custom-checkbox" }, or = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "8",
+  viewBox: "0 0 12 8",
+  fill: "none"
+}, rr = { class: "flex items-center justify-between ml-2 w-full" }, sr = ["title"], nr = {
+  key: 0,
+  class: "text-xs opacity-60 text-[#4b5563]"
+}, ir = {
+  __name: "vs-map-catalog-item",
+  props: {
+    layer: {
+      type: Object,
+      required: !0
+    },
+    map: {
+      type: Object,
+      default: () => null
+    },
+    selectedLayers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["select", "remove"],
+  setup(e, { emit: t }) {
+    const o = e, n = t, s = M(() => o.selectedLayers.some((v) => v.id === o.layer.id)), i = (v) => Intl.NumberFormat("uk", {
+      notation: "compact"
+    }).format(v), d = (v) => {
+      n(v ? "select" : "remove", o.layer);
+    };
+    return (v, g) => {
+      var l, u, a, m, h;
+      return c(), p("div", Yo, [
+        r("label", {
+          class: "flex items-center w-full cursor-pointer",
+          for: e.layer.id
+        }, [
+          r("div", Xo, [
+            r("input", {
+              id: e.layer.id,
+              type: "checkbox",
+              checked: s.value,
+              onChange: g[0] || (g[0] = (f) => d(f.target.checked)),
+              class: "custom-checkbox-input"
+            }, null, 40, er),
+            r("div", tr, [
+              s.value ? (c(), p("svg", or, [...g[1] || (g[1] = [
+                r("path", {
+                  d: "M10.6663 1L4.24967 7.41667L1.33301 4.5",
+                  stroke: "#fff",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, null, -1)
+              ])])) : F("", !0)
+            ])
+          ]),
+          r("div", rr, [
+            r("div", {
+              class: "whitespace-nowrap text text-ellipsis max-w-[260px] overflow-hidden text-[13px] text-[#4b5563]",
+              title: (l = e.layer) == null ? void 0 : l.name
+            }, S(((u = e.layer) == null ? void 0 : u.name) || ((a = e.layer) == null ? void 0 : a.title)), 9, sr),
+            isNaN(i((m = e.layer) == null ? void 0 : m.count)) ? F("", !0) : (c(), p("div", nr, S(i((h = e.layer) == null ? void 0 : h.count)), 1))
+          ])
+        ], 8, Ko)
+      ]);
+    };
+  }
+}, ar = /* @__PURE__ */ H(ir, [["__scopeId", "data-v-b96f3537"]]), lr = {}, cr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "lucide lucide-zoom-in"
+};
+function dr(e, t) {
+  return c(), p("svg", cr, [...t[0] || (t[0] = [
+    r("circle", {
+      cx: "11",
+      cy: "11",
+      r: "8"
+    }, null, -1),
+    r("line", {
+      x1: "21",
+      x2: "16.65",
+      y1: "21",
+      y2: "16.65"
+    }, null, -1),
+    r("line", {
+      x1: "11",
+      x2: "11",
+      y1: "8",
+      y2: "14"
+    }, null, -1),
+    r("line", {
+      x1: "8",
+      x2: "14",
+      y1: "11",
+      y2: "11"
+    }, null, -1)
+  ])]);
+}
+const ur = /* @__PURE__ */ H(lr, [["render", dr]]), pr = {}, hr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "lucide lucide-info"
+};
+function fr(e, t) {
+  return c(), p("svg", hr, [...t[0] || (t[0] = [
+    r("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }, null, -1),
+    r("path", { d: "M12 16v-4" }, null, -1),
+    r("path", { d: "M12 8h.01" }, null, -1)
+  ])]);
+}
+const gr = /* @__PURE__ */ H(pr, [["render", fr]]), vr = {}, mr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "lucide lucide-table"
+};
+function yr(e, t) {
+  return c(), p("svg", mr, [...t[0] || (t[0] = [
+    r("path", { d: "M12 3v18" }, null, -1),
+    r("rect", {
+      width: "18",
+      height: "18",
+      x: "3",
+      y: "3",
+      rx: "2"
+    }, null, -1),
+    r("path", { d: "M3 9h18" }, null, -1),
+    r("path", { d: "M3 15h18" }, null, -1)
+  ])]);
+}
+const br = /* @__PURE__ */ H(vr, [["render", yr]]), wr = {}, xr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "lucide lucide-trash2"
+};
+function _r(e, t) {
+  return c(), p("svg", xr, [...t[0] || (t[0] = [
+    Oe('<path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line>', 5)
+  ])]);
+}
+const kr = /* @__PURE__ */ H(wr, [["render", _r]]), Lr = {}, Cr = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "lucide lucide-more-vertical text-gray-600"
+};
+function $r(e, t) {
+  return c(), p("svg", Cr, [...t[0] || (t[0] = [
+    r("circle", {
+      cx: "12",
+      cy: "12",
+      r: "1"
+    }, null, -1),
+    r("circle", {
+      cx: "12",
+      cy: "5",
+      r: "1"
+    }, null, -1),
+    r("circle", {
+      cx: "12",
+      cy: "19",
+      r: "1"
+    }, null, -1)
+  ])]);
+}
+const Ir = /* @__PURE__ */ H(Lr, [["render", $r]]), Vr = {}, Sr = {
+  width: "6",
+  height: "10",
+  viewBox: "0 0 6 10",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Fr(e, t) {
+  return c(), p("svg", Sr, [...t[0] || (t[0] = [
+    r("path", {
+      d: "M1 9L5 5L1 1",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const jr = /* @__PURE__ */ H(Vr, [["render", Fr]]), Pr = {}, Er = {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Mr(e, t) {
+  return c(), p("svg", Er, [...t[0] || (t[0] = [
+    Oe('<g clip-path="url(#clip0_231_103)"><path d="M12 20L9 21V12.5L4.52 7.572C4.18545 7.20393 4.00005 6.7244 4 6.227V4H20V6.172C19.9999 6.70239 19.7891 7.21101 19.414 7.586L15 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21.121 20.1209C21.5406 19.7014 21.8265 19.1668 21.9423 18.5849C22.0581 18.0029 21.9988 17.3997 21.7717 16.8514C21.5447 16.3032 21.1602 15.8346 20.6668 15.5049C20.1734 15.1752 19.5934 14.9993 19 14.9993C18.4066 14.9993 17.8266 15.1752 17.3332 15.5049C16.8398 15.8346 16.4553 16.3032 16.2283 16.8514C16.0012 17.3997 15.9419 18.0029 16.0577 18.5849C16.1735 19.1668 16.4594 19.7014 16.879 20.1209C17.297 20.5399 18.004 21.1659 19 21.9999C20.051 21.1099 20.759 20.4839 21.121 20.1209Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 18V18.01" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_231_103"><rect width="24" height="24" fill="white"></rect></clipPath></defs>', 2)
+  ])]);
+}
+const Tr = /* @__PURE__ */ H(Pr, [["render", Mr]]);
+function zr() {
+  const t = new URLSearchParams(window.location.search).get("layers");
+  return t ? t.split(",") : [];
+}
+function Ar(e) {
+  const t = new URLSearchParams(window.location.search);
+  e.length > 0 ? t.set("layers", e.join(",")) : t.delete("layers");
+  const o = `${window.location.pathname}?${t.toString()}`;
+  window.history.replaceState({}, "", o);
+}
+const Br = {
+  components: {
+    VsPopover: Ve,
+    VsLayersItem: ar,
+    ZoomInIcon: ur,
+    InfoIcon: gr,
+    TableIcon: br,
+    TrashIcon: kr,
+    DotsIcon: Ir,
+    ChevronRightIcon: jr,
+    FilterIcon: Tr
+  },
+  props: {
+    center: { type: Array, default: () => [26.2516, 50.6199] },
+    zoom: { type: Number, default: 12 },
+    map: { type: Object, default: () => null },
+    history: { type: Boolean, default: !1 }
+  },
+  emits: ["content-resize"],
+  data() {
+    return {
+      layers: null,
+      rawCatalog: null,
+      categories: null,
+      selectedCategory: "",
+      search: "",
+      activeView: "catalog",
+      selectedLayers: [],
+      mounted: !1,
+      draggedLayerIndex: null,
+      filterType: "",
+      filterCategory: ""
+    };
+  },
+  computed: {
+    searchedLayers() {
+      return this.layers.filter(
+        ({ name: e }) => e == null ? void 0 : e.toLowerCase().match(this.search.toLowerCase())
+      );
+    }
+  },
+  async mounted() {
+    if (this.mounted = !0, await this.getLayers(), this.categories = this.layersCategories(), this.history) {
+      const e = zr();
+      e.length > 0 && this.layers && (e.forEach((t) => {
+        const o = this.layers.find((n) => String(n.id) === t);
+        if (o && !this.selectedLayers.find((n) => n.id === o.id)) {
+          const n = {
+            ...o,
+            visible: !0,
+            opacity: 100,
+            showFilters: !1
+          };
+          this.selectedLayers.push(n), we(this.map, n);
+        }
+      }), this.activeView = "selected");
+    }
+    this._resizeObserver = new window.ResizeObserver(() => {
+      this.$emit("content-resize");
+    }), this.$nextTick(() => {
+      const e = this.$el;
+      e && this._resizeObserver.observe(e);
+    });
+  },
+  beforeUnmount() {
+    this._resizeObserver && this._resizeObserver.disconnect();
+  },
+  watch: {
+    // --- HISTORY: оновлення layers у URL ---
+    selectedLayers: {
+      handler(e) {
+        this.history && Ar(e.map((t) => t.id));
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    async getLayers() {
+      try {
+        const e = await fetch("/api/map-catalog").then((o) => o.json()), t = (e.services || []).filter(
+          (o) => o.service_type !== "other"
+        );
+        this.layers = [...t, ...e.rasters || []], this.$emit("catalog-layers", this.layers), this.rawCatalog = {
+          ...e,
+          services: t
+        };
+      } catch (e) {
+        console.error("Помилка завантаження шарів:", e);
+      }
+    },
+    layersCategories() {
+      return this.rawCatalog ? {
+        Сервіси: this.rawCatalog.services || [],
+        Растри: this.rawCatalog.rasters || []
+      } : {};
+    },
+    selectCategory(e) {
+      this.selectedCategory = this.selectedCategory === e ? "" : e;
+    },
+    formatNumber(e) {
+      return Intl.NumberFormat("uk", {
+        notation: "compact"
+      }).format(e);
+    },
+    onEnter() {
+      this.layers.filter(
+        ({ name: e }) => e == null ? void 0 : e.toLowerCase().match(this.search.toLowerCase())
+      );
+    },
+    clearSearch() {
+      this.search = "";
+    },
+    addToSelected(e) {
+      if (!this.selectedLayers.find((t) => t.id === e.id)) {
+        const t = {
+          ...e,
+          visible: !0,
+          opacity: 100,
+          showFilters: !1
+        };
+        this.selectedLayers.unshift(t), we(this.map, t);
+      }
+    },
+    deleteLayer(e) {
+      const t = this.selectedLayers.findIndex((o) => o.id === e.id);
+      t !== -1 && this.selectedLayers.splice(t, 1), Ce(this.map, e.id);
+    },
+    async toggleLayerVisibility(e) {
+      try {
+        e.visible ? (await we(this.map, e), this.updateLayerOpacity(e)) : await Ce(this.map, e.id);
+      } catch (t) {
+        console.error("Error toggling layer visibility:", t), e.visible = !e.visible;
+      }
+    },
+    onLayerOpacityChange(e) {
+      this.updateLayerOpacity(e);
+    },
+    updateLayerOpacity(e) {
+      if (this.map) {
+        const t = this.map.getStyle().layers.filter((n) => n.id.includes(e.id)), o = e.opacity / 100;
+        t.forEach((n) => {
+          n.type === "fill" ? (e.originalFillOpacity || (e.originalFillOpacity = this.map.getPaintProperty(n.id, "fill-opacity") || 1), this.map.setPaintProperty(
+            n.id,
+            "fill-opacity",
+            e.originalFillOpacity * o
+          )) : n.type === "raster" ? this.map.setPaintProperty(n.id, "raster-opacity", o) : n.type === "line" ? this.map.setPaintProperty(n.id, "line-opacity", o) : n.type === "circle" ? (this.map.setPaintProperty(n.id, "circle-opacity", o), this.map.setPaintProperty(
+            n.id,
+            "circle-stroke-opacity",
+            o
+          )) : n.type === "symbol" && (this.map.setPaintProperty(n.id, "icon-opacity", o), this.map.setPaintProperty(n.id, "text-opacity", o));
+        });
+      }
+    },
+    async handleRemoveFromCatalog(e) {
+      const t = this.selectedLayers.find((o) => o.id === e.id);
+      t != null && t.visible && await Ce(this.map, e.id), this.deleteLayer(e);
+    },
+    clearSelectedLayers() {
+      this.selectedLayers.forEach(async (e) => {
+        e.visible && await Ce(this.map, e.id);
+      }), this.selectedLayers = [];
+    },
+    zoomToLayer(e) {
+      this.fitBoundsByLayer(e);
+    },
+    showLayerInfo(e) {
+    },
+    showLayerTable(e) {
+    },
+    showLayerFilter(e) {
+      e.showFilters = !e.showFilters;
+    },
+    fitBoundsByLayer(e) {
+      e && e.bbox && Array.isArray(e.bbox) && e.bbox.length === 4 && this.map && this.map.fitBounds(
+        [
+          [e.bbox[0], e.bbox[1]],
+          [e.bbox[2], e.bbox[3]]
+        ],
+        {
+          padding: 50,
+          duration: 0
+        }
+      );
+    },
+    async handleFilterChange({ url: e }, t) {
+      const o = this.map.getSource(t.id);
+      if (o) {
+        const s = o.tiles[0].split("?filter=")[0], i = e ? `${s}?filter=${e}` : s;
+        o.setTiles([i]);
+      }
+    },
+    popoverActions(e) {
+      return [
+        {
+          label: "Збільшити до шару",
+          icon: "ZoomInIcon",
+          class: Array.isArray(e.bbox) && e.bbox.length === 4 ? "text-gray-700 hover:bg-gray-100" : "text-gray-700 hover:bg-gray-100 opacity-50 cursor-not-allowed",
+          handler: "zoomToLayer"
+        },
+        // {
+        //   label: "Фільтри",
+        //   icon: "FilterIcon",
+        //   class: [
+        //     layer.filters?.length
+        //       ? "text-gray-700 hover:bg-gray-100"
+        //       : "text-gray-700 hover:bg-gray-100 opacity-50 cursor-not-allowed",
+        //     layer.showFilters ? "bg-blue-100 text-blue-700" : "",
+        //   ].join(" "),
+        //   handler: "showLayerFilter",
+        // },
+        {
+          label: "Інформація про шар",
+          icon: "InfoIcon",
+          class: "text-gray-700 hover:bg-gray-100 opacity-50 cursor-not-allowed",
+          handler: "showLayerInfo"
+        },
+        {
+          label: "Таблиця шару",
+          icon: "TableIcon",
+          class: "text-gray-700 hover:bg-gray-100 opacity-50 cursor-not-allowed",
+          handler: "showLayerTable"
+        },
+        {
+          divider: !0
+        },
+        {
+          label: "Видалити шар",
+          icon: "TrashIcon",
+          class: "text-red-600 hover:bg-red-50",
+          handler: "deleteLayer"
+        }
+      ];
+    },
+    onDragStart(e) {
+      this.draggedLayerIndex = e;
+    },
+    onDragOver(e) {
+    },
+    onDrop(e) {
+      if (this.draggedLayerIndex === null || this.draggedLayerIndex === e)
+        return;
+      const t = this.selectedLayers[this.draggedLayerIndex];
+      if (this.selectedLayers.splice(this.draggedLayerIndex, 1), this.selectedLayers.splice(e, 0, t), this.draggedLayerIndex = null, this.map && this.selectedLayers.length > 1)
+        for (let o = this.selectedLayers.length - 1; o >= 0; o--) {
+          const n = this.selectedLayers[o];
+          n.visible && this.map.getStyle().layers.find((s) => s.id.includes(n.id)) && this.map.getStyle().layers.forEach((s) => {
+            s.id.includes(n.id) && this.map.moveLayer(s.id);
+          });
+        }
+    },
+    onDragEnd() {
+      this.draggedLayerIndex = null;
+    }
+  }
+}, Or = { class: "w-full max-w-md mx-auto p-4 bg-white border border-gray-200 rounded-lg shadow-sm" }, Dr = { class: "flex items-center justify-between mb-4" }, Ur = { class: "flex items-center gap-2" }, Rr = { class: "text-lg font-semibold text-gray-800" }, Hr = { key: 0 }, Wr = { key: 1 }, Nr = { class: "flex mb-4 border-b border-gray-200" }, Zr = { key: 0 }, qr = { class: "mb-4" }, Gr = {
+  key: 0,
+  class: "space-y-2 max-h-[400px] overflow-y-auto pr-1 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+}, Jr = ["onDragstart", "onDragover", "onDrop"], Qr = { class: "flex items-center justify-between" }, Yr = { class: "flex items-center gap-2 cursor-move" }, Kr = ["onUpdate:modelValue", "onChange"], Xr = { class: "text-gray-800" }, es = { class: "flex items-center gap-2" }, ts = { class: "relative" }, os = { class: "flex items-center gap-2" }, rs = ["onUpdate:modelValue", "onInput"], ss = { class: "text-xs text-gray-600 whitespace-nowrap" }, ns = ["onClick"], is = { class: "relative" }, as = { class: "w-48" }, ls = {
+  key: 0,
+  class: "my-1 border-gray-200"
+}, cs = ["disabled", "onClick"], ds = {
+  class: "p-1 rounded-full hover:bg-gray-100 transition-colors",
+  "aria-label": "Layer actions"
+}, us = {
+  key: 0,
+  class: "bg-blue-50 rounded-md mt-2"
+}, ps = { class: "px-2 pt-2 text-blue-600 hover:text-blue-700 transition-colors" }, hs = {
+  key: 0,
+  class: "text-center text-[14px] text-[#4b5563]"
+}, fs = { class: "relative mt-[10px]" }, gs = {
+  key: 0,
+  class: "vs-layers-catalog__list flex-1 scrollable-container overflow-auto mt-2 catalog-list"
+}, vs = {
+  key: 0,
+  class: "text-center text-[14px] text-[#4b5563]"
+}, ms = {
+  key: 0,
+  class: "text-center text-[14px] text-[#4b5563]"
+}, ys = ["onClick"], bs = { class: "flex items-center gap-x-3" }, ws = ["title"], xs = { class: "text-xs opacity-60 text-[#4b5563]" };
+function _s(e, t, o, n, s, i) {
+  var h;
+  const d = G("VsPopover"), v = G("DotsIcon"), g = G("VsFilter"), l = G("searchIcon"), u = G("closeIcon"), a = G("VsLayersItem"), m = G("chevronRightIcon");
+  return c(), p("div", Or, [
+    r("div", Dr, [
+      r("div", Ur, [
+        t[7] || (t[7] = r("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: "lucide lucide-layers text-blue-600"
+        }, [
+          r("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }),
+          r("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }),
+          r("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })
+        ], -1)),
+        r("h2", Rr, [
+          ae(S(s.activeView === "catalog" ? "Каталог" : "Вибрані шари") + " ", 1),
+          s.activeView === "catalog" ? (c(), p("span", Hr, "(" + S(((h = s.layers) == null ? void 0 : h.length) || 0) + ")", 1)) : (c(), p("span", Wr, "(" + S(s.selectedLayers.length) + ")", 1))
+        ])
+      ]),
+      r("button", {
+        class: "p-1 rounded-full hover:bg-gray-200 transition-colors",
+        "aria-label": "Reset layers",
+        onClick: t[0] || (t[0] = (...f) => i.clearSelectedLayers && i.clearSelectedLayers(...f))
+      }, [...t[8] || (t[8] = [
+        Oe('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw text-gray-600" data-v-ed5e991a><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" data-v-ed5e991a></path><path d="M21 3v5h-5" data-v-ed5e991a></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" data-v-ed5e991a></path><path d="M8 16H3v5" data-v-ed5e991a></path></svg>', 1)
+      ])])
+    ]),
+    r("div", Nr, [
+      r("button", {
+        class: K([
+          "px-4 py-2 text-sm font-medium",
+          s.activeView === "catalog" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-600 hover:text-gray-800"
+        ]),
+        onClick: t[1] || (t[1] = (f) => s.activeView = "catalog")
+      }, " Каталог ", 2),
+      r("button", {
+        class: K([
+          "px-4 py-2 text-sm font-medium",
+          s.activeView === "selected" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-600 hover:text-gray-800"
+        ]),
+        onClick: t[2] || (t[2] = (f) => s.activeView = "selected")
+      }, " Вибрані шари ", 2)
+    ]),
+    s.activeView === "selected" ? (c(), p("div", Zr, [
+      r("div", qr, [
+        r("button", {
+          class: "flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors px-3 py-2 rounded-md bg-blue-50 hover:bg-blue-100 w-full justify-center",
+          onClick: t[3] || (t[3] = (f) => s.activeView = "catalog")
+        }, [...t[9] || (t[9] = [
+          r("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "lucide lucide-plus"
+          }, [
+            r("path", { d: "M5 12h14" }),
+            r("path", { d: "M12 5v14" })
+          ], -1),
+          r("span", null, "Вибрати шар", -1)
+        ])])
+      ]),
+      s.mounted ? (c(), p("div", Gr, [
+        (c(!0), p(B, null, W(s.selectedLayers, (f, L) => {
+          var j, T;
+          return c(), p("div", {
+            key: f.id || L,
+            class: K(["border border-gray-200 rounded-md p-3 mb-2 bg-white shadow-sm text-[13px] text-[#4b5563]", { dragging: s.draggedLayerIndex === L }]),
+            draggable: "true",
+            onDragstart: (k) => i.onDragStart(L),
+            onDragover: gt((k) => i.onDragOver(L), ["prevent"]),
+            onDrop: (k) => i.onDrop(L),
+            onDragend: t[4] || (t[4] = (...k) => i.onDragEnd && i.onDragEnd(...k))
+          }, [
+            r("div", Qr, [
+              r("div", Yr, [
+                t[10] || (t[10] = Oe('<svg width="16" height="16" fill="none" stroke="#9ca3af" stroke-width="2" viewBox="0 0 24 24" class="mr-1 shrink-0" data-v-ed5e991a><circle cx="5" cy="5" r="1.5" data-v-ed5e991a></circle><circle cx="5" cy="12" r="1.5" data-v-ed5e991a></circle><circle cx="5" cy="19" r="1.5" data-v-ed5e991a></circle><circle cx="12" cy="5" r="1.5" data-v-ed5e991a></circle><circle cx="12" cy="12" r="1.5" data-v-ed5e991a></circle><circle cx="12" cy="19" r="1.5" data-v-ed5e991a></circle><circle cx="19" cy="5" r="1.5" data-v-ed5e991a></circle><circle cx="19" cy="12" r="1.5" data-v-ed5e991a></circle><circle cx="19" cy="19" r="1.5" data-v-ed5e991a></circle></svg>', 1)),
+                ne(r("input", {
+                  type: "checkbox",
+                  class: "w-4 h-4 text-blue-600 rounded focus:ring-blue-500",
+                  "onUpdate:modelValue": (k) => f.visible = k,
+                  onChange: (k) => i.toggleLayerVisibility(f)
+                }, null, 40, Kr), [
+                  [qe, f.visible]
+                ]),
+                r("span", Xr, S(f.name || f.title || f.label), 1)
+              ]),
+              r("div", es, [
+                r("div", ts, [
+                  N(d, { placement: "bottom" }, {
+                    reference: Z(() => [
+                      r("div", {
+                        class: "text-sm text-gray-600 hover:text-gray-800 transition-colors px-2 py-1 rounded hover:bg-gray-100 cursor-pointer",
+                        onClick: (k) => i.updateLayerOpacity(f)
+                      }, S(f.opacity || 100) + "% ", 9, ns)
+                    ]),
+                    default: Z(() => [
+                      r("div", os, [
+                        t[11] || (t[11] = r("label", { class: "text-gray-600 whitespace-nowrap" }, "Прозорість:", -1)),
+                        ne(r("input", {
+                          type: "range",
+                          min: "0",
+                          max: "100",
+                          step: "1",
+                          "onUpdate:modelValue": (k) => f.opacity = k,
+                          onInput: (k) => i.onLayerOpacityChange(f),
+                          class: "h-2 w-full accent-blue-600 rounded-lg cursor-pointer bg-gray-200"
+                        }, null, 40, rs), [
+                          [Ne, f.opacity]
+                        ]),
+                        r("span", ss, S(Math.round(f.opacity)) + "% ", 1)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                r("div", is, [
+                  N(d, { placement: "bottom" }, {
+                    reference: Z(() => [
+                      r("div", ds, [
+                        N(v)
+                      ])
+                    ]),
+                    default: Z(() => [
+                      r("div", as, [
+                        (c(!0), p(B, null, W(i.popoverActions(f), (k, _) => (c(), p(B, { key: _ }, [
+                          k.divider ? (c(), p("hr", ls)) : (c(), p("button", {
+                            key: 1,
+                            class: K(
+                              "w-full p-2 text-left text-sm flex items-center gap-2 " + (k.class || "")
+                            ),
+                            disabled: k.disabled,
+                            onClick: (D) => !k.disabled && e.$options.methods[k.handler].call(this, f)
+                          }, [
+                            (c(), X(De(k.icon), { class: "lucide" })),
+                            ae(" " + S(k.label), 1)
+                          ], 10, cs))
+                        ], 64))), 128))
+                      ])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])
+              ])
+            ]),
+            f.showFilters ? (c(), p("div", us, [
+              r("div", ps, " Фільтри для шару: " + S(f.name || f.title || f.label), 1),
+              ne(N(g, {
+                ref_for: !0,
+                ref: "filter",
+                scheme: f.filters,
+                header: !1,
+                urlSeparator: "true",
+                view: "plain",
+                name: "filter",
+                onFilterChange: (k) => i.handleFilterChange(k, f)
+              }, null, 8, ["scheme", "onFilterChange"]), [
+                [Ee, (j = f.filters) == null ? void 0 : j.length]
+              ]),
+              ne(r("div", null, [...t[12] || (t[12] = [
+                r("div", { class: "px-2 text-[14px] text-[#4b5563]" }, " Фільтри для шару відсутні ", -1)
+              ])], 512), [
+                [Ee, !((T = f.filters) != null && T.length)]
+              ])
+            ])) : F("", !0)
+          ], 42, Jr);
+        }), 128)),
+        s.selectedLayers.length === 0 ? (c(), p("div", hs, [...t[13] || (t[13] = [
+          r("p", null, 'Щоб додати шар, натисніть на кнопку "Вибрати шар".', -1)
+        ])])) : F("", !0)
+      ])) : F("", !0)
+    ])) : (c(), p(B, { key: 1 }, [
+      r("div", fs, [
+        ne(r("input", {
+          title: "value",
+          placeholder: "Введіть назву шару...",
+          "onUpdate:modelValue": t[5] || (t[5] = (f) => s.search = f),
+          type: "text",
+          class: "py-[7px] pl-2 pe-8 block w-full bg-gray-100 border-transparent rounded-lg text-sm focus:bg-white focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:border-transparent dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:bg-neutral-800 dark:focus:ring-neutral-600",
+          onKeyup: t[6] || (t[6] = vt((...f) => i.onEnter && i.onEnter(...f), ["enter"]))
+        }, null, 544), [
+          [Ne, s.search]
+        ]),
+        N(l, {
+          class: "absolute top-1/2 left-[8px] w-[16px] h-[16px]",
+          style: { transform: "translate(0, -50%)" }
+        }),
+        s.search ? (c(), X(u, {
+          key: 0,
+          class: "absolute top-1/2 right-[10px] w-[16px] h-[16px] cursor-pointer",
+          style: { transform: "translate(0, -50%)" },
+          onClick: i.clearSearch
+        }, null, 8, ["onClick"])) : F("", !0)
+      ]),
+      s.categories ? (c(), p("div", gs, [
+        s.search ? (c(), p(B, { key: 0 }, [
+          (c(!0), p(B, null, W(i.searchedLayers, (f, L) => (c(), X(a, {
+            key: L,
+            layer: f,
+            map: o.map,
+            selectedLayers: s.selectedLayers,
+            onSelect: i.addToSelected,
+            onRemove: i.handleRemoveFromCatalog
+          }, null, 8, ["layer", "map", "selectedLayers", "onSelect", "onRemove"]))), 128)),
+          i.searchedLayers.length === 0 ? (c(), p("div", vs, " Нічого не знайдено ")) : F("", !0)
+        ], 64)) : (c(), p(B, { key: 1 }, [
+          !s.categories || Object.keys(s.categories).length === 0 ? (c(), p("div", ms, " Каталог порожній ")) : (c(!0), p(B, { key: 1 }, W(Object.keys(s.categories), (f) => (c(), p("div", { key: f }, [
+            r("div", {
+              class: "hover:bg-gray-100 focus:bg-gray-100 px-2.5 cursor-pointer p-[8px] rounded-lg flex justify-between items-center",
+              onClick: (L) => i.selectCategory(f)
+            }, [
+              r("div", bs, [
+                N(m, {
+                  class: K({
+                    "rotate-up": f === s.selectedCategory,
+                    "rotate-down": f !== s.selectedCategory
+                  })
+                }, null, 8, ["class"]),
+                r("div", {
+                  class: "max-w-[260px] text-[14px] text-[#4b5563]",
+                  title: f
+                }, S(f), 9, ws)
+              ]),
+              r("div", xs, S(i.formatNumber(s.categories[f].length)), 1)
+            ], 8, ys),
+            ne(r("div", null, [
+              (c(!0), p(B, null, W(s.categories[f], (L, j) => (c(), X(a, {
+                key: j,
+                layer: L,
+                map: o.map,
+                selectedLayers: s.selectedLayers,
+                onSelect: i.addToSelected,
+                onRemove: i.handleRemoveFromCatalog
+              }, null, 8, ["layer", "map", "selectedLayers", "onSelect", "onRemove"]))), 128))
+            ], 512), [
+              [Ee, f === s.selectedCategory]
+            ])
+          ]))), 128))
+        ], 64))
+      ])) : F("", !0)
+    ], 64))
+  ]);
+}
+const ks = /* @__PURE__ */ H(Br, [["render", _s], ["__scopeId", "data-v-ed5e991a"]]), Ls = {
+  key: 0,
+  class: "w-full flex flex-col bg-white border border-stone-200 shadow-2xs rounded-xl z-10 relative widget"
+}, Cs = {
+  key: 0,
+  class: "p-5 pb-3 flex justify-between items-center"
+}, $s = { class: "inline-block font-semibold text-lg text-gray-800 dark:text-neutral-200" }, Is = { class: "flex flex-col justify-between h-full" }, Vs = {
+  __name: "vs-filters-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    },
+    map: {
+      type: Object,
+      required: !0
+    },
+    enabledLayerIds: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const t = e, o = M(() => {
+      var d;
+      return ((d = t.config) == null ? void 0 : d.filters) || [];
+    }), n = M(() => o.value), s = M(() => {
+      var v;
+      const d = (v = t.config) == null ? void 0 : v.conditions;
+      return !d || !d.layers ? !0 : t.enabledLayerIds.some((g) => d.layers.includes(g));
+    }), i = async ({ data: d }) => {
+      var a;
+      const v = Object.entries(d).map((m) => m.join("=")).join("|"), g = (a = t.config) == null ? void 0 : a.conditions, l = (g == null ? void 0 : g.layers) || [], u = t.enabledLayerIds.filter(
+        (m) => l.includes(m)
+      );
+      u.length && u.forEach((m) => {
+        const h = t.map.getSource(m);
+        if (h) {
+          const L = h.tiles[0].split("?filter=")[0], j = v ? `${L}?filter=${v}` : L;
+          h.setTiles([j]);
+        }
+      });
+    };
+    return (d, v) => s.value ? (c(), p("div", Ls, [
+      e.config.title ? (c(), p("div", Cs, [
+        r("h2", $s, S(e.config.title), 1)
+      ])) : F("", !0),
+      r("div", Is, [
+        N(Ze(bt), {
+          ref: "filter",
+          schema: n.value,
+          view: "vertical",
+          onChange: i
+        }, null, 8, ["schema"])
+      ])
+    ])) : F("", !0);
+  }
+}, Ss = {
+  type: "button",
+  class: "py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg bg-white text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-49 h-[38px] shadow-md"
+}, Fs = { class: "flex gap-[5px] items-center" }, js = { class: "text-gray-600" }, Ps = {
+  key: 0,
+  class: "w-[16px] h-[16px] font-medium bg-gray-800 text-white rounded-full flex items-center justify-center text-[10px]"
+}, Es = {
+  __name: "vs-inline-filters-widget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    },
+    map: {
+      type: Object,
+      required: !0
+    },
+    enabledLayerIds: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const t = e, o = A(0), n = A(null), s = M(() => {
+      var l;
+      return ((l = t.config) == null ? void 0 : l.filters) || [];
+    }), i = M(() => s.value.map((l) => ({
+      ...l,
+      id: l.name
+    }))), d = M(() => {
+      var u;
+      const l = (u = t.config) == null ? void 0 : u.conditions;
+      return !l || !l.layers ? !0 : t.enabledLayerIds.some((a) => l.layers.includes(a));
+    }), v = M(() => {
+      var l;
+      if (t.enabledLayerIds && t.enabledLayerIds.length) {
+        const a = (((l = t.config) == null ? void 0 : l.layers) || []).find((m) => m.id === t.enabledLayerIds[0]);
+        return (a == null ? void 0 : a.title) || (a == null ? void 0 : a.name) || (a == null ? void 0 : a.label) || t.enabledLayerIds[0];
+      }
+      return "";
+    }), g = async ({ url: l }) => {
+      var h, f;
+      const u = (h = t.config) == null ? void 0 : h.conditions;
+      if (!u) {
+        const L = (f = t.config) == null ? void 0 : f.layer_id;
+        if (!L) return;
+        const j = t.map.getSource(L);
+        if (j) {
+          const k = j.tiles[0].split("?filter=")[0], _ = l ? `${k}?filter=${l}` : k;
+          j.setTiles([_]);
+        }
+        return;
+      }
+      const a = (u == null ? void 0 : u.layers) || [], m = t.enabledLayerIds.filter((L) => a.includes(L));
+      m.length && m.forEach((L) => {
+        const j = t.map.getSource(L);
+        if (j) {
+          const k = j.tiles[0].split("?filter=")[0], _ = l ? `${k}?filter=${l}` : k;
+          j.setTiles([_]);
+        }
+      });
+    };
+    return he(
+      () => t.enabledLayerIds,
+      (l) => {
+        (!l || !l.length) && n.value && (n.value.activeFilters = {}, o.value = 0);
+      }
+    ), he(
+      () => {
+        var l;
+        return (l = n.value) == null ? void 0 : l.activeFilters;
+      },
+      (l) => {
+        o.value = Object.keys(l || {}).length;
+      },
+      { deep: !0 }
+    ), (l, u) => {
+      const a = G("VsPopover"), m = G("VsFilterList");
+      return d.value && i.value.length ? (c(), X(m, {
+        key: 0,
+        ref_key: "filter",
+        ref: n,
+        isDialog: e.config.dialog ?? !0,
+        scheme: i.value,
+        urlSeparator: "true",
+        view: "plain",
+        name: "filter",
+        onFilterChange: g
+      }, {
+        button: Z(({ visible: h }) => [
+          N(a, {
+            teleport: "body",
+            trigger: "hover",
+            placement: "bottom"
+          }, {
+            reference: Z(() => [
+              r("button", Ss, [
+                r("div", Fs, [
+                  u[0] || (u[0] = r("svg", {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    r("path", {
+                      d: "M12 20L9 21V12.5L4.52 7.572C4.18545 7.20393 4.00005 6.7244 4 6.227V4H20V6.172C19.9999 6.70239 19.7891 7.21101 19.414 7.586L15 12",
+                      stroke: "currentColor",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    }),
+                    r("path", {
+                      d: "M21.121 20.1209C21.5406 19.7014 21.8265 19.1668 21.9423 18.5849C22.0581 18.0029 21.9988 17.3997 21.7717 16.8514C21.5447 16.3032 21.1602 15.8346 20.6668 15.5049C20.1734 15.1752 19.5934 14.9993 19 14.9993C18.4066 14.9993 17.8266 15.1752 17.3332 15.5049C16.8398 15.8346 16.4553 16.3032 16.2283 16.8514C16.0012 17.3997 15.9419 18.0029 16.0577 18.5849C16.1735 19.1668 16.4594 19.7014 16.879 20.1209C17.297 20.5399 18.004 21.1659 19 21.9999C20.051 21.1099 20.759 20.4839 21.121 20.1209Z",
+                      stroke: "currentColor",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    }),
+                    r("path", {
+                      d: "M19 18V18.01",
+                      stroke: "currentColor",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ], -1)),
+                  r("span", js, S(v.value), 1),
+                  o.value ? (c(), p("span", Ps, S(o.value), 1)) : F("", !0)
+                ])
+              ])
+            ]),
+            default: Z(() => [
+              u[1] || (u[1] = ae(" Відкрити бокову панель ", -1))
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["isDialog", "scheme"])) : F("", !0);
+    };
+  }
+}, Ms = {
+  name: "VsListWidget",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      items: [],
+      total: 0,
+      currentPage: 1,
+      limit: 16,
+      rootEl: null,
+      resizeObserver: null
+    };
+  },
+  methods: {
+    async fetchData() {
+      const e = {
+        page: this.currentPage,
+        limit: this.limit
+      };
+      try {
+        const t = await fetch(this.config.api + "?" + new URLSearchParams(e)).then((o) => o.json());
+        this.items = t.rows, this.total = t.total, this.$emit("content-resize");
+      } catch (t) {
+        console.error("Error fetching data:", t);
+      }
+    },
+    handlePageChange(e) {
+      this.currentPage = e, this.fetchData();
+    },
+    changeLimit(e) {
+      this.limit = e, this.currentPage = 1, this.fetchData();
+    }
+  },
+  mounted() {
+    this.fetchData(), this.resizeObserver = new ResizeObserver(() => {
+      this.$emit("content-resize");
+    }), this.$nextTick(() => {
+      this.$refs.rootEl && this.resizeObserver.observe(this.$refs.rootEl);
+    });
+  },
+  beforeUnmount() {
+    this.resizeObserver && this.$refs.rootEl && (this.resizeObserver.unobserve(this.$refs.rootEl), this.resizeObserver.disconnect());
+  }
+}, Ts = {
+  class: "bg-white p-4 rounded-lg h-full flex flex-col overflow-hidden",
+  ref: "rootEl"
+}, zs = {
+  key: 0,
+  class: "flex flex-col flex-1 overflow-hidden"
+}, As = { class: "space-y-0 overflow-y-auto flex-1 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent" }, Bs = ["onClick"], Os = { class: "text-base font-medium" }, Ds = { class: "mt-2 flex flex-wrap gap-2" }, Us = {
+  key: 1,
+  class: "px-2 py-1 text-sm bg-gray-100 rounded-full"
+}, Rs = {
+  key: 0,
+  class: "my-5 pr-2"
+}, Hs = { class: "paginationWrapper relative flex justify-center" }, Ws = {
+  key: 1,
+  class: "text-center text-slate-400"
+};
+function Ns(e, t, o, n, s, i) {
+  var v;
+  const d = G("VsPagination");
+  return c(), p("div", Ts, [
+    t[0] || (t[0] = r("h2", { class: "text-xl font-semibold mb-4" }, "Список", -1)),
+    ((v = s.items) == null ? void 0 : v.length) > 0 ? (c(), p("div", zs, [
+      r("div", As, [
+        (c(!0), p(B, null, W(s.items, (g) => (c(), p("div", {
+          key: g.id,
+          class: "py-4 border-b last:border-b-0 hover:bg-gray-50",
+          onClick: (l) => e.$emit("cardValuesId", g.id)
+        }, [
+          r("h3", Os, S(g.name), 1),
+          r("div", Ds, [
+            g.status_data ? (c(), p("span", {
+              key: 0,
+              class: K(["px-2 py-1 text-sm rounded-full", {
+                "bg-green-100 text-green-800": g.status_data.color === "green",
+                "bg-red-100 text-red-800": g.status_data.color === "red"
+              }])
+            }, S(g.status_data.text), 3)) : F("", !0),
+            g.class_mbd_id_data ? (c(), p("span", Us, S(g.class_mbd_id_data.text), 1)) : F("", !0)
+          ])
+        ], 8, Bs))), 128))
+      ]),
+      s.total > s.limit ? (c(), p("div", Rs, [
+        r("div", Hs, [
+          N(d, {
+            total: s.total,
+            maxPages: 4,
+            defaultPage: s.currentPage,
+            pageSize: s.limit,
+            goTo: !1,
+            size: "medium",
+            onPageChange: i.handlePageChange,
+            backgroundColor: "#e5e7eb",
+            borderedCellSelected: !0,
+            pageSizes: [16, 32, 48, 64],
+            onPageSizeChange: i.changeLimit
+          }, null, 8, ["total", "defaultPage", "pageSize", "onPageChange", "onPageSizeChange"])
+        ])
+      ])) : F("", !0)
+    ])) : (c(), p("div", Ws, "Немає даних"))
+  ], 512);
+}
+const Zs = /* @__PURE__ */ H(Ms, [["render", Ns]]), qs = { class: "map-skeleton-loader" }, Gs = {
+  __name: "vs-skeleton-loader",
+  setup(e) {
+    return (t, o) => (c(), p("div", qs, [...o[0] || (o[0] = [
+      r("div", { class: "dot-pulse" }, null, -1)
+    ])]));
+  }
+}, Js = /* @__PURE__ */ H(Gs, [["__scopeId", "data-v-954c1e03"]]), Qs = {}, Ys = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ks(e, t) {
+  return c(), p("svg", Ys, [...t[0] || (t[0] = [
+    r("title", null, "Globe Icon", -1),
+    r("desc", null, " A circular representation of a globe with horizontal and vertical lines ", -1),
+    r("path", {
+      d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    r("path", {
+      d: "M2 12H22",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    r("path", {
+      d: "M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2Z",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const Xs = /* @__PURE__ */ H(Qs, [["render", Ks]]), en = {
+  components: {
+    homeIcon: Xs
+  },
+  name: "vs-homezoom",
+  props: {
+    map: { type: Object },
+    initialView: { type: Object, default: () => ({}) }
+  },
+  methods: {
+    homeZoom() {
+      !this.map || !this.initialView || (this.initialView.bbox ? this.map.fitBounds(this.initialView.bbox, { duration: 0, padding: 10 }) : this.initialView.center && this.initialView.zoom !== void 0 && (this.map.setCenter(this.initialView.center), this.map.setZoom(this.initialView.zoom)), this.initialView.pitch !== void 0 && this.map.setPitch(this.initialView.pitch), this.initialView.bearing !== void 0 && this.map.setBearing(this.initialView.bearing));
+    }
+  },
+  computed: {}
+};
+function tn(e, t, o, n, s, i) {
+  const d = G("homeIcon"), v = G("VsPopover");
+  return c(), p("div", null, [
+    N(v, {
+      trigger: "hover",
+      placement: "left",
+      teleport: "body",
+      class: "flex"
+    }, {
+      reference: Z(() => [
+        N(d, {
+          onClick: i.homeZoom,
+          class: "w-full h-auto p-[9px] [transition:.3s] hover:[transition:.3s] text-[24px] hover:bg-[#DBEAFE] flex font-normal cursor-pointer text-[#1E40AF] bg-[#fff] rounded-[4px] border-[1px] border-solid border-[#E5E7EB]"
+        }, null, 8, ["onClick"])
+      ]),
+      default: Z(() => [
+        t[0] || (t[0] = r("div", null, "Повернутися до початкових налаштувань", -1))
+      ]),
+      _: 1
+    })
+  ]);
+}
+const on = /* @__PURE__ */ H(en, [["render", tn]]), rn = {}, sn = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function nn(e, t) {
+  return c(), p("svg", sn, [...t[0] || (t[0] = [
+    r("title", null, "Document with Two Sections Icon", -1),
+    r("desc", null, "A document icon with a split design indicating two sections", -1),
+    r("path", {
+      d: "M6 9V2H18V9",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    r("path", {
+      d: "M6 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V11C2 10.4696 2.21071 9.96086 2.58579 9.58579C2.96086 9.21071 3.46957 9 4 9H20C20.5304 9 21.0391 9.21071 21.4142 9.58579C21.7893 9.96086 22 10.4696 22 11V16C22 16.5304 21.7893 17.0391 21.4142 17.4142C21.0391 17.7893 20.5304 18 20 18H18",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    r("path", {
+      d: "M18 14H6V22H18V14Z",
+      stroke: "#1E40AF",
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ])]);
+}
+const an = /* @__PURE__ */ H(rn, [["render", nn]]), ln = {
+  components: {
+    printIcon: an,
+    VsPopover: Ve
+  },
+  props: {
+    map: { type: Object },
+    activeTool: String,
+    setActiveTool: Function
+  },
+  data() {
+    return {
+      printVisible: !1,
+      scriptElements: [],
+      styleElements: [],
+      resourcesLoaded: !1
+    };
+  },
+  watch: {
+    activeTool(e) {
+      e !== "print" ? this.printVisible = !1 : this.init();
+    },
+    async printVisible(e) {
+      !this.resourcesLoaded && e ? (await this.loadResources(), this.init(), this.simulateClick()) : this.removeResources();
+    },
+    activeTool(e, t) {
+      e !== "print" && t === "print" && (this.closePrint && this.closePrint(), this.printVisible = !1), e === "print" && !this.printVisible && (this.printVisible = !0, this.init());
+    }
+  },
+  computed: {
+    modalButtonClasses() {
+      return {
+        "!bg-[#DBEAFE]": this.printVisible,
+        "bg-white": !this.printVisible
+      };
+    }
+  },
+  mounted() {
+    document.addEventListener("click", (e) => {
+      const t = document.querySelector(".mapboxgl-export-list");
+      if (t && t.contains(e.target)) {
+        e.stopPropagation();
+        return;
+      }
+      !e.target.classList.contains("mapboxgl-export-list") && !e.target.classList.contains("print-button") && !e.target.classList.contains("mapboxgl-export-control") && !e.target.id.includes("mapbox-gl-export") && (this.printVisible = !1);
+    });
+  },
+  methods: {
+    addScript(e) {
+      return new Promise((t, o) => {
+        const n = document.createElement("script");
+        n.src = e, n.async = !0, n.onload = t, n.onerror = o, document.head.appendChild(n), this.scriptElements.push(n);
+      });
+    },
+    addStyle(e) {
+      return new Promise((t, o) => {
+        const n = document.createElement("link");
+        n.href = e, n.rel = "stylesheet", n.type = "text/css", n.onload = t, n.onerror = o, document.head.appendChild(n), this.styleElements.push(n);
+      });
+    },
+    async loadResources() {
+      try {
+        await this.addStyle(
+          "https://cdn.jsdelivr.net/npm/@watergis/mapbox-gl-export@3.5.4/dist/mapbox-gl-export.min.css"
+        ), await this.addScript(
+          "https://cdn.jsdelivr.net/npm/@watergis/mapbox-gl-export@3.5.4/dist/mapbox-gl-export.umd.min.js"
+        ), this.resourcesLoaded = !0;
+      } catch (e) {
+        console.error("Failed to load resources:", e);
+      }
+    },
+    removeResources() {
+      this.scriptElements.forEach((e) => {
+        e.parentNode && e.parentNode.removeChild(e);
+      }), this.scriptElements = [], this.styleElements.forEach((e) => {
+        e.parentNode && e.parentNode.removeChild(e);
+      }), this.styleElements = [], this.resourcesLoaded = !1;
+    },
+    async toggleResources() {
+      this.printVisible = !this.printVisible;
+    },
+    init() {
+      if (!window.MapboxExportControl) {
+        console.error("MapboxExportControl is not loaded.");
+        return;
+      }
+      window.mapboxgl.accessToken = "pk.eyJ1Ijoia3Jpemhhbm92c2t5IiwiYSI6ImNsemkxNWtkODA5dDcycnNhMWZzYWM0MTAifQ.6fEpgfd_2mA4UYuflDewpQ";
+      const { MapboxExportControl: e, Size: t, PageOrientation: o, Format: n, DPI: s } = window.MapboxExportControl;
+      this.map.addControl(
+        new e({
+          PageSize: t.A3,
+          PageOrientation: o.Portrait,
+          Format: n.PNG,
+          DPI: s[96],
+          Crosshair: !0,
+          PrintableArea: !0,
+          Local: "uk"
+        })
+      );
+    },
+    simulateClick() {
+      new Promise((t) => {
+        const o = setTimeout(() => {
+          const n = document.querySelector(".mapboxgl-export-control");
+          n && (clearInterval(o), t(n));
+        }, 100);
+      }).then((t) => {
+        t.click();
+      }).catch(() => {
+        console.error("Print button not found.");
+      });
+    },
+    togglePrint() {
+      !this.activeTool || this.activeTool !== "print" ? this.setActiveTool && this.setActiveTool("print") : this.setActiveTool && this.setActiveTool(null), this.printVisible = !this.printVisible, this.printVisible ? this.init() : this.removeResources();
+    }
+  }
+};
+function cn(e, t, o, n, s, i) {
+  const d = G("printIcon"), v = G("VsPopover");
+  return c(), X(v, {
+    trigger: "hover",
+    placement: "left",
+    teleport: "body"
+  }, {
+    reference: Z(() => [
+      N(d, {
+        onClick: i.togglePrint,
+        class: K([i.modalButtonClasses, "print-button w-full h-auto p-[9px] [transition:.3s] hover:[transition:.3s] text-[24px] hover:bg-[#DBEAFE] flex font-normal cursor-pointer text-[#1E40AF] bg-[#fff] rounded-[4px] border-[1px] border-solid border-[#E5E7EB]"])
+      }, null, 8, ["onClick", "class"])
+    ]),
+    default: Z(() => [
+      t[0] || (t[0] = r("div", null, "Надрукувати", -1))
+    ]),
+    _: 1
+  });
+}
+const dn = /* @__PURE__ */ H(ln, [["render", cn]]), un = {
+  props: {
+    map: {
+      type: Object,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      is3D: !1
+    };
+  },
+  components: {
+    VsPopover: Ve
+  },
+  mounted() {
+    this.map.on("move", this.updateViewStatus), this.updateViewStatus();
+  },
+  beforeUnmount() {
+    this.map.off("move", this.updateViewStatus);
+  },
+  methods: {
+    toggleView() {
+      this.is3D ? this.map.easeTo({
+        pitch: 0,
+        bearing: 0,
+        duration: 1e3
+      }) : this.map.easeTo({
+        pitch: 60,
+        bearing: -29.6,
+        duration: 1e3
+      });
+    },
+    updateViewStatus() {
+      this.is3D = this.map.getPitch() !== 0;
+    }
+  }
+};
+function pn(e, t, o, n, s, i) {
+  const d = G("VsPopover");
+  return c(), X(d, {
+    trigger: "hover",
+    placement: "left",
+    teleport: "body",
+    class: "flex"
+  }, {
+    reference: Z(() => [
+      r("div", {
+        class: "font-light w-full h-[44px] p-[9px] [transition:.3s] hover:[transition:.3s] text-[19px] hover:bg-[#DBEAFE] flex cursor-pointer text-[#1E40AF] bg-[#fff] rounded-[4px] border-[1px] border-solid border-[#E5E7EB]",
+        onClick: t[0] || (t[0] = (...v) => i.toggleView && i.toggleView(...v))
+      }, S(s.is3D ? "2D" : "3D"), 1)
+    ]),
+    default: Z(() => [
+      t[1] || (t[1] = r("div", null, "Перемикач виду", -1))
+    ]),
+    _: 1
+  });
+}
+const hn = /* @__PURE__ */ H(un, [["render", pn]]), fn = {}, gn = {
+  class: "shrink-0 size-4",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+function vn(e, t) {
+  return c(), p("svg", gn, [...t[0] || (t[0] = [
+    r("path", { d: "M18 6 6 18" }, null, -1),
+    r("path", { d: "m6 6 12 12" }, null, -1)
+  ])]);
+}
+const mn = /* @__PURE__ */ H(fn, [["render", vn]]), yn = {
+  props: {
+    bgColor: {
+      type: String,
+      default: "#1E40AF"
+    }
+  }
+}, bn = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, wn = ["stroke"], xn = ["stroke"], _n = ["stroke"], kn = ["stroke"], Ln = ["stroke"], Cn = ["stroke"];
+function $n(e, t, o, n, s, i) {
+  return c(), p("svg", bn, [
+    t[0] || (t[0] = r("title", null, "Target Icon", -1)),
+    t[1] || (t[1] = r("desc", null, "A target icon with a circular pattern inside a rounded square", -1)),
+    r("path", {
+      d: "M2 12H5",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, wn),
+    r("path", {
+      d: "M19 12H22",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, xn),
+    r("path", {
+      d: "M12 2V5",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, _n),
+    r("path", {
+      d: "M12 19V22",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, kn),
+    r("path", {
+      d: "M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, Ln),
+    r("path", {
+      d: "M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z",
+      stroke: o.bgColor,
+      "stroke-width": "1",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, 8, Cn)
+  ]);
+}
+const In = /* @__PURE__ */ H(yn, [["render", $n]]), Vn = {
+  components: {
+    geoIcon: In,
+    VsPopover: Ve,
+    closeIcon: mn
+  },
+  data() {
+    return {
+      location: null,
+      data: null,
+      marker: null,
+      showLocation: !1
+    };
+  },
+  computed: {
+    modalButtonClasses() {
+      return {
+        "!bg-[#DBEAFE]": this.showLocation,
+        "bg-white": !this.showLocation
+      };
+    }
+  },
+  props: {
+    map: { type: Object }
+  },
+  beforeUnmount() {
+    var e;
+    (e = this.marker) == null || e.remove();
+  },
+  watch: {
+    activeControl(e, t) {
+      e !== "geolocation" && t === "geolocation" && (this.showLocation = !1, this.closeGeolocation());
+    }
+  },
+  methods: {
+    togleGeolocation() {
+      this.showLocation = !this.showLocation, this.showLocation ? this.getUserLocation() : (this.closeGeolocation(), this.activeControl = "no");
+    },
+    getUserLocation() {
+      navigator.geolocation ? navigator.geolocation.getCurrentPosition(
+        this.onGeolocationSuccess,
+        this.onGeolocationError
+      ) : (this.showLocation = !1, this.activeControl = "no", this.$notify({
+        type: "error",
+        title: "Помилка",
+        message: "Цей браузер не підтримує геолокацію"
+      }), this.$emit("close"));
+    },
+    async onGeolocationSuccess(e) {
+      this.location = {
+        latitude: e.coords.latitude,
+        longitude: e.coords.longitude
+      };
+      const o = await (await fetch(
+        `https://nominatim.openstreetmap.org/reverse?format=json&lat=${this.location.latitude}&lon=${this.location.longitude}`
+      )).json();
+      this.data = o.address;
+      const n = [this.location.longitude, this.location.latitude], s = [
+        [parseFloat(o.boundingbox[2]), parseFloat(o.boundingbox[0])],
+        [parseFloat(o.boundingbox[3]), parseFloat(o.boundingbox[1])]
+      ];
+      this.map.fitBounds(s, {
+        padding: 200,
+        maxZoom: 16
+      }), this.marker || (this.marker = new Marker({
+        color: "var(--primary)"
+      })), this.marker.setLngLat(n).addTo(this.map), this.activeControl = "geolocation";
+    },
+    closeGeolocation() {
+      this.showLocation = !1, this.marker && (this.marker.remove(), this.marker = null), this.location = null, this.data = null;
+    },
+    onGeolocationError() {
+      this.showLocation = !1, this.activeControl = "no", this.$notify({
+        type: "error",
+        title: "Помилка",
+        message: "Для визначення геолокації потрібен HTTPS протокол"
+      }), this.$emit("close");
+    }
+  }
+}, Sn = {
+  key: 0,
+  class: "max-w-[412px] absolute w-full top-[20px] right-[70px] bg-white border rounded-[15px] p-4 z-10"
+}, Fn = { class: "flex justify-between items-center border-b pb-[16px]" }, jn = { class: "d-flex" }, Pn = { class: "pt-[16px]" };
+function En(e, t, o, n, s, i) {
+  var l, u, a, m, h, f;
+  const d = G("closeIcon"), v = G("geoIcon"), g = G("VsPopover");
+  return c(), p("div", null, [
+    (c(), X(Ke, { to: "#maplibre-demo-map" }, [
+      s.location ? (c(), p("div", Sn, [
+        r("div", Fn, [
+          t[0] || (t[0] = r("div", { class: "text-lg font-semibold" }, "Ваша геолокація", -1)),
+          r("div", jn, [
+            N(d, { onClick: i.closeGeolocation }, null, 8, ["onClick"])
+          ])
+        ]),
+        r("div", Pn, [
+          r("div", null, [
+            t[1] || (t[1] = r("strong", null, "Широта:", -1)),
+            ae(" " + S((l = s.location) == null ? void 0 : l.latitude), 1)
+          ]),
+          r("div", null, [
+            t[2] || (t[2] = r("strong", null, "Довгота:", -1)),
+            ae(" " + S((u = s.location) == null ? void 0 : u.longitude), 1)
+          ]),
+          r("div", null, [
+            t[3] || (t[3] = r("strong", null, "КраЇна:", -1)),
+            ae(" " + S((a = s.data) == null ? void 0 : a.country), 1)
+          ]),
+          r("div", null, [
+            t[4] || (t[4] = r("strong", null, "Код країни:", -1)),
+            ae(" " + S((m = s.data) == null ? void 0 : m.country_code), 1)
+          ]),
+          r("div", null, [
+            t[5] || (t[5] = r("strong", null, "Місто:", -1)),
+            ae(" " + S((h = s.data) == null ? void 0 : h.city), 1)
+          ]),
+          r("div", null, [
+            t[6] || (t[6] = r("strong", null, "Поштовий індекс:", -1)),
+            ae(" " + S((f = s.data) == null ? void 0 : f.postcode), 1)
+          ])
+        ])
+      ])) : F("", !0)
+    ])),
+    N(g, {
+      trigger: "hover",
+      placement: "left",
+      teleport: "body",
+      class: "flex"
+    }, {
+      reference: Z(() => [
+        N(v, {
+          onClick: i.togleGeolocation,
+          class: K([i.modalButtonClasses, "w-full h-auto p-[9px] [transition:.3s] hover:[transition:.3s] text-[24px] hover:bg-[#DBEAFE] flex font-normal cursor-pointer text-[#1E40AF] bg-[#fff] rounded-[4px] border-[1px] border-solid border-[#E5E7EB]"])
+        }, null, 8, ["onClick", "class"])
+      ]),
+      default: Z(() => [
+        t[7] || (t[7] = r("div", null, "Дізнатися геолокацію", -1))
+      ]),
+      _: 1
+    })
+  ]);
+}
+const Mn = /* @__PURE__ */ H(Vn, [["render", En]]), Be = {
+  __name: "vs-map-widget-column",
+  props: {
+    position: String,
+    widgets: Array,
+    map: Object,
+    mapLoaded: Boolean,
+    cardValues: Object,
+    hasFilters: Boolean,
+    currentFilterLayer: Object,
+    enabledLayerIds: Array,
+    getWidgetComponent: Function,
+    getColumnWidth: Function,
+    rightColumnOffset: [String, Number],
+    maxHeight: Number,
+    history: Boolean
+  },
+  emits: [
+    "set-filter-layer",
+    "update:enabledLayerIds",
+    "cardValuesId",
+    "closeCard",
+    "content-resize"
+  ],
+  setup(e, { expose: t, emit: o }) {
+    const n = o, s = e, i = A(
+      s.widgets.map((l) => {
+        var u;
+        return {
+          ...l,
+          config: { ...l.config, visible: ((u = l.config) == null ? void 0 : u.visible) !== !1 }
+        };
+      })
+    );
+    he(
+      () => s.widgets.map((l) => l.id || l.type).join(","),
+      () => {
+        i.value = s.widgets.map((l) => {
+          var u;
+          return {
+            ...l,
+            config: { ...l.config, visible: ((u = l.config) == null ? void 0 : u.visible) !== !1 }
+          };
+        });
+      }
+    );
+    function d(l) {
+      const u = i.value.find((a) => a.id === l);
+      u && u.config && (u.config.visible = !u.config.visible, setTimeout(() => {
+        n("content-resize");
+      }, 30));
+    }
+    const v = A(null);
+    t({ columnRef: v });
+    let g = null;
+    return xe(() => {
+      g = new MutationObserver(() => {
+        var l;
+        clearTimeout((l = v.value) == null ? void 0 : l._resizeTimeout), v.value._resizeTimeout = setTimeout(() => {
+          n("content-resize");
+        }, 30);
+      }), v.value && g.observe(v.value, {
+        childList: !0,
+        subtree: !0,
+        characterData: !0
+      });
+    }), mt(() => {
+      g && g.disconnect();
+    }), (l, u) => e.mapLoaded ? (c(), p("div", {
+      key: 0,
+      class: "widget-column",
+      ref_key: "columnRef",
+      ref: v,
+      style: fe({
+        width: e.getColumnWidth(e.position),
+        paddingRight: e.rightColumnOffset
+      })
+    }, [
+      (c(!0), p(B, null, W(i.value, (a) => {
+        var m;
+        return c(), p(B, {
+          key: a.id || a.type
+        }, [
+          a.type !== "card" ? ne((c(), X(De(e.getWidgetComponent(a.type)), {
+            key: 0,
+            map: e.map,
+            config: a.config,
+            hasFilters: e.hasFilters,
+            currentLayer: e.currentFilterLayer,
+            enabledLayerIds: e.enabledLayerIds,
+            history: e.history,
+            onSetFilterLayer: u[0] || (u[0] = (h) => l.$emit("set-filter-layer", h)),
+            "onUpdate:enabledLayerIds": u[1] || (u[1] = (h) => l.$emit("update:enabledLayerIds", h)),
+            onCardValuesId: u[2] || (u[2] = (h) => l.$emit("cardValuesId", h)),
+            onShowWidget: d,
+            onCatalogLayers: u[3] || (u[3] = (h) => l.$emit("catalog-layers", h)),
+            class: "widget"
+          }, null, 40, ["map", "config", "hasFilters", "currentLayer", "enabledLayerIds", "history"])), [
+            [Ee, ((m = a.config) == null ? void 0 : m.visible) !== !1]
+          ]) : F("", !0),
+          e.cardValues && a.type === "card" ? (c(), X(ot, {
+            key: 1,
+            config: a.config,
+            cardValues: e.cardValues,
+            class: "widget",
+            onClose: u[4] || (u[4] = (h) => l.$emit("closeCard"))
+          }, null, 8, ["config", "cardValues"])) : F("", !0)
+        ], 64);
+      }), 128))
+    ], 4)) : F("", !0);
+  }
+}, Tn = { class: "map-widgets-flex" }, zn = { class: "widgets-left" }, An = { class: "widgets-top" }, Bn = { class: "widgets-bottom" }, On = { class: "widgets-right" }, Dn = { class: "widgets-top" }, Un = { class: "widgets-bottom" }, Rn = { class: "absolute top-[180px] right-2 z-10 flex flex-col gap-[5px]" }, Hn = {
+  __name: "vs-map",
+  props: {
+    table: {
+      type: String,
+      required: !0
+    },
+    height: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = e, o = A(null), n = A(!1);
+    let s = null;
+    const i = A(null), d = A(null), v = A([]), g = A([]), l = A(null), u = A(null), a = A(null), m = A([]);
+    let h = null;
+    function f(b) {
+      return !a.value || !a.value.widgets ? [] : b === "center" ? [
+        ...a.value.widgets.filter(
+          (x) => (x.position || {}) === "center"
+        ) || [],
+        ...g.value.filter((x) => x.position === "center")
+      ] : a.value.widgets.filter(
+        (y) => (y.position || {}) === b
+      ) || [];
+    }
+    const L = (b, y, x) => {
+      try {
+        if (b)
+          if (x === "markdown") {
+            const $ = b.replace(/\{\{([^}]+)\}\}/g, (w, C) => {
+              try {
+                return new Function("data", `with(data) { return ${C} }`)(y);
+              } catch {
+                return "";
+              }
+            });
+            return marked($);
+          } else
+            return y[b] || b;
+      } catch ($) {
+        return console.error("Error processing template:", $), b;
+      }
+    }, j = (b, y, x, $, w) => {
+      const C = L(b, $, w), P = y ? L(y, $, w) : "";
+      let V = "";
+      return x != null && x.length && (V = x.map((E) => {
+        const J = L(E.value, $, w);
+        return `
+        <tr class="flex justify-between items-center">
+          <td class="font-medium mr-1.5 flex items-center">${E.label}</td>
+          <td class="text-right">${J}</td>
+        </tr>
+      `;
+      }).join("")), `
+    <div class="absolute min-w-[250px] max-w-[350px] bg-white/90 border border-gray-200 rounded-lg shadow-md text-gray-800 pointer-events-none">
+      ${C ? `
+        <div class="font-semibold text-sm border-b border-solid border-gray-200 text-gray-800 rounded-t-lg px-2 py-1">
+          <h3>${C}</h3>
+        </div>
+      ` : ""}
+      ${y ? `<div class="text-sm px-2 py-1 break-words">${P}</div>` : ""}
+      ${x != null && x.length && !y ? `
+        <div class="text-xs px-2 py-0.5 text-gray-500">
+          <table class="w-full">
+            <tbody>${V}</tbody>
+          </table>
+        </div>
+      ` : ""}
+    </div>
+  `;
+    }, T = (b) => ({
+      legend: $t,
+      basemaps: Ft,
+      layers: no,
+      info: vo,
+      attribute: Qo,
+      catalog: ks,
+      filters: Vs,
+      "inline-filters": Es,
+      list: Zs,
+      card: ot
+    })[b], k = M(() => !!a.value && Array.isArray(a.value.widgets) && a.value.widgets.some((b) => b.type === "filters")), _ = (b) => {
+      i.value = b;
+    };
+    function D() {
+      const b = new URLSearchParams(window.location.search), y = parseFloat(b.get("x")), x = parseFloat(b.get("y")), $ = parseFloat(b.get("z")), w = parseFloat(b.get("bearing")), C = parseFloat(b.get("pitch"));
+      return {
+        center: isFinite(y) && isFinite(x) ? [y, x] : null,
+        zoom: isFinite($) ? $ : null,
+        bearing: isFinite(w) ? w : null,
+        pitch: isFinite(C) ? C : null
+      };
+    }
+    function le({ center: b, zoom: y, bearing: x, pitch: $ }) {
+      const w = new URLSearchParams(window.location.search);
+      w.set("x", b[0].toFixed(5)), w.set("y", b[1].toFixed(5)), w.set("z", y.toFixed(2)), w.set("bearing", x.toFixed(2)), w.set("pitch", $.toFixed(2));
+      const C = `${window.location.pathname}?${w.toString()}`;
+      window.history.replaceState({}, "", C);
+    }
+    const ce = () => {
+      var C, P, V;
+      if (!a.value || !a.value.map) return;
+      const b = {
+        version: 8,
+        glyphs: "https://cdn.softpro.ua/data/fonts/{fontstack}/{range}.pbf",
+        sources: {},
+        layers: []
+      };
+      let y = a.value.map.center, x = a.value.map.zoom, $ = a.value.map.bearing || 0, w = a.value.map.pitch || 0;
+      if (a.value.history) {
+        const E = D();
+        E.center && (y = E.center), E.zoom !== null && (x = E.zoom), E.bearing !== null && ($ = E.bearing), E.pitch !== null && (w = E.pitch);
+      }
+      o.value = new maplibregl.Map({
+        container: "maplibre-demo-map",
+        style: b,
+        center: y,
+        zoom: x,
+        bearing: $,
+        pitch: w,
+        maxBounds: [18.0856083513, 40.3614785833, 58.0807890155, 56.3350745713]
+      }), (V = (P = (C = a == null ? void 0 : a.value) == null ? void 0 : C.interactions) == null ? void 0 : P.navigation) != null && V.enabled && !h && (h = new maplibregl.NavigationControl({
+        showCompass: !0,
+        showZoom: !0,
+        visualizePitch: !0
+      }), o.value.addControl(h, "top-right")), o.value.on("load", async () => {
+        var Y, ke, U, Le, Fe;
+        n.value = !0;
+        const E = D(), J = E.center && E.zoom !== null;
+        if ((Y = a.value.map) != null && Y.bbox && !J) {
+          const [q, R, I, oe] = a.value.map.bbox;
+          o.value.fitBounds(
+            [
+              [q, R],
+              [I, oe]
+            ],
+            {
+              padding: 50,
+              duration: 0
+            }
+          );
+        }
+        if (await (async () => {
+          var R, I, oe, re, ee;
+          const q = ((ee = (re = (oe = (I = (R = a.value) == null ? void 0 : R.widgets) == null ? void 0 : I.find((z) => z.type === "layers")) == null ? void 0 : oe.config) == null ? void 0 : re.layers) == null ? void 0 : ee.filter(
+            (z) => {
+              var de;
+              return ((de = z.style) == null ? void 0 : de.attrType) === "icon-by-attribute";
+            }
+          )) || [];
+          for (const z of q) {
+            const { rules: de, default_icon: ve, icon_base_url: me } = z.style, ye = [...de.map((se) => se.icon), ve].filter(
+              Boolean
+            );
+            for (const se of ye)
+              try {
+                const ue = `${me}${se}`, be = await o.value.loadImage(ue);
+                o.value.hasImage(se) || o.value.addImage(se, be.data);
+              } catch (ue) {
+                console.error(`Failed to load icon: ${se}`, ue);
+              }
+          }
+        })(), (Le = (U = (ke = a.value) == null ? void 0 : ke.interactions) == null ? void 0 : U.hover) != null && Le.enabled && (o.value.on("mousemove", (q) => {
+          var de, ve, me, ye, se, ue, be, je, Q, Ae;
+          const R = o.value.queryRenderedFeatures(q.point);
+          if (o.value && o.value.getCanvas && (o.value.getCanvas().style.cursor = R.length ? "pointer" : ""), !R.length) {
+            if (d.value) {
+              const O = (de = o.value.getSource(
+                d.value.source
+              )) == null ? void 0 : de.type;
+              d.value.source, d.value.id, O === "vector" && d.value.source, ge(
+                o.value,
+                d.value.source,
+                d.value.id,
+                { hovered: !1 }
+              ), d.value = null;
+            }
+            s && (s.remove(), s = null);
+            return;
+          }
+          const I = R[0];
+          if (!d.value || d.value.id !== I.id || d.value.source !== I.layer.source) {
+            if (d.value) {
+              const Re = (ve = o.value.getSource(
+                d.value.source
+              )) == null ? void 0 : ve.type;
+              d.value.source, d.value.id, Re === "vector" && d.value.source, ge(
+                o.value,
+                d.value.source,
+                d.value.id,
+                { hovered: !1 }
+              );
+            }
+            const O = (me = o.value.getSource(I.layer.source)) == null ? void 0 : me.type;
+            I.layer.source, I.id, O === "vector" && I.layer.source, ge(o.value, I.layer.source, I.id, {
+              hovered: !0
+            }), d.value = { source: I.layer.source, id: I.id };
+          }
+          const oe = (se = (ye = a.value) == null ? void 0 : ye.widgets) == null ? void 0 : se.find(
+            (O) => O.type === "layers"
+          ), re = (be = (ue = a.value) == null ? void 0 : ue.widgets) == null ? void 0 : be.find(
+            (O) => O.type === "attribute"
+          );
+          let ee = null;
+          if (oe && (ee = oe.config.layers.find(
+            (O) => O.id === I.layer.source
+          )), (Q = (je = a.value) == null ? void 0 : je.widgets) == null ? void 0 : Q.find(
+            (O) => O.type === "catalog"
+          )) {
+            if (!R.length) {
+              s && (s.style.display = "none");
+              return;
+            }
+            const O = R[0];
+            s = dt(O, q, s);
+            return;
+          }
+          if (!ee && re && re.config.layer.id === I.layer.source && (ee = re.config.layer), (Ae = ee == null ? void 0 : ee.style) != null && Ae.popup) {
+            const O = ee.style.popup;
+            let Re = O.title, He = "";
+            O.mode === "markdown" ? He = Array.isArray(O.content) ? O.content.join(`
+
+`) : "" : He = Array.isArray(O.content) ? O.content.join("") : "", s || (s = document.createElement("div"), o.value.getContainer().appendChild(s)), s.innerHTML = j(
+              Re,
+              He,
+              O.fields,
+              I.properties,
+              O.mode
+            ), Qe(s, q);
+          }
+        }), o.value.on("mouseleave", () => {
+          var q;
+          if (s && (s.remove(), s = null), d.value) {
+            const R = (q = o.value.getSource(
+              d.value.source
+            )) == null ? void 0 : q.type;
+            d.value.source, d.value.id, R === "vector" && d.value.source, ge(
+              o.value,
+              d.value.source,
+              d.value.id,
+              { hovered: !1 }
+            ), d.value = null;
+          }
+          o.value && o.value.getCanvas && (o.value.getCanvas().style.cursor = "");
+        })), o.value.on("click", async (q) => {
+          var ve, me, ye, se, ue, be, je;
+          if (te(), ["length", "area", "print"].includes(u.value)) return;
+          const R = o.value.queryRenderedFeatures(q.point);
+          if (!R.length) return;
+          const I = R[0], oe = (me = (ve = a.value) == null ? void 0 : ve.widgets) == null ? void 0 : me.find(
+            (Q) => Q.type === "layers"
+          ), re = (se = (ye = a.value) == null ? void 0 : ye.widgets) == null ? void 0 : se.find(
+            (Q) => Q.type === "attribute"
+          ), ee = (be = (ue = a.value) == null ? void 0 : ue.widgets) == null ? void 0 : be.find(
+            (Q) => Q.type === "catalog"
+          );
+          let z;
+          if (ee ? z = I.layer.source : z = (re == null ? void 0 : re.config.layer) || (oe == null ? void 0 : oe.config.layers.find((Q) => Q.id === I.layer.source)), z != null && z.noCard) return;
+          v.value.forEach((Q) => {
+            var O;
+            const Ae = (O = o.value.getSource(Q.source)) == null ? void 0 : O.type;
+            Q.source, Q.id, Ae === "vector" && Q.source, ge(o.value, Q.source, Q.id, {
+              selected: !1
+            });
+          }), v.value = [];
+          const de = (je = o.value.getSource(I.layer.source)) == null ? void 0 : je.type;
+          I.layer.source, I.id, de === "vector" && I.layer.source, ge(o.value, I.layer.source, I.id, {
+            selected: !0
+          }), v.value.push({ source: I.layer.source, id: I.id }), l.value = {
+            layer: (z == null ? void 0 : z.service_key) || z || "",
+            map: (z == null ? void 0 : z.map_key) || "",
+            id: I.properties.id,
+            title: (z == null ? void 0 : z.title) || ""
+          };
+        }), o.value.on("dblclick", (q) => {
+          var oe, re, ee;
+          if (te(), ["length", "area", "print"].includes(u.value)) return;
+          it([q.lngLat.lng, q.lngLat.lat]);
+          const R = (re = (oe = a.value) == null ? void 0 : oe.widgets) == null ? void 0 : re.find(
+            (z) => z.type === "layers"
+          );
+          let I = null;
+          (ee = R == null ? void 0 : R.config) != null && ee.layers && (I = R.config.layers.find(
+            (z) => z.visible !== !1 && ["tms", "wms", "raster"].includes(
+              (z.service_type || z.service || "").toLowerCase()
+            )
+          )), !(I != null && I.noCard) && (l.value = {
+            layer: (I == null ? void 0 : I.map_key) || "",
+            map: (I == null ? void 0 : I.service_key) || "",
+            id: "",
+            title: (I == null ? void 0 : I.title) || ""
+          });
+        }), o.value.resize(), (Fe = a == null ? void 0 : a.value) != null && Fe.history) {
+          const q = () => {
+            const R = o.value.getCenter();
+            le({
+              center: [R.lng, R.lat],
+              zoom: o.value.getZoom(),
+              bearing: o.value.getBearing(),
+              pitch: o.value.getPitch()
+            });
+          };
+          o.value.on("moveend", q), o.value.on("rotate", q), o.value.on("pitch", q);
+        }
+      });
+    }, te = () => {
+      Ge(), v.value.forEach((b) => {
+        o.value && ge(o.value, b.source, b.id, {
+          selected: !1
+        });
+      }), v.value = [], l.value = null;
+    };
+    xe(async () => {
+      await Me(), await $e(), ce();
+      const b = document.getElementById("maplibre-demo-map");
+      b && b.addEventListener("mouseleave", () => {
+        s && (s.remove(), s = null);
+      }), he(
+        () => t.table,
+        async (y) => {
+          if (y) {
+            if (te(), u.value = null, s && (s.remove(), s = null), o.value) {
+              try {
+                o.value.remove();
+              } catch {
+              }
+              o.value = null, n.value = !1;
+            }
+            await Me(), await $e(), ce();
+          }
+        }
+      );
+    });
+    const Ue = M(() => ({
+      height: (t == null ? void 0 : t.height) || "100vh",
+      width: "100%"
+    })), Me = async () => {
+      const b = await fetch(`/api/map/${t.table}`).then((y) => y.json());
+      a.value = b;
+    }, Te = (b) => {
+      if (!a.value || !a.value.widgets) return "400px";
+      const y = a.value.widgets.find((x) => x.position === b);
+      return (y == null ? void 0 : y.width) || "400px";
+    }, ie = A([]);
+    he(
+      () => a.value,
+      (b) => {
+        b && b.map && (ie.value = rt(), ce());
+      }
+    );
+    const rt = () => {
+      var y;
+      if (!a.value || !a.value.widgets) return [];
+      const b = a.value.widgets.find((x) => x.type === "layers");
+      return (y = b == null ? void 0 : b.config) != null && y.layers ? b.config.layers.map((x) => ({ ...x, visible: x.visible ?? !1 })).filter((x) => x.visible).map((x) => x.id) : [];
+    };
+    function ge(b, y, x, $) {
+      b.getStyle().layers.filter((C) => C.source === y).forEach((C) => {
+        var V;
+        const P = { source: y, id: x };
+        ((V = b.getSource(y)) == null ? void 0 : V.type) === "vector" && C["source-layer"] && (P.sourceLayer = C["source-layer"]), b.setFeatureState(P, $);
+      });
+    }
+    const st = M(() => !!a.value && !!a.value.interactions && !!a.value.interactions.navigation && a.value.interactions.navigation.enabled), nt = M(() => !!a.value && Array.isArray(a.value.tools) && a.value.tools.length > 0), ze = M(() => st.value || nt.value ? "40px" : "20px");
+    function Ge() {
+      o.value && (o.value.getLayer("layer-with-pulsing-dot") && o.value.removeLayer("layer-with-pulsing-dot"), o.value.getSource("dot-point") && o.value.removeSource("dot-point"), o.value.hasImage && o.value.hasImage("pulsing-dot") && o.value.removeImage("pulsing-dot"));
+    }
+    function it(b) {
+      var $, w, C, P;
+      Ge();
+      const y = 80, x = {
+        width: y,
+        height: y,
+        data: new Uint8Array(y * y * 4),
+        onAdd() {
+          const V = document.createElement("canvas");
+          V.width = this.width, V.height = this.height, this.context = V.getContext("2d", { willReadFrequently: !0 });
+        },
+        render() {
+          var U;
+          const E = performance.now() % 2e3 / 2e3, J = y / 2 * 0.3, Se = y / 2 * 0.7 * E + J, { context: Y } = this;
+          Y.clearRect(0, 0, this.width, this.height), Y.beginPath(), Y.arc(this.width / 2, this.height / 2, Se, 0, Math.PI * 2), Y.fillStyle = `rgba(255, 100, 100, ${1 - E})`, Y.fill();
+          const ke = y / 2 * 0.7 * (E - 0.5 < 0 ? E - 0.5 + 1 : E - 0.5) + J;
+          return Y.beginPath(), Y.arc(
+            this.width / 2,
+            this.height / 2,
+            ke,
+            0,
+            Math.PI * 2
+          ), Y.fillStyle = `rgba(255, 100, 100, ${1 - (E - 0.5 < 0 ? E - 0.5 + 1 : E - 0.5)})`, Y.fill(), this.data = Y.getImageData(0, 0, this.width, this.height).data, (U = o.value) == null || U.triggerRepaint(), !0;
+        }
+      };
+      ($ = o.value) != null && $.hasImage("pulsing-dot") || (w = o.value) == null || w.addImage("pulsing-dot", x, { pixelRatio: 2 }), (C = o.value) == null || C.addSource("dot-point", {
+        type: "geojson",
+        data: {
+          type: "Feature",
+          geometry: { type: "Point", coordinates: b }
+        }
+      }), (P = o.value) == null || P.addLayer({
+        id: "layer-with-pulsing-dot",
+        type: "symbol",
+        source: "dot-point",
+        layout: { "icon-image": "pulsing-dot" },
+        paint: { "icon-opacity": 0.6 }
+      });
+    }
+    const at = M(() => {
+      var b, y, x, $, w, C, P, V, E, J;
+      return {
+        center: (y = (b = a == null ? void 0 : a.value) == null ? void 0 : b.map) == null ? void 0 : y.center,
+        zoom: ($ = (x = a == null ? void 0 : a.value) == null ? void 0 : x.map) == null ? void 0 : $.zoom,
+        pitch: ((C = (w = a == null ? void 0 : a.value) == null ? void 0 : w.map) == null ? void 0 : C.pitch) || 0,
+        bearing: ((V = (P = a == null ? void 0 : a.value) == null ? void 0 : P.map) == null ? void 0 : V.bearing) || 0,
+        bbox: ((J = (E = a == null ? void 0 : a.value) == null ? void 0 : E.map) == null ? void 0 : J.bbox) || null
+      };
+    }), Je = {
+      home: on,
+      print: dn,
+      geolocation: Mn,
+      pitch: hn
+      // length: VsLengthMeasure,
+      // area: VsAreaMeasure,
+    }, lt = (b) => {
+      u.value = b;
+    };
+    function _e(b) {
+      if (!a.value || !a.value.widgets) return;
+      const y = a.value.widgets.find((w) => w.type === "list");
+      if (!y || !y.config) return;
+      const { map_key: x, service_key: $ } = y.config;
+      x && $ && (l.value = {
+        id: b,
+        map: x,
+        layer: $
+      });
+    }
+    const ct = M(
+      () => a.value && a.value.widgets ? a.value.widgets.filter((b) => b.position === "absolute") : []
+    );
+    function dt(b, y, x) {
+      const $ = b.properties, w = m.value.find(
+        (U) => String(U.id) === String(b.source)
+      ), C = Array.isArray(w == null ? void 0 : w.popup) ? w.popup : [], V = C.filter((U) => U.meta === "image").map((U) => $ == null ? void 0 : $[U.name]).filter(Boolean), E = V.length > 0 ? `
+    <div class="popup-image-single overflow-hidden rounded-t-xl" style="width:260px;height:160px;margin:0 auto 0 auto;">
+      <img src="${V[0]}" style="width:100%;height:100%;object-fit:cover;border-radius:12px 12px 0 0;display:block;" />
+    </div>
+  ` : "", J = C.find((U) => U.meta === "title"), Se = J ? $ == null ? void 0 : $[J.name] : "";
+      let Y = C.filter((U) => U.meta !== "title" && U.meta !== "image").map((U) => {
+        const Le = $ == null ? void 0 : $[U.name];
+        let Fe = Le ?? "-";
+        switch (U.meta) {
+          case "badge":
+            Fe = Le ? `<span class="inline-block rounded px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 ">${Le}</span>` : "-";
+            break;
+        }
+        return `
+        <tr style="display: table-row;">
+          <td style="display: table-cell; padding: 2px 8px 2px 0; vertical-align: middle; font-weight: 500; width: 50%; text-align: left;">${U.ua || U.name}</td>
+          <td style="display: table-cell; padding: 2px 0 2px 8px; vertical-align: middle; width: 50%; text-align: right;">${Fe}</td>
+        </tr>
+      `;
+      }).join("");
+      C.length || (Y = Object.keys($).map(
+        (U) => `
+      <tr style="display: table-row;">
+        <td style="display: table-cell; padding: 2px 8px 2px 0; vertical-align: middle; font-weight: 500; width: 50%; text-align: left;">${U}</td>
+        <td style="display: table-cell; padding: 2px 0 2px 8px; vertical-align: middle; width: 50%; text-align: right;">${$[U] || "-"}</td>
+      </tr>
+    `
+      ).join(""));
+      const ke = `
+    <div class="absolute min-w-[250px] max-w-[300px] bg-white/90 border border-gray-200 rounded-lg shadow-md text-gray-800 pointer-events-none" style="display: flex; flex-direction: column; justify-content: center;">
+      ${E}
+      ${Se ? `<div class="font-semibold text-sm border-b border-solid border-gray-200 text-gray-800 px-2 py-1">${Se}</div>` : ""}
+      <div class="text-xs px-2 py-0.5 text-gray-500" style="display: flex; justify-content: center; align-items: center; flex: 1;">
+        <table class="w-full" style="border-collapse: collapse; border: none; margin: 0 auto;">
+          <tbody>${Y}</tbody>
+        </table>
+      </div>
+    </div>
+  `;
+      return x || (x = document.createElement("div"), x.className = "custom-popup absolute z-50", document.body.appendChild(x)), x.innerHTML = ke, Qe(x, y), x;
+    }
+    function Qe(b, y) {
+      const x = b.offsetWidth, $ = b.offsetHeight, w = document.getElementById("maplibre-demo-map"), C = w.getBoundingClientRect(), P = y.originalEvent.clientX - C.left, V = y.originalEvent.clientY - C.top;
+      let E = P - x / 2;
+      E = Math.max(10, Math.min(E, C.width - x - 10));
+      let J;
+      V - $ - 10 > 0 ? J = V - $ - 5 : V + $ + 10 < C.height ? J = V + 10 : J = Math.max(10, C.height - $ - 10), b.style.position = "absolute", b.style.left = `${E + 20}px`, b.style.top = `${J + 10}px`, b.parentNode !== w && w.appendChild(b);
+    }
+    return (b, y) => {
+      var x, $;
+      return c(), p("div", {
+        class: "maplibre-demo-map-container",
+        style: fe(Ue.value)
+      }, [
+        y[10] || (y[10] = r("div", { id: "maplibre-demo-map" }, null, -1)),
+        n.value ? (c(), p(B, { key: 1 }, [
+          r("div", Tn, [
+            r("div", zn, [
+              r("div", An, [
+                (c(), p(B, null, W(["top-left"], (w) => {
+                  var C, P;
+                  return N(Be, {
+                    key: w,
+                    position: w,
+                    widgets: f(w),
+                    map: o.value,
+                    mapLoaded: n.value,
+                    cardValues: l.value,
+                    hasFilters: k.value,
+                    history: (P = (C = a.value) == null ? void 0 : C.value) == null ? void 0 : P.history,
+                    currentFilterLayer: i.value,
+                    enabledLayerIds: ie.value,
+                    getWidgetComponent: T,
+                    getColumnWidth: Te,
+                    rightColumnOffset: w === "top-right" ? ze.value : void 0,
+                    onSetFilterLayer: _,
+                    "onUpdate:enabledLayerIds": y[0] || (y[0] = (V) => ie.value = V),
+                    onCardValuesId: _e,
+                    onCloseCard: te,
+                    onCatalogLayers: y[1] || (y[1] = (V) => m.value = V)
+                  }, null, 8, ["position", "widgets", "map", "mapLoaded", "cardValues", "hasFilters", "history", "currentFilterLayer", "enabledLayerIds", "rightColumnOffset"]);
+                }), 64))
+              ]),
+              r("div", Bn, [
+                (c(), p(B, null, W(["bottom-left"], (w) => {
+                  var C, P;
+                  return N(Be, {
+                    key: w,
+                    position: w,
+                    widgets: f(w),
+                    map: o.value,
+                    mapLoaded: n.value,
+                    cardValues: l.value,
+                    hasFilters: k.value,
+                    history: (P = (C = a.value) == null ? void 0 : C.value) == null ? void 0 : P.history,
+                    currentFilterLayer: i.value,
+                    enabledLayerIds: ie.value,
+                    getWidgetComponent: T,
+                    getColumnWidth: Te,
+                    rightColumnOffset: w === "top-right" ? ze.value : void 0,
+                    onSetFilterLayer: _,
+                    "onUpdate:enabledLayerIds": y[2] || (y[2] = (V) => ie.value = V),
+                    onCardValuesId: _e,
+                    onCloseCard: te,
+                    onCatalogLayers: y[3] || (y[3] = (V) => m.value = V)
+                  }, null, 8, ["position", "widgets", "map", "mapLoaded", "cardValues", "hasFilters", "history", "currentFilterLayer", "enabledLayerIds", "rightColumnOffset"]);
+                }), 64))
+              ])
+            ]),
+            r("div", On, [
+              r("div", Dn, [
+                (c(), p(B, null, W(["top-right"], (w) => {
+                  var C, P;
+                  return N(Be, {
+                    key: w,
+                    position: w,
+                    widgets: f(w),
+                    map: o.value,
+                    mapLoaded: n.value,
+                    cardValues: l.value,
+                    hasFilters: k.value,
+                    history: (P = (C = a.value) == null ? void 0 : C.value) == null ? void 0 : P.history,
+                    currentFilterLayer: i.value,
+                    enabledLayerIds: ie.value,
+                    getWidgetComponent: T,
+                    getColumnWidth: Te,
+                    rightColumnOffset: w === "top-right" ? ze.value : void 0,
+                    onSetFilterLayer: _,
+                    "onUpdate:enabledLayerIds": y[4] || (y[4] = (V) => ie.value = V),
+                    onCardValuesId: _e,
+                    onCloseCard: te,
+                    onCatalogLayers: y[5] || (y[5] = (V) => m.value = V)
+                  }, null, 8, ["position", "widgets", "map", "mapLoaded", "cardValues", "hasFilters", "history", "currentFilterLayer", "enabledLayerIds", "rightColumnOffset"]);
+                }), 64))
+              ]),
+              r("div", Un, [
+                (c(), p(B, null, W(["bottom-right"], (w) => {
+                  var C, P;
+                  return N(Be, {
+                    key: w,
+                    position: w,
+                    widgets: f(w),
+                    map: o.value,
+                    mapLoaded: n.value,
+                    cardValues: l.value,
+                    hasFilters: k.value,
+                    history: (P = (C = a.value) == null ? void 0 : C.value) == null ? void 0 : P.history,
+                    currentFilterLayer: i.value,
+                    enabledLayerIds: ie.value,
+                    getWidgetComponent: T,
+                    getColumnWidth: Te,
+                    rightColumnOffset: w === "top-right" ? ze.value : void 0,
+                    onSetFilterLayer: _,
+                    "onUpdate:enabledLayerIds": y[6] || (y[6] = (V) => ie.value = V),
+                    onCardValuesId: _e,
+                    onCloseCard: te,
+                    onCatalogLayers: y[7] || (y[7] = (V) => m.value = V)
+                  }, null, 8, ["position", "widgets", "map", "mapLoaded", "cardValues", "hasFilters", "history", "currentFilterLayer", "enabledLayerIds", "rightColumnOffset"]);
+                }), 64))
+              ])
+            ])
+          ]),
+          (c(!0), p(B, null, W(ct.value, (w, C) => (c(), p("div", {
+            key: "abs-" + (w.id || w.type || C),
+            class: "absolute z-20",
+            style: fe(w.style)
+          }, [
+            (c(), X(De(T(w.type)), {
+              map: o.value,
+              config: w.config,
+              hasFilters: k.value,
+              currentFilterLayer: i.value,
+              enabledLayerIds: ie.value,
+              cardValues: l.value,
+              onSetFilterLayer: _,
+              "onUpdate:enabledLayerIds": y[8] || (y[8] = (P) => ie.value = P),
+              onCardValuesId: _e,
+              onCloseCard: te,
+              onCatalogLayers: y[9] || (y[9] = (P) => m.value = P)
+            }, null, 40, ["map", "config", "hasFilters", "currentFilterLayer", "enabledLayerIds", "cardValues"]))
+          ], 4))), 128)),
+          r("div", Rn, [
+            (c(!0), p(B, null, W(($ = (x = a.value) == null ? void 0 : x.value) == null ? void 0 : $.tools, (w) => (c(), p(B, { key: w }, [
+              n.value && Je[w] ? (c(), X(De(Je[w]), yt({
+                key: 0,
+                map: o.value,
+                activeTool: u.value,
+                setActiveTool: lt
+              }, { ref_for: !0 }, w === "home" ? { initialView: at.value } : {}, { onCardValuesId: _e }), null, 16, ["map", "activeTool"])) : F("", !0)
+            ], 64))), 128))
+          ])
+        ], 64)) : (c(), X(Js, { key: 0 }))
+      ], 4);
+    };
+  }
+}, Wn = /* @__PURE__ */ H(Hn, [["__scopeId", "data-v-126309b6"]]);
+function qn(e) {
+  e.component("MapCustom", Wn);
+}
+export {
+  Wn as MapCustom,
+  Wn as default,
+  qn as install
+};