@feedmepos/mf-report 5.26.9 → 5.27.0

package/dist/ReportEditor-CFWTQJCY.js

@@ -0,0 +1,1812 @@
+import { defineComponent as Ve, mergeModels as Ie, useModel as Re, ref as P, computed as p, resolveComponent as F, createBlock as k, openBlock as u, withCtx as b, createElementVNode as g, createVNode as n, unref as l, normalizeClass as Pe, createTextVNode as Ae, toDisplayString as z, createElementBlock as I, Fragment as Ce, renderSlot as pt, createCommentVNode as L, watch as we, renderList as Ee, onMounted as vt, onUnmounted as Tt, resolveDynamicComponent as $t, isRef as ft, normalizeStyle as lt } from "vue";
+import { W as St, g as Dt, _ as Ot, a as It, e as Be, d as gt, b as bt, i as Rt, S as We, T as Nt, c as Ut } from "./TransitionFade-Chjh8CeF.js";
+import { C as De, D as fe, c as qe, g as Bt, u as at, M as yt, r as Mt, d as st, n as qt, e as Et, f as Pt, h as Lt, i as zt, a as At, j as Ye, k as Xe, m as Gt, Q as He, o as Wt, l as Ht, b as ut, p as jt } from "./GlobalFilterSelect.vue_vue_type_script_setup_true_lang-DvHJgIIm.js";
+import { storeToRefs as Me } from "pinia";
+import { useRouter as nt, useRoute as rt } from "vue-router";
+import { useBreakpoints as je, useSnackbar as ht, FmButtonColorThemeVariant as Oe } from "@feedmepos/ui-library";
+import { u as it } from "./message-dialog-UoMWOnil.js";
+import { u as Le, a as Jt } from "./vue-i18n-DVWuTfed.js";
+import { r as Ge } from "./i18n-CI_sQ5d_.js";
+import { _ as Ze } from "./TileGrid.vue_vue_type_script_setup_true_lang-WLjTXh0g.js";
+import { a as et, _ as tt } from "./SelectComponent.vue_vue_type_script_setup_true_lang-BL1jpiXN.js";
+import { useCoreStore as Kt } from "@feedmepos/mf-common";
+import { u as Qt, a as Yt } from "./app-CZUC85Jj.js";
+import { d as Xt } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-_xN_Strd.js";
+const Zt = /* @__PURE__ */ Ve({
+  __name: "WidgetDialog",
+  props: /* @__PURE__ */ Ie({
+    isOpen: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Ie(["update:isOpen"], ["update:modelValue"]),
+  setup(R, { emit: r }) {
+    const { t: a } = Le(), { breakpoints: m } = je(), v = Re(R, "modelValue"), f = R, M = r;
+    function le() {
+      M("update:isOpen", !1);
+    }
+    function V() {
+      y.value && (v.value = y.value, y.value = void 0, M("update:isOpen", !1));
+    }
+    const y = P(), x = p(() => !y.value);
+    return (N, G) => {
+      const q = F("FmButton"), A = F("FmDialog");
+      return u(), k(A, {
+        "model-value": f.isOpen
+      }, {
+        "dialog-header": b(() => [
+          Ae(z(l(a)("report.widget.type")), 1)
+        ]),
+        default: b(() => [
+          n(St, {
+            modelValue: y.value,
+            "onUpdate:modelValue": G[0] || (G[0] = ($) => y.value = $),
+            class: Pe(`grid ${l(m).lg || l(m).md ? "grid-cols-3 gap-3" : "grid-cols-2 gap-3"}`),
+            "child-class": "p-[8px] flex flex-col"
+          }, null, 8, ["modelValue", "class"])
+        ]),
+        "dialog-footer": b(() => [
+          G[1] || (G[1] = g("div", { class: "grow" }, null, -1)),
+          n(q, {
+            label: l(a)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: le
+          }, null, 8, ["label"]),
+          n(q, {
+            label: l(a)("report.common.confirm"),
+            disabled: x.value,
+            onClick: V
+          }, null, 8, ["label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), el = { class: "fm-typo-en-body-lg-600" }, ot = /* @__PURE__ */ Ve({
+  __name: "ReportEditorTabHeader",
+  props: /* @__PURE__ */ Ie({
+    icon: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(R) {
+    const { t: r } = Le(), a = Re(R, "modelValue"), m = R;
+    return (v, f) => {
+      const M = F("FmIcon");
+      return u(), I("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: f[0] || (f[0] = (le) => a.value = !a.value)
+      }, [
+        g("p", el, z(l(r)("report.editor.customizeReport")), 1),
+        f[1] || (f[1] = g("div", { class: "grow" }, null, -1)),
+        n(M, {
+          name: m.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), tl = /* @__PURE__ */ Ve({
+  __name: "ReportEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(R) {
+    const r = Re(R, "modelValue");
+    return (a, m) => (u(), I(Ce, null, [
+      n(ot, {
+        modelValue: r.value,
+        "onUpdate:modelValue": m[0] || (m[0] = (v) => r.value = v),
+        icon: "keyboard_double_arrow_left"
+      }, null, 8, ["modelValue"]),
+      pt(a.$slots, "default")
+    ], 64));
+  }
+}), ll = /* @__PURE__ */ Ve({
+  __name: "ReportEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(R) {
+    const r = Re(R, "modelValue");
+    return (a, m) => {
+      const v = F("FmTopSheet"), f = F("FmCard");
+      return u(), k(f, { class: "fixed bottom-0 w-full" }, {
+        default: b(() => [
+          n(ot, {
+            modelValue: r.value,
+            "onUpdate:modelValue": m[0] || (m[0] = (M) => r.value = M),
+            icon: "keyboard_double_arrow_up"
+          }, null, 8, ["modelValue"]),
+          n(v, {
+            modelValue: r.value,
+            "onUpdate:modelValue": m[2] || (m[2] = (M) => r.value = M),
+            "fullscreen-size": "sm"
+          }, {
+            default: b(() => [
+              n(ot, {
+                modelValue: r.value,
+                "onUpdate:modelValue": m[1] || (m[1] = (M) => r.value = M),
+                icon: "keyboard_double_arrow_down"
+              }, null, 8, ["modelValue"]),
+              r.value ? pt(a.$slots, "default", { key: 0 }) : L("", !0)
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ]),
+        _: 3
+      });
+    };
+  }
+}), ol = {
+  key: 2,
+  class: "flex flex-col gap-3 mt-2 border border-neutral-300 p-3"
+}, al = { class: "grid grid-cols-1 gap-2 rounded-md border border-neutral-300 p-2 sm:grid-cols-[1.3fr_1fr_1fr_auto] sm:items-end" }, nl = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, rl = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, il = { class: "pl-1" }, sl = {
+  key: 0,
+  class: "flex justify-end sm:pb-[2px]"
+}, ul = {
+  key: 4,
+  class: "flex flex-col gap-2"
+}, dl = /* @__PURE__ */ Ve({
+  __name: "GlobalFilterDialog",
+  props: /* @__PURE__ */ Ie({
+    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(R) {
+    const { t: r, te: a } = Le(), m = Re(R, "globalFilter"), v = Re(R, "isOpen"), f = ht(), M = R, le = P(""), V = P(), y = P(), x = P(), N = P([]), G = P([]), q = P(""), A = P(!1), $ = P(!1), U = P([]), B = P([]), se = P(De.Equal);
+    function me(t) {
+      return JSON.parse(JSON.stringify(t));
+    }
+    function K(t, e) {
+      return { hour: t, minute: e };
+    }
+    function w(t) {
+      return t ? `${String(t.hour).padStart(2, "0")}:${String(t.minute).padStart(2, "0")}` : null;
+    }
+    function Fe(t) {
+      if (!t) return null;
+      const [e, h] = t.split(":").map(Number);
+      return Number.isNaN(e) || Number.isNaN(h) ? null : { hour: e, minute: h };
+    }
+    const ce = p(() => y.value ? !(y.value.type === fe.Timestamp && x.value === qe.DateTime) : !1), oe = p(
+      () => {
+        var t;
+        return ((t = y.value) == null ? void 0 : t.type) === fe.Timestamp && x.value === qe.TimeOfDay;
+      }
+    ), pe = p(() => {
+      var t;
+      return (((t = y.value) == null ? void 0 : t.filterOperators) ?? []).filter((e) => e !== De.And && e !== De.Or).map((e) => ({
+        label: r(`report.section.comparisonOperator.${e}`),
+        value: e
+      }));
+    });
+    function ge() {
+      var e;
+      const t = (e = pe.value[0]) == null ? void 0 : e.value;
+      return t || (y.value ? ve(y.value.type, x.value ?? null) : De.Equal);
+    }
+    function he(t) {
+      if (y.value)
+        return Bt({
+          operator: t ?? ge(),
+          dataType: y.value.type,
+          dimensionOption: y.value.type === fe.Timestamp ? x.value ?? null : null,
+          t: r
+        });
+    }
+    function E(t, e) {
+      if (typeof (e == null ? void 0 : e.default) == "boolean" || t.length > 0 && t.every((C) => typeof C == "boolean")) {
+        const C = t.reduce((D, X) => (typeof X == "boolean" && D.push(X), D), []);
+        if (e)
+          for (e.fixed && C.splice(e.count); C.length < e.count; )
+            C.push(typeof e.default == "boolean" ? e.default : !1);
+        return C;
+      }
+      const _ = t.reduce((C, D) => (typeof D == "string" && C.push(D), C), []);
+      if (e)
+        for (e.fixed && _.splice(e.count); _.length < e.count; )
+          _.push(typeof e.default == "string" ? e.default : "");
+      return _;
+    }
+    function W(t = se.value) {
+      const e = he(t), h = E(
+        e ? Array(e.count).fill(e.default) : [],
+        e
+      );
+      return {
+        label: "",
+        operator: t,
+        values: h
+      };
+    }
+    function Z() {
+      return {
+        name: "",
+        startTime: K(0, 0),
+        endTime: K(23, 59)
+      };
+    }
+    function be() {
+      if (!(!ce.value || !$.value)) {
+        if (oe.value) {
+          B.value.length === 0 && (B.value = [Z()]);
+          return;
+        }
+        U.value.length === 0 && (U.value = [W()]);
+      }
+    }
+    function xe() {
+      var h, _, C;
+      const t = me(((h = m.value) == null ? void 0 : h.customOptions) ?? []), e = me(((_ = m.value) == null ? void 0 : _.customTimeRanges) ?? []);
+      se.value = ((C = t[0]) == null ? void 0 : C.operator) ?? ge(), $.value = t.length > 0 || e.length > 0, U.value = t, B.value = e, be();
+    }
+    function ee(t) {
+      se.value = t, U.value = U.value.map((e, h) => {
+        const _ = U.value[h];
+        if (!_)
+          return W(t);
+        const C = he(t), D = E(
+          Array.isArray(_.values) ? [..._.values] : [],
+          C
+        );
+        return {
+          ..._,
+          operator: t,
+          values: D
+        };
+      });
+    }
+    function ke() {
+      U.value = [...U.value, W()];
+    }
+    function ae(t) {
+      U.value.length <= 1 || (U.value = U.value.filter((e, h) => h !== t));
+    }
+    function Te() {
+      B.value = [...B.value, Z()];
+    }
+    function Ne(t) {
+      B.value.length <= 1 || (B.value = B.value.filter(
+        (e, h) => h !== t
+      ));
+    }
+    function Ue(t, e, h) {
+      const _ = B.value[t];
+      _ && (B.value[t] = {
+        ..._,
+        [e]: Fe(h)
+      });
+    }
+    function $e(t) {
+      return t.length === 0 || t.some((e) => e == null || e === "");
+    }
+    function Se() {
+      if (!$.value) return !0;
+      if (oe.value) {
+        const h = B.value.map((C) => C.name.trim()).filter(Boolean);
+        return B.value.some(
+          (C) => !C.name.trim() || !C.startTime || !C.endTime
+        ) ? (f.open({
+          message: r("report.section.filter.invalidCustomTimeRange"),
+          type: "error"
+        }), !1) : new Set(h).size !== h.length ? (f.open({
+          message: r("report.section.filter.customTimeRangeNamesMustBeUnique"),
+          type: "error"
+        }), !1) : !0;
+      }
+      const t = U.value.map((h) => h.label.trim()).filter(Boolean);
+      return U.value.some(
+        (h) => !h.label.trim() || $e(h.values)
+      ) ? (f.open({ message: r("report.section.filter.invalidCustomOption"), type: "error" }), !1) : new Set(t).size !== t.length ? (f.open({
+        message: r("report.section.filter.customOptionLabelsMustBeUnique"),
+        type: "error"
+      }), !1) : !0;
+    }
+    we(v, (t) => {
+      var e, h, _, C, D, X, re;
+      t && (le.value = ((e = m.value) == null ? void 0 : e.label) || "", V.value = M.schemas.find(
+        (ie) => {
+          var j;
+          return ie.name === ((j = m.value) == null ? void 0 : j.schemaName);
+        }
+      ), y.value = (h = c.value.find(
+        (ie) => {
+          var j;
+          return ie.value.name === ((j = m.value) == null ? void 0 : j.name);
+        }
+      )) == null ? void 0 : h.value, x.value = (_ = m.value) == null ? void 0 : _.option, N.value = ((C = m.value) == null ? void 0 : C.tileIds) || [], G.value = ((D = m.value) == null ? void 0 : D.filters) || [], A.value = !!((X = m.value) != null && X.dataFormula), q.value = ((re = m.value) == null ? void 0 : re.dataFormula) || "", xe());
+    }), we($, (t) => {
+      var e;
+      t && (se.value = ((e = U.value[0]) == null ? void 0 : e.operator) ?? ge(), be());
+    }), we(ce, (t) => {
+      if (!t) {
+        $.value = !1, U.value = [], B.value = [];
+        return;
+      }
+      be();
+    }), we(oe, () => {
+      be();
+    }), we(pe, (t) => {
+      var h;
+      const e = (h = t[0]) == null ? void 0 : h.value;
+      e && (t.some((_) => _.value === se.value) || ee(e));
+    });
+    const i = p(
+      () => M.schemas.map((t) => ({
+        label: t.label || t.name,
+        value: t
+      }))
+    ), c = p(() => {
+      var t;
+      return (((t = V.value) == null ? void 0 : t.fields) || []).filter((e) => e.type !== fe.Numeric).map((e) => ({
+        label: e.label || e.name,
+        value: e
+      }));
+    }), H = p(() => {
+      var t;
+      return ((t = y.value) == null ? void 0 : t.type) !== fe.Timestamp ? [] : Dt(r);
+    }), ue = p(() => M.tiles.reduce((t, e, h) => {
+      var D, X, re, ie, j;
+      const _ = ((D = e.widget) == null ? void 0 : D.config.schemaNames) ?? [], C = (((X = e.widget) == null ? void 0 : X.config.joinDatasources) ?? []).flatMap(
+        (ze) => ze.schemaNames ?? []
+      );
+      return [..._, ...C].includes(((re = V.value) == null ? void 0 : re.name) || "") && t.push({
+        label: (j = (ie = e.widget) == null ? void 0 : ie.title) != null && j.trim() ? e.widget.title : `Widget ${h + 1}`,
+        value: e.id
+      }), t;
+    }, [])), te = p(
+      () => M.schemas.flatMap(
+        (t) => (t.fields ?? []).map((e) => ({
+          ...e,
+          labels: [
+            Ge(r, a, t.label, "schema"),
+            Ge(r, a, e.label || e.name, "other")
+          ]
+        }))
+      )
+    );
+    function Q(t) {
+      var e;
+      t.name !== ((e = V.value) == null ? void 0 : e.name) && (V.value = t, y.value = void 0, se.value = De.Equal, $.value = !1, U.value = [], B.value = []);
+    }
+    function ye(t) {
+      y.value = t, x.value = t.type === fe.Timestamp ? qe.DateTime : void 0, se.value = ge(), $.value = !1, U.value = [], B.value = [];
+    }
+    function ve(t, e) {
+      switch (t) {
+        case fe.Timestamp:
+          return e === qe.DateTime || e === qe.TimeOfDay ? De.Between : De.Equal;
+        case fe.Bool:
+        case fe.String:
+        case fe.Numeric:
+          return De.Equal;
+        default:
+          throw new Error(`Unsupported data type: ${t}`);
+      }
+    }
+    function Y() {
+      if (!V.value) {
+        f.open({ message: r("report.section.filter.invalidSchema"), type: "error" });
+        return;
+      }
+      if (!y.value) {
+        f.open({ message: r("report.section.filter.invalidDimension"), type: "error" });
+        return;
+      }
+      const t = G.value.filter((_) => _ ? !i.value.some((D) => D.value.name === _.schemaName) : !0);
+      if (t.length > 0) {
+        const _ = t.filter((D) => !!D).map((D) => D.schemaName), C = t.some((D) => !D) ? `, ${r("report.section.filter.unknownFilters")}` : "";
+        f.open({
+          message: r("report.section.filter.invalidFiltersSchemaNotFound", {
+            schemas: _.join(", "),
+            unknownFiltersSuffix: C
+          }),
+          type: "error"
+        });
+        return;
+      }
+      if (!Se())
+        return;
+      const e = $.value && !oe.value ? U.value.map((_) => ({
+        label: _.label.trim(),
+        operator: _.operator ?? ge(),
+        values: E(
+          [..._.values],
+          he(_.operator)
+        )
+      })) : void 0, h = $.value && oe.value ? B.value.map((_) => ({
+        name: _.name.trim(),
+        startTime: _.startTime,
+        endTime: _.endTime
+      })) : void 0;
+      m.value = {
+        schemaName: V.value.name,
+        name: y.value.name,
+        label: le.value,
+        operator: ve(
+          y.value.type,
+          y.value.type === fe.Timestamp ? x.value ?? qe.DateTime : null
+        ),
+        option: y.value.type === fe.Timestamp ? x.value : null,
+        values: [],
+        tileIds: [...N.value],
+        filters: me(G.value),
+        dataFormula: A.value ? q.value : void 0,
+        customOptions: e,
+        customTimeRanges: h
+      }, v.value = !1;
+    }
+    function _e() {
+      v.value = !1;
+    }
+    const T = p(() => {
+      var t;
+      return [
+        (t = V.value) == null ? void 0 : t.name,
+        ...G.value.map((e) => e.schemaName)
+      ];
+    });
+    function de(t) {
+      var D, X, re, ie;
+      const e = M.tiles.find((j) => j.id === t.value), h = ((X = (D = e == null ? void 0 : e.widget) == null ? void 0 : D.config) == null ? void 0 : X.schemaNames) ?? [], _ = (((ie = (re = e == null ? void 0 : e.widget) == null ? void 0 : re.config) == null ? void 0 : ie.joinDatasources) ?? []).flatMap(
+        (j) => j.schemaNames ?? []
+      ), C = [...h, ..._];
+      return T.value.filter((j) => !!j).some((j) => !C.includes(j));
+    }
+    return (t, e) => {
+      const h = F("FmTextField"), _ = F("FmSelect"), C = F("FmCheckbox"), D = F("FmTimePicker"), X = F("FmButton"), re = F("FmTextarea"), ie = F("FmLabel"), j = F("FmIcon"), ze = F("FmTooltip"), s = F("FmForm"), o = F("FmDialog");
+      return u(), k(o, {
+        modelValue: v.value,
+        "onUpdate:modelValue": e[11] || (e[11] = (O) => v.value = O),
+        overlay: !0,
+        "z-index": 10
+      }, {
+        "dialog-header": b(() => [
+          Ae(z(l(r)("report.section.filter.globalFilter")), 1)
+        ]),
+        default: b(() => [
+          n(s, {
+            ref: "form",
+            class: "flex flex-col gap-2 w-[490px]"
+          }, {
+            default: b(() => {
+              var O;
+              return [
+                n(h, {
+                  modelValue: le.value,
+                  "onUpdate:modelValue": e[0] || (e[0] = (d) => le.value = d),
+                  placeholder: l(r)("report.section.filter.displayName"),
+                  label: l(r)("report.section.filter.displayName"),
+                  class: "mb-2"
+                }, null, 8, ["modelValue", "placeholder", "label"]),
+                n(et, {
+                  "model-value": V.value,
+                  items: i.value,
+                  placeholder: l(r)("report.section.schema.title"),
+                  label: l(r)("report.section.schema.title"),
+                  "onUpdate:modelValue": e[1] || (e[1] = (d) => Q(d))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                n(et, {
+                  "model-value": y.value,
+                  items: c.value,
+                  placeholder: l(r)("report.section.dimension.title"),
+                  label: l(r)("report.section.dimension.title"),
+                  "onUpdate:modelValue": e[2] || (e[2] = (d) => ye(d))
+                }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                ((O = y.value) == null ? void 0 : O.type) === l(fe).Timestamp ? (u(), k(_, {
+                  key: 0,
+                  modelValue: x.value,
+                  "onUpdate:modelValue": e[3] || (e[3] = (d) => x.value = d),
+                  items: H.value,
+                  placeholder: l(r)("report.section.filter.timeFormatter"),
+                  label: l(r)("report.section.filter.timeFormatter")
+                }, null, 8, ["modelValue", "items", "placeholder", "label"])) : L("", !0),
+                ce.value ? (u(), k(C, {
+                  key: 1,
+                  modelValue: $.value,
+                  "onUpdate:modelValue": e[4] || (e[4] = (d) => $.value = d),
+                  label: l(r)("report.section.filter.customOptions"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"])) : L("", !0),
+                ce.value && $.value ? (u(), I("div", ol, [
+                  oe.value ? (u(!0), I(Ce, { key: 0 }, Ee(B.value, (d, J) => (u(), I("div", {
+                    key: `custom-time-range-${J}`,
+                    class: "flex flex-col gap-2"
+                  }, [
+                    g("div", al, [
+                      n(h, {
+                        modelValue: d.name,
+                        "onUpdate:modelValue": (ne) => d.name = ne,
+                        label: l(r)("report.section.filter.label")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "label"]),
+                      n(D, {
+                        "model-value": w(d.startTime),
+                        label: l(r)("report.date.startingTime"),
+                        "onUpdate:modelValue": (ne) => Ue(J, "startTime", ne)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      n(D, {
+                        "model-value": w(d.endTime),
+                        label: l(r)("report.date.endingTime"),
+                        "onUpdate:modelValue": (ne) => Ue(J, "endTime", ne)
+                      }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
+                      B.value.length > 1 ? (u(), I("div", nl, [
+                        n(X, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: (ne) => Ne(J)
+                        }, null, 8, ["onClick"])
+                      ])) : L("", !0)
+                    ])
+                  ]))), 128)) : (u(), I(Ce, { key: 1 }, [
+                    g("p", rl, z(l(r)("report.section.filter.operator")), 1),
+                    pe.value.length > 0 ? (u(), k(et, {
+                      key: 0,
+                      "model-value": se.value,
+                      items: pe.value,
+                      placeholder: l(r)("report.section.filter.operator"),
+                      "onUpdate:modelValue": e[5] || (e[5] = (d) => ee(d))
+                    }, null, 8, ["model-value", "items", "placeholder"])) : L("", !0),
+                    (u(!0), I(Ce, null, Ee(U.value, (d, J) => (u(), I("div", {
+                      key: `custom-option-${J}`,
+                      class: "flex flex-col gap-2"
+                    }, [
+                      g("div", {
+                        class: Pe([
+                          "grid grid-cols-1 gap-2 p-2 sm:items-end text-fm-color-typo-primary fm-typo-en-body-lg-600 border-neutral-300 rounded-md border",
+                          "sm:grid-cols-[1fr_1.6fr_auto]"
+                        ])
+                      }, [
+                        g("span", il, z(l(r)("report.section.filter.label")), 1),
+                        n(h, {
+                          modelValue: d.label,
+                          "onUpdate:modelValue": (ne) => d.label = ne
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                        (u(), k(Ot, {
+                          key: `custom-option-value-${J}-${d.operator ?? ""}-${x.value ?? ""}`,
+                          modelValue: d.values,
+                          "onUpdate:modelValue": (ne) => d.values = ne,
+                          config: he(d.operator),
+                          option: x.value
+                        }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "option"])),
+                        U.value.length > 1 ? (u(), I("div", sl, [
+                          n(X, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: (ne) => ae(J)
+                          }, null, 8, ["onClick"])
+                        ])) : L("", !0)
+                      ])
+                    ]))), 128))
+                  ], 64)),
+                  n(X, {
+                    class: "w-full",
+                    variant: "primary",
+                    icon: "add",
+                    "icon-position": "prepend",
+                    onClick: e[6] || (e[6] = (d) => oe.value ? Te() : ke())
+                  })
+                ])) : L("", !0),
+                n(C, {
+                  modelValue: A.value,
+                  "onUpdate:modelValue": e[7] || (e[7] = (d) => A.value = d),
+                  label: l(r)("report.section.filter.advance"),
+                  value: !0
+                }, null, 8, ["modelValue", "label"]),
+                A.value ? (u(), k(re, {
+                  key: 3,
+                  modelValue: q.value,
+                  "onUpdate:modelValue": e[8] || (e[8] = (d) => q.value = d),
+                  placeholder: l(r)("report.section.filter.dataFormula")
+                }, null, 8, ["modelValue", "placeholder"])) : L("", !0),
+                n(It, {
+                  modelValue: G.value,
+                  "onUpdate:modelValue": e[9] || (e[9] = (d) => G.value = d),
+                  options: te.value
+                }, null, 8, ["modelValue", "options"]),
+                n(ie, { class: "mt-2 fm-typo-en-body-lg-600" }, {
+                  default: b(() => [
+                    Ae(z(l(r)("report.section.filter.applyWidget")), 1)
+                  ]),
+                  _: 1
+                }),
+                R.tiles.length > 0 ? (u(), I("div", ul, [
+                  (u(!0), I(Ce, null, Ee(ue.value, (d) => (u(), I("div", {
+                    key: d.value,
+                    class: "flex items-center"
+                  }, [
+                    n(C, {
+                      modelValue: N.value,
+                      "onUpdate:modelValue": e[10] || (e[10] = (J) => N.value = J),
+                      label: d.label,
+                      value: d.value
+                    }, null, 8, ["modelValue", "label", "value"]),
+                    de(d) ? (u(), k(ze, {
+                      key: 0,
+                      content: l(r)("report.section.filter.missingFilterSchema"),
+                      "z-index": 99,
+                      class: "ml-2"
+                    }, {
+                      default: b(() => [
+                        n(j, {
+                          name: "warning",
+                          class: "text-fm-color-system-error-300"
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["content"])) : L("", !0)
+                  ]))), 128))
+                ])) : (u(), k(ie, {
+                  key: 5,
+                  class: "fm-typo-en-body-lg-400",
+                  label: l(r)("report.section.filter.noWidget")
+                }, null, 8, ["label"]))
+              ];
+            }),
+            _: 1
+          }, 512)
+        ]),
+        "dialog-footer": b(() => [
+          e[12] || (e[12] = g("div", { class: "grow" }, null, -1)),
+          n(X, {
+            label: l(r)("report.common.cancel"),
+            variant: "tertiary",
+            onClick: _e
+          }, null, 8, ["label"]),
+          n(X, {
+            label: l(r)("report.common.confirm"),
+            onClick: Y
+          }, null, 8, ["label"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), ml = 8.4375, cl = 1024 ** 4, pl = {
+  MY: { rate: 4, currency: "MYR", symbol: "RM" },
+  TH: { rate: 33, currency: "THB", symbol: "฿" },
+  SG: { rate: 1.29, currency: "SGD", symbol: "S$" },
+  ID: { rate: 17900, currency: "IDR", symbol: "Rp" }
+}, vl = { rate: 1, currency: "USD", symbol: "$" };
+function dt(R, r) {
+  const a = R / cl * ml, { rate: m, currency: v, symbol: f } = pl[r] ?? vl;
+  return {
+    amount: a * m,
+    currency: v,
+    symbol: f,
+    costUsd: a
+  };
+}
+function mt(R, r) {
+  return R < 0.01 ? `< ${r}0.01` : `${r}${R.toFixed(2)}`;
+}
+const fl = { class: "flex flex-col gap-16" }, gl = {
+  key: 0,
+  class: "flex flex-col gap-8"
+}, bl = { class: "flex items-center gap-4 pb-8 border-b border-neutral-300" }, yl = ["title"], hl = {
+  key: 1,
+  class: "rounded-md border border-dashed border-neutral-300 p-12 text-center fm-typo-en-body-sm-400 text-fm-color-typo-secondary"
+}, _l = ["onClick"], wl = ["title"], Fl = {
+  key: 0,
+  class: "text-fm-color-typo-secondary"
+}, xl = { class: "text-fm-color-system-error-300" }, Cl = { class: "w-full text-left" }, Vl = /* @__PURE__ */ Ve({
+  __name: "TileDrillPanel",
+  props: {
+    report: {}
+  },
+  emits: ["add-widget"],
+  setup(R, { emit: r }) {
+    const a = R, m = r, { t: v, te: f } = Le(), M = nt(), le = rt(), { promptMessage: V } = it(), y = at(), x = p(() => {
+      const i = [];
+      let c = a.report.tiles;
+      for (const H of Be.value) {
+        const ue = c.find((te) => te.id === H);
+        if (!ue) break;
+        i.push(ue), c = ue.tiles ?? [];
+      }
+      return i;
+    });
+    we(x, (i) => {
+      i.length !== Be.value.length && (Be.value = i.map((c) => c.id));
+    });
+    const N = p(() => x.value[x.value.length - 1] ?? null), G = p(() => x.value[x.value.length - 2] ?? null), q = p(
+      () => N.value ? N.value.tiles ?? [] : a.report.tiles
+    ), A = p(() => {
+      var i;
+      return ((i = N.value) == null ? void 0 : i.id) ?? null;
+    }), $ = p(() => x.value.length === 0), U = p(() => {
+      var i;
+      return ((i = N.value) == null ? void 0 : i.tab) === !0;
+    }), B = p(() => {
+      var i;
+      return ((i = G.value) == null ? void 0 : i.tab) === !0;
+    }), se = p(
+      () => x.value.reduce((i, c) => c.tab ? i : i + 1, 1)
+    ), me = p(() => !U.value && se.value < yt), K = p(() => $.value);
+    function w(i) {
+      i.widget || (Be.value = [...Be.value, i.id]);
+    }
+    function Fe() {
+      Be.value = Be.value.slice(0, -1);
+    }
+    function ce(i) {
+      if (!i) return "";
+      const c = `report.widget.types.${i.toLowerCase()}`;
+      return f(c) ? v(c) : Ge(v, f, i, "other");
+    }
+    function oe(i, c) {
+      return i.widget ? i.widget.title ? ce(i.widget.title) : v("report.editor.widget", { index: c + 1 }) : i.tabTitle !== void 0 ? i.tabTitle || v("report.editor.tab", { index: c + 1 }) : i.tab ? v("report.editor.tabGroup") : v("report.editor.group");
+    }
+    function pe(i, c) {
+      return !i.widget && U.value ? i.tabTitle || v("report.editor.tab", { index: c + 1 }) : oe(i, c);
+    }
+    function ge(i) {
+      var c;
+      return ((c = i.tiles) == null ? void 0 : c.length) ?? 0;
+    }
+    const he = p(
+      () => x.value.map((i, c) => oe(i, c)).join(" › ")
+    );
+    function E(i, c) {
+      bt.value = A.value, y.editingTileIndex = c, y.editingTile = JSON.parse(JSON.stringify(i)), M.push({ name: "tileEditor", query: le.query });
+    }
+    function W(i, c) {
+      q.value.splice(c + 1, 0, Mt(i));
+    }
+    async function Z(i, c) {
+      var te;
+      if (!await V({
+        title: v("report.editor.deleteWidget"),
+        message: v("report.editor.deleteWidgetConfirm", { title: pe(i, c) })
+      })) return;
+      const ue = st(i);
+      q.value.splice(c, 1), (te = a.report.globalFilters) == null || te.forEach((Q) => {
+        var ye;
+        Q.tileIds = (ye = Q.tileIds) == null ? void 0 : ye.filter((ve) => !ue.includes(ve));
+      });
+    }
+    function be() {
+      N.value && (N.value.tiles || (N.value.tiles = []), N.value.tiles.push(qt(N.value.tiles.length + 1)));
+    }
+    function xe() {
+      q.value.push(Et());
+    }
+    function ee() {
+      q.value.push(Pt());
+    }
+    function ke(i) {
+      var H;
+      const c = Number((H = i.size) == null ? void 0 : H.width);
+      i.size || (i.size = { width: 12, height: 12 }), !Number.isFinite(c) || c < 1 ? i.size.width = 1 : c > 12 && (i.size.width = 12);
+    }
+    const ae = P(!1), Te = P(null), Ne = P([]);
+    function Ue(i) {
+      const c = [
+        { parentId: null, label: v("report.editor.topLevel"), level: 1 }
+      ], H = (te, Q, ye) => {
+        let ve = 0;
+        te.forEach((Y) => {
+          var _e;
+          if (!Y.widget)
+            if (Y.tab) {
+              const T = `${ye}${v("report.editor.tabGroup")}`;
+              (_e = Y.tiles) == null || _e.forEach((de, t) => {
+                const e = `${T} › ${de.tabTitle || v("report.editor.tab", { index: t + 1 })}`;
+                c.push({ parentId: de.id, label: e, level: Q + 1 }), H(de.tiles ?? [], Q + 1, `${e} › `);
+              });
+            } else {
+              ve += 1;
+              const T = `${ye}${v("report.editor.group")} ${ve}`;
+              c.push({ parentId: Y.id, label: T, level: Q + 1 }), H(Y.tiles ?? [], Q + 1, `${T} › `);
+            }
+        });
+      };
+      H(a.report.tiles, 1, "");
+      const ue = new Set(st(i));
+      return c.filter(
+        (te) => te.parentId !== A.value && !(te.parentId && ue.has(te.parentId)) && zt(i, te.level)
+      );
+    }
+    function $e(i) {
+      Te.value = i, Ne.value = Ue(i), ae.value = !0;
+    }
+    function Se(i) {
+      const c = Te.value;
+      if (!c) return;
+      const H = q.value.indexOf(c);
+      H >= 0 && q.value.splice(H, 1), Lt(a.report.tiles, i.parentId).push(c), ae.value = !1, Te.value = null;
+    }
+    return (i, c) => {
+      const H = F("FmButton"), ue = F("FmTextField"), te = F("FmIcon"), Q = F("FmMenuItem"), ye = F("FmMenu"), ve = F("FmList"), Y = F("FmListItem"), _e = F("FmDialog");
+      return u(), I("div", fl, [
+        $.value ? L("", !0) : (u(), I("div", gl, [
+          g("div", bl, [
+            n(H, {
+              icon: "arrow_back",
+              variant: "tertiary",
+              class: "-ml-8",
+              onClick: Fe
+            }),
+            g("p", {
+              class: "fm-typo-en-body-md-600 line-clamp-1 overflow-hidden break-all min-w-0 grow text-left",
+              title: he.value
+            }, z(he.value), 9, yl)
+          ]),
+          B.value && N.value ? (u(), k(ue, {
+            key: 0,
+            modelValue: N.value.tabTitle,
+            "onUpdate:modelValue": c[0] || (c[0] = (T) => N.value.tabTitle = T),
+            label: l(v)("report.editor.tabName"),
+            placeholder: l(v)("report.editor.tabName")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : L("", !0),
+          !B.value && N.value ? (u(), k(ue, {
+            key: 1,
+            modelValue: N.value.size.width,
+            "onUpdate:modelValue": c[1] || (c[1] = (T) => N.value.size.width = T),
+            modelModifiers: { number: !0 },
+            type: "number",
+            label: l(v)("report.editor.width"),
+            onBlur: c[2] || (c[2] = (T) => ke(N.value))
+          }, null, 8, ["modelValue", "label"])) : L("", !0)
+        ])),
+        q.value.length === 0 ? (u(), I("div", hl, z(l(v)("report.editor.emptyLevel")), 1)) : (u(), k(ve, { key: 2 }, {
+          default: b(() => [
+            n(l(gt), {
+              list: q.value,
+              "item-key": "id",
+              class: "flex flex-col gap-2 cursor-grab",
+              handle: ".handle"
+            }, {
+              item: b(({ element: T, index: de }) => [
+                g("div", {
+                  class: Pe(["flex items-center gap-8 px-12 py-8 border rounded-md border-neutral-300 hover:bg-fm-color-opacity-sm", T.widget ? "cursor-grab" : "cursor-pointer"]),
+                  onClick: (t) => w(T)
+                }, [
+                  n(te, {
+                    name: "drag_handle",
+                    class: "handle shrink-0 !cursor-grab"
+                  }),
+                  g("p", {
+                    class: "flex-1 min-w-0 truncate text-left fm-typo-en-body-lg-400",
+                    title: pe(T, de)
+                  }, [
+                    Ae(z(pe(T, de)) + " ", 1),
+                    T.widget ? L("", !0) : (u(), I("span", Fl, " · " + z(ge(T)), 1))
+                  ], 8, wl),
+                  T.widget ? L("", !0) : (u(), k(te, {
+                    key: 0,
+                    name: "chevron_right",
+                    class: "shrink-0"
+                  })),
+                  n(ye, {
+                    trigger: "click",
+                    shift: !0,
+                    "stop-click-propagation": !0,
+                    class: "shrink-0"
+                  }, {
+                    "menu-button": b(() => [
+                      n(H, {
+                        "append-icon": "more_vert",
+                        variant: "tertiary"
+                      })
+                    ]),
+                    default: b(() => [
+                      T.widget ? (u(), k(Q, {
+                        key: 0,
+                        label: l(v)("report.common.edit"),
+                        onClick: (t) => E(T, de)
+                      }, null, 8, ["label", "onClick"])) : L("", !0),
+                      T.tab ? L("", !0) : (u(), k(Q, {
+                        key: 1,
+                        label: l(v)("report.editor.moveTo"),
+                        onClick: (t) => $e(T)
+                      }, null, 8, ["label", "onClick"])),
+                      n(Q, {
+                        label: l(v)("report.common.duplicate"),
+                        onClick: (t) => W(T, de)
+                      }, null, 8, ["label", "onClick"]),
+                      n(Q, {
+                        onClick: (t) => Z(T, de)
+                      }, {
+                        label: b(() => [
+                          g("p", xl, z(l(v)("report.common.remove")), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ], 10, _l)
+              ]),
+              _: 1
+            }, 8, ["list"])
+          ]),
+          _: 1
+        })),
+        U.value ? (u(), k(H, {
+          key: 3,
+          label: l(v)("report.editor.addTab"),
+          variant: "secondary",
+          icon: "add",
+          "icon-position": "prepend",
+          "border-color": l(Oe).ColorPrimary,
+          "text-color": l(Oe).ColorPrimary,
+          onClick: be
+        }, null, 8, ["label", "border-color", "text-color"])) : (u(), k(ye, {
+          key: 4,
+          trigger: "click",
+          shift: !0
+        }, {
+          "menu-button": b(() => [
+            n(H, {
+              label: l(v)("report.common.add"),
+              variant: "secondary",
+              icon: "add",
+              "icon-position": "prepend",
+              class: "w-full",
+              "border-color": l(Oe).ColorPrimary,
+              "text-color": l(Oe).ColorPrimary
+            }, null, 8, ["label", "border-color", "text-color"])
+          ]),
+          default: b(() => [
+            n(Q, {
+              label: l(v)("report.editor.addWidget"),
+              onClick: c[3] || (c[3] = (T) => m("add-widget", A.value))
+            }, null, 8, ["label"]),
+            me.value ? (u(), k(Q, {
+              key: 0,
+              label: l(v)("report.editor.addGroup"),
+              onClick: xe
+            }, null, 8, ["label"])) : L("", !0),
+            K.value ? (u(), k(Q, {
+              key: 1,
+              label: l(v)("report.editor.addTabGroup"),
+              onClick: ee
+            }, null, 8, ["label"])) : L("", !0)
+          ]),
+          _: 1
+        })),
+        n(_e, {
+          modelValue: ae.value,
+          "onUpdate:modelValue": c[4] || (c[4] = (T) => ae.value = T),
+          overlay: !0,
+          "z-index": 10
+        }, {
+          "dialog-header": b(() => [
+            Ae(z(l(v)("report.editor.moveTo")), 1)
+          ]),
+          default: b(() => [
+            n(ve, null, {
+              default: b(() => [
+                (u(!0), I(Ce, null, Ee(Ne.value, (T) => (u(), k(Y, {
+                  key: T.parentId ?? "root",
+                  onClick: (de) => Se(T)
+                }, {
+                  default: b(() => [
+                    g("p", Cl, z(T.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+}), kl = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Tl = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, $l = { class: "flex items-center gap-8" }, Sl = {
+  key: 2,
+  class: "flex flex-col gap-8 rounded-md border border-fm-color-border px-16 py-12"
+}, Dl = { class: "fm-typo-en-body-sm-400" }, Ol = { class: "fm-typo-en-body-sm-400 font-bold" }, Il = { class: "space-y-1 fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, Rl = { class: "flex flex-col gap-24 top-0 bg-fm-color-neutral-white z-10" }, Nl = { class: "flex items-center gap-1 max-w-[195px] w-[195px]" }, Ul = { class: "line-clamp-2 overflow-hidden max-w-[195px] w-[195px]" }, ct = /* @__PURE__ */ Ve({
+  __name: "ReportEditorTab",
+  props: /* @__PURE__ */ Ie({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Ie(["hideConfiguration"], ["update:modelValue"]),
+  setup(R, { emit: r }) {
+    const a = Re(R, "modelValue"), { breakpoints: m } = je(), v = R, f = r, M = nt(), le = rt(), V = P(), {
+      currentSelectWidgetType: y,
+      categories: x,
+      editingTile: N,
+      editingTileIndex: G,
+      editingGlobalFilter: q,
+      editingGlobalFilterIndex: A
+    } = Me(at()), { schemas: $ } = Me(At()), { globalFilters: U } = Me(Ye()), { getGlobalFilterLabel: B } = Ye(), { promptMessage: se } = it(), me = P(!1), K = P(!1), { t: w, te: Fe, locale: ce } = Le(), oe = P(void 0), pe = p(() => {
+      const s = Xe(a.value.tiles).flatMap((o) => {
+        var J;
+        const O = o.widget.config.schemaNames ?? [], d = ((J = o.widget.config.joinDatasources) == null ? void 0 : J.flatMap((ne) => ne.schemaNames ?? [])) ?? [];
+        return [...O, ...d];
+      });
+      return [...new Set(s)].reduce((o, O) => {
+        const d = $.value.find((J) => J.name === O);
+        return d && o.push(d), o;
+      }, []);
+    }), ge = P(null);
+    function he(s) {
+      ge.value = s, K.value = !0;
+    }
+    we(
+      () => y.value,
+      () => {
+        y.value !== void 0 && (oe.value = Rt(y.value), N.value = oe.value, G.value = -1, bt.value = ge.value, M.push({
+          name: "tileEditor",
+          query: le.query
+        }));
+      },
+      { immediate: !0 }
+    ), we(
+      () => a.value.tiles,
+      (s) => {
+        Gt(s);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const E = [
+      {
+        label: "report.common.edit",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (s) => {
+          var o;
+          A.value = s, q.value = JSON.parse(JSON.stringify((o = a.value.globalFilters) == null ? void 0 : o[s])), me.value = !0;
+        }
+      },
+      {
+        label: "report.common.duplicate",
+        selected: !1,
+        variant: "tertiary",
+        onClick: (s) => {
+          var d;
+          const o = (d = a.value.globalFilters) == null ? void 0 : d[s];
+          if (!o) return;
+          const O = JSON.parse(JSON.stringify(o));
+          a.value.globalFilters || (a.value.globalFilters = []), a.value.globalFilters.push(O);
+        }
+      },
+      {
+        label: "report.common.remove",
+        selected: !1,
+        variant: "destructive",
+        onClick: async (s) => {
+          var d, J;
+          const o = (d = a.value.globalFilters) == null ? void 0 : d[s];
+          if (!o) return;
+          await se({
+            title: w("report.editor.deleteWidget"),
+            message: w("report.editor.deleteWidgetConfirm", {
+              title: B(o)
+            })
+          }) && ((J = a.value.globalFilters) == null || J.splice(s, 1));
+        }
+      }
+    ], W = p(() => x.value.map((s) => ({
+      label: w(`report.category.${s.name}`),
+      value: s.id
+    }))), { sessionUser: Z } = Kt(), be = p(
+      () => {
+        var s, o, O, d;
+        return ((o = (s = Z.value) == null ? void 0 : s.role) == null ? void 0 : o.isAdmin) === !0 || ((d = (O = Z.value) == null ? void 0 : O.role) == null ? void 0 : d.isStaff) === !0;
+      }
+    ), xe = p({
+      get: () => a.value.queryVersion === "v2",
+      set: (s) => {
+        a.value.queryVersion = s ? "v2" : "v1", s ? a.value.queryDatasource = a.value.queryDatasource ?? He.Postgres : a.value.queryDatasource = void 0;
+      }
+    }), ee = [
+      { label: w("report.common.postgresql"), value: He.Postgres },
+      { label: w("report.common.bigquery"), value: He.BigQuery }
+    ], ke = [
+      { label: w("report.common.noBatch"), value: "none" },
+      { label: w("report.common.days"), value: "days" },
+      { label: w("report.common.locations"), value: "locations" }
+    ], ae = p({
+      get: () => {
+        var s, o;
+        return (s = a.value.batch) != null && s.days ? "days" : (o = a.value.batch) != null && o.locations ? "locations" : "none";
+      },
+      set: (s) => {
+        var o, O;
+        s === "none" ? a.value.batch = void 0 : s === "days" ? a.value.batch = { days: ((o = a.value.batch) == null ? void 0 : o.days) || 1 } : s === "locations" && (a.value.batch = { locations: ((O = a.value.batch) == null ? void 0 : O.locations) || 10 });
+      }
+    }), Te = p({
+      get: () => {
+        var s, o;
+        if (ae.value === "days") return ((s = a.value.batch) == null ? void 0 : s.days) ?? 1;
+        if (ae.value === "locations") return ((o = a.value.batch) == null ? void 0 : o.locations) ?? 1;
+      },
+      set: (s) => {
+        s && (ae.value === "days" ? a.value.batch = { days: s } : ae.value === "locations" && (a.value.batch = { locations: s }));
+      }
+    }), Ne = p({
+      get: () => Ge(w, Fe, a.value.name, "other"),
+      set: (s) => {
+        a.value.name = s;
+      }
+    }), { country: Ue } = Me(Qt()), {
+      dateRange: $e,
+      compareDateRange: Se,
+      timeRange: i,
+      selectedLocationIds: c,
+      businessDataVersion: H,
+      restaurants: ue,
+      warehouses: te
+    } = Me(Yt()), { isAllGlobalFiltersLoaded: Q } = Me(Ye()), ye = p(
+      () => a.value.queryVersion === "v2" && a.value.queryDatasource === He.BigQuery
+    ), ve = p(() => ye.value && be.value), Y = P(null), _e = P(!1), T = p(() => {
+      const s = $e.value.startDate ?? $e.value.endDate;
+      return s ? {
+        startDate: s,
+        endDate: s
+      } : $e.value;
+    }), de = p(() => {
+      const s = Se.value.startDate ?? Se.value.endDate;
+      return s ? {
+        startDate: s,
+        endDate: s
+      } : Se.value;
+    }), t = p(() => {
+      const s = a.value.batch;
+      if (!s) return 1;
+      if (s.locations) {
+        const o = ue.value.length + te.value.length;
+        return Math.max(1, Math.ceil(o / s.locations));
+      }
+      return 1;
+    }), e = p(() => {
+      if (Y.value == null || Y.value === 0) return null;
+      const s = Y.value * t.value;
+      return dt(s, Ue.value);
+    }), h = p(() => Y.value == null || Y.value === 0 ? null : dt(Y.value, Ue.value)), _ = p(() => e.value ? mt(e.value.amount, e.value.symbol) : ""), C = p(() => h.value ? mt(h.value.amount, h.value.symbol) : ""), D = p(() => t.value === 1 ? w("report.common.estimatedCostBatchSingular") : w("report.common.estimatedCostBatchPlural")), X = p(() => _e.value ? "..." : !_.value || !C.value ? "--" : w("report.common.estimatedCostFormula", {
+      batchCount: t.value,
+      batchLabel: D.value,
+      baseCost: C.value,
+      totalCost: _.value
+    }));
+    let re = [];
+    const ie = Xt(async () => {
+      if (!ve.value) return;
+      const s = Xe(a.value.tiles).filter(
+        (o) => {
+          var O;
+          return ((O = o.widget.config.schemaNames) == null ? void 0 : O.length) > 0;
+        }
+      );
+      if (s.length === 0) {
+        Y.value = null;
+        return;
+      }
+      _e.value = !0, re.forEach((o) => o.abort()), re = [];
+      try {
+        const o = await Promise.all(
+          s.map((O) => {
+            const d = new AbortController();
+            return re.push(d), Wt({
+              widget: O.widget,
+              signal: d.signal,
+              tileId: O.id,
+              scopedDateRange: T.value,
+              scopedCompareDateRange: de.value
+            });
+          })
+        );
+        Y.value = o.reduce((O, d) => O + (d.totalBytesProcessed ?? 0), 0);
+      } catch (o) {
+        o.code !== "ERR_CANCELED" && (Y.value = null);
+      } finally {
+        _e.value = !1;
+      }
+    }, 1e3);
+    we(
+      [
+        () => a.value.tiles,
+        () => a.value.queryVersion,
+        () => a.value.queryDatasource,
+        () => a.value.batch,
+        () => $e.value,
+        () => i.value,
+        () => Se.value,
+        () => c.value,
+        () => H.value,
+        () => Q.value
+      ],
+      () => {
+        ie();
+      },
+      { deep: !0 }
+    ), vt(() => {
+      ie();
+    }), Tt(() => {
+      re.forEach((s) => s.abort());
+    });
+    function j(s) {
+      var o;
+      return !((o = s.tileIds) != null && o.length);
+    }
+    function ze(s) {
+      return !pe.value.find((o) => o.name === s.schemaName);
+    }
+    return we(
+      () => a.value.globalFilters,
+      (s) => {
+        U.value = JSON.parse(JSON.stringify(s || []));
+      },
+      { deep: !0, immediate: !0 }
+    ), (s, o) => {
+      const O = F("FmTextField"), d = F("FmSelect"), J = F("FmSwitch"), ne = F("FmButton"), Je = F("FmIcon"), Ke = F("FmTooltip"), _t = F("FmMenuItem"), wt = F("FmMenu"), Ft = F("FmListItem"), xt = F("FmList"), Ct = F("FmForm");
+      return u(), k($t(l(m).lg || l(m).md ? tl : ll), {
+        "model-value": v.hideConfiguration,
+        "onUpdate:modelValue": o[12] || (o[12] = (S) => f("hideConfiguration", S))
+      }, {
+        default: b(() => [
+          n(dl, {
+            "is-open": me.value,
+            "onUpdate:isOpen": o[0] || (o[0] = (S) => me.value = S),
+            "global-filter": l(q),
+            tiles: l(Xe)(a.value.tiles),
+            schemas: pe.value,
+            "onUpdate:globalFilter": o[1] || (o[1] = (S) => {
+              S && (a.value.globalFilters || (a.value.globalFilters = []), typeof l(A) == "number" && l(A) >= 0 ? a.value.globalFilters[l(A)] = S : a.value.globalFilters.push(S));
+            })
+          }, null, 8, ["is-open", "global-filter", "tiles", "schemas"]),
+          n(Zt, {
+            modelValue: l(y),
+            "onUpdate:modelValue": o[2] || (o[2] = (S) => ft(y) ? y.value = S : null),
+            "is-open": K.value,
+            "onUpdate:isOpen": o[3] || (o[3] = (S) => K.value = S)
+          }, null, 8, ["modelValue", "is-open"]),
+          n(Ct, {
+            ref_key: "form",
+            ref: V,
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: b(() => [
+              n(We, { class: "border-solid" }, {
+                header: b(() => [
+                  g("p", null, z(l(w)("report.editor.reportInfo")), 1),
+                  o[13] || (o[13] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: b(() => [
+                  g("div", kl, [
+                    n(O, {
+                      modelValue: Ne.value,
+                      "onUpdate:modelValue": o[4] || (o[4] = (S) => Ne.value = S),
+                      label: l(w)("report.common.name"),
+                      placeholder: l(w)("report.common.name")
+                    }, null, 8, ["modelValue", "label", "placeholder"]),
+                    (u(), k(d, {
+                      key: `category-${l(ce)}`,
+                      modelValue: a.value.category,
+                      "onUpdate:modelValue": o[5] || (o[5] = (S) => a.value.category = S),
+                      label: l(w)("report.common.category"),
+                      items: W.value
+                    }, null, 8, ["modelValue", "label", "items"])),
+                    n(O, {
+                      modelValue: a.value.description,
+                      "onUpdate:modelValue": o[6] || (o[6] = (S) => a.value.description = S),
+                      label: l(w)("report.common.description"),
+                      placeholder: l(w)("report.common.description")
+                    }, null, 8, ["modelValue", "label", "placeholder"])
+                  ])
+                ]),
+                _: 1
+              }),
+              n(We, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: b(() => [
+                  g("p", null, z(l(w)("report.editor.advancedUsage")), 1),
+                  o[14] || (o[14] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: b(() => [
+                  g("div", Tl, [
+                    g("div", $l, [
+                      o[15] || (o[15] = g("span", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, "V2", -1)),
+                      n(J, {
+                        modelValue: xe.value,
+                        "onUpdate:modelValue": o[7] || (o[7] = (S) => xe.value = S)
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    xe.value && be.value ? (u(), k(d, {
+                      key: 0,
+                      modelValue: a.value.queryDatasource,
+                      "onUpdate:modelValue": o[8] || (o[8] = (S) => a.value.queryDatasource = S),
+                      label: l(w)("report.common.queryDatasource"),
+                      items: ee
+                    }, null, 8, ["modelValue", "label"])) : L("", !0),
+                    n(d, {
+                      modelValue: ae.value,
+                      "onUpdate:modelValue": o[9] || (o[9] = (S) => ae.value = S),
+                      label: l(w)("report.common.batch"),
+                      items: ke
+                    }, null, 8, ["modelValue", "label"]),
+                    ae.value !== "none" ? (u(), k(O, {
+                      key: 1,
+                      modelValue: Te.value,
+                      "onUpdate:modelValue": o[10] || (o[10] = (S) => Te.value = S),
+                      modelModifiers: { number: !0 },
+                      label: ae.value === "days" ? l(w)("report.common.days") : l(w)("report.common.locations"),
+                      type: "number"
+                    }, null, 8, ["modelValue", "label"])) : L("", !0),
+                    ve.value ? (u(), I("div", Sl, [
+                      g("span", Dl, z(l(w)("report.common.estimatedBqCost")), 1),
+                      g("p", Ol, z(X.value), 1),
+                      g("div", Il, [
+                        g("div", null, "* " + z(l(w)("report.common.estimatedCostGuidelineBigQuery")), 1),
+                        g("div", null, "* " + z(l(w)("report.common.estimatedCostGuidelineDateRange")), 1),
+                        g("div", null, "* " + z(l(w)("report.common.estimatedCostGuidelineLocationBatch")), 1)
+                      ])
+                    ])) : L("", !0)
+                  ])
+                ]),
+                _: 1
+              }),
+              n(We, {
+                class: "border-solid",
+                "is-open": !1
+              }, {
+                header: b(() => [
+                  g("p", null, z(l(w)("report.section.filter.globalFilter")), 1),
+                  o[16] || (o[16] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: b(() => [
+                  g("div", Rl, [
+                    n(ne, {
+                      label: l(w)("report.section.filter.addGlobalFilter"),
+                      variant: "secondary",
+                      icon: "add",
+                      "icon-position": "prepend",
+                      "border-color": l(Oe).ColorPrimary,
+                      "text-color": l(Oe).ColorPrimary,
+                      onClick: o[11] || (o[11] = () => {
+                        A.value = null, q.value = null, me.value = !0;
+                      })
+                    }, null, 8, ["label", "border-color", "text-color"]),
+                    n(xt, null, {
+                      default: b(() => [
+                        n(l(gt), {
+                          list: a.value.globalFilters,
+                          "item-key": "`${element.schemaName}-${element.name}`",
+                          class: "flex flex-col gap-2 cursor-grab",
+                          handle: ".handle"
+                        }, {
+                          item: b(({ element: S, index: Vt }) => [
+                            n(Ft, { class: "!cursor-grab border rounded-md border-neutral-300" }, {
+                              default: b(() => [
+                                n(Je, {
+                                  name: "drag_handle",
+                                  class: "handle"
+                                }),
+                                g("div", Nl, [
+                                  n(Ke, {
+                                    "z-index": 99,
+                                    content: l(B)(S),
+                                    class: "handle"
+                                  }, {
+                                    default: b(() => [
+                                      g("p", Ul, z(l(B)(S)), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["content"]),
+                                  ze(S) ? (u(), k(Ke, {
+                                    key: 0,
+                                    content: l(w)("report.section.filter.missingSchema"),
+                                    "z-index": 99
+                                  }, {
+                                    default: b(() => [
+                                      n(Je, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-error-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : j(S) ? (u(), k(Ke, {
+                                    key: 1,
+                                    content: l(w)("report.section.filter.missingTileIds"),
+                                    "z-index": 99
+                                  }, {
+                                    default: b(() => [
+                                      n(Je, {
+                                        name: "warning",
+                                        class: "text-fm-color-system-warning-300"
+                                      })
+                                    ]),
+                                    _: 1
+                                  }, 8, ["content"])) : L("", !0)
+                                ]),
+                                o[17] || (o[17] = g("div", { class: "grow" }, null, -1)),
+                                n(wt, {
+                                  trigger: "click",
+                                  shift: !0,
+                                  "stop-click-propagation": !0
+                                }, {
+                                  "menu-button": b(() => [
+                                    n(ne, {
+                                      "append-icon": "more_vert",
+                                      variant: "tertiary"
+                                    })
+                                  ]),
+                                  default: b(() => [
+                                    (u(), I(Ce, null, Ee(E, (Qe, kt) => n(_t, {
+                                      key: kt,
+                                      onClick: (Yl) => Qe.onClick(Vt)
+                                    }, {
+                                      label: b(() => [
+                                        g("p", {
+                                          class: Pe(
+                                            Qe.variant === "destructive" ? " text-fm-color-system-error-300" : ""
+                                          )
+                                        }, z(l(w)(Qe.label)), 3)
+                                      ]),
+                                      _: 2
+                                    }, 1032, ["onClick"])), 64))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 1
+                        }, 8, ["list"])
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              n(We, { class: "border-solid" }, {
+                header: b(() => [
+                  g("p", null, z(l(w)("report.editor.widgets")), 1),
+                  o[18] || (o[18] = g("div", { class: "grow" }, null, -1))
+                ]),
+                content: b(() => [
+                  n(Vl, {
+                    report: a.value,
+                    onAddWidget: he
+                  }, null, 8, ["report"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Bl = { class: "h-full w-full overflow-x-hidden" }, Ml = { class: "flex flex-col bg-fm-color-neutral-white w-[400px]" }, ql = { class: "flex bg-fm-color-neutral-white w-[88px]" }, El = {
+  key: 1,
+  class: "w-full overflow-y-auto"
+}, Pl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, Ll = { class: "col-span-12 mb-4 flex flex-wrap gap-2 pb-2" }, zl = { key: 2 }, Al = {
+  key: 0,
+  class: "grid grid-cols-12 gap-[16px]"
+}, Gl = { class: "col-span-12 mb-4 flex flex-wrap gap-2 pb-2" }, Wl = {
+  key: 3,
+  class: "h-full w-full flex items-start justify-center bg-fm-color-neutral-white py-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, Hl = {
+  key: 0,
+  class: "w-full grid grid-cols-12 gap-[24px] p-24"
+}, jl = /* @__PURE__ */ Ve({
+  __name: "ReportEditorViewport",
+  props: /* @__PURE__ */ Ie({
+    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__ */ Ie(["hideConfiguration"], ["update:modelValue"]),
+  setup(R, { emit: r }) {
+    const { breakpoints: a } = je(), m = Re(R, "modelValue"), v = p(() => {
+      var y;
+      return Ht((y = m.value) == null ? void 0 : y.tiles);
+    }), f = R, M = p(() => f.previewWidth > 0 && f.previewHeight > 0), le = p(() => a.value.sm || a.value.xs), V = r;
+    return (y, x) => {
+      const N = F("FmCircularProgress"), G = F("FmButton"), q = F("FmMenuDivider"), A = F("FmCard");
+      return u(), I("div", Bl, [
+        m.value ? (u(), I(Ce, { key: 1 }, [
+          M.value ? L("", !0) : (u(), k(Nt, {
+            key: 0,
+            "model-value": !f.hideConfiguration
+          }, {
+            right: b(() => [
+              g("div", Ml, [
+                m.value ? (u(), k(ct, {
+                  key: 0,
+                  modelValue: m.value,
+                  "onUpdate:modelValue": x[0] || (x[0] = ($) => m.value = $),
+                  "hide-configuration": f.hideConfiguration,
+                  onHideConfiguration: x[1] || (x[1] = ($) => V("hideConfiguration", $))
+                }, null, 8, ["modelValue", "hide-configuration"])) : L("", !0)
+              ])
+            ]),
+            left: b(() => [
+              g("div", ql, [
+                n(G, {
+                  variant: "secondary",
+                  icon: "keyboard_double_arrow_right",
+                  "border-color": l(Oe).ColorPrimary,
+                  "text-color": l(Oe).ColorPrimary,
+                  class: "m-24 my-16",
+                  size: "md",
+                  onClick: x[2] || (x[2] = ($) => V("hideConfiguration", !f.hideConfiguration))
+                }, null, 8, ["border-color", "text-color"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value"])),
+          n(q, {
+            vertical: "",
+            style: { margin: "0px" }
+          }),
+          !le.value && !M.value ? (u(), I("div", El, [
+            m.value.tiles.length > 0 ? (u(), I("div", Pl, [
+              g("div", Ll, [
+                n(ut)
+              ]),
+              n(Ze, {
+                tiles: m.value.tiles,
+                "report-id": m.value.id || "editing",
+                "leaf-index-by-id": v.value,
+                "hide-export": !0
+              }, null, 8, ["tiles", "report-id", "leaf-index-by-id"])
+            ])) : (u(), k(tt, { key: 1 }))
+          ])) : le.value && !M.value ? (u(), I("div", zl, [
+            n(A, { class: "px-5 pb-28" }, {
+              default: b(() => [
+                m.value.tiles.length > 0 ? (u(), I("div", Al, [
+                  g("div", Gl, [
+                    n(ut)
+                  ]),
+                  n(Ze, {
+                    tiles: m.value.tiles,
+                    "report-id": m.value.id || "editing",
+                    "leaf-index-by-id": v.value,
+                    "hide-export": !0
+                  }, null, 8, ["tiles", "report-id", "leaf-index-by-id"])
+                ])) : (u(), k(tt, { key: 1 }))
+              ]),
+              _: 1
+            }),
+            m.value ? (u(), k(ct, {
+              key: 0,
+              modelValue: m.value,
+              "onUpdate:modelValue": x[3] || (x[3] = ($) => m.value = $),
+              "hide-configuration": f.hideConfiguration,
+              onHideConfiguration: x[4] || (x[4] = ($) => {
+                V("hideConfiguration", $);
+              })
+            }, null, 8, ["modelValue", "hide-configuration"])) : L("", !0)
+          ])) : (u(), I("div", Wl, [
+            g("div", {
+              style: lt({
+                transformOrigin: "top center",
+                transform: `scale(${f.previewScale})`
+              })
+            }, [
+              g("div", {
+                class: "overflow-y-auto bg-white rounded-lg",
+                style: lt({
+                  width: f.previewWidth + "px",
+                  height: f.previewHeight + "px"
+                })
+              }, [
+                m.value.tiles.length > 0 ? (u(), I("div", Hl, [
+                  n(Ze, {
+                    tiles: m.value.tiles,
+                    "report-id": m.value.id || "editing",
+                    "leaf-index-by-id": v.value,
+                    "hide-export": !0,
+                    "custom-screen-width": f.previewWidth
+                  }, null, 8, ["tiles", "report-id", "leaf-index-by-id", "custom-screen-width"])
+                ])) : (u(), k(tt, { key: 1 }))
+              ], 4)
+            ], 4)
+          ]))
+        ], 64)) : (u(), k(N, { key: 0 }))
+      ]);
+    };
+  }
+}), Jl = { class: "flex items-center gap-4" }, Kl = { class: "flex justify-center items-center gap-2 w-full" }, Ql = { class: "flex gap-4" }, po = /* @__PURE__ */ Ve({
+  __name: "ReportEditor",
+  setup(R) {
+    const r = nt(), a = rt(), m = at(), { promptLoader: v } = Jt(), { t: f, te: M } = Le(), { currentReport: le, editingReport: V } = Me(m), { breakpoints: y } = je(), x = p(() => {
+      var E;
+      return !((E = V.value) != null && E.editable);
+    }), N = p(() => {
+      var E;
+      return ((E = V.value) == null ? void 0 : E.name) ?? f("report.editor.newReport");
+    }), G = p(() => Ge(f, M, N.value, "other")), q = ht(), { promptMessage: A } = it(), $ = P(!1), U = p(() => [
+      { label: f("report.common.cancel"), value: "cancel", isPrimary: !1 },
+      { label: f("report.common.save"), value: "save", isPrimary: !0, prependIcon: "download" }
+    ]);
+    async function B() {
+      if (!V.value || V.value.tiles.length === 0) {
+        q.open({ message: f("report.messages.noWidget"), type: "error" });
+        return;
+      }
+      if (jt(V.value.tiles) > yt) {
+        q.open({ message: f("report.messages.tooDeepNesting"), type: "error" });
+        return;
+      }
+      const E = x.value ? f("report.common.clone") : f("report.common.save");
+      if (await A({
+        title: `${f("report.messages.saveReport")}`,
+        message: f("report.messages.confirmAction", { action: E, name: G.value })
+      }))
+        try {
+          await v(async () => {
+            if (x.value) {
+              const Z = JSON.parse(JSON.stringify(V.value));
+              Z.editable = !0, Z.id = "", Z.name = `${Z.name} ${f("report.common.duplicate")}`, Z.isDefault = !1, await m.createOrUpdateReport(Z);
+            } else
+              V.value && await m.createOrUpdateReport(V.value);
+            r.push({
+              name: "reportView",
+              query: a.query
+            });
+          });
+        } catch (Z) {
+          console.log(Z), q.open({
+            message: f("report.messages.failedToAction", { action: E }),
+            type: "error"
+          });
+        }
+    }
+    async function se() {
+      var W;
+      if (!V.value) return;
+      await A({
+        title: f("report.common.report", 1),
+        message: f("report.editor.notSaved", { name: (W = V.value) == null ? void 0 : W.name })
+      }) && (V.value = JSON.parse(JSON.stringify(le.value)), r.back());
+    }
+    vt(() => {
+      V.value || r.push({ name: "reports" });
+    });
+    const me = [
+      {
+        labelKey: "report.common.default",
+        width: void 0,
+        height: void 0
+      },
+      {
+        labelKey: "report.editor.devices.desktop",
+        width: 1920,
+        height: 1080
+      },
+      {
+        labelKey: "report.editor.devices.tablet",
+        width: 820,
+        height: 1180
+      },
+      {
+        labelKey: "report.editor.devices.phone",
+        width: 390,
+        height: 859
+      }
+    ], K = P(me[0]), w = P(!1), Fe = p(() => w.value ? Math.max(K.value.width || 0, K.value.height || 0) : Math.min(K.value.width || 0, K.value.height || 0)), ce = p(() => w.value ? Math.min(K.value.width || 0, K.value.height || 0) : Math.max(K.value.width || 0, K.value.height || 0)), oe = p(() => window.innerHeight - 72 - 56), pe = p(() => {
+      if (!Fe.value) return 1;
+      let E = (oe.value - 48) / Fe.value, W = ce.value * E;
+      return W > window.innerWidth && (E = window.innerWidth / ce.value, W = ce.value * E), E > 1 ? 1 : E;
+    });
+    function ge(E) {
+      K.value = E;
+    }
+    function he() {
+      w.value = !w.value;
+    }
+    return (E, W) => {
+      const Z = F("FmTooltip"), be = F("FmButton"), xe = F("FmPageHead");
+      return u(), k(Ut, null, {
+        default: b(() => [
+          n(xe, {
+            "data-editor-header": "true",
+            actions: U.value,
+            "onClick:action": W[0] || (W[0] = (ee) => {
+              ee === "cancel" && se(), ee === "save" && B();
+            })
+          }, {
+            title: b(() => [
+              g("div", Jl, [
+                n(Z, {
+                  content: G.value,
+                  placement: "bottom"
+                }, {
+                  default: b(() => [
+                    g("p", {
+                      class: Pe(`${l(y).sm || l(y).xs ? "hidden" : ""} text-ellipsis overflow-hidden text-nowrap fm-typo-en-title-md-600 w-[250px]`)
+                    }, z(G.value), 3)
+                  ]),
+                  _: 1
+                }, 8, ["content"]),
+                g("div", Kl, [
+                  g("div", Ql, [
+                    (u(), I(Ce, null, Ee(me, (ee) => {
+                      var ke;
+                      return n(be, {
+                        key: ee.labelKey,
+                        label: l(f)(ee.labelKey),
+                        variant: ((ke = K.value) == null ? void 0 : ke.labelKey) === ee.labelKey ? "primary" : "secondary",
+                        size: "md",
+                        onClick: (ae) => ge(ee)
+                      }, null, 8, ["label", "variant", "onClick"]);
+                    }), 64))
+                  ]),
+                  n(be, {
+                    icon: "screen_rotation",
+                    variant: "tertiary",
+                    size: "md",
+                    class: "text-fm-color-typo-primary",
+                    onClick: he
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          l(V) ? (u(), k(jl, {
+            key: 0,
+            modelValue: l(V),
+            "onUpdate:modelValue": W[1] || (W[1] = (ee) => ft(V) ? V.value = ee : null),
+            style: lt({ height: oe.value + "px" }),
+            class: Pe(l(y).lg || l(y).md ? "flex" : ""),
+            "hide-configuration": $.value,
+            "preview-width": ce.value,
+            "preview-height": Fe.value,
+            "preview-scale": pe.value,
+            onHideConfiguration: W[2] || (W[2] = (ee) => $.value = ee)
+          }, null, 8, ["modelValue", "style", "class", "hide-configuration", "preview-width", "preview-height", "preview-scale"])) : L("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  po as default
+};