@feedmepos/mf-report 5.31.1-beta.0 → 5.31.2-beta.0

package/dist/TileEditor-btcTn9w6.js

@@ -0,0 +1,4183 @@
+import { defineComponent as de, mergeModels as ve, useModel as ge, computed as x, ref as ae, resolveComponent as A, createElementBlock as W, openBlock as m, createVNode as u, createElementVNode as b, unref as l, withCtx as ee, toDisplayString as Y, Fragment as me, renderList as $e, withModifiers as he, createTextVNode as Xe, watch as ke, createCommentVNode as z, createBlock as I, renderSlot as kl, onBeforeUnmount as rl, resolveDynamicComponent as Fl, normalizeClass as Ve, withDirectives as Fe, vShow as Te, onMounted as Vl, withKeys as vl, vModelText as Wl, normalizeStyle as il, isRef as Xl } from "vue";
+import { useRoute as Hl, useRouter as ql } from "vue-router";
+import { u as ul, f as dl, h as We, F as Ne, d as He, S as sl, a as Gl, W as Jl, T as Yl, c as Kl, b as fl } from "./TransitionFade-B3zeQDvF.js";
+import { W as J, a as Sl, D as Ye, S as gl, C as Zl, u as _l, P as yl, F as Pe, c as Le, o as Ql, k as et } from "./report-CblaE0LI.js";
+import { storeToRefs as Re } from "pinia";
+import { u as Tl } from "./message-dialog-UoMWOnil.js";
+import { useSnackbar as lt, useBreakpoints as $l, FmButtonColorThemeVariant as Ue } from "@feedmepos/ui-library";
+import { h as tt, g as xe, R as bl, d as ot, e as at, a as nt, L as Ae, b as ol, S as re, c as fe, f as al, j as hl, _ as Dl } from "./DynamicWidget.vue_vue_type_script_setup_true_lang-CzSVopxn.js";
+import { a as qe, _ as it } from "./GlobalFilterSelect.vue_vue_type_script_setup_true_lang-V9SzUzmd.js";
+import { a as be, _ as Ul } from "./SelectComponent.vue_vue_type_script_setup_true_lang-DW7Dk7iQ.js";
+import { u as pe, _ as Bl } from "./_plugin-vue_export-helper-C6QDExPN.js";
+import { r as ue } from "./i18n-DbyciK4x.js";
+import { a as je } from "./index-CtZE4sab.js";
+import { d as Ke } from "./DateRangeSelect-CU1zLhsi.js";
+import { a as st, t as wl, h as rt, z as ut } from "./app-Bw-zsS2R.js";
+const ll = [
+  {
+    type: J.Circular,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !1,
+    canTranspose: !1,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !1,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.Table,
+    maxDimension: null,
+    maxMetric: null,
+    hasBreakdownDimension: !1,
+    canTranspose: !1,
+    isDrillConfigurable: !0,
+    hasChart: !1,
+    hasTable: !0,
+    hasLabel: !1,
+    hasLegend: !1,
+    hasXy: !1,
+    canRollup: !0,
+    showRollupPosition: !0,
+    canSearch: !0,
+    periodType: null
+  },
+  {
+    type: J.BarChart,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !0,
+    canTranspose: !0,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !0,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.LineChart,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !0,
+    canTranspose: !0,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !0,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.StackBarChart,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !0,
+    canTranspose: !0,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !0,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.ClusteredStackBarChart,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !0,
+    canTranspose: !0,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !0,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.StackLineChart,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !0,
+    canTranspose: !0,
+    isDrillConfigurable: !1,
+    hasChart: !0,
+    hasTable: !1,
+    hasLabel: !0,
+    hasLegend: !0,
+    hasXy: !0,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.Scorecard,
+    maxDimension: null,
+    maxMetric: 1,
+    hasBreakdownDimension: !1,
+    canTranspose: !1,
+    isDrillConfigurable: !1,
+    hasChart: !1,
+    hasTable: !1,
+    hasLabel: !1,
+    hasLegend: !1,
+    hasXy: !1,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  },
+  {
+    type: J.Spacer,
+    maxDimension: 0,
+    maxMetric: 0,
+    hasBreakdownDimension: !1,
+    canTranspose: !1,
+    isDrillConfigurable: !1,
+    hasChart: !1,
+    hasTable: !1,
+    hasLabel: !1,
+    hasLegend: !1,
+    hasXy: !1,
+    canRollup: !1,
+    showRollupPosition: !1,
+    canSearch: !1,
+    periodType: null
+  }
+], dt = { class: "flex flex-col my-2 gap-8" }, mt = { class: "fm-typo-en-body-lg-600" }, ct = { class: "text-sm text-fm-color-neutral-gray-400" }, pt = ["onClick"], vt = { class: "fm-typo-en-body-lg-400 overflow-hidden text-ellipsis line-clamp-1" }, ft = /* @__PURE__ */ de({
+  __name: "SchemaSection",
+  props: /* @__PURE__ */ ve({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: "Schema"
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c, te: e } = pe(), a = ge(D, "modelValue"), o = D, { schemas: T } = Re(Sl()), C = x(
+      () => T.value.map((r) => ({
+        label: r.label,
+        value: r.name,
+        raw: r
+      }))
+    ), v = x(() => {
+      if (a.value.schemaNames.length === 0 || n.value === 0)
+        return C.value.filter((r) => !r.raw.isJoinOnly);
+      {
+        const r = a.value.schemaNames[0], w = T.value.find((L) => L.name === r), N = ((w == null ? void 0 : w.joins) || []).map((L) => L);
+        return C.value.filter((L) => N.includes(L.raw.name));
+      }
+    }), _ = ae(!1), O = ae(""), n = ae(), i = lt();
+    function y(r) {
+      var w;
+      return ue(
+        c,
+        e,
+        (w = T.value.find((N) => N.name === r)) == null ? void 0 : w.label,
+        "schema"
+      );
+    }
+    function V(r) {
+      n.value = r, _.value = !0, r !== void 0 ? O.value = a.value.schemaNames[r] : O.value = "";
+    }
+    function B() {
+      O.value !== "" ? (n.value !== void 0 ? a.value.schemaNames[n.value] = O.value : a.value.schemaNames.push(O.value), _.value = !1) : i.open({ message: c("report.section.schema.nothingSelected"), type: "error" });
+    }
+    return (r, w) => {
+      const N = A("FmForm"), L = A("FmIcon"), h = A("FmField");
+      return m(), W("div", dt, [
+        u(qe, {
+          modelValue: _.value,
+          "onUpdate:modelValue": w[1] || (w[1] = (s) => _.value = s),
+          title: o.label,
+          "primary-button-label": l(c)("report.common.confirm"),
+          "secondary-button-label": l(c)("report.common.cancel"),
+          onConfirm: B
+        }, {
+          content: ee(() => [
+            u(N, { ref: "form" }, {
+              default: ee(() => [
+                u(be, {
+                  modelValue: O.value,
+                  "onUpdate:modelValue": w[0] || (w[0] = (s) => O.value = s),
+                  label: l(c)("report.section.schema.title"),
+                  items: n.value === 0 ? C.value.map((s) => ({
+                    label: l(ue)(l(c), l(e), s.label, "schema"),
+                    value: s.value
+                  })) : v.value.map((s) => ({
+                    label: l(ue)(l(c), l(e), s.label, "schema"),
+                    value: s.value
+                  }))
+                }, null, 8, ["modelValue", "label", "items"])
+              ]),
+              _: 1
+            }, 512)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title", "primary-button-label", "secondary-button-label"]),
+        b("div", null, [
+          b("p", mt, Y(l(c)("report.section.schema.title")), 1),
+          b("p", ct, Y(l(c)("report.section.schema.description")), 1)
+        ]),
+        (m(!0), W(me, null, $e(a.value.schemaNames, (s, S) => (m(), W("div", {
+          key: S,
+          class: "flex flex-col gap-2 w-full"
+        }, [
+          b("div", {
+            class: "flex items-center gap-2 border rounded-md border-neutral-300 p-2 h-[40px]",
+            onClick: (R) => V(S)
+          }, [
+            b("p", vt, Y(y(s)), 1),
+            w[3] || (w[3] = b("div", { class: "grow" }, null, -1)),
+            u(L, {
+              name: "close",
+              onClick: he(
+                () => {
+                  a.value.schemaNames = l(tt)(a.value.schemaNames, S);
+                },
+                ["stop"]
+              )
+            }, null, 8, ["onClick"])
+          ], 8, pt)
+        ]))), 128)),
+        u(h, {
+          class: "text-fm-color-typo-tertiary",
+          onClick: w[2] || (w[2] = () => {
+            V();
+          })
+        }, {
+          default: ee(() => [
+            Xe(Y(l(c)("report.section.schema.add")), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), gt = {
+  key: 0,
+  class: "flex flex-col my-2 gap-8"
+}, yt = { class: "fm-typo-en-body-lg-600 text-ellipsis line-clamp-1" }, bt = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, ht = { class: "fm-typo-en-body-lg-400 text-ellipsis overflow-hidden line-clamp-1" }, nl = /* @__PURE__ */ de({
+  __name: "DimensionSection",
+  props: /* @__PURE__ */ ve({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: "title"
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    config: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hasRowColumn: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: {
+      required: !1,
+      default: []
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c, te: e } = pe(), a = ge(D, "modelValue"), o = D, T = x(() => c(`report.section.dimension.${o.label}`)), C = ae(!1), v = x(
+      () => a.value.map((t, k) => ({
+        index: k,
+        labels: [t.label || t.name],
+        value: t
+      }))
+    ), _ = ae(a.value.length > 0 ? 0 : void 0);
+    function O(t) {
+      var k, le, ie, H;
+      C.value = !0, n.value = t != null && t.value ? JSON.parse(
+        JSON.stringify({
+          ...t.value,
+          label: ue(c, e, (k = t.value) == null ? void 0 : k.label, "other"),
+          moveToColumn: (((le = o.config) == null ? void 0 : le.columnIds) || []).includes(xe(t.value))
+        })
+      ) : void 0, _.value = t == null ? void 0 : t.index, i.value = !!((ie = n.value) != null && ie.dataFormula || (H = n.value) != null && H.displayFormula), n.value && n.value.formatter === void 0 && t != null && t.value.timeFormatter && n.value.formatter === void 0 && (n.value.formatter = t == null ? void 0 : t.value.timeFormatter, n.value.timeFormatter = void 0);
+    }
+    const n = ae(void 0), i = ae(!1), y = x(
+      () => o.options.find(
+        (t) => {
+          var k, le;
+          return t.schemaName === ((k = n.value) == null ? void 0 : k.schemaName) && t.name === ((le = n.value) == null ? void 0 : le.name);
+        }
+      ) ?? {}
+    );
+    ke(
+      () => {
+        var t;
+        return (t = n.value) == null ? void 0 : t.option;
+      },
+      () => {
+        !V.value && n.value && (n.value.fillGap = !1);
+      }
+    );
+    const V = x(
+      () => {
+        var t, k, le;
+        return (le = (t = y.value) == null ? void 0 : t.fillGapDimensionOptions) == null ? void 0 : le.includes(((k = n.value) == null ? void 0 : k.option) || "");
+      }
+    ), B = (t) => t.toLowerCase().includes("image"), r = x(() => {
+      const { formatters: t = [], type: k } = y.value;
+      return t.filter((le) => k === Ye.String ? B(le) : k === Ye.Numeric ? !B(le) : !0);
+    });
+    function w(t) {
+      var k, le;
+      (t.schemaName !== ((k = n.value) == null ? void 0 : k.schemaName) || t.name !== ((le = n.value) == null ? void 0 : le.name)) && (n.value = {
+        schemaName: t.schemaName,
+        name: t.name,
+        option: t.dimensionOptions[0],
+        label: ue(c, e, t.label, "other"),
+        decimal: t.isNumericType ? 2 : void 0,
+        hide: !1
+      }, i.value = !1);
+    }
+    function N() {
+      if (!n.value) {
+        console.error("new field is undefined");
+        return;
+      }
+      const t = [...v.value.map((k) => k.value)];
+      i.value || (n.value.dataFormula = void 0, n.value.displayFormula = void 0), _.value !== void 0 ? t[_.value] = n.value : t.push(n.value), a.value = t, C.value = !1;
+    }
+    function L(t) {
+      const le = [...v.value.map((ie) => ie.value)].filter((ie, H) => H !== t);
+      a.value = le;
+    }
+    function h(t) {
+      n.value && (n.value.decimal = Number(t));
+    }
+    function s(t) {
+      const k = `report.section.filter.${je(t)}`;
+      return e(k) ? c(k) : ue(c, e, t, "field");
+    }
+    function S(t) {
+      const k = `report.section.metric.formatterType.${t}`;
+      return e(k) ? c(k) : t;
+    }
+    function R(t) {
+      return Array.isArray(t) ? t.length > 0 : t;
+    }
+    const M = x(
+      () => o.options.map((t) => ({
+        label: t.labels.join(" "),
+        value: t
+      }))
+    );
+    function d(t) {
+      return [t.schemaName, t.name, ue(c, e, t.label, "other")].join(" ");
+    }
+    function p(t) {
+      return [t.schemaName, t.name, t.option, t.label || ""].join("__");
+    }
+    const f = x(() => {
+      var ie, H;
+      const t = /* @__PURE__ */ new Map(), k = n.value ? p(n.value) : "";
+      for (const Se of ((ie = o.config) == null ? void 0 : ie.dimensions) ?? [])
+        k && p(Se) === k || t.set(xe(Se), Se);
+      const le = (H = o.config) == null ? void 0 : H.breakdownDimension;
+      return le && (!k || p(le) !== k) && t.set(xe(le), le), n.value && t.set(xe(n.value), n.value), Array.from(t.values());
+    }), { formulaFieldDataList: K, allowedFormulaFields: Z } = ul({
+      options: x(() => o.options),
+      primaryFields: f,
+      secondaryFields: x(() => {
+        var t;
+        return ((t = o.config) == null ? void 0 : t.metrics) ?? [];
+      }),
+      getLabel: d
+    }), { dataValidation: j, displayValidation: oe, isDataValidating: P, isDisplayValidating: g } = dl({
+      getDataFormula: () => {
+        var t;
+        return (t = n.value) == null ? void 0 : t.dataFormula;
+      },
+      getDisplayFormula: () => {
+        var t;
+        return (t = n.value) == null ? void 0 : t.displayFormula;
+      },
+      getIsAdvance: () => i.value,
+      getAllowedFields: () => Z.value
+    });
+    return (t, k) => {
+      const le = A("FmTextField"), ie = A("FmStepperField"), H = A("FmCheckbox"), Se = A("FmForm"), _e = A("FmIcon"), Be = A("FmButton"), Ie = A("FmListItem"), ze = A("FmList"), Ce = A("FmField");
+      return D.max !== 0 ? (m(), W("div", gt, [
+        u(qe, {
+          modelValue: C.value,
+          "onUpdate:modelValue": k[12] || (k[12] = (ye) => C.value = ye),
+          title: T.value,
+          "primary-button-label": l(c)("report.common.confirm"),
+          "secondary-button-label": l(c)("report.common.cancel"),
+          onConfirm: N
+        }, {
+          content: ee(() => [
+            u(Se, {
+              ref: "form",
+              class: "flex flex-col gap-2 w-[490px]"
+            }, {
+              default: ee(() => {
+                var ye, we, Q, Ge, Je;
+                return [
+                  u(be, {
+                    "model-value": y.value,
+                    items: M.value,
+                    placeholder: T.value,
+                    label: T.value,
+                    "onUpdate:modelValue": k[0] || (k[0] = (se) => w(se))
+                  }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                  n.value ? (m(), W(me, { key: 0 }, [
+                    u(le, {
+                      modelValue: n.value.label,
+                      "onUpdate:modelValue": k[1] || (k[1] = (se) => n.value.label = se),
+                      label: l(c)("report.section.dimension.label")
+                    }, null, 8, ["modelValue", "label"]),
+                    (((ye = y.value) == null ? void 0 : ye.dimensionOptions) || []).length > 0 ? (m(), I(be, {
+                      key: 0,
+                      modelValue: n.value.option,
+                      "onUpdate:modelValue": k[2] || (k[2] = (se) => n.value.option = se),
+                      items: ((we = y.value) == null ? void 0 : we.dimensionOptions.map((se) => ({
+                        label: s(se),
+                        value: se
+                      }))) ?? []
+                    }, null, 8, ["modelValue", "items"])) : z("", !0),
+                    (Q = y.value) != null && Q.isNumericType ? (m(), I(ie, {
+                      key: 1,
+                      label: l(c)("report.common.decimal"),
+                      "model-value": ((Ge = n.value) == null ? void 0 : Ge.decimal) ?? 2,
+                      "onUpdate:modelValue": k[3] || (k[3] = (se) => {
+                        h(se);
+                      })
+                    }, null, 8, ["label", "model-value"])) : z("", !0),
+                    r.value.length > 0 ? (m(), I(be, {
+                      key: 2,
+                      modelValue: n.value.formatter,
+                      "onUpdate:modelValue": k[4] || (k[4] = (se) => n.value.formatter = se),
+                      placeholder: l(c)("report.section.dimension.formatter"),
+                      label: l(c)("report.section.dimension.formatter"),
+                      items: [
+                        { label: l(c)("report.section.metric.formatterType.NONE"), value: null },
+                        ...r.value.map((se) => ({
+                          label: S(se),
+                          value: se
+                        }))
+                      ]
+                    }, null, 8, ["modelValue", "placeholder", "label", "items"])) : z("", !0),
+                    V.value ? (m(), I(H, {
+                      key: 3,
+                      "model-value": n.value.fillGap ?? !1,
+                      label: l(c)("report.section.dimension.fillGap"),
+                      value: "",
+                      placeholder: "Fill gap",
+                      "onUpdate:modelValue": k[5] || (k[5] = (se) => {
+                        n.value && (n.value.fillGap = R(se));
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    ((Je = y.value) == null ? void 0 : Je.type) === l(Ye).Timestamp ? (m(), I(H, {
+                      key: 4,
+                      "model-value": n.value.dateComparison ?? !1,
+                      label: l(c)("report.section.dimension.dateComparison"),
+                      value: "",
+                      "onUpdate:modelValue": k[6] || (k[6] = (se) => {
+                        n.value && (n.value.dateComparison = R(se));
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    u(H, {
+                      modelValue: n.value.hide,
+                      "onUpdate:modelValue": k[7] || (k[7] = (se) => n.value.hide = se),
+                      label: l(c)("report.section.dimension.hide"),
+                      value: ""
+                    }, null, 8, ["modelValue", "label"]),
+                    o.hasRowColumn ? (m(), I(H, {
+                      key: 5,
+                      "model-value": n.value.moveToColumn ?? !1,
+                      label: l(c)("report.section.dimension.moveToColumn"),
+                      value: "",
+                      "onUpdate:modelValue": k[8] || (k[8] = (se) => {
+                        n.value && (n.value.moveToColumn = R(se));
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    u(H, {
+                      modelValue: i.value,
+                      "onUpdate:modelValue": k[9] || (k[9] = (se) => i.value = se),
+                      label: l(c)("report.section.dimension.advance"),
+                      value: !0
+                    }, null, 8, ["modelValue", "label"]),
+                    i.value ? (m(), I(We, {
+                      key: 6,
+                      modelValue: n.value.dataFormula,
+                      "onUpdate:modelValue": k[10] || (k[10] = (se) => n.value.dataFormula = se),
+                      placeholder: l(c)("report.section.dimension.dataFormula"),
+                      "field-data-list": l(K),
+                      "formula-field": l(Ne).Dimension,
+                      "validation-result": l(j),
+                      "is-validating": l(P),
+                      "valid-formula-label": l(c)("report.common.validFormula")
+                    }, null, 8, ["modelValue", "placeholder", "field-data-list", "formula-field", "validation-result", "is-validating", "valid-formula-label"])) : z("", !0),
+                    i.value ? (m(), I(We, {
+                      key: 7,
+                      modelValue: n.value.displayFormula,
+                      "onUpdate:modelValue": k[11] || (k[11] = (se) => n.value.displayFormula = se),
+                      placeholder: l(c)("report.section.dimension.displayFormula"),
+                      "field-data-list": l(K),
+                      "formula-field": l(Ne).Dimension,
+                      "validation-result": l(oe),
+                      "is-validating": l(g),
+                      "valid-formula-label": l(c)("report.common.validFormula")
+                    }, null, 8, ["modelValue", "placeholder", "field-data-list", "formula-field", "validation-result", "is-validating", "valid-formula-label"])) : z("", !0)
+                  ], 64)) : z("", !0)
+                ];
+              }),
+              _: 1
+            }, 512)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title", "primary-button-label", "secondary-button-label"]),
+        b("div", null, [
+          b("p", yt, Y(T.value), 1),
+          b("p", bt, Y(l(c)("report.section.dimension.description")), 1)
+        ]),
+        u(ze, null, {
+          default: ee(() => [
+            u(l(He), {
+              list: a.value,
+              "item-key": (ye) => l(xe)(ye),
+              class: "flex flex-col gap-2"
+            }, {
+              item: ee(({ element: ye, index: we }) => [
+                u(Ie, {
+                  class: "!cursor-grab border rounded-md border-neutral-300 h-[40px] !p-[8px]",
+                  onClick: he((Q) => O(v.value[we]), ["stop"])
+                }, {
+                  default: ee(() => [
+                    u(_e, { name: "drag_handle" }),
+                    b("p", ht, Y(l(ue)(l(c), l(e), ye.label, "other")), 1),
+                    k[14] || (k[14] = b("div", { class: "grow" }, null, -1)),
+                    u(Be, {
+                      icon: "close",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he((Q) => L(we), ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 1
+            }, 8, ["list", "item-key"])
+          ]),
+          _: 1
+        }),
+        u(Ce, {
+          class: "text-fm-color-typo-tertiary",
+          onClick: k[13] || (k[13] = () => {
+            O();
+          })
+        }, {
+          default: ee(() => [
+            Xe(Y(l(c)("report.section.dimension.add")), 1)
+          ]),
+          _: 1
+        })
+      ])) : z("", !0);
+    };
+  }
+}), Ee = {
+  value: "_metric_name"
+};
+function Ll(D, c, e) {
+  switch (D) {
+    case J.BarChart:
+    case J.StackBarChart:
+    case J.ClusteredStackBarChart:
+    case J.LineChart:
+    case J.StackLineChart:
+    case J.Circular:
+      return c.length > 1;
+    default:
+      return e;
+  }
+}
+function Ze(D) {
+  var a;
+  if (!D.widget)
+    return D.tiles ? { ...D, tiles: D.tiles.map(Ze) } : D;
+  const { rowIds: c, columnIds: e } = Qe(D.widget.config);
+  return {
+    ...D,
+    ...D.tiles ? { tiles: D.tiles.map(Ze) } : {},
+    widget: {
+      ...D.widget,
+      config: {
+        ...D.widget.config,
+        rowIds: c,
+        columnIds: e,
+        isDrillable: Ll(
+          D.widget.type,
+          D.widget.config.dimensions,
+          D.widget.config.isDrillable
+        ),
+        joinDatasources: (a = D.widget.config.joinDatasources) == null ? void 0 : a.map((o) => {
+          const { rowIds: T, columnIds: C } = Qe(o);
+          return {
+            ...o,
+            rowIds: T,
+            columnIds: C
+          };
+        })
+      }
+    }
+  };
+}
+const Cl = (D) => D.replace(/[^\p{L}\p{N}_]+/gu, "").toLowerCase();
+function Qe(D) {
+  const c = new Set((D.columnIds || []).map(Cl)), e = (_) => _.moveToColumn ?? c.has(Cl(xe(_))), a = D.dimensions.filter((_) => _.hide !== !0), o = a.filter((_) => !e(_)).map(xe), T = a.filter(e).map(xe), C = D.metrics.length > 0, v = D.metrics.some((_) => typeof _.moveToRow == "boolean") ? D.metrics.some((_) => _.moveToRow === !0) : (D.rowIds || []).includes(Ee.value);
+  return C && v ? o.push(Ee.value) : C && T.push(Ee.value), { rowIds: o, columnIds: T };
+}
+const wt = { class: "flex flex-col my-2 gap-8" }, Ct = { class: "fm-typo-en-body-lg-600" }, xt = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, kt = { class: "fm-typo-en-body-lg-400 overflow-hidden text-ellipsis line-clamp-1" }, Ft = /* @__PURE__ */ de({
+  __name: "MetricSection",
+  props: /* @__PURE__ */ ve({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: "title"
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    config: {
+      type: Object,
+      default: () => {
+      }
+    },
+    hasRowColumn: {
+      type: Boolean,
+      default: !1
+    },
+    hasPercentOfTotal: {
+      type: Boolean,
+      default: !1
+    },
+    hasXy: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: { required: !1, default: [] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["config"], ["update:modelValue"]),
+  setup(D, { emit: c }) {
+    const { t: e, te: a } = pe(), o = ge(D, "modelValue"), T = D;
+    x(() => !!T.max && o.value.length === T.max);
+    const C = x(() => e(`report.section.metric.${T.label}`)), v = ae(!1), _ = x(
+      () => o.value.map((g, t) => ({
+        index: t,
+        labels: [g.label || g.name],
+        value: g
+      }))
+    ), O = ae(o.value.length > 0 ? 0 : void 0);
+    function n(g) {
+      var t, k, le;
+      v.value = !0, i.value = g != null && g.value ? JSON.parse(
+        JSON.stringify({
+          ...g.value,
+          label: ue(e, a, g.value.label, "other")
+        })
+      ) : void 0, O.value = g == null ? void 0 : g.index, y.value = !!((t = i.value) != null && t.dataFormula || (k = i.value) != null && k.displayFormula), i.value && i.value.formatter === void 0 && g != null && g.value.timeFormatter && i.value.formatter === void 0 && (i.value.formatter = g == null ? void 0 : g.value.timeFormatter, i.value.timeFormatter = void 0), T.hasRowColumn && ((le = T.config.rowIds) == null ? void 0 : le.includes(Ee.value)) === !0 && i.value && i.value.moveToRow === void 0 && (i.value.moveToRow = !0), i.value && (!T.hasXy || i.value.nullable === void 0) && (i.value.nullable = !1);
+    }
+    const i = ae(void 0), y = ae(!1), V = x(
+      () => T.options.find(
+        (g) => {
+          var t, k;
+          return g.schemaName === ((t = i.value) == null ? void 0 : t.schemaName) && g.name === ((k = i.value) == null ? void 0 : k.name);
+        }
+      ) ?? {}
+    );
+    function B(g, t) {
+      var k;
+      return (g == null ? void 0 : g.isNumericType) || ((k = g == null ? void 0 : g.isNumericAggregations) == null ? void 0 : k.includes(t || ""));
+    }
+    function r() {
+      var g, t;
+      if (o.value.length > 0) {
+        const k = (g = o.value[0]) == null ? void 0 : g.moveToRow;
+        if (typeof k == "boolean")
+          return k;
+      }
+      return ((t = T.config.rowIds) == null ? void 0 : t.includes(Ee.value)) === !0;
+    }
+    const w = x(
+      () => {
+        var g;
+        return B(V.value, (g = i.value) == null ? void 0 : g.aggregation);
+      }
+    ), N = (g) => g.toLowerCase().includes("image"), L = x(() => {
+      const { formatters: g = [], type: t } = V.value;
+      return g.filter((k) => w.value ? !N(k) : t === Ye.String ? N(k) : !0);
+    });
+    ke(w, (g) => {
+      i.value && (g ? i.value.decimal = typeof i.value.decimal != "number" ? 2 : i.value.decimal : i.value.decimal = void 0);
+    });
+    function h(g) {
+      var t, k;
+      (g.schemaName !== ((t = i.value) == null ? void 0 : t.schemaName) || g.name !== ((k = i.value) == null ? void 0 : k.name)) && (i.value = {
+        schemaName: g.schemaName,
+        name: g.name,
+        aggregation: g.aggregations[0],
+        label: ue(e, a, g.label, "other"),
+        nullable: !1,
+        decimal: B(g, g.aggregations[0]) ? 2 : void 0,
+        moveToRow: r(),
+        hide: !1
+      }, y.value = !1);
+    }
+    function s() {
+      var t;
+      const g = [..._.value.map((k) => k.value)];
+      if (i.value && (y.value || (i.value.dataFormula = void 0, i.value.displayFormula = void 0), T.hasXy || (i.value.nullable = !1), O.value !== void 0 ? g[O.value] = i.value : g.push(i.value)), T.hasRowColumn && typeof ((t = i.value) == null ? void 0 : t.moveToRow) == "boolean")
+        for (const k of g)
+          k.moveToRow = i.value.moveToRow;
+      o.value = g, v.value = !1;
+    }
+    function S(g) {
+      const t = [..._.value.map((k) => k.value)];
+      t.splice(g, 1), o.value = t;
+    }
+    const R = x(
+      () => T.options.map((g) => ({
+        label: g.labels.join(" "),
+        value: g
+      }))
+    );
+    function M(g) {
+      return [g.schemaName, g.name, ue(e, a, g.label, "other")].join(" ");
+    }
+    function d(g) {
+      return [g.schemaName, g.name, g.aggregation, g.label || ""].join("__");
+    }
+    const p = x(() => {
+      var k;
+      const g = /* @__PURE__ */ new Map(), t = i.value ? d(i.value) : "";
+      for (const le of ((k = T.config) == null ? void 0 : k.metrics) ?? [])
+        t && d(le) === t || g.set(xe(le), le);
+      return i.value && g.set(xe(i.value), i.value), Array.from(g.values());
+    }), { formulaFieldDataList: f, allowedFormulaFields: K } = ul({
+      options: x(() => T.options),
+      primaryFields: x(() => {
+        var g, t;
+        return [
+          ...((g = T.config) == null ? void 0 : g.dimensions) ?? [],
+          ...(t = T.config) != null && t.breakdownDimension ? [T.config.breakdownDimension] : []
+        ];
+      }),
+      secondaryFields: p,
+      getLabel: M
+    }), { dataValidation: Z, displayValidation: j, isDataValidating: oe, isDisplayValidating: P } = dl({
+      getDataFormula: () => {
+        var g;
+        return (g = i.value) == null ? void 0 : g.dataFormula;
+      },
+      getDisplayFormula: () => {
+        var g;
+        return (g = i.value) == null ? void 0 : g.displayFormula;
+      },
+      getIsAdvance: () => y.value,
+      getAllowedFields: () => K.value
+    });
+    return (g, t) => {
+      const k = A("FmTextField"), le = A("FmStepperField"), ie = A("FmCheckbox"), H = A("FmForm"), Se = A("FmIcon"), _e = A("FmButton"), Be = A("FmListItem"), Ie = A("FmList"), ze = A("FmField");
+      return m(), W("div", wt, [
+        u(qe, {
+          modelValue: v.value,
+          "onUpdate:modelValue": t[12] || (t[12] = (Ce) => v.value = Ce),
+          title: C.value,
+          onConfirm: s
+        }, {
+          content: ee(() => [
+            u(H, {
+              ref: "form",
+              class: "flex flex-col gap-2 w-[490px]"
+            }, {
+              default: ee(() => {
+                var Ce, ye, we;
+                return [
+                  u(be, {
+                    "model-value": V.value,
+                    items: R.value,
+                    placeholder: C.value,
+                    label: C.value,
+                    "onUpdate:modelValue": t[0] || (t[0] = (Q) => h(Q))
+                  }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                  i.value ? (m(), W(me, { key: 0 }, [
+                    u(k, {
+                      modelValue: i.value.label,
+                      "onUpdate:modelValue": t[1] || (t[1] = (Q) => i.value.label = Q),
+                      label: l(e)("report.section.metric.label")
+                    }, null, 8, ["modelValue", "label"]),
+                    (((Ce = V.value) == null ? void 0 : Ce.aggregations) || []).length > 0 ? (m(), I(be, {
+                      key: 0,
+                      modelValue: i.value.aggregation,
+                      "onUpdate:modelValue": t[2] || (t[2] = (Q) => i.value.aggregation = Q),
+                      label: l(e)("report.section.metric.aggregation"),
+                      items: ((ye = V.value) == null ? void 0 : ye.aggregations.map((Q) => ({
+                        label: l(a)(`report.section.metric.aggregationType.${Q}`) ? l(e)(`report.section.metric.aggregationType.${Q}`) : l(ue)(l(e), l(a), Q, "field"),
+                        value: Q
+                      }))) ?? []
+                    }, null, 8, ["modelValue", "label", "items"])) : z("", !0),
+                    w.value ? (m(), I(le, {
+                      key: 1,
+                      label: l(e)("report.common.decimal"),
+                      "model-value": ((we = i.value) == null ? void 0 : we.decimal) ?? 2,
+                      "onUpdate:modelValue": t[3] || (t[3] = (Q) => {
+                        i.value && (i.value.decimal = Q);
+                      })
+                    }, null, 8, ["label", "model-value"])) : z("", !0),
+                    L.value.length > 0 ? (m(), I(be, {
+                      key: 2,
+                      modelValue: i.value.formatter,
+                      "onUpdate:modelValue": t[4] || (t[4] = (Q) => i.value.formatter = Q),
+                      placeholder: l(e)("report.section.metric.formatter"),
+                      label: l(e)("report.section.metric.formatter"),
+                      items: [
+                        { label: l(e)("report.section.metric.formatterType.NONE"), value: null },
+                        ...L.value.map((Q) => ({
+                          label: l(a)(`report.section.metric.formatterType.${Q}`) ? l(e)(`report.section.metric.formatterType.${Q}`) : l(ue)(l(e), l(a), Q, "field"),
+                          value: Q
+                        }))
+                      ]
+                    }, null, 8, ["modelValue", "placeholder", "label", "items"])) : z("", !0),
+                    u(ie, {
+                      modelValue: i.value.hide,
+                      "onUpdate:modelValue": t[5] || (t[5] = (Q) => i.value.hide = Q),
+                      label: l(e)("report.section.metric.hide"),
+                      value: ""
+                    }, null, 8, ["modelValue", "label"]),
+                    T.hasXy ? (m(), I(ie, {
+                      key: 3,
+                      "model-value": i.value.nullable ?? !1,
+                      label: l(e)("report.section.metric.nullable"),
+                      value: !0,
+                      "onUpdate:modelValue": t[6] || (t[6] = (Q) => {
+                        i.value && (i.value.nullable = Q);
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    T.hasRowColumn ? (m(), I(ie, {
+                      key: 4,
+                      "model-value": i.value.moveToRow ?? !1,
+                      label: l(e)("report.section.metric.moveToRow"),
+                      value: "",
+                      "onUpdate:modelValue": t[7] || (t[7] = (Q) => {
+                        i.value && (i.value.moveToRow = Array.isArray(Q) ? Q.length > 0 : Q);
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    T.hasRowColumn && T.hasPercentOfTotal ? (m(), I(ie, {
+                      key: 5,
+                      "model-value": i.value.percentOfTotal ?? !1,
+                      label: l(e)("report.section.metric.percentOfTotal"),
+                      value: "",
+                      "onUpdate:modelValue": t[8] || (t[8] = (Q) => {
+                        i.value && (i.value.percentOfTotal = Array.isArray(Q) ? Q.length > 0 : Q);
+                      })
+                    }, null, 8, ["model-value", "label"])) : z("", !0),
+                    u(ie, {
+                      modelValue: y.value,
+                      "onUpdate:modelValue": t[9] || (t[9] = (Q) => y.value = Q),
+                      label: l(e)("report.section.metric.advance"),
+                      value: !0
+                    }, null, 8, ["modelValue", "label"]),
+                    y.value ? (m(), I(We, {
+                      key: 6,
+                      modelValue: i.value.dataFormula,
+                      "onUpdate:modelValue": t[10] || (t[10] = (Q) => i.value.dataFormula = Q),
+                      placeholder: l(e)("report.section.metric.dataFormula"),
+                      "field-data-list": l(f),
+                      "formula-field": l(Ne).Metric,
+                      "validation-result": l(Z),
+                      "is-validating": l(oe),
+                      "valid-formula-label": l(e)("report.common.validFormula")
+                    }, null, 8, ["modelValue", "placeholder", "field-data-list", "formula-field", "validation-result", "is-validating", "valid-formula-label"])) : z("", !0),
+                    y.value ? (m(), I(We, {
+                      key: 7,
+                      modelValue: i.value.displayFormula,
+                      "onUpdate:modelValue": t[11] || (t[11] = (Q) => i.value.displayFormula = Q),
+                      placeholder: l(e)("report.section.metric.displayFormula"),
+                      "field-data-list": l(f),
+                      "formula-field": l(Ne).Metric,
+                      "validation-result": l(j),
+                      "is-validating": l(P),
+                      "valid-formula-label": l(e)("report.common.validFormula")
+                    }, null, 8, ["modelValue", "placeholder", "field-data-list", "formula-field", "validation-result", "is-validating", "valid-formula-label"])) : z("", !0)
+                  ], 64)) : z("", !0)
+                ];
+              }),
+              _: 1
+            }, 512)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        b("div", null, [
+          b("p", Ct, Y(C.value), 1),
+          b("p", xt, Y(l(e)("report.section.metric.description")), 1)
+        ]),
+        u(Ie, null, {
+          default: ee(() => [
+            u(l(He), {
+              list: o.value,
+              "item-key": "id",
+              class: "flex flex-col gap-2 w-full"
+            }, {
+              item: ee(({ element: Ce, index: ye }) => [
+                u(Be, {
+                  class: "!cursor-grab border rounded-md border-neutral-300 h-[40px] !p-[8px]",
+                  onClick: he((we) => n(_.value[ye]), ["stop"])
+                }, {
+                  default: ee(() => [
+                    u(Se, { name: "drag_handle" }),
+                    b("p", kt, Y(l(ue)(l(e), l(a), Ce.label, "other")), 1),
+                    t[14] || (t[14] = b("div", { class: "grow" }, null, -1)),
+                    u(_e, {
+                      icon: "close",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he((we) => S(ye), ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 1
+            }, 8, ["list"])
+          ]),
+          _: 1
+        }),
+        u(ze, {
+          class: "text-fm-color-typo-tertiary",
+          onClick: t[13] || (t[13] = () => {
+            n();
+          })
+        }, {
+          default: ee(() => [
+            Xe(Y(l(e)("report.section.metric.add")), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), Vt = { class: "flex flex-col my-2 gap-8" }, St = { class: "fm-typo-en-body-lg-600" }, _t = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, Tt = { class: "fm-typo-en-body-lg-400 text-ellipsis overflow-hidden line-clamp-1" }, $t = /* @__PURE__ */ de({
+  __name: "SortSection",
+  props: /* @__PURE__ */ ve({
+    options: {
+      type: Array,
+      default: () => []
+    },
+    dimensions: {
+      type: Array,
+      default: () => []
+    },
+    breakdownDimension: {
+      type: Object,
+      default: void 0
+    },
+    metrics: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: "title"
+    }
+  }, {
+    modelValue: { required: !1, default: [] },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c, te: e } = pe(), a = ge(D, "modelValue"), o = D, T = x(() => c(`report.section.sort.${o.label}`)), C = ae(!1), v = x(
+      () => a.value.map((M, d) => {
+        const p = o.options.find(
+          (K) => K.schemaName === M.schemaName && K.name === M.name
+        ), f = (p == null ? void 0 : p.labels) || [M.schemaName, M.name];
+        return {
+          index: d,
+          label: f.map((K) => ue(c, e, K, "other")).join(" "),
+          value: M
+        };
+      })
+    ), _ = ae(a.value.length > 0 ? 0 : void 0);
+    function O(M) {
+      var d;
+      C.value = !0, n.value = M != null && M.value ? JSON.parse(JSON.stringify(M.value)) : void 0, _.value = M == null ? void 0 : M.index, i.value = !!((d = n.value) != null && d.dataFormula);
+    }
+    const n = ae(void 0), i = ae(!1), y = x(
+      () => o.options.find(
+        (M) => {
+          var d, p;
+          return M.schemaName === ((d = n.value) == null ? void 0 : d.schemaName) && M.name === ((p = n.value) == null ? void 0 : p.name);
+        }
+      ) ?? {}
+    );
+    function V(M) {
+      var d, p;
+      (M.schemaName !== ((d = n.value) == null ? void 0 : d.schemaName) || M.name !== ((p = n.value) == null ? void 0 : p.name)) && (n.value = {
+        schemaName: M.schemaName,
+        name: M.name,
+        dimensionOption: M.dimensionOptions[0],
+        aggregation: null,
+        type: gl.Asc
+      });
+    }
+    function B() {
+      if (!n.value) {
+        console.log("new sort is undefined");
+        return;
+      }
+      const M = [...v.value.map((d) => d.value)];
+      i.value || (n.value.dataFormula = void 0), _.value !== void 0 ? M[_.value] = n.value : M.push(n.value), a.value = M, C.value = !1;
+    }
+    function r(M) {
+      const d = [...v.value.map((p) => p.value)];
+      d.splice(M, 1), a.value = d, C.value = !1;
+    }
+    function w(M) {
+      const d = `report.section.filter.${je(M)}`;
+      return e(d) ? c(d) : ue(c, e, M, "field");
+    }
+    const N = x(
+      () => o.options.map((M) => ({
+        label: M.labels.join(" "),
+        value: M
+      }))
+    );
+    function L(M) {
+      return [M.schemaName, M.name, ue(c, e, M.label, "other")].join(" ");
+    }
+    const { formulaFieldDataList: h, allowedFormulaFields: s } = ul({
+      options: x(() => o.options),
+      primaryFields: x(() => [
+        ...o.dimensions,
+        ...o.breakdownDimension ? [o.breakdownDimension] : []
+      ]),
+      secondaryFields: x(() => o.metrics),
+      getLabel: L
+    }), { dataValidation: S, isDataValidating: R } = dl({
+      getDataFormula: () => {
+        var M;
+        return (M = n.value) == null ? void 0 : M.dataFormula;
+      },
+      getDisplayFormula: () => {
+      },
+      getIsAdvance: () => i.value,
+      getAllowedFields: () => s.value
+    });
+    return (M, d) => {
+      const p = A("FmCheckbox"), f = A("FmForm"), K = A("FmIcon"), Z = A("FmButton"), j = A("FmListItem"), oe = A("FmList"), P = A("FmField");
+      return m(), W("div", Vt, [
+        u(qe, {
+          modelValue: C.value,
+          "onUpdate:modelValue": d[6] || (d[6] = (g) => C.value = g),
+          title: T.value,
+          onConfirm: B
+        }, {
+          content: ee(() => [
+            u(f, {
+              ref: "form",
+              class: "flex flex-col gap-2 w-[490px]"
+            }, {
+              default: ee(() => {
+                var g, t, k, le, ie;
+                return [
+                  u(be, {
+                    "model-value": y.value,
+                    items: N.value,
+                    placeholder: T.value,
+                    label: T.value,
+                    "onUpdate:modelValue": d[0] || (d[0] = (H) => V(H))
+                  }, null, 8, ["model-value", "items", "placeholder", "label"]),
+                  n.value ? (m(), W(me, { key: 0 }, [
+                    (((g = y.value) == null ? void 0 : g.dimensionOptions) || []).length > 0 ? (m(), I(be, {
+                      key: 0,
+                      modelValue: n.value.dimensionOption,
+                      "onUpdate:modelValue": d[1] || (d[1] = (H) => n.value.dimensionOption = H),
+                      items: ((t = y.value) == null ? void 0 : t.dimensionOptions.map((H) => ({
+                        label: w(H),
+                        value: H
+                      }))) ?? [],
+                      placeholder: l(c)("report.section.sort.format"),
+                      label: l(c)("report.section.sort.format")
+                    }, null, 8, ["modelValue", "items", "placeholder", "label"])) : z("", !0),
+                    (((k = y.value) == null ? void 0 : k.aggregations) || []).length > 0 ? (m(), I(be, {
+                      key: 1,
+                      modelValue: n.value.aggregation,
+                      "onUpdate:modelValue": d[2] || (d[2] = (H) => n.value.aggregation = H),
+                      items: ((le = y.value) == null ? void 0 : le.aggregations.map((H) => ({
+                        label: l(e)(`report.section.metric.aggregationType.${H}`) ? l(c)(`report.section.metric.aggregationType.${H}`) : H,
+                        value: H
+                      }))) ?? [],
+                      label: l(c)("report.section.sort.aggregation"),
+                      placeholder: l(c)("report.section.sort.aggregation")
+                    }, null, 8, ["modelValue", "items", "label", "placeholder"])) : z("", !0),
+                    u(be, {
+                      modelValue: n.value.type,
+                      "onUpdate:modelValue": d[3] || (d[3] = (H) => n.value.type = H),
+                      items: Object.values(l(gl)).map((H) => ({
+                        label: l(e)(`report.section.sort.sortType.${H}`) ? l(c)(`report.section.sort.sortType.${H}`) : H,
+                        value: H
+                      })),
+                      placeholder: l(c)("report.section.sort.order"),
+                      label: l(c)("report.section.sort.order")
+                    }, null, 8, ["modelValue", "items", "placeholder", "label"]),
+                    u(p, {
+                      modelValue: i.value,
+                      "onUpdate:modelValue": d[4] || (d[4] = (H) => i.value = H),
+                      label: l(c)("report.section.sort.advance"),
+                      value: !0
+                    }, null, 8, ["modelValue", "label"]),
+                    i.value ? (m(), I(We, {
+                      key: 2,
+                      modelValue: n.value.dataFormula,
+                      "onUpdate:modelValue": d[5] || (d[5] = (H) => n.value.dataFormula = H),
+                      placeholder: l(c)("report.section.sort.dataFormula"),
+                      "field-data-list": l(h),
+                      "formula-field": ((ie = y.value) == null ? void 0 : ie.type) === "NUMERIC" ? l(Ne).Metric : l(Ne).Dimension,
+                      "validation-result": l(S),
+                      "is-validating": l(R),
+                      "valid-formula-label": l(c)("report.common.validFormula")
+                    }, null, 8, ["modelValue", "placeholder", "field-data-list", "formula-field", "validation-result", "is-validating", "valid-formula-label"])) : z("", !0)
+                  ], 64)) : z("", !0)
+                ];
+              }),
+              _: 1
+            }, 512)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        b("div", null, [
+          b("p", St, Y(T.value), 1),
+          b("p", _t, Y(l(c)("report.section.sort.description")), 1)
+        ]),
+        u(oe, null, {
+          default: ee(() => [
+            u(l(He), {
+              list: a.value,
+              "item-key": "id",
+              class: "flex flex-col gap-2 w-full"
+            }, {
+              item: ee(({ element: g, index: t }) => [
+                u(j, {
+                  class: "!cursor-grab border rounded-md border-neutral-300 h-[40px] !p-[8px]",
+                  onClick: he((k) => O(v.value[t]), ["stop"])
+                }, {
+                  default: ee(() => [
+                    u(K, { name: "drag_handle" }),
+                    b("p", Tt, Y(v.value[t].label), 1),
+                    d[8] || (d[8] = b("div", { class: "grow" }, null, -1)),
+                    u(Z, {
+                      icon: "close",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he((k) => r(t), ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 1
+            }, 8, ["list"])
+          ]),
+          _: 1
+        }),
+        u(P, {
+          class: "text-fm-color-typo-tertiary",
+          onClick: d[7] || (d[7] = () => {
+            O();
+          })
+        }, {
+          default: ee(() => [
+            Xe(Y(l(c)("report.section.sort.add")), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), Dt = { class: "fm-typo-en-body-lg-600" }, Ut = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, Bt = /* @__PURE__ */ de({
+  __name: "LimitSection",
+  props: {
+    modelValue: { required: !0, default: null },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c } = pe(), e = ge(D, "modelValue"), a = Ke((o) => {
+      o !== "" ? e.value = o : e.value = null;
+    }, 1e3);
+    return (o, T) => {
+      const C = A("FmTextField");
+      return m(), W(me, null, [
+        b("div", null, [
+          b("p", Dt, Y(l(c)("report.section.limit.title")), 1),
+          b("p", Ut, Y(l(c)("report.section.limit.description")), 1)
+        ]),
+        u(C, {
+          "model-value": e.value,
+          inputmode: "numeric",
+          placeholder: l(c)("report.section.limit.placeholder"),
+          "onUpdate:modelValue": T[0] || (T[0] = (v) => l(a)(v))
+        }, null, 8, ["model-value", "placeholder"])
+      ], 64);
+    };
+  }
+}), Lt = { class: "flex flex-col my-2 gap-8" }, At = { class: "fm-typo-en-body-lg-600" }, Mt = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, Ot = { class: "fm-typo-en-body-lg-400 text-ellipsis overflow-hidden line-clamp-1" }, jt = /* @__PURE__ */ de({
+  __name: "ConditionSection",
+  props: /* @__PURE__ */ ve({
+    joinFieldOptions: {
+      type: Array,
+      default: () => []
+    },
+    mainFieldOptions: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: "title"
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c, te: e } = pe(), a = ge(D, "modelValue"), o = D, T = x(() => c(`report.section.condition.${o.label}`)), C = ae(!1), v = x(
+      () => a.value.map((h, s) => {
+        var M, d;
+        const S = o.joinFieldOptions.find(
+          (p) => {
+            var f, K;
+            return p.schemaName === ((f = h.joinDimension) == null ? void 0 : f.schemaName) && p.name === ((K = h.joinDimension) == null ? void 0 : K.name);
+          }
+        ), R = (S == null ? void 0 : S.labels) || [
+          (M = h.joinDimension) == null ? void 0 : M.schemaName,
+          (d = h.joinDimension) == null ? void 0 : d.name
+        ];
+        return {
+          index: s,
+          label: R.map((p) => ue(c, e, p, "other")).join(" "),
+          value: h
+        };
+      })
+    ), _ = ae(a.value.length > 0 ? 0 : void 0);
+    function O(h) {
+      h ? (n.value = h != null && h.value ? JSON.parse(JSON.stringify(h.value)) : void 0, _.value = h == null ? void 0 : h.index) : (n.value = {
+        joinDimension: null,
+        operator: "",
+        mainDimensions: []
+      }, _.value = void 0), C.value = !0;
+    }
+    const n = ae(void 0), i = x(
+      () => o.joinFieldOptions.find(
+        (h) => {
+          var s, S;
+          return h.schemaName === ((S = (s = n.value) == null ? void 0 : s.joinDimension) == null ? void 0 : S.schemaName) && h.name === n.value.joinDimension.name;
+        }
+      ) ?? {}
+    ), y = x(
+      () => {
+        var h;
+        return (((h = n.value) == null ? void 0 : h.mainDimensions) || []).map(
+          (s) => o.mainFieldOptions.find(
+            (S) => S.schemaName === (s == null ? void 0 : s.schemaName) && S.name === s.name
+          ) ?? {}
+        );
+      }
+    ), V = x(
+      () => o.joinFieldOptions.map((h) => ({ label: h.labels.join(" "), value: h }))
+    );
+    function B(h) {
+      var s, S, R, M;
+      n.value && (n.value && h.schemaName !== ((S = (s = n.value) == null ? void 0 : s.joinDimension) == null ? void 0 : S.schemaName) || h.name !== ((M = (R = n.value) == null ? void 0 : R.joinDimension) == null ? void 0 : M.name)) && (n.value = {
+        ...n.value,
+        joinDimension: {
+          schemaName: h.schemaName,
+          name: h.name,
+          option: h.dimensionOptions[0],
+          label: `_${h.label}`,
+          hide: !0
+        }
+      }, h.joinConditionOperators.includes(n.value.operator) || w(h.joinConditionOperators[0]));
+    }
+    function r(h, s) {
+      var S, R, M, d;
+      if (n.value && s >= 0 && (n.value && h.schemaName !== ((R = (S = n.value) == null ? void 0 : S.mainDimensions[s]) == null ? void 0 : R.schemaName) || h.name !== ((d = (M = n.value) == null ? void 0 : M.mainDimensions[s]) == null ? void 0 : d.name))) {
+        const p = [...n.value.mainDimensions];
+        p[s] = {
+          schemaName: h.schemaName,
+          name: h.name,
+          option: h.dimensionOptions[0],
+          label: h.label,
+          hide: !0
+        }, n.value = {
+          ...n.value,
+          mainDimensions: p
+        };
+      }
+    }
+    function w(h) {
+      if (n.value)
+        switch (h) {
+          case Zl.Between:
+            n.value = {
+              ...n.value,
+              operator: h,
+              mainDimensions: [null, null]
+            };
+            break;
+          default:
+            n.value = {
+              ...n.value,
+              operator: h,
+              mainDimensions: [null]
+            };
+            break;
+        }
+    }
+    function N() {
+      const h = [...v.value.map((s) => s.value)];
+      n.value && (n.value.mainDimensions = n.value.mainDimensions.filter(
+        (s) => s !== "" && s != null
+      ), _.value !== void 0 ? h[_.value] = n.value : h.push(n.value)), a.value = h, C.value = !1;
+    }
+    function L(h) {
+      const s = [...v.value.map((S) => S.value)];
+      s.splice(h, 1), a.value = s;
+    }
+    return (h, s) => {
+      const S = A("FmMenuDivider"), R = A("FmForm"), M = A("FmIcon"), d = A("FmButton"), p = A("FmListItem"), f = A("FmList"), K = A("FmField");
+      return m(), W("div", Lt, [
+        u(qe, {
+          modelValue: C.value,
+          "onUpdate:modelValue": s[2] || (s[2] = (Z) => C.value = Z),
+          title: T.value,
+          onConfirm: N
+        }, {
+          content: ee(() => [
+            u(R, {
+              ref: "form",
+              class: "flex flex-col gap-2 w-[490px]"
+            }, {
+              default: ee(() => {
+                var Z, j, oe, P, g;
+                return [
+                  u(be, {
+                    label: l(c)("report.section.condition.joinDatasource"),
+                    "model-value": i.value,
+                    items: V.value,
+                    placeholder: l(c)("report.section.condition.joinDimension"),
+                    "onUpdate:modelValue": s[0] || (s[0] = (t) => B(t))
+                  }, null, 8, ["label", "model-value", "items", "placeholder"]),
+                  u(S),
+                  (Z = n.value) != null && Z.joinDimension && (((j = i.value) == null ? void 0 : j.dimensionOptions) || []).length > 0 ? (m(), I(be, {
+                    key: 0,
+                    modelValue: n.value.joinDimension.option,
+                    "onUpdate:modelValue": s[1] || (s[1] = (t) => n.value.joinDimension.option = t),
+                    label: l(c)("report.section.condition.format"),
+                    items: ((oe = i.value) == null ? void 0 : oe.dimensionOptions.map((t) => ({
+                      label: l(e)(`report.section.filter.${l(je)(t)}`) ? l(c)(`report.section.filter.${l(je)(t)}`) : t,
+                      value: t
+                    }))) ?? []
+                  }, null, 8, ["modelValue", "label", "items"])) : z("", !0),
+                  n.value && (((P = i.value) == null ? void 0 : P.joinConditionOperators) || []).length > 0 ? (m(), I(be, {
+                    key: 1,
+                    "model-value": n.value.operator,
+                    label: l(c)("report.section.condition.operator"),
+                    items: i.value.joinConditionOperators.map((t) => ({
+                      label: l(c)("report.section.comparisonOperator." + t),
+                      value: t
+                    })) ?? [],
+                    "onUpdate:modelValue": w
+                  }, null, 8, ["model-value", "label", "items"])) : z("", !0),
+                  (m(!0), W(me, null, $e(((g = n.value) == null ? void 0 : g.mainDimensions) || [], (t, k) => {
+                    var le, ie;
+                    return m(), W("div", {
+                      key: k,
+                      class: "flex flex-col gap-2"
+                    }, [
+                      u(be, {
+                        "model-value": y.value[k],
+                        label: l(c)("report.section.condition.mainDatasource", { index: k + 1 }),
+                        items: o.mainFieldOptions.map((H) => ({
+                          label: H.labels.join(" "),
+                          value: H
+                        })),
+                        "onUpdate:modelValue": (H) => r(H, k)
+                      }, null, 8, ["model-value", "label", "items", "onUpdate:modelValue"]),
+                      t && (((le = y.value[k]) == null ? void 0 : le.dimensionOptions) || []).length > 0 && t ? (m(), I(be, {
+                        key: 0,
+                        modelValue: t.option,
+                        "onUpdate:modelValue": (H) => t.option = H,
+                        items: (ie = y.value[k]) == null ? void 0 : ie.dimensionOptions.map((H) => ({
+                          label: l(e)(`report.section.filter.${l(je)(H)}`) ? l(c)(`report.section.filter.${l(je)(H)}`) : H,
+                          value: H
+                        }))
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "items"])) : z("", !0),
+                      u(S)
+                    ]);
+                  }), 128))
+                ];
+              }),
+              _: 1
+            }, 512)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"]),
+        b("div", null, [
+          b("p", At, Y(T.value), 1),
+          b("p", Mt, Y(l(c)("report.section.condition.description")), 1)
+        ]),
+        u(f, { class: "flex flex-col gap-2" }, {
+          default: ee(() => [
+            u(l(He), {
+              list: a.value,
+              "item-key": (Z) => {
+                var j, oe;
+                return `${(j = Z.joinDimension) == null ? void 0 : j.schemaName}:${(oe = Z.joinDimension) == null ? void 0 : oe.name}`;
+              },
+              class: "flex flex-col gap-2 w-full"
+            }, {
+              item: ee(({
+                element: Z,
+                index: j
+              }) => [
+                u(p, {
+                  class: "!cursor-grab border rounded-md border-neutral-300 h-[40px] !p-[8px]",
+                  onClick: he((oe) => O(v.value[j]), ["stop"])
+                }, {
+                  default: ee(() => [
+                    u(M, { name: "drag_handle" }),
+                    b("p", Ot, Y(v.value[j].label), 1),
+                    s[4] || (s[4] = b("div", { class: "grow" }, null, -1)),
+                    u(d, {
+                      icon: "close",
+                      size: "md",
+                      variant: "tertiary",
+                      onClick: he((oe) => L(j), ["stop"])
+                    }, null, 8, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 1
+            }, 8, ["list", "item-key"])
+          ]),
+          _: 1
+        }),
+        u(K, {
+          class: "text-fm-color-typo-tertiary cursor-pointer",
+          onClick: s[3] || (s[3] = (Z) => O())
+        }, {
+          default: ee(() => [
+            Xe(Y(l(c)("report.section.condition.add")), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), xl = /* @__PURE__ */ de({
+  __name: "Datasource",
+  props: /* @__PURE__ */ ve({
+    label: {
+      type: String,
+      default: "Label"
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    closeable: {
+      type: Boolean,
+      default: !1
+    },
+    mainDatasourceConfig: {
+      type: Object,
+      default: () => {
+      }
+    },
+    modelValue: {
+      type: Object,
+      default: () => {
+      }
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["click-close"], ["update:modelValue"]),
+  setup(D, { emit: c }) {
+    const e = ge(D, "modelValue"), a = D, o = c;
+    ke(
+      [() => e.value.dimensions, () => e.value.metrics],
+      () => {
+        const { rowIds: p, columnIds: f } = Qe(e.value);
+        e.value.rowIds = p, e.value.columnIds = f, !a.mainDatasourceConfig && a.config && (e.value.isDrillable = Ll(
+          a.config.type,
+          e.value.dimensions,
+          e.value.isDrillable ?? !1
+        ));
+      },
+      // immediate: heals widgets saved before isDrillable was auto-populated
+      { deep: !0, immediate: !0 }
+    );
+    const { schemas: T } = Re(Sl()), { editingReport: C } = Re(_l()), v = x(() => {
+      var p;
+      return ((p = C.value) == null ? void 0 : p.queryVersion) === "v2";
+    }), { t: _, te: O, locale: n } = pe(), i = x(() => !a.mainDatasourceConfig), y = x(
+      () => [J.BarChart, J.LineChart, J.Scorecard].includes(a.config.type)
+    ), V = x(() => [...e.value.dimensions].filter((p) => !p.hide)), B = x(() => a.config.type === J.Scorecard), r = x(() => e.value.sparklineType === "PROGRESS"), w = x({
+      get: () => e.value.sparklineTargetValue ?? null,
+      set: (p) => {
+        e.value.sparklineTargetValue = p ?? void 0;
+      }
+    }), N = x(
+      () => {
+        var p;
+        return (((p = a.mainDatasourceConfig) == null ? void 0 : p.schemaNames) || []).reduce(
+          (f, K) => {
+            const Z = T.value.find((j) => j.name === K);
+            return Z && (f = [
+              ...f,
+              ...Z.fields.map((j) => ({
+                ...j,
+                labels: [
+                  ue(_, O, Z.label, "schema"),
+                  ue(_, O, j.label || j.name, "other")
+                ]
+              }))
+            ]), f;
+          },
+          []
+        );
+      }
+    ), L = x(
+      () => e.value.schemaNames.reduce((p, f) => {
+        const K = T.value.find((Z) => Z.name === f);
+        return K && (p = [
+          ...p,
+          ...K.fields.map((Z) => ({
+            ...Z,
+            labels: [
+              ue(_, O, K.label, "schema"),
+              ue(_, O, Z.label || Z.name, "other")
+            ]
+          }))
+        ]), p;
+      }, [])
+    ), h = x(() => [
+      { label: _("report.section.datasource.none"), value: null },
+      { label: _("report.section.datasource.grandTotal"), value: 0 },
+      ...[...V.value].slice(0, V.value.length - 1).map((p, f) => ({
+        label: ue(_, O, p.label, "other"),
+        value: f + 1
+      }))
+    ]), s = x(() => [
+      {
+        label: _("report.section.datasource.position.top"),
+        value: bl.top
+      },
+      {
+        label: _("report.section.datasource.position.bottom"),
+        value: bl.bottom
+      }
+    ]), S = x(
+      () => `rollup-${n.value}-${V.value.map((p) => xe(p)).join("|")}`
+    ), R = x(() => [
+      {
+        label: _("report.section.datasource.none"),
+        value: null
+      },
+      ...Object.keys(yl).map((p) => ({
+        label: O(`report.section.datasource.periodType.${p}`) ? _(`report.section.datasource.periodType.${p}`) : p,
+        value: yl[p]
+      }))
+    ]), M = x(() => [
+      { label: _("report.section.datasource.joinType.left"), value: "LEFT" },
+      { label: _("report.section.datasource.joinType.fullOuter"), value: "FULL_OUTER" }
+    ]), d = x(() => [
+      { label: _("report.section.datasource.sparklineType.line"), value: "LINECHART" },
+      { label: _("report.section.datasource.sparklineType.bar"), value: "BARCHART" },
+      { label: _("report.section.datasource.sparklineType.stackedBar"), value: "STACKBARCHART" },
+      { label: _("report.section.datasource.sparklineType.progress"), value: "PROGRESS" }
+    ]);
+    return (p, f) => {
+      const K = A("FmIcon"), Z = A("FmButton"), j = A("FmSwitch"), oe = A("FmSelect"), P = A("FmTextField"), g = A("FmStepperField");
+      return m(), I(sl, null, {
+        header: ee(() => [
+          i.value ? z("", !0) : (m(), W("span", {
+            key: 0,
+            class: "join-drag-handle cursor-grab flex items-center mr-2",
+            onClick: f[0] || (f[0] = he(() => {
+            }, ["stop"]))
+          }, [
+            u(K, { name: "drag_handle" })
+          ])),
+          b("p", null, Y(a.label), 1),
+          f[26] || (f[26] = b("div", { class: "grow" }, null, -1)),
+          a.closeable ? (m(), I(Z, {
+            key: 1,
+            icon: "close",
+            variant: "tertiary",
+            size: "md",
+            onClick: f[1] || (f[1] = he((t) => o("click-close"), ["stop"]))
+          })) : z("", !0)
+        ]),
+        content: ee(() => [
+          u(ft, {
+            modelValue: e.value,
+            "onUpdate:modelValue": f[2] || (f[2] = (t) => e.value = t),
+            label: l(_)("report.section.schema.title")
+          }, null, 8, ["modelValue", "label"]),
+          u(nl, {
+            modelValue: e.value.dimensions,
+            "onUpdate:modelValue": f[3] || (f[3] = (t) => e.value.dimensions = t),
+            options: L.value,
+            config: e.value,
+            max: a.config.maxDimension,
+            "has-row-column": !0,
+            onConfig: f[4] || (f[4] = (t) => {
+              e.value = t;
+            })
+          }, null, 8, ["modelValue", "options", "config", "max"]),
+          u(j, {
+            "label-placement": "right",
+            label: l(_)("report.section.datasource.comparable"),
+            "model-value": e.value.isComparable ?? !1,
+            "onUpdate:modelValue": f[5] || (f[5] = (t) => {
+              e.value.isComparable = t;
+            })
+          }, null, 8, ["label", "model-value"]),
+          y.value ? (m(), I(j, {
+            key: 0,
+            "label-placement": "right",
+            label: l(_)("report.section.datasource.cumulative"),
+            "model-value": e.value.isCumulative ?? !1,
+            "onUpdate:modelValue": f[6] || (f[6] = (t) => {
+              e.value.isCumulative = t;
+            })
+          }, null, 8, ["label", "model-value"])) : z("", !0),
+          a.config.isDrillConfigurable && i.value ? (m(), I(j, {
+            key: 1,
+            label: l(_)("report.section.datasource.drill"),
+            "label-placement": "right",
+            "model-value": e.value.isDrillable ?? !1,
+            "onUpdate:modelValue": f[7] || (f[7] = (t) => {
+              e.value.isDrillable = t;
+            })
+          }, null, 8, ["label", "model-value"])) : z("", !0),
+          i.value && !v.value ? (m(), I(j, {
+            key: 2,
+            modelValue: e.value.isBlend,
+            "onUpdate:modelValue": f[8] || (f[8] = (t) => e.value.isBlend = t),
+            label: l(_)("report.section.datasource.blend"),
+            "label-placement": "right"
+          }, null, 8, ["modelValue", "label"])) : z("", !0),
+          a.config.canRollup && i.value ? (m(), I(oe, {
+            key: S.value,
+            modelValue: e.value.rollup,
+            "onUpdate:modelValue": f[9] || (f[9] = (t) => e.value.rollup = t),
+            label: l(_)("report.section.datasource.subTotal"),
+            items: h.value
+          }, null, 8, ["modelValue", "label", "items"])) : z("", !0),
+          a.config.showRollupPosition && i.value ? (m(), I(oe, {
+            key: `rollup-position-${l(n)}`,
+            modelValue: e.value.rollupPosition,
+            "onUpdate:modelValue": f[10] || (f[10] = (t) => e.value.rollupPosition = t),
+            label: l(_)("report.section.datasource.position.showPosition"),
+            items: s.value
+          }, null, 8, ["modelValue", "label", "items"])) : z("", !0),
+          a.config.type === l(J).Table && i.value ? (m(), I(P, {
+            key: 5,
+            modelValue: e.value.grandTotalLabel,
+            "onUpdate:modelValue": f[11] || (f[11] = (t) => e.value.grandTotalLabel = t),
+            label: l(_)("report.section.datasource.grandTotalLabel"),
+            placeholder: l(_)("report.section.datasource.grandTotal")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : z("", !0),
+          i.value ? z("", !0) : (m(), I(oe, {
+            key: `periodType-${l(n)}`,
+            modelValue: e.value.periodType,
+            "onUpdate:modelValue": f[12] || (f[12] = (t) => e.value.periodType = t),
+            label: l(_)("report.section.datasource.periodType.label"),
+            items: R.value
+          }, null, 8, ["modelValue", "label", "items"])),
+          a.config.canTranspose && i.value ? (m(), I(j, {
+            key: 7,
+            modelValue: e.value.isTransposed,
+            "onUpdate:modelValue": f[13] || (f[13] = (t) => e.value.isTransposed = t),
+            label: l(_)("report.section.datasource.transpose"),
+            "label-placement": "right"
+          }, null, 8, ["modelValue", "label"])) : z("", !0),
+          a.config.hasBreakdownDimension ? (m(), I(nl, {
+            key: 8,
+            "model-value": e.value.breakdownDimension ? [e.value.breakdownDimension] : [],
+            label: "breakdownDimension",
+            max: 1,
+            options: L.value,
+            config: e.value,
+            "onUpdate:modelValue": f[14] || (f[14] = (t) => {
+              e.value.breakdownDimension = t[0];
+            })
+          }, null, 8, ["model-value", "options", "config"])) : z("", !0),
+          B.value && !r.value ? (m(), I(nl, {
+            key: 9,
+            "model-value": e.value.sparklineDimension ? [e.value.sparklineDimension] : [],
+            label: "sparklineDimension",
+            max: 1,
+            options: L.value,
+            config: e.value,
+            "onUpdate:modelValue": f[15] || (f[15] = (t) => {
+              e.value.sparklineDimension = t[0];
+            })
+          }, null, 8, ["model-value", "options", "config"])) : z("", !0),
+          B.value && v.value ? (m(), I(oe, {
+            key: `sparklineType-${l(n)}`,
+            "model-value": e.value.sparklineType ?? "LINECHART",
+            label: l(_)("report.section.datasource.sparklineType.label"),
+            items: d.value,
+            "onUpdate:modelValue": f[16] || (f[16] = (t) => {
+              e.value.sparklineType = t, t !== "STACKBARCHART" && (e.value.sparklinePercentOfTotal = void 0);
+            })
+          }, null, 8, ["model-value", "label", "items"])) : z("", !0),
+          B.value && v.value && e.value.sparklineType === "STACKBARCHART" ? (m(), I(j, {
+            key: 11,
+            "model-value": e.value.sparklinePercentOfTotal ?? !1,
+            label: l(_)("report.section.datasource.sparklinePercentOfTotal"),
+            "label-placement": "right",
+            "onUpdate:modelValue": f[17] || (f[17] = (t) => {
+              e.value.sparklinePercentOfTotal = t;
+            })
+          }, null, 8, ["model-value", "label"])) : z("", !0),
+          B.value && v.value && r.value ? (m(), I(g, {
+            key: 12,
+            modelValue: w.value,
+            "onUpdate:modelValue": f[18] || (f[18] = (t) => w.value = t),
+            label: l(_)("report.section.datasource.sparklineTargetValue"),
+            type: "number",
+            min: 0
+          }, null, 8, ["modelValue", "label"])) : z("", !0),
+          u(Ft, {
+            modelValue: e.value.metrics,
+            "onUpdate:modelValue": f[19] || (f[19] = (t) => e.value.metrics = t),
+            options: L.value,
+            max: a.config.maxMetric,
+            config: e.value,
+            "has-row-column": a.config.type === l(J).Table,
+            "has-percent-of-total": v.value,
+            "has-xy": a.config.hasXy,
+            onConfig: f[20] || (f[20] = (t) => {
+              e.value = t;
+            })
+          }, null, 8, ["modelValue", "options", "max", "config", "has-row-column", "has-percent-of-total", "has-xy"]),
+          u(Gl, {
+            modelValue: e.value.filters,
+            "onUpdate:modelValue": f[21] || (f[21] = (t) => e.value.filters = t),
+            options: L.value,
+            dimensions: e.value.dimensions,
+            "breakdown-dimension": e.value.breakdownDimension,
+            metrics: e.value.metrics
+          }, null, 8, ["modelValue", "options", "dimensions", "breakdown-dimension", "metrics"]),
+          u($t, {
+            modelValue: e.value.sorts,
+            "onUpdate:modelValue": f[22] || (f[22] = (t) => e.value.sorts = t),
+            options: L.value,
+            dimensions: e.value.dimensions,
+            "breakdown-dimension": e.value.breakdownDimension,
+            metrics: e.value.metrics
+          }, null, 8, ["modelValue", "options", "dimensions", "breakdown-dimension", "metrics"]),
+          u(Bt, {
+            modelValue: e.value.limit,
+            "onUpdate:modelValue": f[23] || (f[23] = (t) => e.value.limit = t)
+          }, null, 8, ["modelValue"]),
+          e.value.conditions && v.value ? (m(), I(oe, {
+            key: 13,
+            "model-value": e.value.joinType ?? "LEFT",
+            label: l(_)("report.section.datasource.joinType.label"),
+            items: M.value,
+            "onUpdate:modelValue": f[24] || (f[24] = (t) => {
+              e.value.joinType = t;
+            })
+          }, null, 8, ["model-value", "label", "items"])) : z("", !0),
+          e.value.conditions ? (m(), I(jt, {
+            key: 14,
+            modelValue: e.value.conditions,
+            "onUpdate:modelValue": f[25] || (f[25] = (t) => e.value.conditions = t),
+            "join-field-options": L.value,
+            "main-field-options": N.value
+          }, null, 8, ["modelValue", "join-field-options", "main-field-options"])) : z("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Nt = { class: "fm-typo-en-title-sm-600" }, el = /* @__PURE__ */ de({
+  __name: "TileEditorTabHeader",
+  props: /* @__PURE__ */ ve({
+    icon: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      default: void 0
+    }
+  }, {
+    modelValue: { type: Boolean, required: !0, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(D) {
+    const { t: c } = pe(), e = ge(D, "modelValue"), a = D, o = x(() => a.title || c("report.tile.setting"));
+    return (T, C) => {
+      const v = A("FmIcon");
+      return m(), W("div", {
+        class: "px-6 py-16 flex items-center gap-2 bg-fm-color-neutral-white border cursor-pointer",
+        onClick: C[0] || (C[0] = (_) => e.value = !e.value)
+      }, [
+        b("p", Nt, Y(o.value), 1),
+        C[1] || (C[1] = b("div", { class: "grow" }, null, -1)),
+        u(v, {
+          name: a.icon
+        }, null, 8, ["name"])
+      ]);
+    };
+  }
+}), Rt = /* @__PURE__ */ de({
+  __name: "TileEditorTabDesktop",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(D) {
+    const c = ge(D, "modelValue"), { t: e } = pe();
+    return (a, o) => (m(), W(me, null, [
+      u(el, {
+        modelValue: c.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (T) => c.value = T),
+        icon: "keyboard_double_arrow_left",
+        title: l(e)("report.tile.setupSetting")
+      }, null, 8, ["modelValue", "title"]),
+      kl(a.$slots, "default")
+    ], 64));
+  }
+}), It = { class: "fixed bottom-0 w-full" }, zt = /* @__PURE__ */ de({
+  __name: "TileEditorTabMobile",
+  props: {
+    modelValue: { required: !0, default: !1 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(D) {
+    const c = ge(D, "modelValue");
+    return (e, a) => {
+      const o = A("FmTopSheet");
+      return m(), W("div", It, [
+        u(el, {
+          modelValue: c.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (T) => c.value = T),
+          icon: "keyboard_double_arrow_up"
+        }, null, 8, ["modelValue"]),
+        u(o, {
+          modelValue: c.value,
+          "onUpdate:modelValue": a[2] || (a[2] = (T) => c.value = T),
+          "fullscreen-size": "sm"
+        }, {
+          default: ee(() => [
+            u(el, {
+              modelValue: c.value,
+              "onUpdate:modelValue": a[1] || (a[1] = (T) => c.value = T),
+              icon: "keyboard_double_arrow_down"
+            }, null, 8, ["modelValue"]),
+            c.value ? kl(e.$slots, "default", { key: 0 }) : z("", !0)
+          ]),
+          _: 3
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+function Al(D, c = 600) {
+  const e = ae(null);
+  function a() {
+    D.value = !0, e.value && clearTimeout(e.value), e.value = setTimeout(() => {
+      D.value = !1, e.value = null;
+    }, c);
+  }
+  function o() {
+    e.value && (clearTimeout(e.value), e.value = null), D.value = !1;
+  }
+  return rl(() => {
+    o();
+  }), {
+    markStyleEditing: a,
+    resetStyleEditing: o
+  };
+}
+const Pt = { class: "flex flex-col gap-5" }, Et = { class: "fm-typo-en-body-lg-600" }, Wt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-tertiary" }, Xt = { class: "flex gap-16" }, Ht = { class: "flex flex-col gap-8 max-w-[120px]" }, qt = { class: "fm-typo-en-body-lg-600" }, Gt = { class: "flex flex-col gap-16" }, Jt = { class: "fm-typo-en-body-lg-600" }, Yt = { class: "flex flex-row gap-8" }, Kt = {
+  key: 1,
+  class: "flex flex-col gap-16 pt-8"
+}, Zt = /* @__PURE__ */ de({
+  __name: "TitleSection",
+  props: /* @__PURE__ */ ve({
+    title: {},
+    description: {},
+    showSearchToggle: { type: Boolean },
+    showTitleIconSettings: { type: Boolean },
+    model: {}
+  }, {
+    isEditingStyle: { type: Boolean, required: !1, default: !1 },
+    isEditingStyleModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["update:model", "update:title", "update:description"], ["update:isEditingStyle"]),
+  setup(D, { emit: c }) {
+    const e = ge(D, "isEditingStyle"), { markStyleEditing: a } = Al(e), o = D, T = c, { t: C } = pe(), v = [
+      { label: C("report.tile.widget.icon.small"), value: Pe.Small },
+      { label: C("report.tile.widget.icon.medium"), value: Pe.Medium },
+      { label: C("report.tile.widget.icon.large"), value: Pe.Large },
+      { label: C("report.tile.widget.icon.extraLarge"), value: Pe.ExtraLarge }
+    ], _ = [
+      { label: C("report.tile.widget.icon.material"), value: Le.Material },
+      { label: C("report.tile.widget.icon.customSvg"), value: Le.Custom }
+    ], O = Ke((S) => {
+      T("update:title", S);
+    }, 500), n = x({
+      get: () => o.title ?? "",
+      set: (S) => {
+        a(), O(S);
+      }
+    }), i = x({
+      get: () => o.description ?? "",
+      set: (S) => {
+        a(), T("update:description", S);
+      }
+    }), y = x({
+      get: () => o.model.showTitle ?? !0,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, showTitle: S });
+      }
+    }), V = x({
+      get: () => o.model.showSearchBar ?? !0,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, showSearchBar: S });
+      }
+    }), B = x({
+      get: () => o.model.titleIconType === Le.Custom ? ot(o.model.titleIcon ?? "") : o.model.titleIcon ?? "",
+      set: (S) => {
+        a();
+        const R = r.value === Le.Custom ? at(S) : S.trim();
+        T("update:model", { ...o.model, titleIcon: R });
+      }
+    }), r = x({
+      get: () => {
+        var S;
+        return o.model.titleIconType ?? ((S = o.model.titleIcon) != null && S.trim().startsWith("<svg") ? Le.Custom : Le.Material);
+      },
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleIconType: S });
+      }
+    }), w = x({
+      get: () => o.model.titleIconSize ?? Pe.Small,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleIconSize: S });
+      }
+    }), N = x({
+      get: () => o.model.titleFontSize ?? 14,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleFontSize: Math.min(Number(S), 24) });
+      }
+    }), L = x({
+      get: () => o.model.titleBold ?? !1,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleBold: S });
+      }
+    }), h = x({
+      get: () => o.model.titleItalic ?? !1,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleItalic: S });
+      }
+    }), s = x({
+      get: () => o.model.titleUnderline ?? !1,
+      set: (S) => {
+        a(), T("update:model", { ...o.model, titleUnderline: S });
+      }
+    });
+    return (S, R) => {
+      const M = A("FmTextField"), d = A("FmTextarea"), p = A("FmStepperField"), f = A("FmButton"), K = A("FmSwitch"), Z = A("FmSelect");
+      return m(), W(me, null, [
+        b("div", Pt, [
+          u(M, {
+            modelValue: n.value,
+            "onUpdate:modelValue": R[0] || (R[0] = (j) => n.value = j),
+            label: l(C)("report.tile.widget.title"),
+            placeholder: l(C)("report.tile.widget.titlePlaceholder")
+          }, null, 8, ["modelValue", "label", "placeholder"]),
+          u(d, {
+            modelValue: i.value,
+            "onUpdate:modelValue": R[1] || (R[1] = (j) => i.value = j),
+            disabled: n.value === "",
+            placeholder: l(C)("report.tile.widget.descriptionPlaceholder"),
+            "helper-text": l(C)("report.tile.widget.descriptionHelper")
+          }, {
+            label: ee(() => [
+              b("p", Et, Y(l(C)("report.tile.widget.widgetDescription")), 1),
+              b("p", Wt, " (" + Y(l(C)("report.tile.widget.optional")) + ") ", 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "disabled", "placeholder", "helper-text"]),
+          b("div", Xt, [
+            b("div", Ht, [
+              b("p", qt, Y(l(C)("report.section.datasource.title.titleFontSize")), 1),
+              u(p, {
+                modelValue: N.value,
+                "onUpdate:modelValue": R[2] || (R[2] = (j) => N.value = j),
+                max: 24,
+                min: 1,
+                type: "number"
+              }, null, 8, ["modelValue"])
+            ]),
+            b("div", Gt, [
+              b("p", Jt, Y(l(C)("report.section.datasource.title.textStyleFormat")), 1),
+              b("div", Yt, [
+                u(f, {
+                  "append-icon": "format_bold",
+                  "model-value": S.model.titleBold ?? !1,
+                  variant: "tertiary",
+                  "icon-color": S.model.titleBold ? "neutral-gray-400" : "neutral-gray-300",
+                  "bg-color": S.model.titleBold ? "neutral-gray-100" : "neutral-white",
+                  class: "rounded-sm",
+                  onClick: R[3] || (R[3] = (j) => L.value = !L.value)
+                }, null, 8, ["model-value", "icon-color", "bg-color"]),
+                u(f, {
+                  "append-icon": "format_italic",
+                  "model-value": S.model.titleItalic ?? !1,
+                  "icon-color": S.model.titleItalic ? "neutral-gray-400" : "neutral-gray-300",
+                  "bg-color": S.model.titleItalic ? "neutral-gray-100" : "neutral-white",
+                  class: "rounded-sm",
+                  onClick: R[4] || (R[4] = (j) => h.value = !h.value)
+                }, null, 8, ["model-value", "icon-color", "bg-color"]),
+                u(f, {
+                  "append-icon": "format_underlined",
+                  "model-value": S.model.titleUnderline ?? !1,
+                  "icon-color": S.model.titleUnderline ? "neutral-gray-400" : "neutral-gray-300",
+                  "bg-color": S.model.titleUnderline ? "neutral-gray-100" : "neutral-white",
+                  class: "rounded-sm",
+                  onClick: R[5] || (R[5] = (j) => s.value = !s.value)
+                }, null, 8, ["model-value", "icon-color", "bg-color"])
+              ])
+            ])
+          ])
+        ]),
+        u(K, {
+          modelValue: y.value,
+          "onUpdate:modelValue": R[6] || (R[6] = (j) => y.value = j),
+          label: l(C)("report.section.datasource.title.showTitle"),
+          "label-placement": "right"
+        }, null, 8, ["modelValue", "label"]),
+        o.showSearchToggle ? (m(), I(K, {
+          key: 0,
+          modelValue: V.value,
+          "onUpdate:modelValue": R[7] || (R[7] = (j) => V.value = j),
+          label: l(C)("report.section.datasource.title.showSearchBar"),
+          "label-placement": "right"
+        }, null, 8, ["modelValue", "label"])) : z("", !0),
+        o.showTitleIconSettings ? (m(), W("div", Kt, [
+          u(Z, {
+            modelValue: r.value,
+            "onUpdate:modelValue": R[8] || (R[8] = (j) => r.value = j),
+            label: l(C)("report.tile.widget.icon.type"),
+            items: _
+          }, null, 8, ["modelValue", "label"]),
+          u(Z, {
+            modelValue: w.value,
+            "onUpdate:modelValue": R[9] || (R[9] = (j) => w.value = j),
+            label: l(C)("report.tile.widget.icon.size"),
+            items: v
+          }, null, 8, ["modelValue", "label"]),
+          r.value === l(Le).Material ? (m(), I(M, {
+            key: 0,
+            modelValue: B.value,
+            "onUpdate:modelValue": R[10] || (R[10] = (j) => B.value = j),
+            label: l(C)("report.tile.widget.icon.materialName"),
+            placeholder: l(C)("report.tile.widget.icon.materialPlaceholder")
+          }, null, 8, ["modelValue", "label", "placeholder"])) : (m(), I(d, {
+            key: 1,
+            modelValue: B.value,
+            "onUpdate:modelValue": R[11] || (R[11] = (j) => B.value = j),
+            class: "w-full",
+            label: l(C)("report.tile.widget.icon.customSvg"),
+            placeholder: l(C)("report.tile.widget.icon.customPlaceholder")
+          }, null, 8, ["modelValue", "label", "placeholder"]))
+        ])) : z("", !0)
+      ], 64);
+    };
+  }
+}), Qt = { class: "flex gap-16 justify-center items-center" }, eo = { class: "fm-typo-en-title-sm-600" }, lo = { class: "h-[40x]" }, Ml = /* @__PURE__ */ de({
+  __name: "TileEditorTab",
+  props: /* @__PURE__ */ ve({
+    hideConfiguration: {
+      type: Boolean,
+      default: !1
+    }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {},
+    isEditingStyle: { type: Boolean, required: !1, default: !1 },
+    isEditingStyleModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["hideConfiguration"], ["update:modelValue", "update:isEditingStyle"]),
+  setup(D, { emit: c }) {
+    const e = st(), { dateRange: a, timezone: o } = Re(e), T = {
+      startDate: a.value.startDate,
+      endDate: a.value.endDate
+    }, C = ae({
+      startDate: wl(a.value.startDate ?? (/* @__PURE__ */ new Date()).toISOString(), o.value),
+      endDate: wl(a.value.endDate ?? (/* @__PURE__ */ new Date()).toISOString(), o.value)
+    });
+    ke(
+      C,
+      () => {
+        C.value.endDate || (C.value.endDate = C.value.startDate);
+        const d = {
+          startDate: ut(C.value.startDate, o.value),
+          endDate: rt(C.value.endDate, o.value)
+        };
+        a.value = d;
+      },
+      { deep: !0 }
+    ), rl(() => {
+      a.value = { ...T };
+    });
+    const v = ge(D, "modelValue"), _ = ge(D, "isEditingStyle"), { breakpoints: O } = $l(), n = D, { promptMessage: i } = Tl(), y = c, { t: V, locale: B } = pe();
+    function r(d) {
+      v.value = Ze(d);
+    }
+    function w() {
+      const d = [...v.value.widget.config.joinDatasources || []];
+      d.push({ ...nt(v.value.widget.type), conditions: [] }), r({
+        ...v.value,
+        widget: {
+          ...v.value.widget,
+          config: {
+            ...v.value.widget.config,
+            joinDatasources: d
+          }
+        }
+      });
+    }
+    async function N(d) {
+      if (!await i({
+        title: V("report.tile.datasource.remove"),
+        message: V("report.tile.datasource.confirmRemove", { index: d + 1 })
+      })) return;
+      const f = [...v.value.widget.config.joinDatasources || []];
+      f.splice(d, 1), r({
+        ...v.value,
+        widget: {
+          ...v.value.widget,
+          config: {
+            ...v.value.widget.config,
+            joinDatasources: f
+          }
+        }
+      });
+    }
+    const L = (d, p) => {
+      let f = 1, K = 1;
+      switch (d) {
+        case J.Scorecard:
+          f = 1, K = 2;
+          break;
+        case J.BarChart:
+        case J.StackBarChart:
+        case J.ClusteredStackBarChart:
+        case J.LineChart:
+        case J.StackLineChart:
+          f = 4, K = 6;
+          break;
+        case J.Table:
+          f = 4, K = 12;
+          break;
+        case J.Circular:
+          f = 4, K = 4;
+          break;
+        case J.Spacer:
+          f = 0, K = 12;
+          break;
+      }
+      return {
+        id: p.id,
+        size: {
+          height: f,
+          width: K
+        },
+        widget: {
+          ...p.widget,
+          type: d
+        }
+      };
+    }, h = x(
+      () => ll.find((d) => d.type === v.value.widget.type)
+    ), s = x(() => v.value.widget.config.joinDatasources), S = /* @__PURE__ */ new WeakMap();
+    let R = 0;
+    function M(d) {
+      let p = S.get(d);
+      return p || (p = ++R, S.set(d, p)), p;
+    }
+    return ke(
+      () => v.value.size.height,
+      (d) => {
+        d < 1 && (v.value.size.height = 1), d > 12 && (v.value.size.height = 12);
+      }
+    ), ke(
+      () => v.value.size.width,
+      (d) => {
+        d < 1 && (v.value.size.width = 1), d > 12 && (v.value.size.width = 12);
+      }
+    ), (d, p) => {
+      const f = A("FmCircularProgress"), K = A("FmSimpleDateRangePicker"), Z = A("FmStepperField"), j = A("FmButton"), oe = A("FmForm");
+      return m(), I(Fl(l(O).lg || l(O).md ? Rt : zt), {
+        "model-value": n.hideConfiguration,
+        "onUpdate:modelValue": p[10] || (p[10] = (P) => y("hideConfiguration", P))
+      }, {
+        default: ee(() => [
+          v.value ? (m(), I(oe, {
+            key: 1,
+            ref: "form",
+            class: "px-6 py-16 flex flex-col gap-24 overflow-y-auto overflow-x-hidden"
+          }, {
+            default: ee(() => [
+              b("div", Qt, [
+                (m(), I(K, {
+                  key: `date-picker-${l(B)}`,
+                  modelValue: C.value,
+                  "onUpdate:modelValue": p[0] || (p[0] = (P) => C.value = P)
+                }, null, 8, ["modelValue"]))
+              ]),
+              u(sl, null, {
+                header: ee(() => [
+                  b("p", eo, Y(l(V)("report.tile.widget.details")), 1),
+                  p[11] || (p[11] = b("div", { class: "grow" }, null, -1))
+                ]),
+                content: ee(() => [
+                  b("div", {
+                    class: Ve(["flex flex-row", `${l(O).sm || l(O).xs ? "gap-16" : "gap-2"}`])
+                  }, [
+                    u(Z, {
+                      modelValue: v.value.size.width,
+                      "onUpdate:modelValue": p[1] || (p[1] = (P) => v.value.size.width = P),
+                      label: l(V)("report.tile.widget.width"),
+                      min: 1,
+                      max: 12
+                    }, null, 8, ["modelValue", "label"]),
+                    u(Z, {
+                      modelValue: v.value.size.height,
+                      "onUpdate:modelValue": p[2] || (p[2] = (P) => v.value.size.height = P),
+                      label: l(V)("report.tile.widget.height"),
+                      min: 1,
+                      max: 12
+                    }, null, 8, ["modelValue", "label"])
+                  ], 2),
+                  u(Zt, {
+                    "is-editing-style": _.value,
+                    "onUpdate:isEditingStyle": p[3] || (p[3] = (P) => _.value = P),
+                    title: v.value.widget.title,
+                    description: v.value.widget.description,
+                    model: v.value.widget.config,
+                    "show-search-toggle": v.value.widget.type === l(J).Table,
+                    "show-title-icon-settings": v.value.widget.type === l(J).Scorecard,
+                    "onUpdate:title": p[4] || (p[4] = (P) => v.value.widget.title = P),
+                    "onUpdate:description": p[5] || (p[5] = (P) => v.value.widget.description = P),
+                    "onUpdate:model": p[6] || (p[6] = (P) => v.value.widget.config = P)
+                  }, null, 8, ["is-editing-style", "title", "description", "model", "show-search-toggle", "show-title-icon-settings"])
+                ]),
+                _: 1
+              }),
+              u(sl, null, {
+                header: ee(() => [
+                  b("p", null, Y(l(V)("report.tile.widget.type")), 1),
+                  p[12] || (p[12] = b("div", { class: "grow" }, null, -1))
+                ]),
+                content: ee(() => [
+                  u(Jl, {
+                    "is-list": !0,
+                    "model-value": v.value.widget.type,
+                    class: "grid grid-cols-1 gap-2",
+                    "child-class": "flex flex-row p-[8px] gap-2",
+                    "exclude-widge-type": [l(J).Spacer],
+                    "onUpdate:modelValue": p[7] || (p[7] = (P) => v.value = l(Ze)(L(P, v.value)))
+                  }, null, 8, ["model-value", "exclude-widge-type"])
+                ]),
+                _: 1
+              }),
+              u(xl, {
+                modelValue: v.value.widget.config,
+                "onUpdate:modelValue": p[8] || (p[8] = (P) => v.value.widget.config = P),
+                label: l(V)("report.tile.datasource.main"),
+                config: h.value
+              }, null, 8, ["modelValue", "label", "config"]),
+              s.value ? (m(), I(l(He), {
+                key: 0,
+                list: s.value,
+                "item-key": M,
+                handle: ".join-drag-handle",
+                animation: 150,
+                class: "flex flex-col gap-24"
+              }, {
+                item: ee(({ index: P }) => [
+                  b("div", null, [
+                    u(xl, {
+                      modelValue: s.value[P],
+                      "onUpdate:modelValue": (g) => s.value[P] = g,
+                      label: l(V)("report.tile.datasource.join", { index: P + 1 }),
+                      config: h.value,
+                      "main-datasource-config": v.value.widget.config,
+                      closeable: !0,
+                      onClickClose: (g) => N(P)
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "config", "main-datasource-config", "onClickClose"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["list"])) : z("", !0),
+              b("div", lo, [
+                u(j, {
+                  label: l(V)("report.tile.datasource.joinButton"),
+                  variant: "secondary",
+                  icon: "add",
+                  "icon-position": "prepend",
+                  "border-color": "primary",
+                  "text-color": "primary",
+                  class: "w-full",
+                  onClick: p[9] || (p[9] = (P) => w())
+                }, null, 8, ["label"])
+              ])
+            ]),
+            _: 1
+          }, 512)) : (m(), I(f, { key: 0 }))
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), to = { class: "flex flex-col gap-8" }, oo = { class: "pl-32 flex flex-col gap-8" }, ao = { class: "fm-typo-en-body-lg-600" }, no = { class: "flex flex-row gap-8" }, io = { class: "fm-typo-en-body-lg-600" }, so = { class: "flex flex-row gap-8" }, ro = /* @__PURE__ */ de({
+  __name: "LabelSection",
+  props: {
+    model: {}
+  },
+  emits: ["update:model"],
+  setup(D, { emit: c }) {
+    const e = D, a = c, { t: o } = pe(), T = x({
+      get: () => e.model.showLabel ?? !1,
+      set: (V) => {
+        a("update:model", { ...e.model, showLabel: V });
+      }
+    }), C = x({
+      get: () => e.model.labelRotation ?? 0,
+      set: (V) => a("update:model", { ...e.model, labelRotation: V })
+    }), v = x({
+      get: () => e.model.labelOffset ?? 0,
+      set: (V) => a("update:model", { ...e.model, labelOffset: V })
+    }), _ = x({
+      get: () => e.model.labelFontSize ?? 12,
+      set: (V) => a("update:model", { ...e.model, labelFontSize: V })
+    }), O = (V) => {
+      a("update:model", {
+        ...e.model,
+        labelAlign: e.model.labelAlign === V ? void 0 : V
+      });
+    }, n = (V) => {
+      a("update:model", {
+        ...e.model,
+        labelAnchor: e.model.labelAnchor === V ? void 0 : V
+      });
+    }, i = [
+      { icon: "align_horizontal_left", value: Ae.left, tooltip: "alignLeft" },
+      { icon: "align_justify_center", value: Ae.center, tooltip: "alignCenter" },
+      { icon: "align_horizontal_right", value: Ae.right, tooltip: "alignRight" },
+      { icon: "align_justify_flex_start", value: Ae.start, tooltip: "alignStart" },
+      { icon: "align_justify_flex_end", value: Ae.end, tooltip: "alignEnd" },
+      { icon: "align_flex_start", value: Ae.top, tooltip: "alignTop" },
+      { icon: "align_flex_end", value: Ae.bottom, tooltip: "alignBottom" }
+    ], y = [
+      { icon: "format_align_left", value: ol.start, tooltip: "anchorStart" },
+      { icon: "format_align_center", value: ol.center, tooltip: "anchorCenter" },
+      { icon: "format_align_right", value: ol.end, tooltip: "anchorEnd" }
+    ];
+    return (V, B) => {
+      const r = A("FmCheckbox"), w = A("FmButton"), N = A("FmTooltip"), L = A("FmTextField"), h = A("FmStepperField");
+      return m(), W("div", to, [
+        u(r, {
+          modelValue: T.value,
+          "onUpdate:modelValue": B[0] || (B[0] = (s) => T.value = s),
+          value: !1,
+          label: l(o)("report.section.datasource.label.showLabel"),
+          "label-placement": "right",
+          class: "fm-typo-en-body-lg-400"
+        }, null, 8, ["modelValue", "label"]),
+        Fe(b("div", oo, [
+          b("p", ao, Y(l(o)("report.section.datasource.alignment.textAlignment")), 1),
+          b("div", no, [
+            (m(), W(me, null, $e(i, ({ icon: s, value: S, tooltip: R }) => u(N, {
+              key: S,
+              variant: "plain",
+              placement: "top",
+              content: l(o)(`report.section.datasource.alignment.alignOptions.${R}`),
+              "z-index": 50
+            }, {
+              default: ee(() => [
+                u(w, {
+                  "append-icon": s,
+                  variant: "tertiary",
+                  "icon-color": V.model.labelAlign === S ? "neutral-gray-400" : "neutral-gray-300",
+                  "bg-color": V.model.labelAlign === S ? "neutral-gray-100" : "neutral-white",
+                  class: "rounded-sm",
+                  onClick: (M) => O(S)
+                }, null, 8, ["append-icon", "icon-color", "bg-color", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["content"])), 64))
+          ]),
+          b("p", io, Y(l(o)("report.section.datasource.alignment.anchor")), 1),
+          b("div", so, [
+            (m(), W(me, null, $e(y, ({ icon: s, value: S, tooltip: R }) => u(N, {
+              key: S,
+              variant: "plain",
+              placement: "top",
+              content: l(o)(`report.section.datasource.alignment.anchorOptions.${R}`),
+              "z-index": 50
+            }, {
+              default: ee(() => [
+                u(w, {
+                  "append-icon": s,
+                  variant: "tertiary",
+                  "icon-color": V.model.labelAnchor === S ? "neutral-gray-400" : "neutral-gray-300",
+                  "bg-color": V.model.labelAnchor === S ? "neutral-gray-100" : "neutral-white",
+                  class: "rounded-sm",
+                  onClick: (M) => n(S)
+                }, null, 8, ["append-icon", "icon-color", "bg-color", "onClick"])
+              ]),
+              _: 2
+            }, 1032, ["content"])), 64))
+          ]),
+          u(L, {
+            modelValue: C.value,
+            "onUpdate:modelValue": B[1] || (B[1] = (s) => C.value = s),
+            label: l(o)("report.section.datasource.alignment.rotation"),
+            type: "number",
+            min: -180,
+            max: 180,
+            step: 1
+          }, null, 8, ["modelValue", "label"]),
+          u(L, {
+            modelValue: v.value,
+            "onUpdate:modelValue": B[2] || (B[2] = (s) => v.value = s),
+            label: l(o)("report.section.datasource.alignment.offset"),
+            type: "number"
+          }, null, 8, ["modelValue", "label"]),
+          u(h, {
+            modelValue: _.value,
+            "onUpdate:modelValue": B[3] || (B[3] = (s) => _.value = s),
+            label: l(o)("report.section.datasource.fontSize"),
+            type: "number",
+            min: 1
+          }, null, 8, ["modelValue", "label"])
+        ], 512), [
+          [Te, T.value]
+        ])
+      ]);
+    };
+  }
+}), uo = { class: "flex flex-col gap-8" }, mo = { class: "pl-32 flex flex-col gap-8" }, co = { class: "pl-32 flex flex-col gap-8" }, po = { class: "pl-32 flex flex-col gap-8" }, vo = { class: "pl-32 flex flex-col gap-8" }, fo = { class: "pl-32 flex flex-col gap-8" }, go = { class: "pl-32 flex flex-col gap-8" }, yo = /* @__PURE__ */ de({
+  __name: "XySection",
+  props: {
+    model: {}
+  },
+  emits: ["update:model"],
+  setup(D, { emit: c }) {
+    const e = D, a = c, { t: o } = pe(), T = x({
+      get: () => e.model.showX ?? !0,
+      set: (r) => {
+        a("update:model", { ...e.model, showX: r });
+      }
+    }), C = x({
+      get: () => e.model.showXGrid ?? !1,
+      set: (r) => {
+        a("update:model", { ...e.model, showXGrid: r });
+      }
+    }), v = x({
+      get: () => e.model.showXTick ?? !0,
+      set: (r) => {
+        a("update:model", { ...e.model, showXTick: r });
+      }
+    }), _ = x({
+      get: () => e.model.showY ?? !0,
+      set: (r) => {
+        a("update:model", { ...e.model, showY: r });
+      }
+    }), O = x({
+      get: () => e.model.showYGrid ?? !1,
+      set: (r) => {
+        a("update:model", { ...e.model, showYGrid: r });
+      }
+    }), n = x({
+      get: () => e.model.showYTick ?? !0,
+      set: (r) => {
+        a("update:model", { ...e.model, showYTick: r });
+      }
+    }), i = x({
+      get: () => e.model.showXTitle ?? !1,
+      set: (r) => {
+        a("update:model", { ...e.model, showXTitle: r });
+      }
+    }), y = x({
+      get: () => e.model.showYTitle ?? !1,
+      set: (r) => {
+        a("update:model", { ...e.model, showYTitle: r });
+      }
+    }), V = Ke((r) => {
+      a("update:model", { ...e.model, xTitle: r });
+    }, 500), B = Ke((r) => {
+      a("update:model", { ...e.model, yTitle: r });
+    }, 500);
+    return Vl(() => {
+      var r, w, N, L;
+      !e.model.xTitle && ((w = (r = e.model.metrics) == null ? void 0 : r[0]) != null && w.label) && V(e.model.metrics[0].label), !e.model.yTitle && ((L = (N = e.model.dimensions) == null ? void 0 : N[0]) != null && L.label) && B(e.model.dimensions[0].label);
+    }), (r, w) => {
+      const N = A("FmCheckbox"), L = A("FmStepperField"), h = A("FmTextField");
+      return m(), W("div", uo, [
+        u(N, {
+          modelValue: T.value,
+          "onUpdate:modelValue": w[0] || (w[0] = (s) => T.value = s),
+          label: l(o)("report.section.datasource.axis.showX"),
+          "label-placement": "right",
+          value: !0
+        }, null, 8, ["modelValue", "label"]),
+        Fe(b("div", mo, [
+          u(N, {
+            modelValue: C.value,
+            "onUpdate:modelValue": w[1] || (w[1] = (s) => C.value = s),
+            label: l(o)("report.section.datasource.axis.showGrid"),
+            "label-placement": "right",
+            value: !1
+          }, null, 8, ["modelValue", "label"]),
+          u(N, {
+            modelValue: v.value,
+            "onUpdate:modelValue": w[2] || (w[2] = (s) => v.value = s),
+            label: l(o)("report.section.datasource.axis.showTick"),
+            "label-placement": "right",
+            value: !0
+          }, null, 8, ["modelValue", "label"]),
+          Fe(b("div", co, [
+            u(L, {
+              label: l(o)("report.section.datasource.fontSize"),
+              type: "number",
+              "model-value": r.model.xTickFontSize ?? 12,
+              min: 1,
+              "onUpdate:modelValue": w[3] || (w[3] = (s) => {
+                a("update:model", { ...r.model, xTickFontSize: Number(s) });
+              })
+            }, null, 8, ["label", "model-value"])
+          ], 512), [
+            [Te, r.model.showXTick ?? !0]
+          ]),
+          u(N, {
+            modelValue: i.value,
+            "onUpdate:modelValue": w[4] || (w[4] = (s) => i.value = s),
+            label: l(o)("report.section.datasource.axis.showTitle"),
+            "label-placement": "right",
+            value: !0
+          }, null, 8, ["modelValue", "label"]),
+          Fe(b("div", po, [
+            u(h, {
+              "model-value": r.model.xTitle,
+              label: l(o)("report.common.title"),
+              placeholder: l(o)("report.tile.widget.titlePlaceholder"),
+              "onUpdate:modelValue": l(V)
+            }, null, 8, ["model-value", "label", "placeholder", "onUpdate:modelValue"]),
+            u(L, {
+              label: l(o)("report.section.datasource.fontSize"),
+              type: "number",
+              "model-value": r.model.xTitleFontSize ?? 12,
+              min: 1,
+              "onUpdate:modelValue": w[5] || (w[5] = (s) => {
+                a("update:model", { ...r.model, xTitleFontSize: Number(s) });
+              })
+            }, null, 8, ["label", "model-value"])
+          ], 512), [
+            [Te, i.value]
+          ])
+        ], 512), [
+          [Te, r.model.showX ?? !0]
+        ]),
+        u(N, {
+          modelValue: _.value,
+          "onUpdate:modelValue": w[6] || (w[6] = (s) => _.value = s),
+          label: l(o)("report.section.datasource.axis.showY"),
+          "label-placement": "right",
+          value: !0
+        }, null, 8, ["modelValue", "label"]),
+        Fe(b("div", vo, [
+          u(N, {
+            modelValue: O.value,
+            "onUpdate:modelValue": w[7] || (w[7] = (s) => O.value = s),
+            label: l(o)("report.section.datasource.axis.showGrid"),
+            "label-placement": "right",
+            value: !1
+          }, null, 8, ["modelValue", "label"]),
+          u(N, {
+            modelValue: n.value,
+            "onUpdate:modelValue": w[8] || (w[8] = (s) => n.value = s),
+            label: l(o)("report.section.datasource.axis.showTick"),
+            "label-placement": "right",
+            value: !0
+          }, null, 8, ["modelValue", "label"]),
+          Fe(b("div", fo, [
+            u(L, {
+              label: l(o)("report.section.datasource.fontSize"),
+              type: "number",
+              "model-value": r.model.yTickFontSize ?? 12,
+              min: 1,
+              "onUpdate:modelValue": w[9] || (w[9] = (s) => {
+                a("update:model", { ...r.model, yTickFontSize: Number(s) });
+              })
+            }, null, 8, ["label", "model-value"])
+          ], 512), [
+            [Te, r.model.showYTick ?? !0]
+          ]),
+          u(N, {
+            modelValue: y.value,
+            "onUpdate:modelValue": w[10] || (w[10] = (s) => y.value = s),
+            label: l(o)("report.section.datasource.axis.showTitle"),
+            "label-placement": "right",
+            value: !0
+          }, null, 8, ["modelValue", "label"]),
+          Fe(b("div", go, [
+            u(h, {
+              "model-value": r.model.yTitle,
+              label: l(o)("report.common.title"),
+              placeholder: l(o)("report.tile.widget.titlePlaceholder"),
+              "onUpdate:modelValue": l(B)
+            }, null, 8, ["model-value", "label", "placeholder", "onUpdate:modelValue"]),
+            u(L, {
+              label: l(o)("report.section.datasource.fontSize"),
+              type: "number",
+              "model-value": r.model.yTitleFontSize ?? 12,
+              min: 1,
+              "onUpdate:modelValue": w[11] || (w[11] = (s) => {
+                a("update:model", { ...r.model, yTitleFontSize: Number(s) });
+              })
+            }, null, 8, ["label", "model-value"])
+          ], 512), [
+            [Te, y.value]
+          ])
+        ], 512), [
+          [Te, r.model.showY ?? !0]
+        ])
+      ]);
+    };
+  }
+}), bo = { class: "flex flex-col gap-8" }, ho = { class: "pl-32 flex flex-col gap-8" }, wo = { class: "text-fm-color-typo-primary fm-typo-en-body-lg-600" }, Co = ["onKeydown"], xo = /* @__PURE__ */ de({
+  __name: "LegendSection",
+  props: {
+    model: {},
+    isCircularWidget: { type: Boolean }
+  },
+  emits: ["update:model"],
+  setup(D, { emit: c }) {
+    const e = D, a = c, { t: o } = pe(), T = [
+      { label: o("report.section.datasource.position.top"), value: "top" },
+      { label: o("report.section.datasource.position.bottom"), value: "bottom" },
+      { label: o("report.section.datasource.position.left"), value: "left" },
+      { label: o("report.section.datasource.position.right"), value: "right" }
+    ], C = x({
+      get: () => e.model.showLegend !== void 0 ? e.model.showLegend : e.isCircularWidget === !0,
+      set: (B) => {
+        a("update:model", { ...e.model, showLegend: B });
+      }
+    }), v = x({
+      get: () => e.model.usePointStyle ?? !0,
+      set: (B) => {
+        a("update:model", { ...e.model, usePointStyle: B });
+      }
+    }), _ = x({
+      get: () => e.model.legendFontSize ?? null,
+      set: (B) => {
+        if (B == null) {
+          a("update:model", { ...e.model, legendFontSize: void 0 });
+          return;
+        }
+        a("update:model", { ...e.model, legendFontSize: Math.min(Number(B), 24) });
+      }
+    }), O = x(() => e.model.legendColor ?? "#6b6b6b"), n = ae(O.value), i = ae(null);
+    ke(
+      () => e.model.legendColor,
+      (B) => {
+        n.value = B ?? "#6b6b6b";
+      }
+    );
+    function y() {
+      a("update:model", { ...e.model, legendColor: n.value });
+    }
+    function V() {
+      var B;
+      (B = i.value) == null || B.click();
+    }
+    return (B, r) => {
+      const w = A("FmCheckbox"), N = A("FmSelect"), L = A("FmStepperField"), h = A("FmButton");
+      return m(), W("div", bo, [
+        u(w, {
+          modelValue: C.value,
+          "onUpdate:modelValue": r[0] || (r[0] = (s) => C.value = s),
+          class: "fm-typo-en-body-lg-400",
+          value: !1,
+          label: l(o)("report.section.datasource.legend.showLegend")
+        }, null, 8, ["modelValue", "label"]),
+        Fe(b("div", ho, [
+          u(w, {
+            modelValue: v.value,
+            "onUpdate:modelValue": r[1] || (r[1] = (s) => v.value = s),
+            label: l(o)("report.section.datasource.legend.usePointStyle"),
+            value: !1
+          }, null, 8, ["modelValue", "label"]),
+          u(N, {
+            label: l(o)("report.section.datasource.position.showPosition"),
+            items: T,
+            "model-value": B.model.legendPosition ?? "top",
+            "onUpdate:modelValue": r[2] || (r[2] = (s) => a("update:model", { ...B.model, legendPosition: s }))
+          }, null, 8, ["label", "model-value"]),
+          u(L, {
+            modelValue: _.value,
+            "onUpdate:modelValue": r[3] || (r[3] = (s) => _.value = s),
+            label: l(o)("report.section.datasource.legend.fontSize"),
+            max: 24,
+            min: 1,
+            type: "number",
+            placeholder: "Auto"
+          }, null, 8, ["modelValue", "label"]),
+          b("p", wo, Y(l(o)("report.section.datasource.legend.color")), 1),
+          b("div", {
+            class: "fm-field fm-field--sm flex items-center justify-between gap-8 border rounded-md p-2 border-[#c7c7cc] cursor-pointer",
+            role: "button",
+            tabindex: "0",
+            onClick: V,
+            onKeydown: [
+              vl(he(V, ["prevent"]), ["enter"]),
+              vl(he(V, ["prevent"]), ["space"])
+            ]
+          }, [
+            Fe(b("input", {
+              ref_key: "colorInputRef",
+              ref: i,
+              "onUpdate:modelValue": r[4] || (r[4] = (s) => n.value = s),
+              type: "color",
+              class: "legend-color-input cursor-pointer"
+            }, null, 512), [
+              [Wl, n.value]
+            ])
+          ], 40, Co),
+          u(h, {
+            size: "md",
+            label: l(o)("report.common.apply"),
+            disabled: n.value === O.value,
+            onClick: y
+          }, null, 8, ["label", "disabled"])
+        ], 512), [
+          [Te, C.value]
+        ])
+      ]);
+    };
+  }
+}), ko = /* @__PURE__ */ Bl(xo, [["__scopeId", "data-v-0e072961"]]), Fo = { class: "flex flex-col gap-8" }, Vo = { class: "flex flex-col sm:flex-row items-center" }, So = { class: "flex flex-col gap-8" }, _o = { class: "flex w-full gap-8 text-fm-color-system-info-300" }, To = {
+  key: 1,
+  class: "grid grid-cols-1 gap-8 sm:grid-cols-2"
+}, $o = ["title"], Do = ["aria-label"], Uo = { class: "min-w-0 truncate text-[12px] uppercase leading-none tracking-[0.02em] text-[#6b6b6b]" }, Bo = ["value", "onInput", "onChange"], Lo = {
+  key: 0,
+  class: "flex items-center gap-8"
+}, Ao = {
+  key: 2,
+  class: "flex flex-col gap-8"
+}, Mo = { class: "fm-shadow-light-100 rounded-md border border-fm-color-neutral-gray-100 bg-fm-color-neutral-white p-10" }, Oo = { class: "mb-8 flex min-w-0 items-center gap-[8px] pb-8" }, jo = ["title"], No = ["title"], Ro = { class: "flex w-full items-center gap-8 sm:w-auto sm:shrink-0" }, Io = ["aria-label"], zo = { class: "min-w-0 truncate text-[12px] uppercase leading-none tracking-[0.02em]" }, Po = ["value", "disabled", "onInput", "onChange"], Eo = {
+  key: 0,
+  class: "flex items-center gap-8"
+}, De = 10, Wo = /* @__PURE__ */ de({
+  __name: "ChartColorSection",
+  props: {
+    model: {},
+    showLayerControl: { type: Boolean },
+    limitToSeriesMode: { type: Boolean }
+  },
+  emits: ["update:model"],
+  setup(D, { emit: c }) {
+    const e = D, a = c, { t: o } = pe(), T = x(() => e.limitToSeriesMode ? [
+      {
+        label: o("report.section.datasource.styleTarget.series"),
+        value: re.series
+      }
+    ] : [
+      {
+        label: o("report.section.datasource.styleTarget.series"),
+        value: re.series
+      },
+      {
+        label: o("report.section.datasource.styleTarget.metric"),
+        value: re.metric
+      },
+      {
+        label: o("report.section.datasource.styleTarget.breakdown"),
+        value: re.breakdown
+      }
+    ]);
+    function C(F) {
+      return e.limitToSeriesMode ? re.series : F === re.breakdown ? re.breakdown : F === re.metric ? re.metric : re.series;
+    }
+    function v() {
+      const F = Array.isArray(e.model.metrics) ? e.model.metrics : [];
+      if (!e.model.isBlend)
+        return F;
+      const $ = Array.isArray(e.model.joinDatasources) ? e.model.joinDatasources.flatMap(
+        (U) => Array.isArray(U == null ? void 0 : U.metrics) ? U.metrics : []
+      ) : [];
+      return [...F, ...$];
+    }
+    function _(F, $) {
+      var E, G;
+      return F ? ((E = F.label) == null ? void 0 : E.trim()) || ((G = F.name) == null ? void 0 : G.trim()) || `${o("report.section.datasource.styleTarget.metric")} ${$ + 1}` : `${o("report.section.datasource.styleTarget.metric")} ${$ + 1}`;
+    }
+    function O(F) {
+      if (F === re.breakdown)
+        return [];
+      if (F === re.metric) {
+        const $ = v();
+        if ($.length > 0)
+          return $.map((U, E) => _(U, E));
+      }
+      return fe.map(
+        ($, U) => `${o("report.section.datasource.chartColor.series")} ${U + 1}`
+      );
+    }
+    function n(F) {
+      return Array.from({ length: Math.max(1, F) }).map(
+        ($, U) => `${o("report.section.datasource.chartColor.series")} ${U + 1}`
+      );
+    }
+    function i(F, $) {
+      const U = Array.isArray(F) ? F.length : 0, E = Array.isArray($) ? $.length : 0;
+      return Math.max(fe.length, U, E, 1);
+    }
+    const y = x(() => {
+      const F = v();
+      return F.length === 0 ? [o("report.section.datasource.styleTarget.metric")] : F.map(($, U) => _($, U));
+    }), V = ae(fe.length), B = ae(fe.length);
+    function r(F, $) {
+      const U = Math.max(1, $), E = Array.isArray(F) ? F.length : 0, G = E > 0 ? Math.ceil(E / U) : 0;
+      return Math.max(fe.length, G, 1);
+    }
+    const w = x(() => {
+      const F = Math.max(1, B.value);
+      return Array.from({ length: F }).map(
+        ($, U) => `${o("report.section.datasource.styleTarget.breakdown")} ${U + 1}`
+      );
+    });
+    function N(F, $) {
+      const U = R(F) ?? "#000000", E = (G) => {
+        const X = Number.parseInt(U.slice(G, G + 2), 16);
+        return Math.round(X + (255 - X) * $).toString(16).padStart(2, "0").toUpperCase();
+      };
+      return `#${E(1)}${E(3)}${E(5)}`;
+    }
+    function L(F) {
+      return Math.min(0.55 + (F - 1) * 0.18, 0.95);
+    }
+    function h(F, $, U) {
+      return F * U + $;
+    }
+    function s(F, $, U, E) {
+      const G = $.length;
+      if (F.length === 0 || G <= 0)
+        return [];
+      const X = al(F.length);
+      return F.flatMap((q, ne) => {
+        const te = X[ne], ce = U == null ? void 0 : U[h(ne, 0, G)], Me = R(ce) ?? te;
+        return $.map((tl, Oe) => {
+          const El = h(ne, Oe, G), pl = Oe === 0 ? Me : N(Me, L(Oe));
+          return E && Oe > 0 ? pl : R(U == null ? void 0 : U[El]) ?? pl;
+        });
+      });
+    }
+    const S = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+    function R(F) {
+      if (!F)
+        return null;
+      const $ = F.trim();
+      if (!S.test($))
+        return null;
+      if ($.length === 4) {
+        const U = $.charAt(1), E = $.charAt(2), G = $.charAt(3);
+        return `#${U}${U}${E}${E}${G}${G}`.toUpperCase();
+      }
+      return $.toUpperCase();
+    }
+    function M() {
+      const F = () => Math.floor(Math.random() * 256).toString(16).padStart(2, "0").toUpperCase();
+      return `#${F()}${F()}${F()}`;
+    }
+    function d(F, $) {
+      const U = al($);
+      return !Array.isArray(F) || F.length === 0 ? U : Array.from({ length: $ }).map((E, G) => {
+        const X = U[G];
+        return R(F[G]) ?? X;
+      });
+    }
+    function p(F, $) {
+      if ($ <= 0)
+        return [];
+      const U = Array.from({ length: $ }, () => 0), E = /* @__PURE__ */ new Set();
+      for (let X = 0; X < $; X++) {
+        const q = Number(F == null ? void 0 : F[X]);
+        Number.isInteger(q) && q >= 1 && q <= $ && !E.has(q) && (U[X] = q, E.add(q));
+      }
+      let G = 1;
+      for (let X = 0; X < $; X++)
+        if (U[X] === 0) {
+          for (; E.has(G) && G <= $; )
+            G++;
+          U[X] = Math.min(G, $), E.add(U[X]);
+        }
+      return U;
+    }
+    const f = x(() => t.value === re.series ? n(V.value) : O(t.value)), K = x(
+      () => Array.from({ length: f.value.length }).map((F, $) => ({
+        label: `L${$ + 1}`,
+        value: $ + 1
+      }))
+    ), Z = x(() => typeof e.showLayerControl == "boolean" ? e.showLayerControl : !!e.model.stackBarOverlap), j = ae([]), oe = ae([]), P = ae([]), g = ae(!0), t = ae(re.series), k = ae(!0), le = ae(!1), ie = ae(!1);
+    ke(
+      [
+        () => e.model.chartColors,
+        () => e.model.chartColorBinding,
+        () => e.model.chartBreakdownColors,
+        () => e.model.chartUseSecondaryMetricShades,
+        () => e.model.metrics,
+        () => e.model.isBlend,
+        () => e.model.joinDatasources
+      ],
+      ([F, $]) => {
+        le.value = !0, t.value = C($), V.value = i(
+          F,
+          e.model.chartColorLayers
+        ), B.value = r(
+          e.model.chartBreakdownColors,
+          Math.max(1, y.value.length)
+        );
+        const U = t.value === re.series ? V.value : O(t.value).length;
+        j.value = d(F, U), oe.value = p(e.model.chartColorLayers, U), g.value = e.model.chartUseSecondaryMetricShades !== !1, P.value = s(
+          w.value,
+          y.value,
+          e.model.chartBreakdownColors,
+          g.value
+        ), le.value = !1;
+      },
+      { immediate: !0, deep: !0 }
+    );
+    function H() {
+      const F = t.value === re.series, $ = t.value === re.series ? fe.length : O(t.value).length, U = d(void 0, $), E = p(void 0, $), G = j.value.length === U.length && j.value.every((te, ce) => te === U[ce]), X = oe.value.length === E.length && oe.value.every((te, ce) => te === E[ce]), q = s(
+        Array.from({ length: fe.length }, (te, ce) => `breakdown-${ce + 1}`),
+        y.value,
+        void 0,
+        g.value
+      ), ne = P.value.length === q.length && P.value.every((te, ce) => te === q[ce]);
+      return {
+        ...e.model,
+        chartColorBinding: F ? void 0 : t.value,
+        chartColors: G ? void 0 : [...j.value],
+        chartColorLayers: X ? void 0 : [...oe.value],
+        chartBreakdownColors: ne ? void 0 : [...P.value],
+        chartUseSecondaryMetricShades: g.value
+      };
+    }
+    function Se() {
+      const F = H();
+      Rl(F) || a("update:model", F);
+    }
+    function _e() {
+      le.value || ie.value || Se();
+    }
+    ke(
+      [
+        j,
+        oe,
+        P,
+        g,
+        t,
+        V,
+        B
+      ],
+      () => {
+        _e();
+      },
+      { deep: !0 }
+    );
+    function Be(F, $) {
+      const U = [...j.value], E = al(Math.max(U.length, F + 1))[F];
+      U[F] = R($) ?? E, j.value = U;
+    }
+    function Ie(F) {
+      Be(F, M());
+    }
+    function ze(F) {
+      if (e.limitToSeriesMode)
+        return;
+      const $ = C(F);
+      if ($ === t.value)
+        return;
+      const U = $ === re.series ? V.value : O($).length;
+      t.value = $, j.value = d(j.value, U), oe.value = p(oe.value, U), $ === re.breakdown && (P.value = s(
+        w.value,
+        y.value,
+        P.value,
+        g.value
+      ));
+    }
+    function Ce(F, $) {
+      return F + 1 === $ ? "add" : "remove";
+    }
+    function ye(F) {
+      const $ = Math.max(fe.length, V.value), U = F + 1;
+      if (U === $) {
+        const te = $ + De;
+        V.value = te, j.value = d(j.value, te), oe.value = p(oe.value, te);
+        return;
+      }
+      if ($ <= fe.length)
+        return;
+      const G = U, X = Math.max(fe.length, $ - De), q = [...j.value], ne = [...oe.value];
+      q.splice(G, De), ne.splice(G, De), V.value = X, j.value = d(q, X), oe.value = p(ne, X);
+    }
+    function we(F) {
+      const $ = Math.max(fe.length, B.value), U = F + 1;
+      if (U === $) {
+        const Me = $ + De;
+        B.value = Me, P.value = s(
+          Array.from({ length: Me }, (tl, Oe) => `breakdown-${Oe + 1}`),
+          y.value,
+          P.value,
+          g.value
+        );
+        return;
+      }
+      if ($ <= fe.length)
+        return;
+      const G = Math.max(1, y.value.length), q = U * G, ne = De * G, te = Math.max(fe.length, $ - De), ce = [...P.value];
+      ce.splice(q, ne), B.value = te, P.value = s(
+        Array.from({ length: te }, (Me, tl) => `breakdown-${tl + 1}`),
+        y.value,
+        ce,
+        g.value
+      );
+    }
+    function Q(F, $) {
+      const U = oe.value.length;
+      if (U <= 0)
+        return;
+      const E = Number($);
+      if (!Number.isInteger(E) || E < 1 || E > U)
+        return;
+      const G = [...oe.value], X = G[F];
+      if (X === E)
+        return;
+      const q = G.findIndex(
+        (ne, te) => te !== F && ne === E
+      );
+      q >= 0 && (G[q] = X), G[F] = E, oe.value = G;
+    }
+    function Ge(F, $) {
+      const U = $.target;
+      U && (ie.value = !0, Be(F, U.value));
+    }
+    function Je(F, $) {
+      const U = $.target;
+      U && (Be(F, U.value), ie.value = !1, _e());
+    }
+    function se(F, $, U) {
+      const E = U.target;
+      if (!E)
+        return;
+      ie.value = !0;
+      const G = R(E.value);
+      if (!G)
+        return;
+      const X = y.value.length;
+      if (X <= 0)
+        return;
+      const q = h(F, $, X), ne = [...P.value];
+      if (ne[q] = G, g.value && $ === 0)
+        for (let te = 1; te < X; te++) {
+          const ce = h(F, te, X);
+          ne[ce] = N(G, L(te));
+        }
+      P.value = ne;
+    }
+    function Ol(F, $, U) {
+      const E = U.target;
+      if (!E)
+        return;
+      const G = R(E.value);
+      if (!G) {
+        ie.value = !1, _e();
+        return;
+      }
+      const X = y.value.length;
+      if (X <= 0) {
+        ie.value = !1, _e();
+        return;
+      }
+      const q = h(F, $, X), ne = [...P.value];
+      if (ne[q] = G, g.value && $ === 0)
+        for (let te = 1; te < X; te++) {
+          const ce = h(F, te, X);
+          ne[ce] = N(G, L(te));
+        }
+      P.value = ne, ie.value = !1, _e();
+    }
+    function jl(F, $) {
+      const U = M(), E = y.value.length;
+      if (E <= 0)
+        return;
+      const G = h(F, $, E), X = [...P.value];
+      if (X[G] = U, g.value && $ === 0)
+        for (let q = 1; q < E; q++) {
+          const ne = h(F, q, E);
+          X[ne] = N(U, L(q));
+        }
+      P.value = X;
+    }
+    function ml(F, $) {
+      const U = Array.isArray(F) ? F : [], E = Array.isArray($) ? $ : [];
+      return U.length !== E.length ? !1 : U.every((G, X) => G === E[X]);
+    }
+    function Nl(F, $) {
+      const U = Array.isArray(F) ? F : [], E = Array.isArray($) ? $ : [];
+      return U.length !== E.length ? !1 : U.every((G, X) => Number(G) === Number(E[X]));
+    }
+    function Rl(F) {
+      return F.chartColorBinding === e.model.chartColorBinding && F.chartUseSecondaryMetricShades === e.model.chartUseSecondaryMetricShades && ml(F.chartColors, e.model.chartColors) && Nl(F.chartColorLayers, e.model.chartColorLayers) && ml(F.chartBreakdownColors, e.model.chartBreakdownColors);
+    }
+    function Il(F) {
+      g.value = F, P.value = s(
+        Array.from({ length: B.value }, ($, U) => `breakdown-${U + 1}`),
+        y.value,
+        P.value,
+        g.value
+      );
+    }
+    function zl() {
+      t.value = re.series, V.value = fe.length, B.value = fe.length, j.value = d(void 0, fe.length), oe.value = p(void 0, fe.length), g.value = !0, P.value = s(
+        Array.from({ length: fe.length }, (F, $) => `breakdown-${$ + 1}`),
+        y.value,
+        void 0,
+        !0
+      );
+    }
+    function Pl() {
+      k.value = !k.value;
+    }
+    function cl(F) {
+      return (F + 1) % De === 0;
+    }
+    return rl(() => {
+      ie.value = !1;
+    }), (F, $) => {
+      const U = A("FmButton"), E = A("FmSelect"), G = A("FmCheckbox");
+      return m(), W("div", Fo, [
+        b("div", Vo, [
+          u(U, {
+            variant: "tertiary",
+            size: "md",
+            class: "min-w-0 w-full sm:flex-1 sm:w-auto !justify-start",
+            label: l(o)("report.section.datasource.chartColor.title"),
+            "prepend-icon": k.value ? "expand_less" : "expand_more",
+            "aria-expanded": k.value ? "true" : "false",
+            onClick: Pl
+          }, null, 8, ["label", "prepend-icon", "aria-expanded"])
+        ]),
+        Fe(b("div", So, [
+          u(E, {
+            "model-value": t.value,
+            items: T.value,
+            "onUpdate:modelValue": ze
+          }, null, 8, ["model-value", "items"]),
+          b("div", _o, [
+            u(U, {
+              variant: "tertiary",
+              "text-color": "text-fm-color-system-info-300",
+              size: "md",
+              class: "w-full",
+              label: l(o)("report.section.datasource.chartColor.reset"),
+              onClick: zl
+            }, null, 8, ["label"])
+          ]),
+          t.value === l(re).breakdown ? (m(), I(G, {
+            key: 0,
+            "model-value": g.value,
+            value: !1,
+            label: l(o)("report.section.datasource.chartColor.secondaryMetricAutoShade"),
+            "onUpdate:modelValue": $[0] || ($[0] = (X) => Il(!!X)),
+            class: "p-4"
+          }, null, 8, ["model-value", "label"])) : z("", !0),
+          t.value !== l(re).breakdown ? (m(), W("div", To, [
+            (m(!0), W(me, null, $e(j.value, (X, q) => (m(), W(me, {
+              key: `series-color-${q}`
+            }, [
+              b("div", {
+                class: Ve([
+                  "fm-shadow-light-100 rounded-md border border-fm-color-neutral-gray-100 p-10",
+                  Z.value ? "flex flex-col gap-8" : "flex flex-col gap-8 sm:flex-row sm:items-center sm:justify-between sm:gap-12"
+                ])
+              }, [
+                b("span", {
+                  class: Ve([
+                    "fm-typo-en-body-lg-600 min-w-0",
+                    Z.value ? "line-clamp-2 break-words" : "whitespace-normal break-words sm:flex-1"
+                  ]),
+                  title: f.value[q] || `${l(o)("report.section.datasource.chartColor.color")} ${q + 1}`
+                }, Y(f.value[q] || `${l(o)("report.section.datasource.chartColor.color")} ${q + 1}`), 11, $o),
+                b("div", {
+                  class: Ve([
+                    "flex items-center gap-8",
+                    Z.value ? "justify-between" : "w-full flex-wrap items-center justify-between sm:w-auto sm:flex-nowrap sm:shrink-0"
+                  ])
+                }, [
+                  Z.value ? (m(), I(E, {
+                    key: 0,
+                    class: "min-w-[92px]",
+                    "model-value": oe.value[q],
+                    items: K.value,
+                    "onUpdate:modelValue": (ne) => Q(q, ne)
+                  }, null, 8, ["model-value", "items", "onUpdate:modelValue"])) : z("", !0),
+                  b("label", {
+                    class: "relative inline-flex min-h-[34px] min-w-0 flex-1 cursor-pointer items-center gap-[8px] rounded-[8px] border border-[#d8d8d8] bg-white py-[4px] pl-[4px] pr-[8px] sm:flex-none",
+                    "aria-label": `Color ${q + 1}`
+                  }, [
+                    b("span", {
+                      class: "inline-block h-[20px] w-[28px] rounded-[4px] border border-[#cfcfcf]",
+                      style: il({ backgroundColor: X })
+                    }, null, 4),
+                    b("span", Uo, Y(X), 1),
+                    b("input", {
+                      type: "color",
+                      value: X,
+                      class: "absolute inset-0 cursor-pointer opacity-0",
+                      onInput: (ne) => Ge(q, ne),
+                      onChange: (ne) => Je(q, ne)
+                    }, null, 40, Bo)
+                  ], 8, Do),
+                  u(U, {
+                    variant: "tertiary",
+                    size: "md",
+                    icon: "casino",
+                    onClick: (ne) => Ie(q)
+                  }, null, 8, ["onClick"])
+                ], 2)
+              ], 2),
+              cl(q) ? (m(), W("div", Lo, [
+                u(U, {
+                  class: "w-full",
+                  size: "md",
+                  icon: Ce(q, V.value),
+                  onClick: (ne) => ye(q)
+                }, null, 8, ["icon", "onClick"])
+              ])) : z("", !0)
+            ], 64))), 128))
+          ])) : (m(), W("div", Ao, [
+            (m(!0), W(me, null, $e(w.value, (X, q) => (m(), W(me, {
+              key: `breakdown-group-${q}`
+            }, [
+              b("div", Mo, [
+                b("div", Oo, [
+                  b("span", {
+                    class: "fm-typo-en-body-lg-600 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+                    title: X
+                  }, Y(X), 9, jo)
+                ]),
+                (m(!0), W(me, null, $e(y.value, (ne, te) => (m(), W("div", {
+                  key: `${X}-${ne}-${te}`,
+                  class: "flex flex-col items-stretch gap-8 py-4 sm:flex-row sm:items-center sm:justify-between"
+                }, [
+                  b("span", {
+                    class: "fm-typo-en-body-md-400 min-w-0 flex-1 break-words sm:overflow-hidden sm:text-ellipsis sm:whitespace-nowrap",
+                    title: ne
+                  }, Y(ne), 9, No),
+                  b("div", Ro, [
+                    b("label", {
+                      class: Ve(["relative inline-flex min-h-[34px] min-w-0 flex-1 items-center gap-[8px] rounded-[8px] border border-[#d8d8d8] bg-white py-[4px] pl-[4px] pr-[8px] sm:w-full sm:max-w-[126px]", {
+                        "cursor-not-allowed opacity-[0.55]": g.value && te > 0,
+                        "cursor-pointer": !(g.value && te > 0)
+                      }]),
+                      "aria-label": `Breakdown color ${q + 1}-${te + 1}`
+                    }, [
+                      b("span", {
+                        class: "inline-block h-[20px] w-[28px] rounded-[4px] border border-[#cfcfcf]",
+                        style: il({
+                          backgroundColor: P.value[h(q, te, y.value.length)]
+                        })
+                      }, null, 4),
+                      b("span", zo, Y(P.value[h(q, te, y.value.length)]), 1),
+                      b("input", {
+                        type: "color",
+                        value: P.value[h(q, te, y.value.length)],
+                        class: Ve(["absolute inset-0 opacity-0", {
+                          "cursor-not-allowed": g.value && te > 0,
+                          "cursor-pointer": !(g.value && te > 0)
+                        }]),
+                        disabled: g.value && te > 0,
+                        onInput: (ce) => se(q, te, ce),
+                        onChange: (ce) => Ol(q, te, ce)
+                      }, null, 42, Po)
+                    ], 10, Io),
+                    u(U, {
+                      variant: "tertiary",
+                      size: "md",
+                      icon: "casino",
+                      class: "shrink-0",
+                      disabled: g.value && te > 0,
+                      onClick: (ce) => jl(q, te)
+                    }, null, 8, ["disabled", "onClick"])
+                  ])
+                ]))), 128))
+              ]),
+              cl(q) ? (m(), W("div", Eo, [
+                u(U, {
+                  class: "w-full",
+                  size: "md",
+                  icon: Ce(q, B.value),
+                  onClick: (ne) => we(q)
+                }, null, 8, ["icon", "onClick"])
+              ])) : z("", !0)
+            ], 64))), 128))
+          ]))
+        ], 512), [
+          [Te, k.value]
+        ])
+      ]);
+    };
+  }
+}), Xo = { class: "flex flex-col gap-8" }, Ho = { class: "flex items-center justify-between" }, qo = { class: "fm-typo-en-body-lg-600" }, Go = { class: "flex items-center gap-8 text-fm-color-system-info-300" }, Jo = { class: "grid grid-cols-2 gap-8" }, Yo = { class: "flex items-center gap-8" }, Ko = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Zo = /* @__PURE__ */ de({
+  __name: "ChartLineStyleSection",
+  props: {
+    model: {}
+  },
+  emits: ["update:model"],
+  setup(D, { emit: c }) {
+    const e = D, a = c, { t: o } = pe(), T = x(() => [
+      {
+        label: o("report.section.datasource.styleTarget.series"),
+        value: re.series
+      },
+      {
+        label: o("report.section.datasource.styleTarget.metric"),
+        value: re.metric
+      }
+    ]);
+    function C(d) {
+      return d && typeof d == "object" && "value" in d ? C(d.value) : d === re.metric ? re.metric : re.series;
+    }
+    function v(d, p) {
+      var K, Z;
+      return d ? ((K = d.label) == null ? void 0 : K.trim()) || ((Z = d.name) == null ? void 0 : Z.trim()) || `${o("report.section.datasource.styleTarget.metric")} ${p + 1}` : `${o("report.section.datasource.styleTarget.metric")} ${p + 1}`;
+    }
+    function _() {
+      const d = Array.isArray(e.model.metrics) ? e.model.metrics : [];
+      if (!e.model.isBlend)
+        return d;
+      const p = Array.isArray(e.model.joinDatasources) ? e.model.joinDatasources.flatMap(
+        (f) => Array.isArray(f == null ? void 0 : f.metrics) ? f.metrics : []
+      ) : [];
+      return [...d, ...p];
+    }
+    function O(d) {
+      if (d === re.metric) {
+        const p = _();
+        if (p.length > 0)
+          return p.map((f, K) => v(f, K));
+      }
+      return fe.map(
+        (p, f) => `${o("report.section.datasource.lineStyle.series")} ${f + 1}`
+      );
+    }
+    const n = x(() => [
+      {
+        label: o("report.section.datasource.lineStyle.solid"),
+        value: "solid"
+      },
+      {
+        label: o("report.section.datasource.lineStyle.dashed"),
+        value: "dashed"
+      },
+      {
+        label: o("report.section.datasource.lineStyle.dotted"),
+        value: "dotted"
+      }
+    ]);
+    function i(d) {
+      return d && typeof d == "object" && "value" in d ? i(d.value) : d === "dashed" || d === "DASHED" ? "dashed" : d === "dotted" || d === "DOTTED" ? "dotted" : "solid";
+    }
+    function y(d) {
+      return d === "dashed" ? "line-style-icon--dashed" : d === "dotted" ? "line-style-icon--dotted" : "line-style-icon--solid";
+    }
+    function V(d, p) {
+      return !Array.isArray(d) || d.length === 0 ? Array.from({ length: p }).map(
+        (f, K) => hl[K] ?? "solid"
+      ) : Array.from({ length: p }).map(
+        (f, K) => i(d[K])
+      );
+    }
+    const B = x(
+      () => C(e.model.lineStyleBinding)
+    ), r = x(() => O(L.value)), w = x(
+      () => V(e.model.lineStyles, O(B.value).length)
+    ), N = ae([]), L = ae(re.series);
+    ke(
+      [
+        () => e.model.lineStyles,
+        () => e.model.lineStyleBinding,
+        () => e.model.metrics,
+        () => e.model.isBlend,
+        () => e.model.joinDatasources
+      ],
+      ([d, p]) => {
+        L.value = C(p), N.value = V(
+          d,
+          O(L.value).length
+        );
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const h = x(() => L.value !== B.value || N.value.length !== w.value.length ? !0 : N.value.some((d, p) => d !== w.value[p]));
+    function s(d, p) {
+      const f = [...N.value];
+      f[d] = i(p), N.value = f;
+    }
+    function S(d) {
+      const p = C(d);
+      if (p === L.value)
+        return;
+      const f = O(p).length;
+      L.value = p, N.value = V(N.value, f);
+    }
+    function R() {
+      L.value = re.series, N.value = [...hl];
+    }
+    function M() {
+      const d = L.value === re.series, p = N.value.every((f) => f === "solid");
+      a("update:model", {
+        ...e.model,
+        lineStyleBinding: d ? void 0 : L.value,
+        lineStyles: p ? void 0 : [...N.value]
+      });
+    }
+    return (d, p) => {
+      const f = A("FmButton"), K = A("FmSelect");
+      return m(), W("div", Xo, [
+        b("div", Ho, [
+          b("p", qo, Y(l(o)("report.section.datasource.lineStyle.title")), 1),
+          b("div", Go, [
+            u(f, {
+              variant: "tertiary",
+              "text-color": "text-fm-color-system-info-300",
+              size: "md",
+              label: l(o)("report.section.datasource.lineStyle.reset"),
+              onClick: R
+            }, null, 8, ["label"])
+          ])
+        ]),
+        u(K, {
+          "model-value": L.value,
+          items: T.value,
+          label: l(o)("report.section.datasource.styleTarget.title"),
+          "onUpdate:modelValue": S
+        }, null, 8, ["model-value", "items", "label"]),
+        b("div", Jo, [
+          (m(!0), W(me, null, $e(N.value, (Z, j) => (m(), W("div", {
+            key: j,
+            class: "flex items-center justify-between gap-8 rounded-md border border-fm-color-neutral-gray-100 px-8 py-6"
+          }, [
+            b("div", Yo, [
+              b("span", {
+                class: Ve(["line-style-icon", y(Z)]),
+                "aria-hidden": "true"
+              }, null, 2),
+              b("span", Ko, Y(r.value[j] || `${l(o)("report.section.datasource.lineStyle.line")} ${j + 1}`), 1)
+            ]),
+            u(K, {
+              "model-value": Z,
+              items: n.value,
+              class: "w-[130px]",
+              "onUpdate:modelValue": (oe) => s(j, oe)
+            }, null, 8, ["model-value", "items", "onUpdate:modelValue"])
+          ]))), 128))
+        ]),
+        u(f, {
+          size: "md",
+          label: l(o)("report.common.apply"),
+          disabled: !h.value,
+          onClick: M
+        }, null, 8, ["label", "disabled"])
+      ]);
+    };
+  }
+}), Qo = /* @__PURE__ */ Bl(Zo, [["__scopeId", "data-v-f1c35513"]]), ea = { class: "flex flex-col gap-16" }, la = {
+  key: 1,
+  class: "h-px w-full bg-fm-color-neutral-gray-100"
+}, ta = { class: "flex flex-col gap-8" }, oa = { class: "fm-typo-en-body-lg-600" }, aa = { class: "flex flex-col gap-8" }, na = /* @__PURE__ */ de({
+  __name: "StyleDatasource",
+  props: /* @__PURE__ */ ve({
+    label: {
+      type: String,
+      default: "Label"
+    },
+    config: {
+      type: Object,
+      default: null
+    },
+    closeable: {
+      type: Boolean,
+      default: !1
+    },
+    mainDatasourceConfig: {
+      type: Object,
+      default: () => {
+      }
+    },
+    modelValue: {
+      type: Object,
+      default: () => {
+      }
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["click-close"], ["update:modelValue"]),
+  setup(D, { emit: c }) {
+    const e = ge(D, "modelValue");
+    ke(
+      [() => e.value.dimensions, () => e.value.metrics],
+      () => {
+        const { rowIds: i, columnIds: y } = Qe(e.value);
+        e.value.rowIds = i, e.value.columnIds = y;
+      },
+      { deep: !0 }
+    );
+    const a = D, o = c, { t: T } = pe(), C = x(() => a.config.type === J.Circular), v = x(
+      () => a.config.type === J.StackBarChart || a.config.type === J.ClusteredStackBarChart
+    ), _ = x(
+      () => a.config.type === J.LineChart || a.config.type === J.StackLineChart
+    ), O = x({
+      get: () => e.value.maxTooltipItems ?? null,
+      set: (i) => {
+        e.value = {
+          ...e.value,
+          maxTooltipItems: i ?? void 0
+        };
+      }
+    }), n = x({
+      get: () => e.value.stackBarOverlap ?? !1,
+      set: (i) => {
+        e.value = {
+          ...e.value,
+          stackBarOverlap: i
+        };
+      }
+    });
+    return (i, y) => {
+      const V = A("FmButton"), B = A("FmCheckbox"), r = A("FmStepperField");
+      return m(), W(me, null, [
+        y[9] || (y[9] = b("div", { class: "grow" }, null, -1)),
+        a.closeable ? (m(), I(V, {
+          key: 0,
+          icon: "close",
+          variant: "tertiary",
+          size: "md",
+          onClick: y[0] || (y[0] = he((w) => o("click-close"), ["stop"]))
+        })) : z("", !0),
+        b("div", ea, [
+          a.config.hasChart ? (m(), I(Wo, {
+            key: 0,
+            model: e.value,
+            "show-layer-control": v.value && n.value,
+            "limit-to-series-mode": C.value,
+            "onUpdate:model": y[1] || (y[1] = (w) => e.value = w)
+          }, null, 8, ["model", "show-layer-control", "limit-to-series-mode"])) : z("", !0),
+          a.config.hasChart && _.value ? (m(), W("div", la)) : z("", !0),
+          a.config.hasChart && _.value ? (m(), I(Qo, {
+            key: 2,
+            model: e.value,
+            "onUpdate:model": y[2] || (y[2] = (w) => e.value = w)
+          }, null, 8, ["model"])) : z("", !0),
+          y[8] || (y[8] = b("div", { class: "h-px w-full bg-fm-color-neutral-gray-100" }, null, -1)),
+          b("div", ta, [
+            b("p", oa, Y(l(T)("report.section.style.configuration")), 1),
+            b("div", aa, [
+              v.value ? (m(), I(B, {
+                key: 0,
+                modelValue: n.value,
+                "onUpdate:modelValue": y[3] || (y[3] = (w) => n.value = w),
+                class: "fm-typo-en-body-lg-400",
+                label: l(T)("report.section.datasource.stackBar.overlapBars")
+              }, null, 8, ["modelValue", "label"])) : z("", !0),
+              a.config.hasLabel ? (m(), I(ro, {
+                key: 1,
+                model: e.value,
+                "onUpdate:model": y[4] || (y[4] = (w) => e.value = w)
+              }, null, 8, ["model"])) : z("", !0),
+              a.config.hasLegend ? (m(), I(ko, {
+                key: 2,
+                model: e.value,
+                "is-circular-widget": C.value,
+                "onUpdate:model": y[5] || (y[5] = (w) => e.value = w)
+              }, null, 8, ["model", "is-circular-widget"])) : z("", !0),
+              a.config.hasXy ? (m(), I(yo, {
+                key: 3,
+                model: e.value,
+                "onUpdate:model": y[6] || (y[6] = (w) => e.value = w)
+              }, null, 8, ["model"])) : z("", !0),
+              a.config.hasXy ? (m(), I(r, {
+                key: 4,
+                modelValue: O.value,
+                "onUpdate:modelValue": y[7] || (y[7] = (w) => O.value = w),
+                type: "number",
+                label: l(T)("report.section.datasource.tooltip.maxTooltipItems"),
+                min: 2,
+                max: 20,
+                placeholder: "Auto"
+              }, null, 8, ["modelValue", "label"])) : z("", !0)
+            ])
+          ])
+        ])
+      ], 64);
+    };
+  }
+}), ia = { class: "flex flex-col gap-8" }, sa = { class: "flex flex-col border-fm-color-neutral-gray-200 p-12" }, ra = { class: "flex items-center" }, ua = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, da = { class: "flex flex-col gap-8" }, ma = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, ca = { class: "flex flex-col border-fm-color-neutral-gray-200 p-12" }, pa = { class: "flex items-center" }, va = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, fa = {
+  key: 0,
+  class: "flex flex-col gap-8"
+}, ga = { class: "fm-typo-en-body-sm-600 text-fm-color-neutral-gray-400" }, ya = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, ba = /* @__PURE__ */ de({
+  __name: "TableResizeSection",
+  props: {
+    layout: {},
+    columns: {}
+  },
+  emits: ["update:layout"],
+  setup(D, { emit: c }) {
+    const { t: e } = pe(), a = D, o = c, T = x({
+      get: () => {
+        var y;
+        return (y = a.layout) != null && y.rowHeight && a.layout.rowHeight >= 30 ? a.layout.rowHeight : null;
+      },
+      set: (y) => {
+        var V;
+        o("update:layout", {
+          ...a.layout,
+          rowHeight: y && y >= 30 ? y : null,
+          colWidths: v((V = a.layout) == null ? void 0 : V.colWidths)
+        });
+      }
+    }), C = x(() => {
+      var y;
+      return ((y = a.columns) == null ? void 0 : y.length) ?? 0;
+    });
+    function v(y) {
+      if (!y) return null;
+      const V = Object.entries(y).reduce(
+        (B, r) => {
+          const [w, N] = r;
+          return N && N >= 40 ? B[w] = N : B[w] = null, B;
+        },
+        {}
+      );
+      return Object.values(V).some((B) => (B ?? 0) >= 40) ? V : null;
+    }
+    function _(y) {
+      var V;
+      return (V = a.columns) == null ? void 0 : V[y];
+    }
+    function O(y, V) {
+      const B = V && V >= 40 ? V : null, r = { ...a.layout.colWidths ?? {} }, w = _(y);
+      w != null && w.key && (r[w.key] = B), o("update:layout", {
+        ...a.layout,
+        rowHeight: T.value ?? null,
+        colWidths: v(r)
+      });
+    }
+    function n(y) {
+      var r, w;
+      const V = _(y), B = V != null && V.key ? (w = (r = a.layout) == null ? void 0 : r.colWidths) == null ? void 0 : w[V.key] : void 0;
+      return B && B >= 40 ? B : null;
+    }
+    function i(y) {
+      var V;
+      return ((V = _(y)) == null ? void 0 : V.label) || "Column " + (y + 1);
+    }
+    return (y, V) => {
+      const B = A("FmStepperField");
+      return m(), W("div", ia, [
+        b("div", sa, [
+          b("div", ra, [
+            b("p", ua, Y(l(e)("report.section.datasource.rowHeight")), 1)
+          ]),
+          b("div", da, [
+            b("p", ma, Y(l(e)("report.section.datasource.rowHeightHelper")), 1),
+            u(B, {
+              modelValue: T.value,
+              "onUpdate:modelValue": V[0] || (V[0] = (r) => T.value = r),
+              type: "number",
+              suffix: "px",
+              min: 30,
+              placeholder: l(e)("report.common.auto")
+            }, null, 8, ["modelValue", "placeholder"])
+          ])
+        ]),
+        b("div", ca, [
+          b("div", pa, [
+            b("p", va, Y(l(e)("report.section.datasource.columnWidth")), 1)
+          ]),
+          C.value > 0 ? (m(), W("div", fa, [
+            b("p", ga, Y(l(e)("report.section.datasource.columnWidthHelper")), 1),
+            (m(!0), W(me, null, $e(C.value, (r) => (m(), I(B, {
+              key: i(r - 1),
+              type: "number",
+              "model-value": n(r - 1),
+              label: i(r - 1),
+              suffix: "px",
+              min: 40,
+              placeholder: l(e)("report.common.auto"),
+              "onUpdate:modelValue": (w) => O(r - 1, Number(w) || null)
+            }, null, 8, ["model-value", "label", "placeholder", "onUpdate:modelValue"]))), 128))
+          ])) : (m(), W("p", ya, Y(l(e)("report.section.datasource.columnWidthUnavailable")), 1))
+        ])
+      ]);
+    };
+  }
+}), ha = {
+  key: 0,
+  class: "bg-fm-color-neutral-white flex flex-col h-full w-[510px]"
+}, wa = {
+  key: 1,
+  class: "px-6 py-16 flex flex-col overflow-y-auto overflow-x-hidden"
+}, Ca = { class: "text-center" }, xa = /* @__PURE__ */ de({
+  __name: "StyleEditorTab",
+  props: /* @__PURE__ */ ve({
+    tableResponse: {}
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {},
+    isEditingStyle: { type: Boolean, required: !1, default: !1 },
+    isEditingStyleModifiers: {}
+  }),
+  emits: ["update:modelValue", "update:isEditingStyle"],
+  setup(D) {
+    const { t: c, locale: e } = pe(), a = ge(D, "modelValue"), o = x(
+      () => ll.find((h) => h.type === a.value.widget.type)
+    ), T = ge(D, "isEditingStyle"), C = ae(!1), { markStyleEditing: v, resetStyleEditing: _ } = Al(T), O = D, n = [
+      J.BarChart,
+      J.StackBarChart,
+      J.ClusteredStackBarChart,
+      J.LineChart,
+      J.StackLineChart,
+      J.Circular
+    ], i = x(() => n.includes(a.value.widget.type)), y = x(() => a.value.widget.type === J.Table), V = x(() => e.value.toLowerCase().startsWith("en")), B = x({
+      get: () => ({
+        rowHeight: a.value.widget.config.rowHeight,
+        colWidths: a.value.widget.config.colWidths
+      }),
+      set: (h) => {
+        v(), a.value.widget.config.rowHeight = h.rowHeight, a.value.widget.config.colWidths = h.colWidths;
+      }
+    }), r = x({
+      get: () => a.value.widget.config,
+      set: (h) => {
+        v(), a.value.widget.config = h;
+      }
+    }), w = x(() => {
+      var h, s;
+      return y.value ? ((s = (h = O.tableResponse) == null ? void 0 : h.columns) == null ? void 0 : s.map((S) => ({
+        key: S.key,
+        label: S.label
+      }))) ?? [] : [];
+    });
+    function N() {
+      C.value = !0;
+    }
+    function L() {
+      C.value = !1, _();
+    }
+    return (h, s) => {
+      const S = A("FmCircularProgress"), R = A("FmButton");
+      return C.value ? (m(), W("div", ha, [
+        u(el, {
+          "model-value": C.value,
+          icon: "keyboard_double_arrow_right",
+          title: l(c)("report.section.style.title"),
+          "onUpdate:modelValue": s[0] || (s[0] = (M) => M ? N() : L())
+        }, null, 8, ["model-value", "title"]),
+        a.value ? (m(), W("div", wa, [
+          i.value ? (m(), I(na, {
+            key: 0,
+            modelValue: r.value,
+            "onUpdate:modelValue": s[1] || (s[1] = (M) => r.value = M),
+            config: o.value
+          }, null, 8, ["modelValue", "config"])) : z("", !0),
+          y.value ? (m(), I(ba, {
+            key: 1,
+            layout: B.value,
+            "onUpdate:layout": s[2] || (s[2] = (M) => B.value = M),
+            columns: w.value
+          }, null, 8, ["layout", "columns"])) : z("", !0)
+        ])) : (m(), I(S, { key: 0 }))
+      ])) : (m(), W("div", {
+        key: 1,
+        class: Ve([
+          "bg-fm-color-neutral-white pt-16",
+          V.value ? "flex h-full w-[156px] flex-col items-center justify-start gap-12 px-12" : "flex h-full w-[88px] flex-col items-center justify-start gap-16"
+        ])
+      }, [
+        V.value ? (m(), W("button", {
+          key: 0,
+          class: "flex flex-col items-center gap-16 fm-typo-en-title-sm-600 text-fm-color-typo-primary",
+          type: "button",
+          onClick: N
+        }, [
+          u(R, {
+            variant: "secondary",
+            icon: "keyboard_double_arrow_left",
+            "border-color": l(Ue).ColorPrimary,
+            "text-color": l(Ue).ColorPrimary,
+            size: "md"
+          }, null, 8, ["border-color", "text-color"]),
+          b("span", Ca, Y(l(c)("report.section.style.title")), 1)
+        ])) : (m(), W(me, { key: 1 }, [
+          u(R, {
+            variant: "secondary",
+            icon: "keyboard_double_arrow_left",
+            "border-color": l(Ue).ColorPrimary,
+            "text-color": l(Ue).ColorPrimary,
+            size: "md",
+            onClick: N
+          }, null, 8, ["border-color", "text-color"]),
+          b("button", {
+            class: "fm-typo-en-title-sm-600 text-fm-color-typo-primary [text-orientation:mixed] [writing-mode:vertical-rl]",
+            type: "button",
+            onClick: N
+          }, Y(l(c)("report.section.style.title")), 1)
+        ], 64))
+      ], 2));
+    };
+  }
+}), ka = { class: "bg-fm-color-neutral-white flex flex-col h-full w-[510px]" }, Fa = { class: "text-center" }, Va = { class: "w-full overflow-y-auto" }, Sa = {
+  class: "grid grid-cols-12 w-full p-24",
+  style: { backgroundColor: "#F6F8FC" }
+}, _a = /* @__PURE__ */ de({
+  __name: "TileEditorDesktop",
+  props: /* @__PURE__ */ ve({
+    hideConfiguration: { type: Boolean, required: !0, default: !1 },
+    index: { type: Number, required: !0, default: 0 }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["hideConfiguration"], ["update:modelValue"]),
+  setup(D, { emit: c }) {
+    const { locale: e, t: a } = pe(), o = ge(D, "modelValue"), T = D, C = x(
+      () => ll.find((B) => {
+        var r, w;
+        return B.type === ((w = (r = o.value) == null ? void 0 : r.widget) == null ? void 0 : w.type);
+      })
+    ), v = c, O = [...[
+      J.BarChart,
+      J.StackBarChart,
+      J.ClusteredStackBarChart,
+      J.LineChart,
+      J.StackLineChart,
+      J.Circular
+    ], J.Table], n = x(() => O.includes(o.value.widget.type)), i = ae(!1), y = ae(null), V = x(() => e.value.toLowerCase().startsWith("en"));
+    return (B, r) => {
+      const w = A("FmCircularProgress"), N = A("FmButton");
+      return m(), W("div", null, [
+        o.value ? (m(), W(me, { key: 1 }, [
+          u(Yl, {
+            "model-value": !D.hideConfiguration
+          }, {
+            right: ee(() => [
+              b("div", ka, [
+                u(Ml, {
+                  modelValue: o.value,
+                  "onUpdate:modelValue": r[0] || (r[0] = (L) => o.value = L),
+                  "is-editing-style": i.value,
+                  "onUpdate:isEditingStyle": r[1] || (r[1] = (L) => i.value = L),
+                  config: C.value,
+                  "hide-configuration": D.hideConfiguration,
+                  onHideConfiguration: r[2] || (r[2] = (L) => {
+                    v("hideConfiguration", L);
+                  })
+                }, null, 8, ["modelValue", "is-editing-style", "config", "hide-configuration"])
+              ])
+            ]),
+            left: ee(() => [
+              b("div", {
+                class: Ve([
+                  "bg-fm-color-neutral-white pt-16",
+                  V.value ? "flex h-full w-[156px] flex-col items-center justify-start gap-12 px-12" : "flex h-full w-[88px] flex-col items-center justify-start gap-16"
+                ])
+              }, [
+                V.value ? (m(), W("button", {
+                  key: 0,
+                  class: "flex flex-col items-center gap-16 fm-typo-en-title-sm-600 text-fm-color-typo-primary",
+                  type: "button",
+                  onClick: r[3] || (r[3] = (L) => v("hideConfiguration", !T.hideConfiguration))
+                }, [
+                  u(N, {
+                    variant: "secondary",
+                    icon: "keyboard_double_arrow_right",
+                    "border-color": l(Ue).ColorPrimary,
+                    "text-color": l(Ue).ColorPrimary,
+                    size: "md"
+                  }, null, 8, ["border-color", "text-color"]),
+                  b("span", Fa, Y(l(a)("report.tile.setupSetting")), 1)
+                ])) : (m(), W(me, { key: 1 }, [
+                  u(N, {
+                    variant: "secondary",
+                    icon: "keyboard_double_arrow_right",
+                    "border-color": l(Ue).ColorPrimary,
+                    "text-color": l(Ue).ColorPrimary,
+                    size: "md",
+                    onClick: r[4] || (r[4] = (L) => v("hideConfiguration", !T.hideConfiguration))
+                  }, null, 8, ["border-color", "text-color"]),
+                  b("button", {
+                    class: "fm-typo-en-title-sm-600 text-fm-color-typo-primary [text-orientation:mixed] [writing-mode:vertical-rl]",
+                    type: "button",
+                    onClick: r[5] || (r[5] = (L) => v("hideConfiguration", !T.hideConfiguration))
+                  }, Y(l(a)("report.tile.setupSetting")), 1)
+                ], 64))
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["model-value"]),
+          b("div", Va, [
+            b("div", Sa, [
+              o.value ? (m(), I(Dl, {
+                key: 0,
+                "model-value": o.value,
+                index: T.index,
+                "is-tile-editor": !0,
+                "hide-export": !0,
+                "is-editing-style": i.value,
+                "onUpdate:tableResponse": r[6] || (r[6] = (L) => y.value = L)
+              }, null, 8, ["model-value", "index", "is-editing-style"])) : (m(), I(Ul, { key: 1 }))
+            ])
+          ]),
+          n.value ? (m(), I(xa, {
+            key: 0,
+            modelValue: o.value,
+            "onUpdate:modelValue": r[7] || (r[7] = (L) => o.value = L),
+            "is-editing-style": i.value,
+            "onUpdate:isEditingStyle": r[8] || (r[8] = (L) => i.value = L),
+            "table-response": y.value
+          }, null, 8, ["modelValue", "is-editing-style", "table-response"])) : z("", !0)
+        ], 64)) : (m(), I(w, { key: 0 }))
+      ]);
+    };
+  }
+}), Ta = {
+  key: 0,
+  class: "flex w-full justify-center items-center"
+}, $a = { class: "w-full grid grid-cols-12 pb-28 pt-5 px-5 h-full" }, Da = /* @__PURE__ */ de({
+  __name: "TileEditorMobile",
+  props: /* @__PURE__ */ ve({
+    hideConfiguration: { type: Boolean, required: !0, default: !1 },
+    index: { type: Number, required: !0, default: 0 }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ ve(["hideConfiguration"], ["update:modelValue"]),
+  setup(D, { emit: c }) {
+    const e = ge(D, "modelValue"), a = D, o = x(
+      () => ll.find((C) => {
+        var v, _;
+        return C.type === ((_ = (v = e.value) == null ? void 0 : v.widget) == null ? void 0 : _.type);
+      })
+    ), T = c;
+    return (C, v) => {
+      const _ = A("FmCircularProgress");
+      return m(), W("div", null, [
+        e.value ? (m(), W(me, { key: 1 }, [
+          b("div", $a, [
+            e.value ? (m(), I(Dl, {
+              key: 0,
+              "model-value": e.value,
+              index: a.index,
+              "is-tile-editor": !0,
+              "hide-export": !0
+            }, null, 8, ["model-value", "index"])) : (m(), I(Ul, { key: 1 }))
+          ]),
+          u(Ml, {
+            modelValue: e.value,
+            "onUpdate:modelValue": v[0] || (v[0] = (O) => e.value = O),
+            config: o.value,
+            "hide-configuration": D.hideConfiguration,
+            onHideConfiguration: v[1] || (v[1] = (O) => {
+              T("hideConfiguration", O);
+            })
+          }, null, 8, ["modelValue", "config", "hide-configuration"])
+        ], 64)) : (m(), W("div", Ta, [
+          u(_)
+        ]))
+      ]);
+    };
+  }
+}), Ua = {
+  key: 0,
+  class: "fm-typo-en-title-md-600"
+}, Ba = {
+  key: 0,
+  class: "flex items-start justify-start px-24 py-12 flex-wrap w-full"
+}, Ga = /* @__PURE__ */ de({
+  __name: "TileEditor",
+  setup(D) {
+    const c = Hl(), e = ql(), a = _l(), { globalFilters: o } = Re(Ql()), { currentSelectWidgetType: T, editingReport: C, editingTile: v, editingTileIndex: _ } = Re(a), { breakpoints: O } = $l(), { promptMessage: n } = Tl(), { t: i, te: y } = pe(), V = x(() => {
+      var s, S;
+      const L = (S = (s = v.value) == null ? void 0 : s.widget) == null ? void 0 : S.type;
+      if (!L)
+        return i("report.editor.newReport");
+      const h = `report.widget.types.${L.toLowerCase()}`;
+      return y(h) ? i(h) : L;
+    }), B = ae(!1);
+    function r() {
+      T.value = void 0, v.value = void 0, _.value = -1, fl.value = null, e.back();
+    }
+    async function w() {
+      var h, s;
+      if (!C.value) return;
+      if (await n({
+        title: i("report.tile.save.title"),
+        message: i("report.tile.save.confirm", { title: ((s = (h = v.value) == null ? void 0 : h.widget) == null ? void 0 : s.title) ?? "" })
+      }) && v.value) {
+        const S = et(C.value.tiles, fl.value);
+        _.value === -1 ? S.push(v.value) : S[_.value] = v.value, r();
+      }
+    }
+    async function N() {
+      var h, s;
+      if (!C.value) return;
+      await n({
+        title: i("report.tile.cancel.title"),
+        message: i("report.tile.cancel.confirm", { title: ((s = (h = v.value) == null ? void 0 : h.widget) == null ? void 0 : s.title) ?? "" })
+      }) && r();
+    }
+    return Vl(() => {
+      C.value || e.push({ name: "reports" });
+    }), (L, h) => {
+      const s = A("FmPageHead");
+      return m(), I(Kl, null, {
+        default: ee(() => [
+          u(s, {
+            actions: [
+              { label: l(i)("report.common.cancel"), value: "cancel", isPrimary: !1 },
+              { label: l(i)("report.common.save"), value: "save", isPrimary: !0 }
+            ],
+            "onClick:action": h[0] || (h[0] = (S) => {
+              S === "cancel" && N(), S === "save" && w();
+            })
+          }, {
+            title: ee(() => [
+              l(O).lg || l(O).md ? (m(), W("p", Ua, Y(V.value), 1)) : z("", !0)
+            ]),
+            _: 1
+          }, 8, ["actions"]),
+          l(v) && (l(o) || []).some((S) => {
+            const R = S.tileIds, M = l(v) && l(v).id;
+            return Array.isArray(R) && typeof M == "string" && R.includes(M);
+          }) ? (m(), W("div", Ba, [
+            u(it)
+          ])) : z("", !0),
+          l(v) ? (m(), I(Fl(l(O).lg || l(O).md ? _a : Da), {
+            key: 1,
+            modelValue: l(v),
+            "onUpdate:modelValue": h[1] || (h[1] = (S) => Xl(v) ? v.value = S : null),
+            class: Ve(`${l(O).lg || l(O).md ? "flex" : ""} w-full`),
+            style: il({ height: `calc( 100% - ${l(O).lg || l(O).md ? 72 : 64}px)` }),
+            "hide-configuration": B.value,
+            index: Number(l(c).params.tileIndex),
+            onHideConfiguration: h[2] || (h[2] = (S) => B.value = S)
+          }, null, 40, ["modelValue", "class", "style", "hide-configuration", "index"])) : z("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  Ga as default
+};