@feedmepos/mf-report 5.8.2-beta.0 → 5.9.0-beta.0

package/dist/ReportEditor-D4bnl00E.js

@@ -0,0 +1,968 @@
+import { defineComponent as G, mergeModels as J, useModel as j, ref as W, computed as N, resolveComponent as v, createBlock as x, openBlock as i, withCtx as s, createElementVNode as b, createVNode as a, unref as e, normalizeClass as le, createTextVNode as ue, toDisplayString as P, createElementBlock as S, Fragment as L, renderSlot as Ce, createCommentVNode as Y, watch as de, renderList as Q, resolveDynamicComponent as Be, isRef as ke, normalizeStyle as me, onMounted as Ue } from "vue";
+import { W as De, i as We, S as he, d as ye, T as Re, _ as qe } from "./TransitionFade-DmQjTWuM.js";
+import { D as K, c as Ie, C as _e, a as Ve, b as Pe, v as ee } from "./v4-ZW3e7y3R.js";
+import { storeToRefs as ce } from "pinia";
+import { useRouter as Se, useRoute as $e } from "vue-router";
+import { useBreakpoints as ae, useSnackbar as Oe, FmButtonColorThemeVariant as X } from "@feedmepos/ui-library";
+import { u as Te } from "./message-dialog-UoMWOnil.js";
+import { u as te, j as re, f as Ee } from "./vue-i18n-CbAseuRE.js";
+import { _ as ie } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-Dc0etyos.js";
+import { _ as se } from "./NoData.vue_vue_type_script_setup_true_lang-DGTWa4E5.js";
+import { r as we } from "./i18n-Cif1I9J2.js";
+import { _ as Fe } from "./SelectComponent.vue_vue_type_script_setup_true_lang-Dq9vY9mj.js";
+const ze = /* @__PURE__ */ G({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ J({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["update:isOpen"], ["update:modelValue"]),
+  setup(F, { emit: u }) {
+    const { t: n } = te(), { breakpoints: r } = ae(), y = j(F, "modelValue"), d = F, w = u;
+    function m() {
+      w("update:isOpen", !1);
+    }
+    function C() {
+      c.value && (y.value = c.value, c.value = void 0, w("update:isOpen", !1));
+    }
+    const c = W(), R = N(() => !c.value);
+    return (q, O) => {
+      const B = v("FmButton"), g = v("FmDialog");
+      return i(), x(g, {
+        "model-value": d.isOpen
+      }, {
+        "dialog-header": s(() => [
+          ue(P(e(n)("report.widget.type")), 1)
+        ]),
+        default: s(() => [
+          a(De, {
+            modelValue: c.value,
+            "onUpdate:modelValue": O[0] || (O[0] = ($) => c.value = $),
+            class: le(`grid ${e(r).lg || e(r).md ? "grid-cols-3 gap-3" : "grid-cols-2 gap-3"}`),
+            "child-class": "p-[8px] flex flex-col"
+          }, null, 8, ["modelValue", "class"])
+        ]),
+        "dialog-footer": s(() => [
+          O[1] || (O[1] = b("div", { class: "grow" }, null, -1)),
+          a(B, {
+            label: e(n)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: m
+          }, null, 8, ["label"]),
+          a(B, {
+            label: e(n)("report.common.confirm"),
+            disabled: R.value,
+            onClick: C
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), He = { class: "fm-typo-en-body-lg-600" }, pe = /* @__PURE__ */ G({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ J({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(F) {
+    const { t: u } = te(), n = j(F, "modelValue"), r = F;
+    return (y, d) => {
+      const w = v("FmIcon");
+      return i(), S("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: d[0] || (d[0] = (m) => n.value = !n.value)
+      }, [
+        b("p", He, P(e(u)("report.editor.customizeReport")), 1),
+        d[1] || (d[1] = b("div", { class: "grow" }, null, -1)),
+        a(w, {
+          name: r.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), Le = /* @__PURE__ */ G({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(F) {
+    const u = j(F, "modelValue");
+    return (n, r) => (i(), S(L, null, [
+      a(pe, {
+        modelValue: u.value,
+        "onUpdate:modelValue": r[0] || (r[0] = (y) => u.value = y),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      Ce(n.$slots, "default")
+    ], 64));
+  }
+}), Je = /* @__PURE__ */ G({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(F) {
+    const u = j(F, "modelValue");
+    return (n, r) => {
+      const y = v("FmTopSheet"), d = v("FmCard");
+      return i(), x(d, { class: "fixed bottom-0 w-full" }, {
+        default: s(() => [
+          a(pe, {
+            modelValue: u.value,
+            "onUpdate:modelValue": r[0] || (r[0] = (w) => u.value = w),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          a(y, {
+            modelValue: u.value,
+            "onUpdate:modelValue": r[2] || (r[2] = (w) => u.value = w),
+            "fullscreen-size": "sm"
+          }, {
+            default: s(() => [
+              a(pe, {
+                modelValue: u.value,
+                "onUpdate:modelValue": r[1] || (r[1] = (w) => u.value = w),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              u.value ? Ce(n.$slots, "default", { key: 0 }) : Y("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), je = {
+  key: 0,
+  class: "flex flex-col gap-2"
+}, Ge = /* @__PURE__ */ G({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ J({
+    schemas: {
+      type: Array,
+      default: () => []
+    },
+    tiles: {
+      type: Array,
+      required: !0
+    }
+  }, {
+    globalFilter: {
+      default: () => null
+    },
+    globalFilterModifiers: {},
+    isOpen: { type: Boolean, default: () => !1, required: !0 },
+    isOpenModifiers: {}
+  }),
+  emits: ["update:globalFilter", "update:isOpen"],
+  setup(F) {
+    const { t: u } = te(), n = j(F, "globalFilter"), r = j(F, "isOpen"), y = Oe(), d = F, w = W(), m = W(), C = W(), c = W([]);
+    de(r, (p) => {
+      var t, V, U;
+      p && (w.value = ((t = n.value) == null ? void 0 : t.label) || "", m.value = d.schemas.find(
+        (D) => {
+          var T;
+          return D.name === ((T = n.value) == null ? void 0 : T.schemaName);
+        }
+      ), C.value = (V = q.value.find(
+        (D) => {
+          var T;
+          return D.value.name === ((T = n.value) == null ? void 0 : T.name);
+        }
+      )) == null ? void 0 : V.value, c.value = ((U = n.value) == null ? void 0 : U.tileIds) || []);
+    });
+    const R = N(
+      () => d.schemas.map((p) => ({
+        label: p.label,
+        value: p
+      }))
+    ), q = N(() => {
+      var p;
+      return (((p = m.value) == null ? void 0 : p.fields) || []).reduce(
+        (t, V) => ([K.Bool, K.String, K.Timestamp].includes(V.type) && t.push({
+          label: V.label,
+          value: V
+        }), t),
+        []
+      );
+    }), O = N(() => d.tiles.reduce((p, t, V) => {
+      var T, z;
+      const U = t.widget.config.schemaNames ?? [], D = (t.widget.config.joinDatasources ?? []).flatMap(
+        (_) => _.schemaNames ?? []
+      );
+      return [...U, ...D].includes(((T = m.value) == null ? void 0 : T.name) || "") && p.push({
+        label: (z = t == null ? void 0 : t.widget.title) != null && z.trim() ? t.widget.title : `Widget ${V + 1}`,
+        value: t.id
+      }), p;
+    }, []));
+    function B(p) {
+      var t;
+      p.name !== ((t = m.value) == null ? void 0 : t.name) && (m.value = p, C.value = void 0);
+    }
+    function g(p) {
+      C.value = p;
+    }
+    function $(p) {
+      switch (p) {
+        case K.Timestamp:
+          return _e.Between;
+        case K.Bool:
+        case K.String:
+          return _e.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${p}`);
+      }
+    }
+    function A() {
+      if (!m.value) {
+        y.open({ message: "Invalid schema", type: "error" });
+        return;
+      }
+      C.value || y.open({ message: "Invalid dimension", type: "error" }), n.value = {
+        schemaName: m.value.name,
+        name: C.value.name,
+        label: w.value || name,
+        operator: $(C.value.type),
+        option: C.value.type === K.Timestamp ? Ie.DateTime : null,
+        tileIds: [...c.value],
+        filters: []
+      }, k();
+    }
+    function k() {
+      r.value = !1;
+    }
+    return (p, t) => {
+      const V = v("FmTextField"), U = v("FmLabel"), D = v("FmCheckbox"), T = v("FmForm"), z = v("FmButton"), _ = v("FmDialog");
+      return i(), x(_, {
+        modelValue: r.value,
+        "onUpdate:modelValue": t[4] || (t[4] = (o) => r.value = o),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": s(() => [
+          ue(P(e(u)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: s(() => [
+          a(T, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: s(() => [
+              a(V, {
+                modelValue: w.value,
+                "onUpdate:modelValue": t[0] || (t[0] = (o) => w.value = o),
+                placeholder: e(u)("report.section.filter.displayName"),
+                label: e(u)("report.section.filter.displayName"),
+                class: "mb-2"
+              }, null, 8, ["modelValue", "placeholder", "label"]),
+              a(Fe, {
+                "model-value": m.value,
+                items: R.value,
+                placeholder: e(u)("report.section.schema.title"),
+                label: e(u)("report.section.schema.title"),
+                "onUpdate:modelValue": t[1] || (t[1] = (o) => B(o))
+              }, null, 8, ["model-value", "items", "placeholder", "label"]),
+              a(Fe, {
+                "model-value": C.value,
+                items: q.value,
+                placeholder: e(u)("report.section.dimension.Dimension"),
+                label: e(u)("report.section.dimension.Dimension"),
+                "onUpdate:modelValue": t[2] || (t[2] = (o) => g(o))
+              }, null, 8, ["model-value", "items", "placeholder", "label"]),
+              a(U, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                default: s(() => [
+                  ue(P(e(u)("report.section.filter.applyWidget")), 1)
+                ]),
+                _: 1
+              }),
+              F.tiles.length > 0 ? (i(), S("div", je, [
+                (i(!0), S(L, null, Q(O.value, (o) => (i(), x(D, {
+                  key: o.value,
+                  modelValue: c.value,
+                  "onUpdate:modelValue": t[3] || (t[3] = (l) => c.value = l),
+                  label: o.label,
+                  value: o.value
+                }, null, 8, ["modelValue", "label", "value"]))), 128))
+              ])) : (i(), x(U, {
+                key: 1,
+                class: "fm-typo-en-body-lg-400",
+                label: e(u)("report.section.filter.noWidget")
+              }, null, 8, ["label"]))
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": s(() => [
+          t[5] || (t[5] = b("div", { class: "grow" }, null, -1)),
+          a(z, {
+            label: e(u)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: k
+          }, null, 8, ["label"]),
+          a(z, {
+            label: e(u)("report.common.confirm"),
+            onClick: A
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Ae = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Ke = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Qe = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, Xe = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, Ye = { class: "flex flex-col gap-24" }, Ze = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, xe = /* @__PURE__ */ G({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ J({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["hideConfiguration"], ["update:modelValue"]),
+  setup(F, { emit: u }) {
+    const n = j(F, "modelValue"), { breakpoints: r } = ae(), y = F, d = u, w = Se(), m = $e(), C = W(), {
+      currentSelectWidgetType: c,
+      categories: R,
+      editingTile: q,
+      editingTileIndex: O,
+      editingGlobalFilter: B,
+      editingGlobalFilterIndex: g
+    } = ce(Ve()), { schemas: $ } = ce(Pe()), { promptMessage: A } = Te(), k = W(!1), p = W(!1), { t, te: V } = te(), U = W(void 0), D = N(() => {
+      const o = n.value.tiles.flatMap((l) => {
+        var f;
+        const I = l.widget.config.schemaNames ?? [], M = ((f = l.widget.config.joinDatasources) == null ? void 0 : f.flatMap((E) => E.schemaNames ?? [])) ?? [];
+        return [...I, ...M];
+      });
+      return [...new Set(o)].reduce((l, I) => {
+        const M = $.value.find((f) => f.name === I);
+        return M && l.push(M), l;
+      }, []);
+    });
+    de(
+      () => c.value,
+      () => {
+        c.value !== void 0 && (U.value = We(c.value), q.value = U.value, O.value = -1, w.push({
+          name: "tileEditor",
+          query: m.query
+        }));
+      },
+      { immediate: !0 }
+    ), de(
+      () => n.value.tiles,
+      (o) => {
+        o.forEach((l) => {
+          l.id || (l.id = ee());
+        });
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const T = [
+      {
+        label: t("report.common.edit"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (o) => {
+          O.value = o, q.value = JSON.parse(JSON.stringify(n.value.tiles[o])), w.push({
+            name: "tileEditor",
+            query: m.query
+          });
+        }
+      },
+      {
+        label: t("report.common.duplicate"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (o) => {
+          const l = {
+            ...JSON.parse(JSON.stringify(n.value.tiles[o])),
+            id: ee()
+          };
+          n.value.tiles.push(l);
+        }
+      },
+      {
+        label: t("report.common.remove"),
+        selected: !1,
+        variant: "destructive",
+        onClick: async (o) => {
+          if (await A({
+            title: t("report.editor.deleteWidget"),
+            message: t("report.editor.deleteWidgetConfirm", {
+              title: n.value.tiles[o].widget.title
+            })
+          })) {
+            const I = n.value.tiles[o].id;
+            n.value.tiles.splice(o, 1), n.value.globalFilters && n.value.globalFilters.forEach((M) => {
+              var f;
+              M.tileIds = (f = M.tileIds) == null ? void 0 : f.filter((E) => E !== I);
+            });
+          }
+        }
+      }
+    ], z = [
+      {
+        label: t("report.common.edit"),
+        selected: !1,
+        variant: "tertiary",
+        onClick: (o) => {
+          var l;
+          g.value = o, B.value = JSON.parse(JSON.stringify((l = n.value.globalFilters) == null ? void 0 : l[o])), k.value = !0;
+        }
+      },
+      {
+        label: t("report.common.remove"),
+        selected: !1,
+        variant: "destructive",
+        onClick: async (o) => {
+          var M, f;
+          const l = (M = n.value.globalFilters) == null ? void 0 : M[o];
+          if (!l) return;
+          await A({
+            title: t("report.editor.deleteWidget"),
+            message: t("report.editor.deleteWidgetConfirm", {
+              title: re(l)
+            })
+          }) && ((f = n.value.globalFilters) == null || f.splice(o, 1));
+        }
+      }
+    ], _ = N(() => R.value.map((o) => ({
+      label: t(`report.category.${o.name}`),
+      value: o.id
+    })));
+    return (o, l) => {
+      const I = v("FmTextField"), M = v("FmSelect"), f = v("FmButton"), E = v("FmIcon"), oe = v("FmTooltip"), ve = v("FmMenuItem"), fe = v("FmMenu"), ge = v("FmListItem"), be = v("FmList"), Me = v("FmForm");
+      return i(), x(Be(e(r).lg || e(r).md ? Le : Je), {
+        "model-value": y.hideConfiguration,
+        "onUpdate:modelValue": l[8] || (l[8] = (h) => d("hideConfiguration", h))
+      }, {
+        default: s(() => [
+          a(Ge, {
+            "is-open": k.value,
+            "onUpdate:isOpen": l[0] || (l[0] = (h) => k.value = h),
+            "global-filter": e(B),
+            tiles: n.value.tiles,
+            schemas: D.value,
+            "onUpdate:globalFilter": l[1] || (l[1] = (h) => {
+              !h || !n.value.globalFilters || (typeof e(g) == "number" && e(g) >= 0 ? n.value.globalFilters[e(g)] = h : n.value.globalFilters.push(h));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          a(ze, {
+            modelValue: e(c),
+            "onUpdate:modelValue": l[2] || (l[2] = (h) => ke(c) ? c.value = h : null),
+            "is-open": p.value,
+            "onUpdate:isOpen": l[3] || (l[3] = (h) => p.value = h)
+          }, null, 8, ["modelValue", "is-open"]),
+          a(Me, {
+            ref_key: "form",
+            ref: C,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: s(() => [
+              a(he, { class: "border-solid" }, {
+                header: s(() => [
+                  b("p", null, P(e(t)("report.editor.reportInfo")), 1),
+                  l[9] || (l[9] = b("div", { class: "grow" }, null, -1))
+                ]),
+                content: s(() => [
+                  b("div", Ae, [
+                    a(I, {
+                      modelValue: n.value.name,
+                      "onUpdate:modelValue": l[4] || (l[4] = (h) => n.value.name = h),
+                      label: e(t)("report.editor.reportTitle"),
+                      placeholder: e(t)("report.editor.placeholder")
+                    }, null, 8, ["modelValue", "label", "placeholder"]),
+                    a(M, {
+                      modelValue: n.value.category,
+                      "onUpdate:modelValue": l[5] || (l[5] = (h) => n.value.category = h),
+                      label: e(t)("report.common.category"),
+                      items: _.value
+                    }, null, 8, ["modelValue", "label", "items"])
+                  ])
+                ]),
+                _: 1
+              }),
+              a(he, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: s(() => [
+                  b("p", null, P(e(t)("report.section.filter.globalFilter")), 1),
+                  l[10] || (l[10] = b("div", { class: "grow" }, null, -1))
+                ]),
+                content: s(() => [
+                  b("div", Ke, [
+                    a(f, {
+                      label: e(t)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": e(X).ColorPrimary,
+                      "text-color": e(X).ColorPrimary,
+                      onClick: l[6] || (l[6] = () => {
+                        g.value = null, B.value = null, k.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    a(be, null, {
+                      default: s(() => [
+                        a(e(ye), {
+                          list: n.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: s(({ element: h, index: Z }) => [
+                            a(ge, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: s(() => [
+                                a(E, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                b("div", Qe, [
+                                  a(oe, {
+                                    "z-index": 99,
+                                    content: e(re)(h),
+                                    class: "handle"
+                                  }, {
+                                    default: s(() => [
+                                      b("p", Xe, P(e(re)(h)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  D.value.find(
+                                    (H) => H.name === h.schemaName
+                                  ) ? Y("", !0) : (i(), x(oe, {
+                                    key: 0,
+                                    content: "Missing schema",
+                                    "z-index": 99
+                                  }, {
+                                    default: s(() => [
+                                      a(E, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }))
+                                ]),
+                                l[11] || (l[11] = b("div", { class: "grow" }, null, -1)),
+                                a(fe, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": s(() => [
+                                    a(f, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: s(() => [
+                                    (i(), S(L, null, Q(z, (H, ne) => a(ve, {
+                                      key: ne,
+                                      onClick: (Ne) => H.onClick(Z)
+                                    }, {
+                                      label: s(() => [
+                                        b("p", {
+                                          class: le(
+                                            H.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, P(H.label), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              b("div", Ye, [
+                a(f, {
+                  label: e(t)("report.editor.addWidget"),
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": e(X).ColorPrimary,
+                  "text-color": e(X).ColorPrimary,
+                  onClick: l[7] || (l[7] = (h) => p.value = !0)
+                }, null, 8, ["label", "border-color", "text-color"]),
+                a(be, null, {
+                  default: s(() => [
+                    a(e(ye), {
+                      list: n.value.tiles,
+                      "item-key": "id",
+                      class: "flex flex-col gap-2 cursor-grab",
+                      handle: ".handle"
+                    }, {
+                      item: s(({ element: h, index: Z }) => [
+                        a(ge, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                          default: s(() => [
+                            a(E, {
+                              name: "drag_handle",
+                              class: "handle"
+                            }),
+                            a(oe, {
+                              content: h.widget.title ? e(we)(e(t), e(V), h.widget.title, "other") : e(t)("report.editor.widget", { index: Z + 1 }),
+                              class: "handle"
+                            }, {
+                              default: s(() => [
+                                b("p", Ze, P(h.widget.title ? e(we)(e(t), e(V), h.widget.title, "other") : e(t)("report.editor.widget", { index: Z + 1 })), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"]),
+                            l[12] || (l[12] = b("div", { class: "grow" }, null, -1)),
+                            a(fe, {
+                              trigger: "click",
+                              shift: !0,
+                              "stop-click-propagation": !0
+                            }, {
+                              "menu-button": s(() => [
+                                a(f, {
+                                  "append-icon": "more_vert",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              default: s(() => [
+                                (i(), S(L, null, Q(T, (H, ne) => a(ve, {
+                                  key: ne,
+                                  onClick: (Ne) => H.onClick(Z)
+                                }, {
+                                  label: s(() => [
+                                    b("p", {
+                                      class: le(
+                                        H.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                      )
+                                    }, P(H.label), 3)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["onClick"])), 64))
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 1
+                    }, 8, ["list"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), el = { class: "h-full w-full overflow-x-hidden" }, ll = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, tl = { class: "flex bg-fm-color-neutral-white w-[88px]" }, ol = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, al = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, nl = { key: 2 }, rl = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, il = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, sl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, ul = /* @__PURE__ */ G({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ J({
+    hideConfiguration: { type: Boolean, required: !1, default: !1 },
+    previewWidth: { type: Number, required: !0 },
+    previewHeight: { type: Number, required: !0 },
+    previewScale: { type: Number, required: !0 }
+  }, {
+    modelValue: { required: !0, default: () => {
+    } },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["hideConfiguration"], ["update:modelValue"]),
+  setup(F, { emit: u }) {
+    const { breakpoints: n } = ae(), r = j(F, "modelValue"), y = F, d = N(() => y.previewWidth > 0 && y.previewHeight > 0), w = N(() => n.value.sm || n.value.xs), m = u;
+    return (C, c) => {
+      const R = v("FmCircularProgress"), q = v("FmButton"), O = v("FmMenuDivider"), B = v("FmCard");
+      return i(), S("div", el, [
+        r.value ? (i(), S(L, { key: 1 }, [
+          d.value ? Y("", !0) : (i(), x(Re, {
+            key: 0,
+            "model-value": !y.hideConfiguration
+          }, {
+            right: s(() => [
+              b("div", ll, [
+                r.value ? (i(), x(xe, {
+                  key: 0,
+                  modelValue: r.value,
+                  "onUpdate:modelValue": c[0] || (c[0] = (g) => r.value = g),
+                  "hide-configuration": y.hideConfiguration,
+                  onHideConfiguration: c[1] || (c[1] = (g) => m("hideConfiguration", g))
+                }, null, 8, ["modelValue", "hide-configuration"])) : Y("", !0)
+              ])
+            ]),
+            left: s(() => [
+              b("div", tl, [
+                a(q, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": e(X).ColorPrimary,
+                  "text-color": e(X).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: c[2] || (c[2] = (g) => m("hideConfiguration", !y.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          a(O, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !w.value && !d.value ? (i(), S("div", ol, [
+            r.value.tiles.length > 0 ? (i(), S("div", al, [
+              (i(!0), S(L, null, Q(r.value.tiles, (g, $) => (i(), x(ie, {
+                key: `${e(ee)()}_${$}`,
+                "model-value": g,
+                index: $,
+                "hide-export": !0
+              }, null, 8, ["model-value", "index"]))), 128))
+            ])) : (i(), x(se, { key: 1 }))
+          ])) : w.value && !d.value ? (i(), S("div", nl, [
+            a(B, { class: "px-5 pb-28" }, {
+              default: s(() => [
+                r.value.tiles.length > 0 ? (i(), S("div", rl, [
+                  (i(!0), S(L, null, Q(r.value.tiles, (g, $) => (i(), x(ie, {
+                    key: `${e(ee)()}_${$}`,
+                    "model-value": g,
+                    index: $,
+                    "hide-export": !0
+                  }, null, 8, ["model-value", "index"]))), 128))
+                ])) : (i(), x(se, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            r.value ? (i(), x(xe, {
+              key: 0,
+              modelValue: r.value,
+              "onUpdate:modelValue": c[3] || (c[3] = (g) => r.value = g),
+              "hide-configuration": y.hideConfiguration,
+              onHideConfiguration: c[4] || (c[4] = (g) => {
+                m("hideConfiguration", g);
+              })
+            }, null, 8, ["modelValue", "hide-configuration"])) : Y("", !0)
+          ])) : (i(), S("div", il, [
+            b("div", {
+              style: me({
+                transformOrigin: "top center",
+                transform: `scale(${y.previewScale})`
+              })
+            }, [
+              b("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: me({
+                  width: y.previewWidth + "px",
+                  height: y.previewHeight + "px"
+                })
+              }, [
+                r.value.tiles.length > 0 ? (i(), S("div", sl, [
+                  (i(!0), S(L, null, Q(r.value.tiles, (g, $) => (i(), x(ie, {
+                    key: `${e(ee)()}_${$}`,
+                    "model-value": g,
+                    index: $,
+                    "hide-export": !0,
+                    "custom-screen-width": y.previewWidth
+                  }, null, 8, ["model-value", "index", "custom-screen-width"]))), 128))
+                ])) : (i(), x(se, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (i(), x(R, { key: 0 }))
+      ]);
+    };
+  }
+}), dl = { class: "flex items-center gap-4" }, ml = { class: "flex justify-center items-center gap-2 w-full" }, cl = { class: "flex gap-4" }, kl = /* @__PURE__ */ G({
+  __name: "ReportEditor",
+  setup(F) {
+    const u = Se(), n = $e(), r = Ve(), { promptLoader: y } = Ee(), { t: d } = te(), { currentReport: w, editingReport: m } = ce(r), { breakpoints: C } = ae(), c = N(() => {
+      var _;
+      return !((_ = m.value) != null && _.editable);
+    }), R = N(() => {
+      var _;
+      return ((_ = m.value) == null ? void 0 : _.name) ?? d("report.editor.newReport");
+    }), q = Oe(), { promptMessage: O } = Te(), B = W(!1);
+    async function g() {
+      if (!m.value || m.value.tiles.length === 0) {
+        q.open({ message: d("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      const _ = c.value ? d("report.common.clone") : d("report.common.save");
+      if (await O({
+        title: `${d("report.messages.saveReport")}`,
+        message: d("report.messages.confirmAction", { action: _, name: R.value })
+      }))
+        try {
+          await y(async () => {
+            if (c.value) {
+              const l = JSON.parse(JSON.stringify(m.value));
+              l.editable = !0, l.id = "", l.name = `${l.name} ${d("report.common.duplicate")}`, await r.createOrUpdateReport(l);
+            } else
+              m.value && await r.createOrUpdateReport(m.value);
+            u.push({
+              name: "reportView",
+              query: n.query
+            });
+          });
+        } catch (l) {
+          console.log(l), q.open({
+            message: d("report.messages.failedToAction", { action: _ }),
+            type: "error"
+          });
+        }
+    }
+    async function $() {
+      var o;
+      if (!m.value) return;
+      await O({
+        title: d("report.common.report", 1),
+        message: d("report.editor.notSaved", { name: (o = m.value) == null ? void 0 : o.name })
+      }) && (m.value = JSON.parse(JSON.stringify(w.value)), u.back());
+    }
+    Ue(() => {
+      m.value || u.push({ name: "reports" });
+    });
+    const A = [
+      {
+        label: d("report.common.default"),
+        width: void 0,
+        height: void 0
+      },
+      {
+        label: d("report.editor.devices.desktop"),
+        width: 1920,
+        height: 1080
+      },
+      {
+        label: d("report.editor.devices.tablet"),
+        width: 820,
+        height: 1180
+      },
+      {
+        label: d("report.editor.devices.phone"),
+        width: 390,
+        height: 859
+      }
+    ], k = W(A[0]), p = W(!1), t = N(() => p.value ? Math.max(k.value.width || 0, k.value.height || 0) : Math.min(k.value.width || 0, k.value.height || 0)), V = N(() => p.value ? Math.min(k.value.width || 0, k.value.height || 0) : Math.max(k.value.width || 0, k.value.height || 0)), U = N(() => window.innerHeight - 72 - 56), D = N(() => {
+      if (!t.value) return 1;
+      let _ = (U.value - 48) / t.value, o = V.value * _;
+      return o > window.innerWidth && (_ = window.innerWidth / V.value, o = V.value * _), _ > 1 ? 1 : _;
+    });
+    function T(_) {
+      k.value = _;
+    }
+    function z() {
+      p.value = !p.value;
+    }
+    return (_, o) => {
+      const l = v("FmTooltip"), I = v("FmButton"), M = v("FmPageHead");
+      return i(), x(qe, null, {
+        default: s(() => [
+          a(M, {
+            actions: [
+              { label: e(d)("report.common.cancel"), value: "cancel", isPrimary: !1 },
+              { label: "Save Report", value: "save", isPrimary: !0, prependIcon: "download" }
+            ],
+            "onClick:action": o[0] || (o[0] = (f) => {
+              f === "cancel" && $(), f === "save" && g();
+            })
+          }, {
+            title: s(() => [
+              b("div", dl, [
+                a(l, {
+                  content: R.value,
+                  placement: "bottom"
+                }, {
+                  default: s(() => [
+                    b("p", {
+                      class: le(`${e(C).sm || e(C).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, P(R.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                b("div", ml, [
+                  b("div", cl, [
+                    (i(), S(L, null, Q(A, (f) => {
+                      var E;
+                      return a(I, {
+                        key: f.label,
+                        label: f.label,
+                        variant: ((E = k.value) == null ? void 0 : E.label) === f.label ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (oe) => T(f)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  a(I, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: z
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          e(m) ? (i(), x(ul, {
+            key: 0,
+            modelValue: e(m),
+            "onUpdate:modelValue": o[1] || (o[1] = (f) => ke(m) ? m.value = f : null),
+            style: me({ height: U.value + "px" }),
+            class: le(e(C).lg || e(C).md ? "flex" : ""),
+            "hide-configuration": B.value,
+            "preview-width": V.value,
+            "preview-height": t.value,
+            "preview-scale": D.value,
+            onHideConfiguration: o[2] || (o[2] = (f) => B.value = f)
+          }, null, 8, ["modelValue", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : Y("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  kl as default
+};