@feedmepos/mf-payment 1.7.12-dev → 1.7.13-dev

package/dist/TerminalSetting-1mIdAGRo.js

@@ -0,0 +1,4040 @@
+import { defineComponent as H, openBlock as b, createElementBlock as R, Fragment as oe, createElementVNode as I, createTextVNode as Ve, toDisplayString as Re, ref as T, resolveComponent as _, createVNode as y, createCommentVNode as Y, unref as V, computed as $, isRef as Oe, createBlock as N, resolveDynamicComponent as vt, normalizeProps as gt, mergeProps as yt, watch as ne, onBeforeUnmount as ka, toRef as ce, onMounted as re, withCtx as ae, renderList as be, toRefs as Da, reactive as Ea, h as Va, getCurrentInstance as Rt, nextTick as ra, onUnmounted as Oa } from "vue";
+import { u as ht, p as Ua, e as W } from "./index-DVdShtXJ.js";
+import { useRouter as Ma } from "vue-router";
+import { t as Ue } from "./index-tVtzJEJC.js";
+import { _ as Pa } from "./Layout.vue_vue_type_script_setup_true_lang-BKIvkgA_.js";
+import { u as bt } from "./index-yMztvQQr.js";
+import { useSnackbar as qt, useDialog as Aa } from "@feedmepos/ui-library";
+import { u as nt } from "./error-K1CakhA9.js";
+import { useI18n as Ra, useCoreStore as _t } from "@feedmepos/mf-common";
+import { o as qa } from "./index-DxnQ5ooP.js";
+import { c as Ba } from "./index-MdV54cWO.js";
+import { z as ia, a as sa } from "./validator-CTlVogBQ.js";
+import { g as Ga } from "./assets-CKGbYt2a.js";
+import { w as Ya } from "./Modal-DB8M9o1T.js";
+import { _ as La } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const $a = /* @__PURE__ */ H({
+  __name: "Information",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    return (a, t) => (b(), R(oe, null, [
+      t[0] || (t[0] = I("b", null, "Name", -1)),
+      Ve(": " + Re(e.terminal.name), 1),
+      t[1] || (t[1] = I("br", null, null, -1)),
+      t[2] || (t[2] = I("b", null, "Status", -1)),
+      Ve(": " + Re(e.terminal.status), 1),
+      t[3] || (t[3] = I("br", null, null, -1)),
+      t[4] || (t[4] = I("b", null, "Device ID", -1)),
+      Ve(": " + Re(e.terminal.deviceId ?? "-"), 1),
+      t[5] || (t[5] = I("br", null, null, -1)),
+      t[6] || (t[6] = I("b", null, "Device Type", -1)),
+      Ve(": " + Re(e.terminal.deviceType ?? "-"), 1),
+      t[7] || (t[7] = I("br", null, null, -1))
+    ], 64));
+  }
+}), ja = { key: 0 }, Ha = { class: "mt-6 space-x-6" }, Xa = /* @__PURE__ */ H({
+  __name: "KioskMode",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const { isLoading: a, startAsyncCall: t } = ht(!1), l = qt(), o = T({
+      enable: !1,
+      password: []
+    }), r = e;
+    function n() {
+      return o.value.enable && o.value.password.filter((p) => !!p).length !== 6 ? l.open({
+        type: "error",
+        message: "Unlock PIN is required when setting up kiosk mode for terminal."
+      }) : t(async () => {
+        const p = { enable: o.value.enable };
+        p.enable && Object.assign(p, {
+          password: o.value.password.join("")
+        });
+        const s = await Ue.kioskModeRequest(r.terminal._id, p);
+        if (s === "OK")
+          return l.open({ type: "info", message: "Kiosk mode applied successfully." });
+        let f = s;
+        return s === "client_not_connected" && (f = "Terminal not connected to the websocket server."), s.startsWith("terminal: ") && (f = s.replaceAll("terminal: ", "")), l.open({
+          type: "error",
+          message: f
+        });
+      });
+    }
+    return (p, s) => {
+      const f = _("FmSwitch"), d = _("FmPinField"), m = _("FmButton");
+      return b(), R(oe, null, [
+        y(f, {
+          modelValue: o.value.enable,
+          "onUpdate:modelValue": s[0] || (s[0] = (i) => o.value.enable = i),
+          label: "Enable Kiosk Mode?"
+        }, null, 8, ["modelValue"]),
+        o.value.enable ? (b(), R("div", ja, [
+          s[2] || (s[2] = I("p", { class: "mt-6" }, "Unlock PIN: ", -1)),
+          y(d, {
+            modelValue: o.value.password,
+            "onUpdate:modelValue": s[1] || (s[1] = (i) => o.value.password = i)
+          }, null, 8, ["modelValue"])
+        ])) : Y("", !0),
+        I("div", Ha, [
+          y(m, {
+            variant: "primary",
+            label: "Send",
+            icon: "send",
+            loading: V(a),
+            onclick: n
+          }, null, 8, ["loading"])
+        ])
+      ], 64);
+    };
+  }
+}), Ka = /* @__PURE__ */ H({
+  __name: "SettingRequest",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e) {
+    const { settingTab: a } = bt({
+      settingTab: "kiosk_mode"
+    }), t = [
+      {
+        label: "Kiosk Mode",
+        value: "kiosk_mode",
+        render: Xa
+      }
+    ], l = e, o = $(() => t.find((r) => r.value === a.value));
+    return (r, n) => {
+      var s;
+      const p = _("FmTabs");
+      return b(), R(oe, null, [
+        n[1] || (n[1] = I("p", { className: "mt-1 my-6 text-gray-600" }, [
+          I("b", null, "Note: "),
+          Ve(" Setting request will perform remotely without caching so make sure terminal is connected to the network also to our websocket as well. ")
+        ], -1)),
+        y(p, {
+          "model-value": V(a),
+          "onUpdate:modelValue": n[0] || (n[0] = (f) => Oe(a) ? a.value = f : null),
+          class: "mb-6",
+          items: t
+        }, null, 8, ["model-value"]),
+        V(a) ? (b(), N(vt((s = o.value) == null ? void 0 : s.render), gt(yt({ key: 0 }, { terminal: l.terminal })), null, 16)) : Y("", !0)
+      ], 64);
+    };
+  }
+}), za = 2e3, Wa = 12e4, Qa = "Timed out waiting for the Tyro reader to sync. Please try again.";
+function Ja(e) {
+  const { isLoading: a, startLoading: t, stopLoading: l } = ht(!1), { t: o } = Ra(), r = qt(), n = T(null), p = $(() => {
+    var q, Q;
+    const U = (q = e.value.gateways) == null ? void 0 : q.find(
+      (B) => B.gateway === "Tyro"
+    );
+    return ((Q = U == null ? void 0 : U.config) == null ? void 0 : Q.uniqueId) || "";
+  }), s = $(() => !!p.value), f = $(() => {
+    var U;
+    return ((U = n.value) == null ? void 0 : U.status) === "ready";
+  }), d = $(() => {
+    var U, q;
+    return f.value && !!((q = (U = n.value) == null ? void 0 : U.fields) != null && q.tyroLocationId) && !!e.value.deviceId && !s.value;
+  }), m = $(() => !f.value && !s.value), i = $(
+    () => o("payment.onboard-submission.tyro.syncDisabledHint")
+  ), u = $(() => s.value ? "Synced" : "Sync");
+  async function v() {
+    if (!e.value.referenceId) {
+      n.value = null;
+      return;
+    }
+    try {
+      const U = await qa.getByRestaurant(
+        e.value.referenceId
+      );
+      n.value = U.find(
+        (q) => q.type === Ua.FdoOnboardType.enum.tyro
+      ) ?? null;
+    } catch (U) {
+      n.value = null, r.open({
+        type: "error",
+        message: nt(U)
+      });
+    }
+  }
+  const g = Ba({
+    intervalMs: za,
+    timeoutMs: Wa,
+    onTick: async ({ isCurrentRun: U, stop: q }) => {
+      var pe, J;
+      const Q = await Ue.readById(e.value._id);
+      if (!U())
+        return;
+      const B = (pe = Q.gateways) == null ? void 0 : pe.find((C) => C.gateway === "Tyro");
+      (B == null ? void 0 : B.gateway) === "Tyro" && ((J = B == null ? void 0 : B.config) != null && J.uniqueId) && (q({ invalidate: !1 }), l(), Object.assign(e.value, Q), r.open({
+        type: "success",
+        message: "Tyro reader created successfully"
+      }));
+    },
+    onTimeout: () => {
+      l(), r.open({
+        type: "error",
+        message: Qa
+      });
+    },
+    onError: (U) => {
+      l(), r.open({
+        type: "error",
+        message: nt(U)
+      });
+    }
+  }), k = g.isPolling;
+  function c() {
+    g.stop(), l();
+  }
+  function w() {
+    c(), t(), g.start();
+  }
+  async function A() {
+    if (!d.value) {
+      r.open({
+        type: "error",
+        message: "Tyro reader sync is not available"
+      });
+      return;
+    }
+    try {
+      t(), await Ue.syncTyroReader(e.value._id), w();
+    } catch (U) {
+      c(), r.open({
+        type: "error",
+        message: nt(U)
+      });
+    }
+  }
+  return ne(
+    () => e.value.referenceId,
+    async () => {
+      await v();
+    },
+    { immediate: !0 }
+  ), ka(() => {
+    c();
+  }), {
+    isLoading: a,
+    isPollingTyroReader: k,
+    uniqueId: p,
+    canSyncTyroReader: d,
+    showTyroSyncPopover: m,
+    tyroSyncPopoverMessage: i,
+    tyroSyncButtonLabel: u,
+    syncTyroReader: A
+  };
+}
+const Za = {
+  key: 0,
+  class: "text-sm text-gray-500"
+}, en = { class: "flex mt-6 space-x-6" }, tn = { class: "flex-1" }, an = /* @__PURE__ */ H({
+  __name: "SoftposGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = _t().currentCountry, l = [
+      {
+        label: "Fiuu Malaysia",
+        value: "cc.feedme.payment.rms",
+        region: W.F_COUNTRY.enum.MY,
+        gateway: "Fiuu",
+        isLegacy: !0,
+        isOutdated: !0
+      },
+      {
+        label: "Fiuu Malaysia V2",
+        value: "cc.feedme.payment.fiuu_my",
+        region: W.F_COUNTRY.enum.MY,
+        gateway: "Fiuu",
+        isLegacy: !0
+      },
+      {
+        label: "Fiuu Singapore",
+        value: "cc.feedme.payment.fiuu_sg",
+        region: W.F_COUNTRY.enum.SG,
+        gateway: "Fiuu",
+        isLegacy: !0
+      },
+      {
+        label: "Softspace Malaysia",
+        value: "cc.feedme.payment.softspace_my",
+        gateway: "Softspace",
+        region: W.F_COUNTRY.enum.MY
+      },
+      {
+        label: "Digio Thailand",
+        value: "cc.feedme.payment.digio_th",
+        gateway: "Digio",
+        region: W.F_COUNTRY.enum.TH
+      },
+      {
+        label: "Tyro Australia",
+        value: "cc.feedme.payment.tyro_au",
+        gateway: "Tyro",
+        region: W.F_COUNTRY.enum.AU
+      }
+    ], o = ce(() => a.terminal), r = T(), n = T({
+      packageId: "",
+      uniqueId: "",
+      developerId: "",
+      isUat: !1
+    }), p = () => {
+      n.value.uniqueId = "", n.value.packageId = "", n.value.developerId = "", n.value.isUat = !1;
+    }, s = $(() => l.filter((x) => x.region === t.value)), f = $(() => s.value.find(
+      (x) => x.value === n.value.packageId
+    )), d = $(
+      () => {
+        var x;
+        return ((x = f.value) == null ? void 0 : x.gateway) === "Tyro";
+      }
+    ), {
+      isLoading: m,
+      isPollingTyroReader: i,
+      uniqueId: u,
+      canSyncTyroReader: v,
+      showTyroSyncPopover: g,
+      tyroSyncPopoverMessage: k,
+      tyroSyncButtonLabel: c,
+      syncTyroReader: w
+    } = Ja(o), A = $(() => d.value ? "button" : "submit"), U = $(() => d.value ? c.value : "Save"), q = $(() => d.value ? m.value : !1), Q = $(() => d.value ? !v.value || i.value : !1), B = () => {
+      if (!o.value.gateways || o.value.gateways.length === 0)
+        return p();
+      const x = o.value.gateways[0];
+      if (!x.config)
+        return p();
+      if (x.gateway === "Tyro") {
+        n.value = {
+          packageId: x.config.packageId,
+          uniqueId: x.config.uniqueId,
+          developerId: "",
+          isUat: !1
+        };
+        return;
+      }
+      switch (x.gateway) {
+        case "Fiuu":
+          n.value = {
+            packageId: x.config.packageId,
+            uniqueId: x.config.uniqueId,
+            developerId: "",
+            isUat: !1
+          };
+          break;
+        case "Softspace":
+        case "Digio":
+          const E = JSON.parse(x.config.uniqueId);
+          n.value = {
+            packageId: x.config.packageId,
+            uniqueId: E.uniqueId,
+            developerId: E.developerId,
+            isUat: E.isUat
+          };
+          return;
+      }
+    };
+    ne(o, B), re(B);
+    async function pe() {
+      const x = f.value;
+      if (!x)
+        return;
+      let E = n.value.uniqueId;
+      x.isLegacy || (E = JSON.stringify({
+        uniqueId: n.value.uniqueId,
+        developerId: n.value.developerId,
+        isUat: n.value.isUat
+      }));
+      const Z = {
+        gateway: x.gateway,
+        config: {
+          packageId: x.value,
+          uniqueId: E
+        }
+      };
+      (!o.value.gateways || o.value.gateways.length > 1) && (o.value.gateways = []), o.value.gateways[0] = Z, await a.onUpdate(o.value);
+    }
+    async function J(x) {
+      var E;
+      (E = o.value.gateways) == null || E.splice(x, 1), a.onUpdate(o.value);
+    }
+    function C() {
+      d.value && w();
+    }
+    return (x, E) => {
+      const Z = _("FmSelect"), P = _("FmTextField"), G = _("FmCheckbox"), X = _("FmButton"), z = _("FmTooltip"), Ce = _("FmForm");
+      return b(), N(Ce, {
+        ref: r.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: pe
+      }, {
+        default: ae(() => [
+          y(Z, {
+            modelValue: n.value.packageId,
+            "onUpdate:modelValue": E[0] || (E[0] = (ie) => n.value.packageId = ie),
+            label: "Package ID",
+            items: s.value
+          }, null, 8, ["modelValue", "items"]),
+          f.value ? (b(), R(oe, { key: 0 }, [
+            d.value ? (b(), N(P, {
+              key: 0,
+              "model-value": V(u),
+              label: "Unique ID (Reader ID)",
+              disabled: ""
+            }, null, 8, ["model-value"])) : f.value && f.value.isLegacy ? (b(), R(oe, { key: 1 }, [
+              y(P, {
+                modelValue: n.value.uniqueId,
+                "onUpdate:modelValue": E[1] || (E[1] = (ie) => n.value.uniqueId = ie),
+                label: "Unique ID (TID)"
+              }, null, 8, ["modelValue"]),
+              f.value.isOutdated ? (b(), R("span", Za, " Note: For outdated gateway is no longer continued development, please use the new gateway instead. ")) : Y("", !0)
+            ], 64)) : (b(), R(oe, { key: 2 }, [
+              y(P, {
+                modelValue: n.value.developerId,
+                "onUpdate:modelValue": E[2] || (E[2] = (ie) => n.value.developerId = ie),
+                label: "Developer ID (MID)"
+              }, null, 8, ["modelValue"]),
+              y(P, {
+                modelValue: n.value.uniqueId,
+                "onUpdate:modelValue": E[3] || (E[3] = (ie) => n.value.uniqueId = ie),
+                label: "Unique ID (TID)"
+              }, null, 8, ["modelValue"]),
+              y(G, {
+                modelValue: n.value.isUat,
+                "onUpdate:modelValue": E[4] || (E[4] = (ie) => n.value.isUat = ie),
+                label: "Is UAT (Test)",
+                value: "1"
+              }, null, 8, ["modelValue"])
+            ], 64)),
+            I("div", en, [
+              o.value.gateways && o.value.gateways.length > 0 ? (b(), N(X, {
+                key: 0,
+                class: "flex-1",
+                variant: "secondary",
+                label: "Delete",
+                onclick: () => J(0)
+              }, null, 8, ["onclick"])) : Y("", !0),
+              d.value && V(g) && Q.value ? (b(), N(z, {
+                key: 1,
+                class: "flex-1",
+                variant: "plain",
+                placement: "top",
+                content: V(k)
+              }, {
+                default: ae(() => [
+                  I("div", tn, [
+                    y(X, {
+                      type: A.value,
+                      class: "w-full",
+                      variant: "primary",
+                      loading: q.value,
+                      disabled: Q.value,
+                      label: U.value,
+                      onClick: C
+                    }, null, 8, ["type", "loading", "disabled", "label"])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["content"])) : (b(), N(X, {
+                key: 2,
+                type: A.value,
+                class: "flex-1",
+                variant: "primary",
+                loading: q.value,
+                disabled: Q.value,
+                label: U.value,
+                onClick: C
+              }, null, 8, ["type", "loading", "disabled", "label"]))
+            ])
+          ], 64)) : Y("", !0)
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), nn = {
+  key: 0,
+  class: "flex items-center justify-center min-h-[80vh]"
+}, ln = { class: "flex mt-6 space-x-6" }, on = /* @__PURE__ */ H({
+  __name: "TerminalGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const { isLoading: a, startAsyncCall: t } = ht(), l = e, o = ce(() => l.terminal), r = T(), n = T(), p = T(-1), s = T({
+      terminalId: ""
+    }), f = () => {
+      s.value.terminalId = "", p.value = -1;
+    }, d = () => {
+      if (t(async () => {
+        r.value = await Ue.getRestaurantTerminals(l.terminal.referenceId);
+      }), !l.terminal.ecrs)
+        return f();
+      const u = l.terminal.ecrs.findIndex((g) => g && g.gateway && g.gateway === "FeedMe");
+      if (u === -1)
+        return f();
+      p.value = u;
+      const v = l.terminal.ecrs.at(u);
+      v.gateway === "FeedMe" && v.config && (s.value = {
+        terminalId: v.config.terminalId
+      });
+    };
+    ne(o, d), re(d);
+    const m = $(() => (r.value ?? []).map((u) => ({
+      label: u.name ?? u._id,
+      value: u._id
+    })));
+    async function i(u) {
+      var v;
+      (v = l.terminal.ecrs) == null || v.splice(u, 1), l.onUpdate(l.terminal);
+    }
+    return (u, v) => {
+      const g = _("FmCircularProgress"), k = _("FmSelect"), c = _("FmButton"), w = _("FmForm");
+      return V(a) ? (b(), R("div", nn, [
+        y(g, { size: "xxl" })
+      ])) : (b(), N(w, {
+        key: 1,
+        ref: n.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: v[1] || (v[1] = () => {
+          p.value > -1 ? o.value.ecrs[p.value] = { gateway: "FeedMe", config: s.value } : (o.value.ecrs || (o.value.ecrs = []), o.value.ecrs.push({ gateway: "FeedMe", config: s.value })), l.onUpdate(o.value);
+        })
+      }, {
+        default: ae(() => [
+          y(k, {
+            modelValue: s.value.terminalId,
+            "onUpdate:modelValue": v[0] || (v[0] = (A) => s.value.terminalId = A),
+            label: "Terminal ID",
+            items: m.value,
+            rules: V(ia)(V(sa).string())
+          }, null, 8, ["modelValue", "items", "rules"]),
+          I("div", ln, [
+            p.value > -1 ? (b(), N(c, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => i(p.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(c, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512));
+    };
+  }
+}), rn = { class: "flex mt-6 space-x-6" }, sn = /* @__PURE__ */ H({
+  __name: "GhlGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T({
+      merchantId: "",
+      terminalId: "",
+      privateKey: ""
+    }), n = () => {
+      r.value.merchantId = "", r.value.terminalId = "", r.value.privateKey = "", o.value = -1;
+    }, p = () => {
+      if (!t.value.ecrs)
+        return n();
+      const f = t.value.ecrs.findIndex((m) => m && m.gateway && m.gateway === "Ghl");
+      if (f === -1)
+        return n();
+      o.value = f;
+      const d = t.value.ecrs.at(f);
+      d.gateway === "Ghl" && d.config && (r.value = {
+        merchantId: d.config.merchantId,
+        terminalId: d.config.terminalId,
+        privateKey: d.config.privateKey || ""
+      });
+    };
+    ne(t, p), re(p);
+    async function s(f) {
+      var d;
+      (d = t.value.ecrs) == null || d.splice(f, 1), a.onUpdate(t.value);
+    }
+    return (f, d) => {
+      const m = _("FmTextField"), i = _("FmTextarea"), u = _("FmButton"), v = _("FmForm");
+      return b(), N(v, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: d[3] || (d[3] = () => {
+          o.value > -1 ? t.value.ecrs[o.value] = { gateway: "Ghl", config: r.value } : (t.value.ecrs || (t.value.ecrs = []), t.value.ecrs.push({ gateway: "Ghl", config: r.value })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(m, {
+            modelValue: r.value.merchantId,
+            "onUpdate:modelValue": d[0] || (d[0] = (g) => r.value.merchantId = g),
+            label: "Merchant ID"
+          }, null, 8, ["modelValue"]),
+          y(m, {
+            modelValue: r.value.terminalId,
+            "onUpdate:modelValue": d[1] || (d[1] = (g) => r.value.terminalId = g),
+            label: "Terminal ID"
+          }, null, 8, ["modelValue"]),
+          y(i, {
+            modelValue: r.value.privateKey,
+            "onUpdate:modelValue": d[2] || (d[2] = (g) => r.value.privateKey = g),
+            label: "Private Key",
+            "label-mark": "optional",
+            "label-info": "Default will use FeedMe Private Key"
+          }, null, 8, ["modelValue"]),
+          I("div", rn, [
+            o.value > -1 ? (b(), N(u, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => s(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(u, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), un = { class: "flex items-end" }, cn = { class: "flex flex-wrap gap-8 items-center mt-4" }, dn = { class: "flex mt-6 space-x-6" }, pn = /* @__PURE__ */ H({
+  __name: "MaybankGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      ip: "",
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.ip = "", n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex((g) => g && g.gateway && g.gateway === "Maybank");
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Maybank" && u.config && (n.value = {
+        ip: u.config.ip ?? "",
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[3] || (i[3] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Maybank",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Maybank",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.ip,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.ip = c),
+            label: "IP Address"
+          }, null, 8, ["modelValue"]),
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[1] || (i[1] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_MAYBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", un, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", cn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", dn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), mn = { class: "flex items-end" }, fn = { class: "flex flex-wrap gap-8 items-center mt-4" }, vn = { class: "flex mt-6 space-x-6" }, gn = /* @__PURE__ */ H({
+  __name: "Maybank2Gateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      ip: "",
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.ip = "", n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex((g) => g && g.gateway && g.gateway === "Maybank2");
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Maybank2" && u.config && (n.value = {
+        ip: u.config.ip ?? "",
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[3] || (i[3] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Maybank2",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Maybank2",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.ip,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.ip = c),
+            label: "IP Address"
+          }, null, 8, ["modelValue"]),
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[1] || (i[1] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_MAYBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", mn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", fn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", vn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), yn = { class: "flex items-end" }, hn = { class: "flex flex-wrap gap-8 items-center mt-4" }, bn = { class: "flex mt-6 space-x-6" }, _n = /* @__PURE__ */ H({
+  __name: "Maybank3Gateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      config: {},
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex((g) => g && g.gateway && g.gateway === "Maybank3");
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Maybank3" && u.config && (n.value = {
+        config: u.config,
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[2] || (i[2] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Maybank3",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Maybank3",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_MAYBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", yn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[1] || (i[1] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", hn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", bn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), wn = { class: "flex items-end" }, Tn = { class: "flex flex-wrap gap-8 items-center mt-4" }, In = { class: "flex mt-6 space-x-6" }, xn = /* @__PURE__ */ H({
+  __name: "NetsGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      ip: "",
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.ip = "", n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex((g) => g && g.gateway && g.gateway === "Nets");
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Nets" && u.config && (n.value = {
+        ip: u.config.ip ?? "",
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[3] || (i[3] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Nets",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Nets",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.ip,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.ip = c),
+            label: "IP Address"
+          }, null, 8, ["modelValue"]),
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[1] || (i[1] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_NETS'"
+          }, null, 8, ["modelValue"]),
+          I("div", wn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Tn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", In, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Cn = { class: "flex items-end" }, Fn = { class: "flex flex-wrap gap-8 items-center mt-4" }, Sn = { class: "flex mt-6 space-x-6" }, Nn = /* @__PURE__ */ H({
+  __name: "KBankGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex((g) => g && g.gateway && g.gateway === "Kbank");
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Kbank" && u.config && (n.value = {
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[2] || (i[2] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Kbank",
+            config: {},
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Kbank",
+            config: {},
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_KBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", Cn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[1] || (i[1] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Fn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", Sn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), kn = { class: "flex mt-6 space-x-6" }, Dn = /* @__PURE__ */ H({
+  __name: "Ghl2Gateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T({
+      ip: "",
+      receiptName: ""
+    }), n = () => {
+      r.value.ip = "", r.value.receiptName = "", o.value = -1;
+    }, p = () => {
+      if (!t.value.ecrIntegrations)
+        return n();
+      const f = t.value.ecrIntegrations, d = f.findIndex((i) => i && i.gateway && i.gateway === "Ghl2");
+      if (d === -1)
+        return n();
+      o.value = d;
+      const m = f.at(d);
+      m.gateway === "Ghl2" && m.config && (r.value = {
+        ip: m.config.ip ?? "",
+        receiptName: m.receiptName ?? ""
+      });
+    };
+    ne(t, p), re(p);
+    async function s(f) {
+      var d;
+      (d = t.value.ecrIntegrations) == null || d.splice(f, 1), a.onUpdate(t.value);
+    }
+    return (f, d) => {
+      const m = _("FmTextField"), i = _("FmButton"), u = _("FmForm");
+      return b(), N(u, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: d[2] || (d[2] = () => {
+          t.value.ecrIntegrations || (t.value.ecrIntegrations = []), o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Ghl2",
+            config: { ip: r.value.ip },
+            receiptName: r.value.receiptName
+          } : t.value.ecrIntegrations.push({
+            gateway: "Ghl2",
+            config: { ip: r.value.ip },
+            receiptName: r.value.receiptName
+          }), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(m, {
+            modelValue: r.value.ip,
+            "onUpdate:modelValue": d[0] || (d[0] = (v) => r.value.ip = v),
+            label: "IP Address"
+          }, null, 8, ["modelValue"]),
+          y(m, {
+            modelValue: r.value.receiptName,
+            "onUpdate:modelValue": d[1] || (d[1] = (v) => r.value.receiptName = v),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_GHL_2'"
+          }, null, 8, ["modelValue"]),
+          I("div", kn, [
+            o.value > -1 ? (b(), N(i, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => s(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(i, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), En = { class: "flex items-end" }, Vn = { class: "flex flex-wrap gap-8 items-center mt-4" }, On = { class: "flex mt-6 space-x-6" }, Un = /* @__PURE__ */ H({
+  __name: "Ghl3Gateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      config: {},
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex(
+        (g) => g && g.gateway && g.gateway === "Ghl3"
+      );
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Ghl3" && u.config && (n.value = {
+        config: u.config,
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[2] || (i[2] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Ghl3",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Ghl3",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_GHL'"
+          }, null, 8, ["modelValue"]),
+          I("div", En, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[1] || (i[1] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Vn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", On, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Mn = { class: "flex items-end" }, Pn = { class: "flex flex-wrap gap-8 items-center mt-4" }, An = { class: "flex mt-6 space-x-6" }, Rn = /* @__PURE__ */ H({
+  __name: "HlbbGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      config: {},
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex(
+        (g) => g && g.gateway && g.gateway === "Hlbb"
+      );
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Hlbb" && u.config && (n.value = {
+        config: u.config,
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[2] || (i[2] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Hlbb",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Hlbb",
+            config: n.value.config,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_MAYBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", Mn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[1] || (i[1] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Pn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", An, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), qn = { class: "flex items-end" }, Bn = { class: "flex flex-wrap gap-8 items-center mt-4" }, Gn = { class: "flex mt-6 space-x-6" }, Yn = /* @__PURE__ */ H({
+  __name: "GlobalPaymentsGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      ip: "",
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.ip = "", n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex(
+        (g) => g && g.gateway && g.gateway === "GlobalPayments"
+      );
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "GlobalPayments" && u.config && (n.value = {
+        ip: u.config.ip ?? "",
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[3] || (i[3] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "GlobalPayments",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "GlobalPayments",
+            config: { ip: n.value.ip },
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.ip,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.ip = c),
+            label: "IP Address"
+          }, null, 8, ["modelValue"]),
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[1] || (i[1] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_GP'"
+          }, null, 8, ["modelValue"]),
+          I("div", qn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Bn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", Gn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Ln = { class: "flex items-end" }, $n = { class: "flex flex-wrap gap-8 items-center mt-4" }, jn = { class: "flex mt-6 space-x-6" }, Hn = /* @__PURE__ */ H({
+  __name: "OmaGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex(
+        (g) => g && g.gateway && g.gateway === "Oma"
+      );
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Oma" && u.config && (n.value = {
+        receiptName: u.receiptName ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[2] || (i[2] = () => {
+          var c, w;
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Oma",
+            config: {},
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(w = (c = t.value.ecrIntegrations) == null ? void 0 : c[o.value]) == null ? void 0 : w.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Oma",
+            config: {},
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_OMA'"
+          }, null, 8, ["modelValue"]),
+          I("div", Ln, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[1] || (i[1] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", $n, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", jn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Xn = { class: "flex items-end" }, Kn = { class: "flex flex-wrap gap-8 items-center mt-4" }, zn = { class: "flex mt-6 space-x-6" }, Wn = /* @__PURE__ */ H({
+  __name: "RevenueGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T(), n = T({
+      receiptName: "",
+      ip: "",
+      cardTypes: []
+    }), p = () => {
+      n.value.receiptName = "", n.value.ip = "", n.value.cardTypes = [], o.value = -1;
+    }, s = () => {
+      var v;
+      if (!t.value.ecrIntegrations)
+        return p();
+      const m = t.value.ecrIntegrations, i = m.findIndex(
+        (g) => g && g.gateway && g.gateway === "Revenue"
+      );
+      if (i === -1)
+        return p();
+      o.value = i;
+      const u = m.at(i);
+      u.gateway === "Revenue" && u.config && (n.value = {
+        receiptName: u.receiptName ?? "",
+        ip: u.config.ip ?? "",
+        cardTypes: ((v = u.dialogConfig) == null ? void 0 : v.cardTypes) ?? []
+      });
+    };
+    ne(t, s), re(s);
+    async function f(m) {
+      var i;
+      (i = t.value.ecrIntegrations) == null || i.splice(m, 1), a.onUpdate(t.value);
+    }
+    async function d() {
+      n.value.cardTypes.push(r.value), r.value = "";
+    }
+    return (m, i) => {
+      const u = _("FmTextField"), v = _("FmButton"), g = _("FmChip"), k = _("FmForm");
+      return b(), N(k, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: i[3] || (i[3] = () => {
+          var w, A;
+          const c = {
+            type: "tcp",
+            ip: n.value.ip
+          };
+          o.value > -1 ? t.value.ecrIntegrations[o.value] = {
+            gateway: "Revenue",
+            config: c,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              ...(A = (w = t.value.ecrIntegrations) == null ? void 0 : w[o.value]) == null ? void 0 : A.dialogConfig,
+              cardTypes: n.value.cardTypes
+            }
+          } : (t.value.ecrIntegrations || (t.value.ecrIntegrations = []), t.value.ecrIntegrations.push({
+            gateway: "Revenue",
+            config: c,
+            receiptName: n.value.receiptName,
+            dialogConfig: {
+              cardTypes: n.value.cardTypes
+            }
+          })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(u, {
+            modelValue: n.value.ip,
+            "onUpdate:modelValue": i[0] || (i[0] = (c) => n.value.ip = c),
+            label: "Terminal IP Address",
+            "label-info": "Terminal WiFi IP with optional port, e.g. 192.168.1.50:8080 (defaults to port 8080)",
+            rules: V(ia)(V(sa).string().min(1))
+          }, null, 8, ["modelValue", "rules"]),
+          y(u, {
+            modelValue: n.value.receiptName,
+            "onUpdate:modelValue": i[1] || (i[1] = (c) => n.value.receiptName = c),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_REVENUE'"
+          }, null, 8, ["modelValue"]),
+          I("div", Xn, [
+            y(u, {
+              modelValue: r.value,
+              "onUpdate:modelValue": i[2] || (i[2] = (c) => r.value = c),
+              label: "Fallback Card Types",
+              "label-info": "List of cards when fallback to reconcile dialog. Default VISA, MASTER"
+            }, null, 8, ["modelValue"]),
+            y(v, {
+              class: "ml-4",
+              icon: "add",
+              onClick: d
+            })
+          ]),
+          I("div", Kn, [
+            (b(!0), R(oe, null, be(n.value.cardTypes, (c) => (b(), N(g, {
+              key: c,
+              label: c,
+              removable: !0,
+              onChipClosed: () => n.value.cardTypes.splice(n.value.cardTypes.indexOf(c), 1)
+            }, null, 8, ["label", "onChipClosed"]))), 128))
+          ]),
+          I("div", zn, [
+            o.value > -1 ? (b(), N(v, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => f(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(v, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Qn = { class: "flex items-center" }, Jn = { class: "w-[260px] self-start" }, Zn = { class: "flex-1" }, el = /* @__PURE__ */ H({
+  __name: "EcrGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    var p;
+    const a = e, t = [
+      {
+        label: "FeedMe Terminal",
+        value: "terminal",
+        render: on
+      },
+      {
+        label: "GHL Terminal",
+        value: "ghl",
+        render: sn,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "GHL2 Terminal",
+        value: "ghl2",
+        render: Dn,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "ITB Maybank Terminal",
+        value: "mb-itb",
+        render: pn,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "PMA Maybank Terminal",
+        value: "mb-pma",
+        render: gn,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "Paysys Maybank Terminal",
+        value: "mb-paysys",
+        render: _n,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "Nets Terminal",
+        value: "nets",
+        render: xn,
+        region: [W.F_COUNTRY.enum.SG]
+      },
+      {
+        label: "KBank Terminal",
+        value: "kbank",
+        render: Nn,
+        region: [W.F_COUNTRY.enum.TH]
+      },
+      {
+        label: "GHL Terminal",
+        value: "ghl3",
+        render: Un,
+        region: [W.F_COUNTRY.enum.TH]
+      },
+      {
+        label: "Paysys HLBB Terminal",
+        value: "hlbb",
+        render: Rn,
+        region: [W.F_COUNTRY.enum.MY]
+      },
+      {
+        label: "GPAP Terminal",
+        value: "globalpayments",
+        render: Yn,
+        region: [W.F_COUNTRY.enum.SG]
+      },
+      {
+        label: "OMA Terminal",
+        value: "oma",
+        render: Hn,
+        region: [W.F_COUNTRY.enum.PK]
+      },
+      {
+        label: "Revenue PBB Terminal",
+        value: "revenue",
+        render: Wn,
+        region: [W.F_COUNTRY.enum.MY]
+      }
+    ], l = $(() => t.find((s) => s.value === n.value)), o = _t().currentCountry, r = $(() => t.filter(
+      (s) => !s.region || s.region.includes(o.value ?? W.F_COUNTRY.enum.MY)
+    )), { gatewayTab: n } = bt({
+      gatewayTab: (p = r.value[0]) == null ? void 0 : p.value
+    });
+    return (s, f) => {
+      var m;
+      const d = _("FmTabs");
+      return b(), R("div", Qn, [
+        I("div", Jn, [
+          y(d, {
+            "model-value": V(n),
+            "onUpdate:modelValue": f[0] || (f[0] = (i) => Oe(n) ? n.value = i : null),
+            class: "mb-6",
+            vertical: !0,
+            items: r.value,
+            "show-more-at": Number.POSITIVE_INFINITY
+          }, null, 8, ["model-value", "items", "show-more-at"])
+        ]),
+        I("div", Zn, [
+          V(n) ? (b(), N(vt((m = l.value) == null ? void 0 : m.render), gt(yt({ key: 0 }, {
+            terminal: a.terminal,
+            onUpdate: a.onUpdate
+          })), null, 16)) : Y("", !0)
+        ])
+      ]);
+    };
+  }
+}), tl = { class: "flex mt-6 space-x-6" }, al = /* @__PURE__ */ H({
+  __name: "PromptPayGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = ce(() => a.terminal), l = T(), o = T(-1), r = T({
+      account: "",
+      receiptName: ""
+    }), n = () => {
+      r.value.account = "", r.value.receiptName = "", o.value = -1;
+    }, p = () => {
+      if (!t.value.qrIntegrations)
+        return n();
+      const f = t.value.qrIntegrations, d = f.findIndex((i) => i && i.gateway && i.gateway === "PROMPTPAY");
+      if (d === -1)
+        return n();
+      o.value = d;
+      const m = f.at(d);
+      m.gateway === "PROMPTPAY" && m.config && (r.value = {
+        account: m.config.account ?? "",
+        receiptName: m.receiptName ?? ""
+      });
+    };
+    ne(t, p), re(p);
+    async function s(f) {
+      var d;
+      (d = t.value.qrIntegrations) == null || d.splice(f, 1), a.onUpdate(t.value);
+    }
+    return (f, d) => {
+      const m = _("FmTextField"), i = _("FmButton"), u = _("FmForm");
+      return b(), N(u, {
+        ref: l.value,
+        class: "flex flex-col gap-16 w-[500px]",
+        onValidationSuccess: d[2] || (d[2] = () => {
+          o.value > -1 ? t.value.qrIntegrations[o.value] = { gateway: "PROMPTPAY", config: { account: r.value.account }, receiptName: r.value.receiptName } : (t.value.qrIntegrations || (t.value.qrIntegrations = []), t.value.qrIntegrations.push({ gateway: "PROMPTPAY", config: { account: r.value.account }, receiptName: r.value.receiptName })), a.onUpdate(t.value);
+        })
+      }, {
+        default: ae(() => [
+          y(m, {
+            modelValue: r.value.account,
+            "onUpdate:modelValue": d[0] || (d[0] = (v) => r.value.account = v),
+            label: "Thai Phone Number / Thai Naitonal ID",
+            "label-info": "Thai Phone Number can be prefixed with 66 or 0 will be fine both will works well."
+          }, null, 8, ["modelValue"]),
+          y(m, {
+            modelValue: r.value.receiptName,
+            "onUpdate:modelValue": d[1] || (d[1] = (v) => r.value.receiptName = v),
+            label: "Receipt Payment Name",
+            "label-info": "Default receipt display will be 'TERMINAL_MAYBANK'"
+          }, null, 8, ["modelValue"]),
+          I("div", tl, [
+            o.value > -1 ? (b(), N(i, {
+              key: 0,
+              class: "flex-1",
+              variant: "secondary",
+              label: "Delete",
+              onclick: () => s(o.value)
+            }, null, 8, ["onclick"])) : Y("", !0),
+            y(i, {
+              type: "submit",
+              class: "flex-1",
+              variant: "primary",
+              label: "Save"
+            })
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), nl = { class: "flex items-center" }, ll = { class: "w-[260px] self-start" }, ol = { class: "flex-1" }, rl = /* @__PURE__ */ H({
+  __name: "QrGateway",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    var p;
+    const a = e, t = [
+      {
+        label: "PromptPay",
+        value: "promptpay",
+        render: al,
+        region: [W.F_COUNTRY.enum.TH]
+      }
+    ], l = $(() => t.find((s) => s.value === n.value)), o = _t().currentCountry, r = $(() => t.filter((s) => !s.region || s.region.includes(o.value ?? W.F_COUNTRY.enum.MY))), { gatewayTab: n } = bt({
+      gatewayTab: (p = r.value[0]) == null ? void 0 : p.value
+    });
+    return (s, f) => {
+      var m;
+      const d = _("FmTabs");
+      return b(), R("div", nl, [
+        I("div", ll, [
+          y(d, {
+            "model-value": V(n),
+            "onUpdate:modelValue": f[0] || (f[0] = (i) => Oe(n) ? n.value = i : null),
+            class: "mb-6",
+            vertical: !0,
+            items: r.value
+          }, null, 8, ["model-value", "items"])
+        ]),
+        I("div", ol, [
+          V(n) ? (b(), N(vt((m = l.value) == null ? void 0 : m.render), gt(yt({ key: 0 }, {
+            terminal: a.terminal,
+            onUpdate: a.onUpdate
+          })), null, 16)) : Y("", !0)
+        ])
+      ]);
+    };
+  }
+});
+var il = Object.defineProperty, ut = Object.getOwnPropertySymbols, ua = Object.prototype.hasOwnProperty, ca = Object.prototype.propertyIsEnumerable, Lt = (e, a, t) => a in e ? il(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, qe = (e, a) => {
+  for (var t in a || (a = {}))
+    ua.call(a, t) && Lt(e, t, a[t]);
+  if (ut)
+    for (var t of ut(a))
+      ca.call(a, t) && Lt(e, t, a[t]);
+  return e;
+}, da = (e, a) => {
+  var t = {};
+  for (var l in e)
+    ua.call(e, l) && a.indexOf(l) < 0 && (t[l] = e[l]);
+  if (e != null && ut)
+    for (var l of ut(e))
+      a.indexOf(l) < 0 && ca.call(e, l) && (t[l] = e[l]);
+  return t;
+};
+const pa = "[vue-draggable-plus]: ";
+function sl(e) {
+  console.warn(pa + e);
+}
+function ul(e) {
+  console.error(pa + e);
+}
+function $t(e, a, t) {
+  return t >= 0 && t < e.length && e.splice(t, 0, e.splice(a, 1)[0]), e;
+}
+function cl(e) {
+  return e.replace(/-(\w)/g, (a, t) => t ? t.toUpperCase() : "");
+}
+function dl(e) {
+  return Object.keys(e).reduce((a, t) => (typeof e[t] < "u" && (a[cl(t)] = e[t]), a), {});
+}
+function jt(e, a) {
+  return Array.isArray(e) && e.splice(a, 1), e;
+}
+function Ht(e, a, t) {
+  return Array.isArray(e) && e.splice(a, 0, t), e;
+}
+function pl(e) {
+  return typeof e > "u";
+}
+function ml(e) {
+  return typeof e == "string";
+}
+function Xt(e, a, t) {
+  const l = e.children[t];
+  e.insertBefore(a, l);
+}
+function It(e) {
+  e.parentNode && e.parentNode.removeChild(e);
+}
+function fl(e, a = document) {
+  var t;
+  let l = null;
+  return typeof (a == null ? void 0 : a.querySelector) == "function" ? l = (t = a == null ? void 0 : a.querySelector) == null ? void 0 : t.call(a, e) : l = document.querySelector(e), l || sl(`Element not found: ${e}`), l;
+}
+function vl(e, a, t = null) {
+  return function(...l) {
+    return e.apply(t, l), a.apply(t, l);
+  };
+}
+function gl(e, a) {
+  const t = qe({}, e);
+  return Object.keys(a).forEach((l) => {
+    t[l] ? t[l] = vl(e[l], a[l]) : t[l] = a[l];
+  }), t;
+}
+function yl(e) {
+  return e instanceof HTMLElement;
+}
+function Kt(e, a) {
+  Object.keys(e).forEach((t) => {
+    a(t, e[t]);
+  });
+}
+function hl(e) {
+  return e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && (e.charCodeAt(2) > 122 || e.charCodeAt(2) < 97);
+}
+const bl = Object.assign;
+/**!
+ * Sortable 1.15.2
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */
+function zt(e, a) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var l = Object.getOwnPropertySymbols(e);
+    a && (l = l.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(e, o).enumerable;
+    })), t.push.apply(t, l);
+  }
+  return t;
+}
+function we(e) {
+  for (var a = 1; a < arguments.length; a++) {
+    var t = arguments[a] != null ? arguments[a] : {};
+    a % 2 ? zt(Object(t), !0).forEach(function(l) {
+      _l(e, l, t[l]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : zt(Object(t)).forEach(function(l) {
+      Object.defineProperty(e, l, Object.getOwnPropertyDescriptor(t, l));
+    });
+  }
+  return e;
+}
+function lt(e) {
+  "@babel/helpers - typeof";
+  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? lt = function(a) {
+    return typeof a;
+  } : lt = function(a) {
+    return a && typeof Symbol == "function" && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : typeof a;
+  }, lt(e);
+}
+function _l(e, a, t) {
+  return a in e ? Object.defineProperty(e, a, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[a] = t, e;
+}
+function Ie() {
+  return Ie = Object.assign || function(e) {
+    for (var a = 1; a < arguments.length; a++) {
+      var t = arguments[a];
+      for (var l in t)
+        Object.prototype.hasOwnProperty.call(t, l) && (e[l] = t[l]);
+    }
+    return e;
+  }, Ie.apply(this, arguments);
+}
+function wl(e, a) {
+  if (e == null)
+    return {};
+  var t = {}, l = Object.keys(e), o, r;
+  for (r = 0; r < l.length; r++)
+    o = l[r], !(a.indexOf(o) >= 0) && (t[o] = e[o]);
+  return t;
+}
+function Tl(e, a) {
+  if (e == null)
+    return {};
+  var t = wl(e, a), l, o;
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    for (o = 0; o < r.length; o++)
+      l = r[o], !(a.indexOf(l) >= 0) && Object.prototype.propertyIsEnumerable.call(e, l) && (t[l] = e[l]);
+  }
+  return t;
+}
+var Il = "1.15.2";
+function Te(e) {
+  if (typeof window < "u" && window.navigator)
+    return !!/* @__PURE__ */ navigator.userAgent.match(e);
+}
+var xe = Te(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), Qe = Te(/Edge/i), Wt = Te(/firefox/i), He = Te(/safari/i) && !Te(/chrome/i) && !Te(/android/i), ma = Te(/iP(ad|od|hone)/i), fa = Te(/chrome/i) && Te(/android/i), va = {
+  capture: !1,
+  passive: !1
+};
+function M(e, a, t) {
+  e.addEventListener(a, t, !xe && va);
+}
+function O(e, a, t) {
+  e.removeEventListener(a, t, !xe && va);
+}
+function ct(e, a) {
+  if (a) {
+    if (a[0] === ">" && (a = a.substring(1)), e)
+      try {
+        if (e.matches)
+          return e.matches(a);
+        if (e.msMatchesSelector)
+          return e.msMatchesSelector(a);
+        if (e.webkitMatchesSelector)
+          return e.webkitMatchesSelector(a);
+      } catch {
+        return !1;
+      }
+    return !1;
+  }
+}
+function xl(e) {
+  return e.host && e !== document && e.host.nodeType ? e.host : e.parentNode;
+}
+function he(e, a, t, l) {
+  if (e) {
+    t = t || document;
+    do {
+      if (a != null && (a[0] === ">" ? e.parentNode === t && ct(e, a) : ct(e, a)) || l && e === t)
+        return e;
+      if (e === t)
+        break;
+    } while (e = xl(e));
+  }
+  return null;
+}
+var Qt = /\s+/g;
+function me(e, a, t) {
+  if (e && a)
+    if (e.classList)
+      e.classList[t ? "add" : "remove"](a);
+    else {
+      var l = (" " + e.className + " ").replace(Qt, " ").replace(" " + a + " ", " ");
+      e.className = (l + (t ? " " + a : "")).replace(Qt, " ");
+    }
+}
+function F(e, a, t) {
+  var l = e && e.style;
+  if (l) {
+    if (t === void 0)
+      return document.defaultView && document.defaultView.getComputedStyle ? t = document.defaultView.getComputedStyle(e, "") : e.currentStyle && (t = e.currentStyle), a === void 0 ? t : t[a];
+    !(a in l) && a.indexOf("webkit") === -1 && (a = "-webkit-" + a), l[a] = t + (typeof t == "string" ? "" : "px");
+  }
+}
+function Ge(e, a) {
+  var t = "";
+  if (typeof e == "string")
+    t = e;
+  else
+    do {
+      var l = F(e, "transform");
+      l && l !== "none" && (t = l + " " + t);
+    } while (!a && (e = e.parentNode));
+  var o = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
+  return o && new o(t);
+}
+function ga(e, a, t) {
+  if (e) {
+    var l = e.getElementsByTagName(a), o = 0, r = l.length;
+    if (t)
+      for (; o < r; o++)
+        t(l[o], o);
+    return l;
+  }
+  return [];
+}
+function _e() {
+  var e = document.scrollingElement;
+  return e || document.documentElement;
+}
+function te(e, a, t, l, o) {
+  if (!(!e.getBoundingClientRect && e !== window)) {
+    var r, n, p, s, f, d, m;
+    if (e !== window && e.parentNode && e !== _e() ? (r = e.getBoundingClientRect(), n = r.top, p = r.left, s = r.bottom, f = r.right, d = r.height, m = r.width) : (n = 0, p = 0, s = window.innerHeight, f = window.innerWidth, d = window.innerHeight, m = window.innerWidth), (a || t) && e !== window && (o = o || e.parentNode, !xe))
+      do
+        if (o && o.getBoundingClientRect && (F(o, "transform") !== "none" || t && F(o, "position") !== "static")) {
+          var i = o.getBoundingClientRect();
+          n -= i.top + parseInt(F(o, "border-top-width")), p -= i.left + parseInt(F(o, "border-left-width")), s = n + r.height, f = p + r.width;
+          break;
+        }
+      while (o = o.parentNode);
+    if (l && e !== window) {
+      var u = Ge(o || e), v = u && u.a, g = u && u.d;
+      u && (n /= g, p /= v, m /= v, d /= g, s = n + d, f = p + m);
+    }
+    return {
+      top: n,
+      left: p,
+      bottom: s,
+      right: f,
+      width: m,
+      height: d
+    };
+  }
+}
+function Jt(e, a, t) {
+  for (var l = Ne(e, !0), o = te(e)[a]; l; ) {
+    var r = te(l)[t], n = void 0;
+    if (n = o >= r, !n)
+      return l;
+    if (l === _e())
+      break;
+    l = Ne(l, !1);
+  }
+  return !1;
+}
+function Ye(e, a, t, l) {
+  for (var o = 0, r = 0, n = e.children; r < n.length; ) {
+    if (n[r].style.display !== "none" && n[r] !== S.ghost && (l || n[r] !== S.dragged) && he(n[r], t.draggable, e, !1)) {
+      if (o === a)
+        return n[r];
+      o++;
+    }
+    r++;
+  }
+  return null;
+}
+function Bt(e, a) {
+  for (var t = e.lastElementChild; t && (t === S.ghost || F(t, "display") === "none" || a && !ct(t, a)); )
+    t = t.previousElementSibling;
+  return t || null;
+}
+function ge(e, a) {
+  var t = 0;
+  if (!e || !e.parentNode)
+    return -1;
+  for (; e = e.previousElementSibling; )
+    e.nodeName.toUpperCase() !== "TEMPLATE" && e !== S.clone && (!a || ct(e, a)) && t++;
+  return t;
+}
+function Zt(e) {
+  var a = 0, t = 0, l = _e();
+  if (e)
+    do {
+      var o = Ge(e), r = o.a, n = o.d;
+      a += e.scrollLeft * r, t += e.scrollTop * n;
+    } while (e !== l && (e = e.parentNode));
+  return [a, t];
+}
+function Cl(e, a) {
+  for (var t in e)
+    if (e.hasOwnProperty(t)) {
+      for (var l in a)
+        if (a.hasOwnProperty(l) && a[l] === e[t][l])
+          return Number(t);
+    }
+  return -1;
+}
+function Ne(e, a) {
+  if (!e || !e.getBoundingClientRect)
+    return _e();
+  var t = e, l = !1;
+  do
+    if (t.clientWidth < t.scrollWidth || t.clientHeight < t.scrollHeight) {
+      var o = F(t);
+      if (t.clientWidth < t.scrollWidth && (o.overflowX == "auto" || o.overflowX == "scroll") || t.clientHeight < t.scrollHeight && (o.overflowY == "auto" || o.overflowY == "scroll")) {
+        if (!t.getBoundingClientRect || t === document.body)
+          return _e();
+        if (l || a)
+          return t;
+        l = !0;
+      }
+    }
+  while (t = t.parentNode);
+  return _e();
+}
+function Fl(e, a) {
+  if (e && a)
+    for (var t in a)
+      a.hasOwnProperty(t) && (e[t] = a[t]);
+  return e;
+}
+function xt(e, a) {
+  return Math.round(e.top) === Math.round(a.top) && Math.round(e.left) === Math.round(a.left) && Math.round(e.height) === Math.round(a.height) && Math.round(e.width) === Math.round(a.width);
+}
+var Xe;
+function ya(e, a) {
+  return function() {
+    if (!Xe) {
+      var t = arguments, l = this;
+      t.length === 1 ? e.call(l, t[0]) : e.apply(l, t), Xe = setTimeout(function() {
+        Xe = void 0;
+      }, a);
+    }
+  };
+}
+function Sl() {
+  clearTimeout(Xe), Xe = void 0;
+}
+function ha(e, a, t) {
+  e.scrollLeft += a, e.scrollTop += t;
+}
+function ba(e) {
+  var a = window.Polymer, t = window.jQuery || window.Zepto;
+  return a && a.dom ? a.dom(e).cloneNode(!0) : t ? t(e).clone(!0)[0] : e.cloneNode(!0);
+}
+function _a(e, a, t) {
+  var l = {};
+  return Array.from(e.children).forEach(function(o) {
+    var r, n, p, s;
+    if (!(!he(o, a.draggable, e, !1) || o.animated || o === t)) {
+      var f = te(o);
+      l.left = Math.min((r = l.left) !== null && r !== void 0 ? r : 1 / 0, f.left), l.top = Math.min((n = l.top) !== null && n !== void 0 ? n : 1 / 0, f.top), l.right = Math.max((p = l.right) !== null && p !== void 0 ? p : -1 / 0, f.right), l.bottom = Math.max((s = l.bottom) !== null && s !== void 0 ? s : -1 / 0, f.bottom);
+    }
+  }), l.width = l.right - l.left, l.height = l.bottom - l.top, l.x = l.left, l.y = l.top, l;
+}
+var ve = "Sortable" + (/* @__PURE__ */ new Date()).getTime();
+function Nl() {
+  var e = [], a;
+  return {
+    captureAnimationState: function() {
+      if (e = [], !!this.options.animation) {
+        var t = [].slice.call(this.el.children);
+        t.forEach(function(l) {
+          if (!(F(l, "display") === "none" || l === S.ghost)) {
+            e.push({
+              target: l,
+              rect: te(l)
+            });
+            var o = we({}, e[e.length - 1].rect);
+            if (l.thisAnimationDuration) {
+              var r = Ge(l, !0);
+              r && (o.top -= r.f, o.left -= r.e);
+            }
+            l.fromRect = o;
+          }
+        });
+      }
+    },
+    addAnimationState: function(t) {
+      e.push(t);
+    },
+    removeAnimationState: function(t) {
+      e.splice(Cl(e, {
+        target: t
+      }), 1);
+    },
+    animateAll: function(t) {
+      var l = this;
+      if (!this.options.animation) {
+        clearTimeout(a), typeof t == "function" && t();
+        return;
+      }
+      var o = !1, r = 0;
+      e.forEach(function(n) {
+        var p = 0, s = n.target, f = s.fromRect, d = te(s), m = s.prevFromRect, i = s.prevToRect, u = n.rect, v = Ge(s, !0);
+        v && (d.top -= v.f, d.left -= v.e), s.toRect = d, s.thisAnimationDuration && xt(m, d) && !xt(f, d) && // Make sure animatingRect is on line between toRect & fromRect
+        (u.top - d.top) / (u.left - d.left) === (f.top - d.top) / (f.left - d.left) && (p = Dl(u, m, i, l.options)), xt(d, f) || (s.prevFromRect = f, s.prevToRect = d, p || (p = l.options.animation), l.animate(s, u, d, p)), p && (o = !0, r = Math.max(r, p), clearTimeout(s.animationResetTimer), s.animationResetTimer = setTimeout(function() {
+          s.animationTime = 0, s.prevFromRect = null, s.fromRect = null, s.prevToRect = null, s.thisAnimationDuration = null;
+        }, p), s.thisAnimationDuration = p);
+      }), clearTimeout(a), o ? a = setTimeout(function() {
+        typeof t == "function" && t();
+      }, r) : typeof t == "function" && t(), e = [];
+    },
+    animate: function(t, l, o, r) {
+      if (r) {
+        F(t, "transition", ""), F(t, "transform", "");
+        var n = Ge(this.el), p = n && n.a, s = n && n.d, f = (l.left - o.left) / (p || 1), d = (l.top - o.top) / (s || 1);
+        t.animatingX = !!f, t.animatingY = !!d, F(t, "transform", "translate3d(" + f + "px," + d + "px,0)"), this.forRepaintDummy = kl(t), F(t, "transition", "transform " + r + "ms" + (this.options.easing ? " " + this.options.easing : "")), F(t, "transform", "translate3d(0,0,0)"), typeof t.animated == "number" && clearTimeout(t.animated), t.animated = setTimeout(function() {
+          F(t, "transition", ""), F(t, "transform", ""), t.animated = !1, t.animatingX = !1, t.animatingY = !1;
+        }, r);
+      }
+    }
+  };
+}
+function kl(e) {
+  return e.offsetWidth;
+}
+function Dl(e, a, t, l) {
+  return Math.sqrt(Math.pow(a.top - e.top, 2) + Math.pow(a.left - e.left, 2)) / Math.sqrt(Math.pow(a.top - t.top, 2) + Math.pow(a.left - t.left, 2)) * l.animation;
+}
+var Me = [], Ct = {
+  initializeByDefault: !0
+}, Je = {
+  mount: function(e) {
+    for (var a in Ct)
+      Ct.hasOwnProperty(a) && !(a in e) && (e[a] = Ct[a]);
+    Me.forEach(function(t) {
+      if (t.pluginName === e.pluginName)
+        throw "Sortable: Cannot mount plugin ".concat(e.pluginName, " more than once");
+    }), Me.push(e);
+  },
+  pluginEvent: function(e, a, t) {
+    var l = this;
+    this.eventCanceled = !1, t.cancel = function() {
+      l.eventCanceled = !0;
+    };
+    var o = e + "Global";
+    Me.forEach(function(r) {
+      a[r.pluginName] && (a[r.pluginName][o] && a[r.pluginName][o](we({
+        sortable: a
+      }, t)), a.options[r.pluginName] && a[r.pluginName][e] && a[r.pluginName][e](we({
+        sortable: a
+      }, t)));
+    });
+  },
+  initializePlugins: function(e, a, t, l) {
+    Me.forEach(function(n) {
+      var p = n.pluginName;
+      if (!(!e.options[p] && !n.initializeByDefault)) {
+        var s = new n(e, a, e.options);
+        s.sortable = e, s.options = e.options, e[p] = s, Ie(t, s.defaults);
+      }
+    });
+    for (var o in e.options)
+      if (e.options.hasOwnProperty(o)) {
+        var r = this.modifyOption(e, o, e.options[o]);
+        typeof r < "u" && (e.options[o] = r);
+      }
+  },
+  getEventProperties: function(e, a) {
+    var t = {};
+    return Me.forEach(function(l) {
+      typeof l.eventProperties == "function" && Ie(t, l.eventProperties.call(a[l.pluginName], e));
+    }), t;
+  },
+  modifyOption: function(e, a, t) {
+    var l;
+    return Me.forEach(function(o) {
+      e[o.pluginName] && o.optionListeners && typeof o.optionListeners[a] == "function" && (l = o.optionListeners[a].call(e[o.pluginName], t));
+    }), l;
+  }
+};
+function El(e) {
+  var a = e.sortable, t = e.rootEl, l = e.name, o = e.targetEl, r = e.cloneEl, n = e.toEl, p = e.fromEl, s = e.oldIndex, f = e.newIndex, d = e.oldDraggableIndex, m = e.newDraggableIndex, i = e.originalEvent, u = e.putSortable, v = e.extraEventProperties;
+  if (a = a || t && t[ve], !!a) {
+    var g, k = a.options, c = "on" + l.charAt(0).toUpperCase() + l.substr(1);
+    window.CustomEvent && !xe && !Qe ? g = new CustomEvent(l, {
+      bubbles: !0,
+      cancelable: !0
+    }) : (g = document.createEvent("Event"), g.initEvent(l, !0, !0)), g.to = n || t, g.from = p || t, g.item = o || t, g.clone = r, g.oldIndex = s, g.newIndex = f, g.oldDraggableIndex = d, g.newDraggableIndex = m, g.originalEvent = i, g.pullMode = u ? u.lastPutMode : void 0;
+    var w = we(we({}, v), Je.getEventProperties(l, a));
+    for (var A in w)
+      g[A] = w[A];
+    t && t.dispatchEvent(g), k[c] && k[c].call(a, g);
+  }
+}
+var Vl = ["evt"], de = function(e, a) {
+  var t = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {}, l = t.evt, o = Tl(t, Vl);
+  Je.pluginEvent.bind(S)(e, a, we({
+    dragEl: h,
+    parentEl: K,
+    ghostEl: D,
+    rootEl: L,
+    nextEl: Ee,
+    lastDownEl: ot,
+    cloneEl: j,
+    cloneHidden: Se,
+    dragStarted: Le,
+    putSortable: le,
+    activeSortable: S.active,
+    originalEvent: l,
+    oldIndex: Be,
+    oldDraggableIndex: Ke,
+    newIndex: fe,
+    newDraggableIndex: Fe,
+    hideGhostForTarget: xa,
+    unhideGhostForTarget: Ca,
+    cloneNowHidden: function() {
+      Se = !0;
+    },
+    cloneNowShown: function() {
+      Se = !1;
+    },
+    dispatchSortableEvent: function(r) {
+      ue({
+        sortable: a,
+        name: r,
+        originalEvent: l
+      });
+    }
+  }, o));
+};
+function ue(e) {
+  El(we({
+    putSortable: le,
+    cloneEl: j,
+    targetEl: h,
+    rootEl: L,
+    oldIndex: Be,
+    oldDraggableIndex: Ke,
+    newIndex: fe,
+    newDraggableIndex: Fe
+  }, e));
+}
+var h, K, D, L, Ee, ot, j, Se, Be, fe, Ke, Fe, Ze, le, Ae = !1, dt = !1, pt = [], ke, ye, Ft, St, ea, ta, Le, Pe, ze, We = !1, et = !1, rt, se, Nt = [], Ot = !1, mt = [], wt = typeof document < "u", tt = ma, aa = Qe || xe ? "cssFloat" : "float", Ol = wt && !fa && !ma && "draggable" in document.createElement("div"), wa = function() {
+  if (wt) {
+    if (xe)
+      return !1;
+    var e = document.createElement("x");
+    return e.style.cssText = "pointer-events:auto", e.style.pointerEvents === "auto";
+  }
+}(), Ta = function(e, a) {
+  var t = F(e), l = parseInt(t.width) - parseInt(t.paddingLeft) - parseInt(t.paddingRight) - parseInt(t.borderLeftWidth) - parseInt(t.borderRightWidth), o = Ye(e, 0, a), r = Ye(e, 1, a), n = o && F(o), p = r && F(r), s = n && parseInt(n.marginLeft) + parseInt(n.marginRight) + te(o).width, f = p && parseInt(p.marginLeft) + parseInt(p.marginRight) + te(r).width;
+  if (t.display === "flex")
+    return t.flexDirection === "column" || t.flexDirection === "column-reverse" ? "vertical" : "horizontal";
+  if (t.display === "grid")
+    return t.gridTemplateColumns.split(" ").length <= 1 ? "vertical" : "horizontal";
+  if (o && n.float && n.float !== "none") {
+    var d = n.float === "left" ? "left" : "right";
+    return r && (p.clear === "both" || p.clear === d) ? "vertical" : "horizontal";
+  }
+  return o && (n.display === "block" || n.display === "flex" || n.display === "table" || n.display === "grid" || s >= l && t[aa] === "none" || r && t[aa] === "none" && s + f > l) ? "vertical" : "horizontal";
+}, Ul = function(e, a, t) {
+  var l = t ? e.left : e.top, o = t ? e.right : e.bottom, r = t ? e.width : e.height, n = t ? a.left : a.top, p = t ? a.right : a.bottom, s = t ? a.width : a.height;
+  return l === n || o === p || l + r / 2 === n + s / 2;
+}, Ml = function(e, a) {
+  var t;
+  return pt.some(function(l) {
+    var o = l[ve].options.emptyInsertThreshold;
+    if (!(!o || Bt(l))) {
+      var r = te(l), n = e >= r.left - o && e <= r.right + o, p = a >= r.top - o && a <= r.bottom + o;
+      if (n && p)
+        return t = l;
+    }
+  }), t;
+}, Ia = function(e) {
+  function a(o, r) {
+    return function(n, p, s, f) {
+      var d = n.options.group.name && p.options.group.name && n.options.group.name === p.options.group.name;
+      if (o == null && (r || d))
+        return !0;
+      if (o == null || o === !1)
+        return !1;
+      if (r && o === "clone")
+        return o;
+      if (typeof o == "function")
+        return a(o(n, p, s, f), r)(n, p, s, f);
+      var m = (r ? n : p).options.group.name;
+      return o === !0 || typeof o == "string" && o === m || o.join && o.indexOf(m) > -1;
+    };
+  }
+  var t = {}, l = e.group;
+  (!l || lt(l) != "object") && (l = {
+    name: l
+  }), t.name = l.name, t.checkPull = a(l.pull, !0), t.checkPut = a(l.put), t.revertClone = l.revertClone, e.group = t;
+}, xa = function() {
+  !wa && D && F(D, "display", "none");
+}, Ca = function() {
+  !wa && D && F(D, "display", "");
+};
+wt && !fa && document.addEventListener("click", function(e) {
+  if (dt)
+    return e.preventDefault(), e.stopPropagation && e.stopPropagation(), e.stopImmediatePropagation && e.stopImmediatePropagation(), dt = !1, !1;
+}, !0);
+var De = function(e) {
+  if (h) {
+    e = e.touches ? e.touches[0] : e;
+    var a = Ml(e.clientX, e.clientY);
+    if (a) {
+      var t = {};
+      for (var l in e)
+        e.hasOwnProperty(l) && (t[l] = e[l]);
+      t.target = t.rootEl = a, t.preventDefault = void 0, t.stopPropagation = void 0, a[ve]._onDragOver(t);
+    }
+  }
+}, Pl = function(e) {
+  h && h.parentNode[ve]._isOutsideThisEl(e.target);
+};
+function S(e, a) {
+  if (!(e && e.nodeType && e.nodeType === 1))
+    throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(e));
+  this.el = e, this.options = a = Ie({}, a), e[ve] = this;
+  var t = {
+    group: null,
+    sort: !0,
+    disabled: !1,
+    store: null,
+    handle: null,
+    draggable: /^[uo]l$/i.test(e.nodeName) ? ">li" : ">*",
+    swapThreshold: 1,
+    // percentage; 0 <= x <= 1
+    invertSwap: !1,
+    // invert always
+    invertedSwapThreshold: null,
+    // will be set to same as swapThreshold if default
+    removeCloneOnHide: !0,
+    direction: function() {
+      return Ta(e, this.options);
+    },
+    ghostClass: "sortable-ghost",
+    chosenClass: "sortable-chosen",
+    dragClass: "sortable-drag",
+    ignore: "a, img",
+    filter: null,
+    preventOnFilter: !0,
+    animation: 0,
+    easing: null,
+    setData: function(r, n) {
+      r.setData("Text", n.textContent);
+    },
+    dropBubble: !1,
+    dragoverBubble: !1,
+    dataIdAttr: "data-id",
+    delay: 0,
+    delayOnTouchOnly: !1,
+    touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
+    forceFallback: !1,
+    fallbackClass: "sortable-fallback",
+    fallbackOnBody: !1,
+    fallbackTolerance: 0,
+    fallbackOffset: {
+      x: 0,
+      y: 0
+    },
+    supportPointer: S.supportPointer !== !1 && "PointerEvent" in window && !He,
+    emptyInsertThreshold: 5
+  };
+  Je.initializePlugins(this, e, t);
+  for (var l in t)
+    !(l in a) && (a[l] = t[l]);
+  Ia(a);
+  for (var o in this)
+    o.charAt(0) === "_" && typeof this[o] == "function" && (this[o] = this[o].bind(this));
+  this.nativeDraggable = a.forceFallback ? !1 : Ol, this.nativeDraggable && (this.options.touchStartThreshold = 1), a.supportPointer ? M(e, "pointerdown", this._onTapStart) : (M(e, "mousedown", this._onTapStart), M(e, "touchstart", this._onTapStart)), this.nativeDraggable && (M(e, "dragover", this), M(e, "dragenter", this)), pt.push(this.el), a.store && a.store.get && this.sort(a.store.get(this) || []), Ie(this, Nl());
+}
+S.prototype = /** @lends Sortable.prototype */
+{
+  constructor: S,
+  _isOutsideThisEl: function(e) {
+    !this.el.contains(e) && e !== this.el && (Pe = null);
+  },
+  _getDirection: function(e, a) {
+    return typeof this.options.direction == "function" ? this.options.direction.call(this, e, a, h) : this.options.direction;
+  },
+  _onTapStart: function(e) {
+    if (e.cancelable) {
+      var a = this, t = this.el, l = this.options, o = l.preventOnFilter, r = e.type, n = e.touches && e.touches[0] || e.pointerType && e.pointerType === "touch" && e, p = (n || e).target, s = e.target.shadowRoot && (e.path && e.path[0] || e.composedPath && e.composedPath()[0]) || p, f = l.filter;
+      if ($l(t), !h && !(/mousedown|pointerdown/.test(r) && e.button !== 0 || l.disabled) && !s.isContentEditable && !(!this.nativeDraggable && He && p && p.tagName.toUpperCase() === "SELECT") && (p = he(p, l.draggable, t, !1), !(p && p.animated) && ot !== p)) {
+        if (Be = ge(p), Ke = ge(p, l.draggable), typeof f == "function") {
+          if (f.call(this, e, p, this)) {
+            ue({
+              sortable: a,
+              rootEl: s,
+              name: "filter",
+              targetEl: p,
+              toEl: t,
+              fromEl: t
+            }), de("filter", a, {
+              evt: e
+            }), o && e.cancelable && e.preventDefault();
+            return;
+          }
+        } else if (f && (f = f.split(",").some(function(d) {
+          if (d = he(s, d.trim(), t, !1), d)
+            return ue({
+              sortable: a,
+              rootEl: d,
+              name: "filter",
+              targetEl: p,
+              fromEl: t,
+              toEl: t
+            }), de("filter", a, {
+              evt: e
+            }), !0;
+        }), f)) {
+          o && e.cancelable && e.preventDefault();
+          return;
+        }
+        l.handle && !he(s, l.handle, t, !1) || this._prepareDragStart(e, n, p);
+      }
+    }
+  },
+  _prepareDragStart: function(e, a, t) {
+    var l = this, o = l.el, r = l.options, n = o.ownerDocument, p;
+    if (t && !h && t.parentNode === o) {
+      var s = te(t);
+      if (L = o, h = t, K = h.parentNode, Ee = h.nextSibling, ot = t, Ze = r.group, S.dragged = h, ke = {
+        target: h,
+        clientX: (a || e).clientX,
+        clientY: (a || e).clientY
+      }, ea = ke.clientX - s.left, ta = ke.clientY - s.top, this._lastX = (a || e).clientX, this._lastY = (a || e).clientY, h.style["will-change"] = "all", p = function() {
+        if (de("delayEnded", l, {
+          evt: e
+        }), S.eventCanceled) {
+          l._onDrop();
+          return;
+        }
+        l._disableDelayedDragEvents(), !Wt && l.nativeDraggable && (h.draggable = !0), l._triggerDragStart(e, a), ue({
+          sortable: l,
+          name: "choose",
+          originalEvent: e
+        }), me(h, r.chosenClass, !0);
+      }, r.ignore.split(",").forEach(function(f) {
+        ga(h, f.trim(), kt);
+      }), M(n, "dragover", De), M(n, "mousemove", De), M(n, "touchmove", De), M(n, "mouseup", l._onDrop), M(n, "touchend", l._onDrop), M(n, "touchcancel", l._onDrop), Wt && this.nativeDraggable && (this.options.touchStartThreshold = 4, h.draggable = !0), de("delayStart", this, {
+        evt: e
+      }), r.delay && (!r.delayOnTouchOnly || a) && (!this.nativeDraggable || !(Qe || xe))) {
+        if (S.eventCanceled) {
+          this._onDrop();
+          return;
+        }
+        M(n, "mouseup", l._disableDelayedDrag), M(n, "touchend", l._disableDelayedDrag), M(n, "touchcancel", l._disableDelayedDrag), M(n, "mousemove", l._delayedDragTouchMoveHandler), M(n, "touchmove", l._delayedDragTouchMoveHandler), r.supportPointer && M(n, "pointermove", l._delayedDragTouchMoveHandler), l._dragStartTimer = setTimeout(p, r.delay);
+      } else
+        p();
+    }
+  },
+  _delayedDragTouchMoveHandler: function(e) {
+    var a = e.touches ? e.touches[0] : e;
+    Math.max(Math.abs(a.clientX - this._lastX), Math.abs(a.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1)) && this._disableDelayedDrag();
+  },
+  _disableDelayedDrag: function() {
+    h && kt(h), clearTimeout(this._dragStartTimer), this._disableDelayedDragEvents();
+  },
+  _disableDelayedDragEvents: function() {
+    var e = this.el.ownerDocument;
+    O(e, "mouseup", this._disableDelayedDrag), O(e, "touchend", this._disableDelayedDrag), O(e, "touchcancel", this._disableDelayedDrag), O(e, "mousemove", this._delayedDragTouchMoveHandler), O(e, "touchmove", this._delayedDragTouchMoveHandler), O(e, "pointermove", this._delayedDragTouchMoveHandler);
+  },
+  _triggerDragStart: function(e, a) {
+    a = a || e.pointerType == "touch" && e, !this.nativeDraggable || a ? this.options.supportPointer ? M(document, "pointermove", this._onTouchMove) : a ? M(document, "touchmove", this._onTouchMove) : M(document, "mousemove", this._onTouchMove) : (M(h, "dragend", this), M(L, "dragstart", this._onDragStart));
+    try {
+      document.selection ? it(function() {
+        document.selection.empty();
+      }) : window.getSelection().removeAllRanges();
+    } catch {
+    }
+  },
+  _dragStarted: function(e, a) {
+    if (Ae = !1, L && h) {
+      de("dragStarted", this, {
+        evt: a
+      }), this.nativeDraggable && M(document, "dragover", Pl);
+      var t = this.options;
+      !e && me(h, t.dragClass, !1), me(h, t.ghostClass, !0), S.active = this, e && this._appendGhost(), ue({
+        sortable: this,
+        name: "start",
+        originalEvent: a
+      });
+    } else
+      this._nulling();
+  },
+  _emulateDragOver: function() {
+    if (ye) {
+      this._lastX = ye.clientX, this._lastY = ye.clientY, xa();
+      for (var e = document.elementFromPoint(ye.clientX, ye.clientY), a = e; e && e.shadowRoot && (e = e.shadowRoot.elementFromPoint(ye.clientX, ye.clientY), e !== a); )
+        a = e;
+      if (h.parentNode[ve]._isOutsideThisEl(e), a)
+        do {
+          if (a[ve]) {
+            var t = void 0;
+            if (t = a[ve]._onDragOver({
+              clientX: ye.clientX,
+              clientY: ye.clientY,
+              target: e,
+              rootEl: a
+            }), t && !this.options.dragoverBubble)
+              break;
+          }
+          e = a;
+        } while (a = a.parentNode);
+      Ca();
+    }
+  },
+  _onTouchMove: function(e) {
+    if (ke) {
+      var a = this.options, t = a.fallbackTolerance, l = a.fallbackOffset, o = e.touches ? e.touches[0] : e, r = D && Ge(D, !0), n = D && r && r.a, p = D && r && r.d, s = tt && se && Zt(se), f = (o.clientX - ke.clientX + l.x) / (n || 1) + (s ? s[0] - Nt[0] : 0) / (n || 1), d = (o.clientY - ke.clientY + l.y) / (p || 1) + (s ? s[1] - Nt[1] : 0) / (p || 1);
+      if (!S.active && !Ae) {
+        if (t && Math.max(Math.abs(o.clientX - this._lastX), Math.abs(o.clientY - this._lastY)) < t)
+          return;
+        this._onDragStart(e, !0);
+      }
+      if (D) {
+        r ? (r.e += f - (Ft || 0), r.f += d - (St || 0)) : r = {
+          a: 1,
+          b: 0,
+          c: 0,
+          d: 1,
+          e: f,
+          f: d
+        };
+        var m = "matrix(".concat(r.a, ",").concat(r.b, ",").concat(r.c, ",").concat(r.d, ",").concat(r.e, ",").concat(r.f, ")");
+        F(D, "webkitTransform", m), F(D, "mozTransform", m), F(D, "msTransform", m), F(D, "transform", m), Ft = f, St = d, ye = o;
+      }
+      e.cancelable && e.preventDefault();
+    }
+  },
+  _appendGhost: function() {
+    if (!D) {
+      var e = this.options.fallbackOnBody ? document.body : L, a = te(h, !0, tt, !0, e), t = this.options;
+      if (tt) {
+        for (se = e; F(se, "position") === "static" && F(se, "transform") === "none" && se !== document; )
+          se = se.parentNode;
+        se !== document.body && se !== document.documentElement ? (se === document && (se = _e()), a.top += se.scrollTop, a.left += se.scrollLeft) : se = _e(), Nt = Zt(se);
+      }
+      D = h.cloneNode(!0), me(D, t.ghostClass, !1), me(D, t.fallbackClass, !0), me(D, t.dragClass, !0), F(D, "transition", ""), F(D, "transform", ""), F(D, "box-sizing", "border-box"), F(D, "margin", 0), F(D, "top", a.top), F(D, "left", a.left), F(D, "width", a.width), F(D, "height", a.height), F(D, "opacity", "0.8"), F(D, "position", tt ? "absolute" : "fixed"), F(D, "zIndex", "100000"), F(D, "pointerEvents", "none"), S.ghost = D, e.appendChild(D), F(D, "transform-origin", ea / parseInt(D.style.width) * 100 + "% " + ta / parseInt(D.style.height) * 100 + "%");
+    }
+  },
+  _onDragStart: function(e, a) {
+    var t = this, l = e.dataTransfer, o = t.options;
+    if (de("dragStart", this, {
+      evt: e
+    }), S.eventCanceled) {
+      this._onDrop();
+      return;
+    }
+    de("setupClone", this), S.eventCanceled || (j = ba(h), j.removeAttribute("id"), j.draggable = !1, j.style["will-change"] = "", this._hideClone(), me(j, this.options.chosenClass, !1), S.clone = j), t.cloneId = it(function() {
+      de("clone", t), !S.eventCanceled && (t.options.removeCloneOnHide || L.insertBefore(j, h), t._hideClone(), ue({
+        sortable: t,
+        name: "clone"
+      }));
+    }), !a && me(h, o.dragClass, !0), a ? (dt = !0, t._loopId = setInterval(t._emulateDragOver, 50)) : (O(document, "mouseup", t._onDrop), O(document, "touchend", t._onDrop), O(document, "touchcancel", t._onDrop), l && (l.effectAllowed = "move", o.setData && o.setData.call(t, l, h)), M(document, "drop", t), F(h, "transform", "translateZ(0)")), Ae = !0, t._dragStartId = it(t._dragStarted.bind(t, a, e)), M(document, "selectstart", t), Le = !0, He && F(document.body, "user-select", "none");
+  },
+  // Returns true - if no further action is needed (either inserted or another condition)
+  _onDragOver: function(e) {
+    var a = this.el, t = e.target, l, o, r, n = this.options, p = n.group, s = S.active, f = Ze === p, d = n.sort, m = le || s, i, u = this, v = !1;
+    if (Ot)
+      return;
+    function g(z, Ce) {
+      de(z, u, we({
+        evt: e,
+        isOwner: f,
+        axis: i ? "vertical" : "horizontal",
+        revert: r,
+        dragRect: l,
+        targetRect: o,
+        canSort: d,
+        fromSortable: m,
+        target: t,
+        completed: c,
+        onMove: function(ie, Tt) {
+          return at(L, a, h, l, ie, te(ie), e, Tt);
+        },
+        changed: w
+      }, Ce));
+    }
+    function k() {
+      g("dragOverAnimationCapture"), u.captureAnimationState(), u !== m && m.captureAnimationState();
+    }
+    function c(z) {
+      return g("dragOverCompleted", {
+        insertion: z
+      }), z && (f ? s._hideClone() : s._showClone(u), u !== m && (me(h, le ? le.options.ghostClass : s.options.ghostClass, !1), me(h, n.ghostClass, !0)), le !== u && u !== S.active ? le = u : u === S.active && le && (le = null), m === u && (u._ignoreWhileAnimating = t), u.animateAll(function() {
+        g("dragOverAnimationComplete"), u._ignoreWhileAnimating = null;
+      }), u !== m && (m.animateAll(), m._ignoreWhileAnimating = null)), (t === h && !h.animated || t === a && !t.animated) && (Pe = null), !n.dragoverBubble && !e.rootEl && t !== document && (h.parentNode[ve]._isOutsideThisEl(e.target), !z && De(e)), !n.dragoverBubble && e.stopPropagation && e.stopPropagation(), v = !0;
+    }
+    function w() {
+      fe = ge(h), Fe = ge(h, n.draggable), ue({
+        sortable: u,
+        name: "change",
+        toEl: a,
+        newIndex: fe,
+        newDraggableIndex: Fe,
+        originalEvent: e
+      });
+    }
+    if (e.preventDefault !== void 0 && e.cancelable && e.preventDefault(), t = he(t, n.draggable, a, !0), g("dragOver"), S.eventCanceled)
+      return v;
+    if (h.contains(e.target) || t.animated && t.animatingX && t.animatingY || u._ignoreWhileAnimating === t)
+      return c(!1);
+    if (dt = !1, s && !n.disabled && (f ? d || (r = K !== L) : le === this || (this.lastPutMode = Ze.checkPull(this, s, h, e)) && p.checkPut(this, s, h, e))) {
+      if (i = this._getDirection(e, t) === "vertical", l = te(h), g("dragOverValid"), S.eventCanceled)
+        return v;
+      if (r)
+        return K = L, k(), this._hideClone(), g("revert"), S.eventCanceled || (Ee ? L.insertBefore(h, Ee) : L.appendChild(h)), c(!0);
+      var A = Bt(a, n.draggable);
+      if (!A || Bl(e, i, this) && !A.animated) {
+        if (A === h)
+          return c(!1);
+        if (A && a === e.target && (t = A), t && (o = te(t)), at(L, a, h, l, t, o, e, !!t) !== !1)
+          return k(), A && A.nextSibling ? a.insertBefore(h, A.nextSibling) : a.appendChild(h), K = a, w(), c(!0);
+      } else if (A && ql(e, i, this)) {
+        var U = Ye(a, 0, n, !0);
+        if (U === h)
+          return c(!1);
+        if (t = U, o = te(t), at(L, a, h, l, t, o, e, !1) !== !1)
+          return k(), a.insertBefore(h, U), K = a, w(), c(!0);
+      } else if (t.parentNode === a) {
+        o = te(t);
+        var q = 0, Q, B = h.parentNode !== a, pe = !Ul(h.animated && h.toRect || l, t.animated && t.toRect || o, i), J = i ? "top" : "left", C = Jt(t, "top", "top") || Jt(h, "top", "top"), x = C ? C.scrollTop : void 0;
+        Pe !== t && (Q = o[J], We = !1, et = !pe && n.invertSwap || B), q = Gl(e, t, o, i, pe ? 1 : n.swapThreshold, n.invertedSwapThreshold == null ? n.swapThreshold : n.invertedSwapThreshold, et, Pe === t);
+        var E;
+        if (q !== 0) {
+          var Z = ge(h);
+          do
+            Z -= q, E = K.children[Z];
+          while (E && (F(E, "display") === "none" || E === D));
+        }
+        if (q === 0 || E === t)
+          return c(!1);
+        Pe = t, ze = q;
+        var P = t.nextElementSibling, G = !1;
+        G = q === 1;
+        var X = at(L, a, h, l, t, o, e, G);
+        if (X !== !1)
+          return (X === 1 || X === -1) && (G = X === 1), Ot = !0, setTimeout(Rl, 30), k(), G && !P ? a.appendChild(h) : t.parentNode.insertBefore(h, G ? P : t), C && ha(C, 0, x - C.scrollTop), K = h.parentNode, Q !== void 0 && !et && (rt = Math.abs(Q - te(t)[J])), w(), c(!0);
+      }
+      if (a.contains(h))
+        return c(!1);
+    }
+    return !1;
+  },
+  _ignoreWhileAnimating: null,
+  _offMoveEvents: function() {
+    O(document, "mousemove", this._onTouchMove), O(document, "touchmove", this._onTouchMove), O(document, "pointermove", this._onTouchMove), O(document, "dragover", De), O(document, "mousemove", De), O(document, "touchmove", De);
+  },
+  _offUpEvents: function() {
+    var e = this.el.ownerDocument;
+    O(e, "mouseup", this._onDrop), O(e, "touchend", this._onDrop), O(e, "pointerup", this._onDrop), O(e, "touchcancel", this._onDrop), O(document, "selectstart", this);
+  },
+  _onDrop: function(e) {
+    var a = this.el, t = this.options;
+    if (fe = ge(h), Fe = ge(h, t.draggable), de("drop", this, {
+      evt: e
+    }), K = h && h.parentNode, fe = ge(h), Fe = ge(h, t.draggable), S.eventCanceled) {
+      this._nulling();
+      return;
+    }
+    Ae = !1, et = !1, We = !1, clearInterval(this._loopId), clearTimeout(this._dragStartTimer), Ut(this.cloneId), Ut(this._dragStartId), this.nativeDraggable && (O(document, "drop", this), O(a, "dragstart", this._onDragStart)), this._offMoveEvents(), this._offUpEvents(), He && F(document.body, "user-select", ""), F(h, "transform", ""), e && (Le && (e.cancelable && e.preventDefault(), !t.dropBubble && e.stopPropagation()), D && D.parentNode && D.parentNode.removeChild(D), (L === K || le && le.lastPutMode !== "clone") && j && j.parentNode && j.parentNode.removeChild(j), h && (this.nativeDraggable && O(h, "dragend", this), kt(h), h.style["will-change"] = "", Le && !Ae && me(h, le ? le.options.ghostClass : this.options.ghostClass, !1), me(h, this.options.chosenClass, !1), ue({
+      sortable: this,
+      name: "unchoose",
+      toEl: K,
+      newIndex: null,
+      newDraggableIndex: null,
+      originalEvent: e
+    }), L !== K ? (fe >= 0 && (ue({
+      rootEl: K,
+      name: "add",
+      toEl: K,
+      fromEl: L,
+      originalEvent: e
+    }), ue({
+      sortable: this,
+      name: "remove",
+      toEl: K,
+      originalEvent: e
+    }), ue({
+      rootEl: K,
+      name: "sort",
+      toEl: K,
+      fromEl: L,
+      originalEvent: e
+    }), ue({
+      sortable: this,
+      name: "sort",
+      toEl: K,
+      originalEvent: e
+    })), le && le.save()) : fe !== Be && fe >= 0 && (ue({
+      sortable: this,
+      name: "update",
+      toEl: K,
+      originalEvent: e
+    }), ue({
+      sortable: this,
+      name: "sort",
+      toEl: K,
+      originalEvent: e
+    })), S.active && ((fe == null || fe === -1) && (fe = Be, Fe = Ke), ue({
+      sortable: this,
+      name: "end",
+      toEl: K,
+      originalEvent: e
+    }), this.save()))), this._nulling();
+  },
+  _nulling: function() {
+    de("nulling", this), L = h = K = D = Ee = j = ot = Se = ke = ye = Le = fe = Fe = Be = Ke = Pe = ze = le = Ze = S.dragged = S.ghost = S.clone = S.active = null, mt.forEach(function(e) {
+      e.checked = !0;
+    }), mt.length = Ft = St = 0;
+  },
+  handleEvent: function(e) {
+    switch (e.type) {
+      case "drop":
+      case "dragend":
+        this._onDrop(e);
+        break;
+      case "dragenter":
+      case "dragover":
+        h && (this._onDragOver(e), Al(e));
+        break;
+      case "selectstart":
+        e.preventDefault();
+        break;
+    }
+  },
+  /**
+   * Serializes the item into an array of string.
+   * @returns {String[]}
+   */
+  toArray: function() {
+    for (var e = [], a, t = this.el.children, l = 0, o = t.length, r = this.options; l < o; l++)
+      a = t[l], he(a, r.draggable, this.el, !1) && e.push(a.getAttribute(r.dataIdAttr) || Ll(a));
+    return e;
+  },
+  /**
+   * Sorts the elements according to the array.
+   * @param  {String[]}  order  order of the items
+   */
+  sort: function(e, a) {
+    var t = {}, l = this.el;
+    this.toArray().forEach(function(o, r) {
+      var n = l.children[r];
+      he(n, this.options.draggable, l, !1) && (t[o] = n);
+    }, this), a && this.captureAnimationState(), e.forEach(function(o) {
+      t[o] && (l.removeChild(t[o]), l.appendChild(t[o]));
+    }), a && this.animateAll();
+  },
+  /**
+   * Save the current sorting
+   */
+  save: function() {
+    var e = this.options.store;
+    e && e.set && e.set(this);
+  },
+  /**
+   * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
+   * @param   {HTMLElement}  el
+   * @param   {String}       [selector]  default: `options.draggable`
+   * @returns {HTMLElement|null}
+   */
+  closest: function(e, a) {
+    return he(e, a || this.options.draggable, this.el, !1);
+  },
+  /**
+   * Set/get option
+   * @param   {string} name
+   * @param   {*}      [value]
+   * @returns {*}
+   */
+  option: function(e, a) {
+    var t = this.options;
+    if (a === void 0)
+      return t[e];
+    var l = Je.modifyOption(this, e, a);
+    typeof l < "u" ? t[e] = l : t[e] = a, e === "group" && Ia(t);
+  },
+  /**
+   * Destroy
+   */
+  destroy: function() {
+    de("destroy", this);
+    var e = this.el;
+    e[ve] = null, O(e, "mousedown", this._onTapStart), O(e, "touchstart", this._onTapStart), O(e, "pointerdown", this._onTapStart), this.nativeDraggable && (O(e, "dragover", this), O(e, "dragenter", this)), Array.prototype.forEach.call(e.querySelectorAll("[draggable]"), function(a) {
+      a.removeAttribute("draggable");
+    }), this._onDrop(), this._disableDelayedDragEvents(), pt.splice(pt.indexOf(this.el), 1), this.el = e = null;
+  },
+  _hideClone: function() {
+    if (!Se) {
+      if (de("hideClone", this), S.eventCanceled)
+        return;
+      F(j, "display", "none"), this.options.removeCloneOnHide && j.parentNode && j.parentNode.removeChild(j), Se = !0;
+    }
+  },
+  _showClone: function(e) {
+    if (e.lastPutMode !== "clone") {
+      this._hideClone();
+      return;
+    }
+    if (Se) {
+      if (de("showClone", this), S.eventCanceled)
+        return;
+      h.parentNode == L && !this.options.group.revertClone ? L.insertBefore(j, h) : Ee ? L.insertBefore(j, Ee) : L.appendChild(j), this.options.group.revertClone && this.animate(h, j), F(j, "display", ""), Se = !1;
+    }
+  }
+};
+function Al(e) {
+  e.dataTransfer && (e.dataTransfer.dropEffect = "move"), e.cancelable && e.preventDefault();
+}
+function at(e, a, t, l, o, r, n, p) {
+  var s, f = e[ve], d = f.options.onMove, m;
+  return window.CustomEvent && !xe && !Qe ? s = new CustomEvent("move", {
+    bubbles: !0,
+    cancelable: !0
+  }) : (s = document.createEvent("Event"), s.initEvent("move", !0, !0)), s.to = a, s.from = e, s.dragged = t, s.draggedRect = l, s.related = o || a, s.relatedRect = r || te(a), s.willInsertAfter = p, s.originalEvent = n, e.dispatchEvent(s), d && (m = d.call(f, s, n)), m;
+}
+function kt(e) {
+  e.draggable = !1;
+}
+function Rl() {
+  Ot = !1;
+}
+function ql(e, a, t) {
+  var l = te(Ye(t.el, 0, t.options, !0)), o = _a(t.el, t.options, D), r = 10;
+  return a ? e.clientX < o.left - r || e.clientY < l.top && e.clientX < l.right : e.clientY < o.top - r || e.clientY < l.bottom && e.clientX < l.left;
+}
+function Bl(e, a, t) {
+  var l = te(Bt(t.el, t.options.draggable)), o = _a(t.el, t.options, D), r = 10;
+  return a ? e.clientX > o.right + r || e.clientY > l.bottom && e.clientX > l.left : e.clientY > o.bottom + r || e.clientX > l.right && e.clientY > l.top;
+}
+function Gl(e, a, t, l, o, r, n, p) {
+  var s = l ? e.clientY : e.clientX, f = l ? t.height : t.width, d = l ? t.top : t.left, m = l ? t.bottom : t.right, i = !1;
+  if (!n) {
+    if (p && rt < f * o) {
+      if (!We && (ze === 1 ? s > d + f * r / 2 : s < m - f * r / 2) && (We = !0), We)
+        i = !0;
+      else if (ze === 1 ? s < d + rt : s > m - rt)
+        return -ze;
+    } else if (s > d + f * (1 - o) / 2 && s < m - f * (1 - o) / 2)
+      return Yl(a);
+  }
+  return i = i || n, i && (s < d + f * r / 2 || s > m - f * r / 2) ? s > d + f / 2 ? 1 : -1 : 0;
+}
+function Yl(e) {
+  return ge(h) < ge(e) ? 1 : -1;
+}
+function Ll(e) {
+  for (var a = e.tagName + e.className + e.src + e.href + e.textContent, t = a.length, l = 0; t--; )
+    l += a.charCodeAt(t);
+  return l.toString(36);
+}
+function $l(e) {
+  mt.length = 0;
+  for (var a = e.getElementsByTagName("input"), t = a.length; t--; ) {
+    var l = a[t];
+    l.checked && mt.push(l);
+  }
+}
+function it(e) {
+  return setTimeout(e, 0);
+}
+function Ut(e) {
+  return clearTimeout(e);
+}
+wt && M(document, "touchmove", function(e) {
+  (S.active || Ae) && e.cancelable && e.preventDefault();
+});
+S.utils = {
+  on: M,
+  off: O,
+  css: F,
+  find: ga,
+  is: function(e, a) {
+    return !!he(e, a, e, !1);
+  },
+  extend: Fl,
+  throttle: ya,
+  closest: he,
+  toggleClass: me,
+  clone: ba,
+  index: ge,
+  nextTick: it,
+  cancelNextTick: Ut,
+  detectDirection: Ta,
+  getChild: Ye
+};
+S.get = function(e) {
+  return e[ve];
+};
+S.mount = function() {
+  for (var e = arguments.length, a = new Array(e), t = 0; t < e; t++)
+    a[t] = arguments[t];
+  a[0].constructor === Array && (a = a[0]), a.forEach(function(l) {
+    if (!l.prototype || !l.prototype.constructor)
+      throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(l));
+    l.utils && (S.utils = we(we({}, S.utils), l.utils)), Je.mount(l);
+  });
+};
+S.create = function(e, a) {
+  return new S(e, a);
+};
+S.version = Il;
+var ee = [], $e, Mt, Pt = !1, Dt, Et, ft, je;
+function jl() {
+  function e() {
+    this.defaults = {
+      scroll: !0,
+      forceAutoScrollFallback: !1,
+      scrollSensitivity: 30,
+      scrollSpeed: 10,
+      bubbleScroll: !0
+    };
+    for (var a in this)
+      a.charAt(0) === "_" && typeof this[a] == "function" && (this[a] = this[a].bind(this));
+  }
+  return e.prototype = {
+    dragStarted: function(a) {
+      var t = a.originalEvent;
+      this.sortable.nativeDraggable ? M(document, "dragover", this._handleAutoScroll) : this.options.supportPointer ? M(document, "pointermove", this._handleFallbackAutoScroll) : t.touches ? M(document, "touchmove", this._handleFallbackAutoScroll) : M(document, "mousemove", this._handleFallbackAutoScroll);
+    },
+    dragOverCompleted: function(a) {
+      var t = a.originalEvent;
+      !this.options.dragOverBubble && !t.rootEl && this._handleAutoScroll(t);
+    },
+    drop: function() {
+      this.sortable.nativeDraggable ? O(document, "dragover", this._handleAutoScroll) : (O(document, "pointermove", this._handleFallbackAutoScroll), O(document, "touchmove", this._handleFallbackAutoScroll), O(document, "mousemove", this._handleFallbackAutoScroll)), na(), st(), Sl();
+    },
+    nulling: function() {
+      ft = Mt = $e = Pt = je = Dt = Et = null, ee.length = 0;
+    },
+    _handleFallbackAutoScroll: function(a) {
+      this._handleAutoScroll(a, !0);
+    },
+    _handleAutoScroll: function(a, t) {
+      var l = this, o = (a.touches ? a.touches[0] : a).clientX, r = (a.touches ? a.touches[0] : a).clientY, n = document.elementFromPoint(o, r);
+      if (ft = a, t || this.options.forceAutoScrollFallback || Qe || xe || He) {
+        Vt(a, this.options, n, t);
+        var p = Ne(n, !0);
+        Pt && (!je || o !== Dt || r !== Et) && (je && na(), je = setInterval(function() {
+          var s = Ne(document.elementFromPoint(o, r), !0);
+          s !== p && (p = s, st()), Vt(a, l.options, s, t);
+        }, 10), Dt = o, Et = r);
+      } else {
+        if (!this.options.bubbleScroll || Ne(n, !0) === _e()) {
+          st();
+          return;
+        }
+        Vt(a, this.options, Ne(n, !1), !1);
+      }
+    }
+  }, Ie(e, {
+    pluginName: "scroll",
+    initializeByDefault: !0
+  });
+}
+function st() {
+  ee.forEach(function(e) {
+    clearInterval(e.pid);
+  }), ee = [];
+}
+function na() {
+  clearInterval(je);
+}
+var Vt = ya(function(e, a, t, l) {
+  if (a.scroll) {
+    var o = (e.touches ? e.touches[0] : e).clientX, r = (e.touches ? e.touches[0] : e).clientY, n = a.scrollSensitivity, p = a.scrollSpeed, s = _e(), f = !1, d;
+    Mt !== t && (Mt = t, st(), $e = a.scroll, d = a.scrollFn, $e === !0 && ($e = Ne(t, !0)));
+    var m = 0, i = $e;
+    do {
+      var u = i, v = te(u), g = v.top, k = v.bottom, c = v.left, w = v.right, A = v.width, U = v.height, q = void 0, Q = void 0, B = u.scrollWidth, pe = u.scrollHeight, J = F(u), C = u.scrollLeft, x = u.scrollTop;
+      u === s ? (q = A < B && (J.overflowX === "auto" || J.overflowX === "scroll" || J.overflowX === "visible"), Q = U < pe && (J.overflowY === "auto" || J.overflowY === "scroll" || J.overflowY === "visible")) : (q = A < B && (J.overflowX === "auto" || J.overflowX === "scroll"), Q = U < pe && (J.overflowY === "auto" || J.overflowY === "scroll"));
+      var E = q && (Math.abs(w - o) <= n && C + A < B) - (Math.abs(c - o) <= n && !!C), Z = Q && (Math.abs(k - r) <= n && x + U < pe) - (Math.abs(g - r) <= n && !!x);
+      if (!ee[m])
+        for (var P = 0; P <= m; P++)
+          ee[P] || (ee[P] = {});
+      (ee[m].vx != E || ee[m].vy != Z || ee[m].el !== u) && (ee[m].el = u, ee[m].vx = E, ee[m].vy = Z, clearInterval(ee[m].pid), (E != 0 || Z != 0) && (f = !0, ee[m].pid = setInterval((function() {
+        l && this.layer === 0 && S.active._onTouchMove(ft);
+        var G = ee[this.layer].vy ? ee[this.layer].vy * p : 0, X = ee[this.layer].vx ? ee[this.layer].vx * p : 0;
+        typeof d == "function" && d.call(S.dragged.parentNode[ve], X, G, e, ft, ee[this.layer].el) !== "continue" || ha(ee[this.layer].el, X, G);
+      }).bind({
+        layer: m
+      }), 24))), m++;
+    } while (a.bubbleScroll && i !== s && (i = Ne(i, !1)));
+    Pt = f;
+  }
+}, 30), Fa = function(e) {
+  var a = e.originalEvent, t = e.putSortable, l = e.dragEl, o = e.activeSortable, r = e.dispatchSortableEvent, n = e.hideGhostForTarget, p = e.unhideGhostForTarget;
+  if (a) {
+    var s = t || o;
+    n();
+    var f = a.changedTouches && a.changedTouches.length ? a.changedTouches[0] : a, d = document.elementFromPoint(f.clientX, f.clientY);
+    p(), s && !s.el.contains(d) && (r("spill"), this.onSpill({
+      dragEl: l,
+      putSortable: t
+    }));
+  }
+};
+function Gt() {
+}
+Gt.prototype = {
+  startIndex: null,
+  dragStart: function(e) {
+    var a = e.oldDraggableIndex;
+    this.startIndex = a;
+  },
+  onSpill: function(e) {
+    var a = e.dragEl, t = e.putSortable;
+    this.sortable.captureAnimationState(), t && t.captureAnimationState();
+    var l = Ye(this.sortable.el, this.startIndex, this.options);
+    l ? this.sortable.el.insertBefore(a, l) : this.sortable.el.appendChild(a), this.sortable.animateAll(), t && t.animateAll();
+  },
+  drop: Fa
+};
+Ie(Gt, {
+  pluginName: "revertOnSpill"
+});
+function Yt() {
+}
+Yt.prototype = {
+  onSpill: function(e) {
+    var a = e.dragEl, t = e.putSortable, l = t || this.sortable;
+    l.captureAnimationState(), a.parentNode && a.parentNode.removeChild(a), l.animateAll();
+  },
+  drop: Fa
+};
+Ie(Yt, {
+  pluginName: "removeOnSpill"
+});
+S.mount(new jl());
+S.mount(Yt, Gt);
+function Hl(e) {
+  return e == null ? e : JSON.parse(JSON.stringify(e));
+}
+function Xl(e) {
+  Rt() && Oa(e);
+}
+function Kl(e) {
+  Rt() ? re(e) : ra(e);
+}
+let Sa = null, Na = null;
+function la(e = null, a = null) {
+  Sa = e, Na = a;
+}
+function zl() {
+  return {
+    data: Sa,
+    clonedData: Na
+  };
+}
+const oa = Symbol("cloneElement");
+function Wl(...e) {
+  var a, t;
+  const l = (a = Rt()) == null ? void 0 : a.proxy;
+  let o = null;
+  const r = e[0];
+  let [, n, p] = e;
+  Array.isArray(V(n)) || (p = n, n = null);
+  let s = null;
+  const {
+    immediate: f = !0,
+    clone: d = Hl,
+    forceFallback: m,
+    fallbackOnBody: i,
+    customUpdate: u
+  } = (t = V(p)) != null ? t : {};
+  function v(C) {
+    var x;
+    const { from: E, oldIndex: Z, item: P } = C, G = Array.from(E.childNodes);
+    o = m && !i ? G.slice(0, -1) : G;
+    const X = V((x = V(n)) == null ? void 0 : x[Z]), z = d(X);
+    la(X, z), P[oa] = z;
+  }
+  function g(C) {
+    const x = C.item[oa];
+    if (!pl(x)) {
+      if (It(C.item), Oe(n)) {
+        const E = [...V(n)];
+        n.value = Ht(E, C.newDraggableIndex, x);
+        return;
+      }
+      Ht(V(n), C.newDraggableIndex, x);
+    }
+  }
+  function k(C) {
+    const { from: x, item: E, oldIndex: Z, oldDraggableIndex: P, pullMode: G, clone: X } = C;
+    if (Xt(x, E, Z), G === "clone") {
+      It(X);
+      return;
+    }
+    if (Oe(n)) {
+      const z = [...V(n)];
+      n.value = jt(z, P);
+      return;
+    }
+    jt(V(n), P);
+  }
+  function c(C) {
+    if (u) {
+      u(C);
+      return;
+    }
+    const { from: x, item: E, oldIndex: Z, oldDraggableIndex: P, newDraggableIndex: G } = C;
+    if (It(E), Xt(x, E, Z), Oe(n)) {
+      const X = [...V(n)];
+      n.value = $t(
+        X,
+        P,
+        G
+      );
+      return;
+    }
+    $t(V(n), P, G);
+  }
+  function w(C) {
+    const { newIndex: x, oldIndex: E, from: Z, to: P } = C;
+    let G = null;
+    const X = x === E && Z === P;
+    try {
+      if (X) {
+        let z = null;
+        o == null || o.some((Ce, ie) => {
+          if (z && (o == null ? void 0 : o.length) !== P.childNodes.length)
+            return Z.insertBefore(z, Ce.nextSibling), !0;
+          const Tt = P.childNodes[ie];
+          z = P == null ? void 0 : P.replaceChild(Ce, Tt);
+        });
+      }
+    } catch (z) {
+      G = z;
+    } finally {
+      o = null;
+    }
+    ra(() => {
+      if (la(), G)
+        throw G;
+    });
+  }
+  const A = {
+    onUpdate: c,
+    onStart: v,
+    onAdd: g,
+    onRemove: k,
+    onEnd: w
+  };
+  function U(C) {
+    const x = V(r);
+    return C || (C = ml(x) ? fl(x, l == null ? void 0 : l.$el) : x), C && !yl(C) && (C = C.$el), C || ul("Root element not found"), C;
+  }
+  function q() {
+    var C;
+    const x = (C = V(p)) != null ? C : {}, { immediate: E, clone: Z } = x, P = da(x, ["immediate", "clone"]);
+    return Kt(P, (G, X) => {
+      hl(G) && (P[G] = (z, ...Ce) => {
+        const ie = zl();
+        return bl(z, ie), X(z, ...Ce);
+      });
+    }), gl(
+      n === null ? {} : A,
+      P
+    );
+  }
+  const Q = (C) => {
+    C = U(C), s && B.destroy(), s = new S(C, q());
+  };
+  ne(
+    () => p,
+    () => {
+      s && Kt(q(), (C, x) => {
+        s == null || s.option(C, x);
+      });
+    },
+    { deep: !0 }
+  );
+  const B = {
+    option: (C, x) => s == null ? void 0 : s.option(C, x),
+    destroy: () => {
+      s == null || s.destroy(), s = null;
+    },
+    save: () => s == null ? void 0 : s.save(),
+    toArray: () => s == null ? void 0 : s.toArray(),
+    closest: (...C) => s == null ? void 0 : s.closest(...C)
+  }, pe = () => B == null ? void 0 : B.option("disabled", !0), J = () => B == null ? void 0 : B.option("disabled", !1);
+  return Kl(() => {
+    f && Q();
+  }), Xl(B.destroy), qe({ start: Q, pause: pe, resume: J }, B);
+}
+const At = [
+  "update",
+  "start",
+  "add",
+  "remove",
+  "choose",
+  "unchoose",
+  "end",
+  "sort",
+  "filter",
+  "clone",
+  "move",
+  "change"
+], Ql = [
+  "clone",
+  "animation",
+  "ghostClass",
+  "group",
+  "sort",
+  "disabled",
+  "store",
+  "handle",
+  "draggable",
+  "swapThreshold",
+  "invertSwap",
+  "invertedSwapThreshold",
+  "removeCloneOnHide",
+  "direction",
+  "chosenClass",
+  "dragClass",
+  "ignore",
+  "filter",
+  "preventOnFilter",
+  "easing",
+  "setData",
+  "dropBubble",
+  "dragoverBubble",
+  "dataIdAttr",
+  "delay",
+  "delayOnTouchOnly",
+  "touchStartThreshold",
+  "forceFallback",
+  "fallbackClass",
+  "fallbackOnBody",
+  "fallbackTolerance",
+  "fallbackOffset",
+  "supportPointer",
+  "emptyInsertThreshold",
+  "scroll",
+  "forceAutoScrollFallback",
+  "scrollSensitivity",
+  "scrollSpeed",
+  "bubbleScroll",
+  "modelValue",
+  "tag",
+  "target",
+  "customUpdate",
+  ...At.map((e) => `on${e.replace(/^\S/, (a) => a.toUpperCase())}`)
+], Jl = H({
+  name: "VueDraggable",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: Ql,
+  emits: ["update:modelValue", ...At],
+  setup(e, { slots: a, emit: t, expose: l, attrs: o }) {
+    const r = At.reduce((d, m) => {
+      const i = `on${m.replace(/^\S/, (u) => u.toUpperCase())}`;
+      return d[i] = (...u) => t(m, ...u), d;
+    }, {}), n = $(() => {
+      const d = Da(e), { modelValue: m } = d, i = da(d, ["modelValue"]), u = Object.entries(i).reduce((v, [g, k]) => {
+        const c = V(k);
+        return c !== void 0 && (v[g] = c), v;
+      }, {});
+      return qe(qe({}, r), dl(qe(qe({}, o), u)));
+    }), p = $({
+      get: () => e.modelValue,
+      set: (d) => t("update:modelValue", d)
+    }), s = T(), f = Ea(
+      Wl(e.target || s, p, n)
+    );
+    return l(f), () => {
+      var d;
+      return Va(e.tag || "div", { ref: s }, (d = a == null ? void 0 : a.default) == null ? void 0 : d.call(a, f));
+    };
+  }
+}), Zl = { class: "flex flex-col gap-6" }, eo = {
+  key: 0,
+  class: "text-sm text-gray-500 flex items-center gap-1.5 -mb-2"
+}, to = { class: "flex items-center justify-between" }, ao = { class: "flex items-center gap-3" }, no = ["src"], lo = { class: "text-xs font-semibold uppercase bg-gray-100 rounded px-2 py-1" }, oo = { class: "font-medium" }, ro = { class: "grid grid-cols-3 gap-4" }, io = {
+  key: 1,
+  class: "text-gray-500"
+}, so = {
+  key: 2,
+  class: "mt-2 flex gap-3"
+}, uo = /* @__PURE__ */ H({
+  __name: "PaymentCheckout",
+  props: {
+    terminal: {
+      type: Object,
+      required: !0
+    },
+    onUpdate: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, t = () => (a.terminal.paymentCheckouts ?? []).map((d) => ({ ...d })).sort((d, m) => (d.sortOrder ?? 0) - (m.sortOrder ?? 0)), l = T(t());
+    ne(
+      () => a.terminal.paymentCheckouts,
+      () => {
+        l.value = t();
+      }
+    );
+    function o() {
+      l.value.forEach((d, m) => {
+        d.sortOrder = m;
+      });
+    }
+    const r = {
+      card: "Card",
+      ecr: "ECR",
+      ecr_qr: "ECR QR",
+      qr: "QR",
+      scanpay: "Scan Pay"
+    }, n = (d) => d.action ? `${d.gateway} (${d.action})` : d.gateway;
+    async function p() {
+      await a.onUpdate({
+        ...a.terminal,
+        paymentCheckouts: l.value
+      });
+    }
+    const s = Aa();
+    function f() {
+      Ya(
+        s,
+        "Reset Payment Checkout",
+        "This will clear all customizations (display name, subtitle, icon, payment description, payment tagline, sort order, enabled state) for every payment method on this terminal and restore the defaults. This action cannot be undone.",
+        async () => {
+          await a.onUpdate({
+            ...a.terminal,
+            paymentCheckouts: []
+          });
+        }
+      );
+    }
+    return (d, m) => {
+      const i = _("FmIcon"), u = _("FmTooltip"), v = _("FmSwitch"), g = _("FmTextField"), k = _("FmButton");
+      return b(), R("div", Zl, [
+        l.value.length > 0 ? (b(), R("p", eo, [
+          m[1] || (m[1] = Ve(" Drag the ", -1)),
+          y(i, {
+            class: "text-gray-400 mx-0.5",
+            name: "drag_indicator"
+          }),
+          m[2] || (m[2] = Ve(" handle to reorder payment checkouts ", -1))
+        ])) : Y("", !0),
+        y(V(Jl), {
+          modelValue: l.value,
+          "onUpdate:modelValue": m[0] || (m[0] = (c) => l.value = c),
+          handle: ".drag-handle",
+          class: "flex flex-col gap-6",
+          "drag-class": "dragging-card",
+          "ghost-class": "sortable-ghost-card",
+          onEnd: o
+        }, {
+          default: ae(() => [
+            (b(!0), R(oe, null, be(l.value, (c) => (b(), R("div", {
+              key: c.id,
+              class: "border rounded-lg p-6 flex flex-col gap-4"
+            }, [
+              I("div", to, [
+                I("div", ao, [
+                  y(i, {
+                    class: "drag-handle cursor-grab text-gray-400",
+                    name: "drag_indicator"
+                  }),
+                  y(u, {
+                    variant: "plain",
+                    placement: "top",
+                    content: c.gateway,
+                    "hide-arrow": !0
+                  }, {
+                    default: ae(() => [
+                      I("img", {
+                        class: "rounded-md m-auto border-transparent w-[32px] h-[32px]",
+                        src: V(Ga)(c.gateway.toUpperCase())
+                      }, null, 8, no)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"]),
+                  I("span", lo, Re(r[c.type] ?? c.type), 1),
+                  I("span", oo, Re(n(c)), 1)
+                ]),
+                y(v, {
+                  modelValue: c.enabled,
+                  "onUpdate:modelValue": (w) => c.enabled = w,
+                  label: "Enabled"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              I("div", ro, [
+                y(g, {
+                  modelValue: c.displayName,
+                  "onUpdate:modelValue": (w) => c.displayName = w,
+                  label: "Display Name"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                y(g, {
+                  modelValue: c.subtitle,
+                  "onUpdate:modelValue": (w) => c.subtitle = w,
+                  label: "Subtitle",
+                  "label-mark": "optional"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                y(g, {
+                  modelValue: c.icon,
+                  "onUpdate:modelValue": (w) => c.icon = w,
+                  label: "Icon URL",
+                  "label-mark": "optional"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                y(g, {
+                  modelValue: c.paymentDescription,
+                  "onUpdate:modelValue": (w) => c.paymentDescription = w,
+                  label: "Payment Description",
+                  "label-mark": "optional"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"]),
+                y(g, {
+                  modelValue: c.paymentTagline,
+                  "onUpdate:modelValue": (w) => c.paymentTagline = w,
+                  label: "Payment Tagline",
+                  "label-mark": "optional"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ])
+            ]))), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        l.value.length === 0 ? (b(), R("div", io, " No payment methods configured for this terminal. ")) : Y("", !0),
+        l.value.length > 0 ? (b(), R("div", so, [
+          y(k, {
+            variant: "secondary",
+            label: "Reset",
+            icon: "restart_alt",
+            onclick: f
+          }),
+          y(k, {
+            variant: "primary",
+            label: "Save",
+            icon: "save",
+            onclick: p
+          })
+        ])) : Y("", !0)
+      ]);
+    };
+  }
+}), co = /* @__PURE__ */ La(uo, [["__scopeId", "data-v-db4182d5"]]), So = /* @__PURE__ */ H({
+  __name: "TerminalSetting",
+  props: {
+    terminalId: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const a = e, { tab: t } = bt({
+      tab: "information"
+    }), { isLoading: l, startAsyncCall: o } = ht(!0), r = Ma(), n = qt(), p = T();
+    async function s(u) {
+      o(async () => {
+        try {
+          await Ue.updateById(
+            a.terminalId,
+            {
+              name: u.name,
+              status: u.status,
+              ecrs: u.ecrs ?? [],
+              gateways: u.gateways ?? [],
+              ecrIntegrations: u.ecrIntegrations ?? [],
+              qrIntegrations: u.qrIntegrations ?? [],
+              paymentCheckouts: u.paymentCheckouts ?? []
+            }
+          ), p.value = await Ue.readById(a.terminalId), n.open({
+            type: "success",
+            message: "Terminal updated successfully"
+          });
+        } catch (v) {
+          n.open({
+            type: "error",
+            title: "Error occurs when update terminal",
+            message: nt(v)
+          });
+        }
+      });
+    }
+    const f = [
+      {
+        label: "Information",
+        value: "information",
+        icon: "overview",
+        render: $a
+      },
+      {
+        label: "Setting Request",
+        value: "settings",
+        icon: "settings",
+        render: Ka,
+        onlyFor: ["TERMINAL"]
+      },
+      {
+        label: "SoftPos Gateway",
+        value: "softpos",
+        icon: "payment",
+        render: an
+      },
+      {
+        label: "ECR Gateway",
+        value: "ecr",
+        icon: "point_of_sale",
+        render: el,
+        onlyFor: ["POS", "KIOSK"]
+      },
+      {
+        label: "QR Gateway",
+        value: "qr",
+        icon: "qr_code",
+        render: rl,
+        onlyFor: ["POS", "KIOSK"]
+      },
+      {
+        label: "Payment Checkout",
+        value: "payment-checkout",
+        icon: "tune",
+        render: co,
+        onlyFor: ["KIOSK", "POS", "TERMINAL"]
+      }
+    ];
+    _t().currentCountry;
+    const d = $(() => {
+      var u;
+      return (u = f.find((v) => v.value === t.value)) == null ? void 0 : u.render;
+    });
+    async function m() {
+      o(async () => {
+        p.value = await Ue.readById(a.terminalId);
+      });
+    }
+    const i = $(() => f.filter((u) => {
+      var v;
+      return !u.onlyFor || u.onlyFor.includes(((v = p.value) == null ? void 0 : v.deviceType) ?? "");
+    }));
+    return re(m), (u, v) => {
+      var k, c;
+      const g = _("FmTabs");
+      return b(), N(Pa, {
+        title: `${(k = p.value) == null ? void 0 : k.deviceType} (${(c = p.value) == null ? void 0 : c._id})`,
+        loading: V(l),
+        onBack: V(r).back
+      }, {
+        default: ae(() => [
+          y(g, {
+            "model-value": V(t),
+            "onUpdate:modelValue": v[0] || (v[0] = (w) => Oe(t) ? t.value = w : null),
+            class: "mb-6",
+            items: i.value
+          }, null, 8, ["model-value", "items"]),
+          V(t) ? (b(), N(vt(d.value), gt(yt({ key: 0 }, {
+            terminal: p.value,
+            onUpdate: s
+          })), null, 16)) : Y("", !0)
+        ]),
+        _: 1
+      }, 8, ["title", "loading", "onBack"]);
+    };
+  }
+});
+export {
+  So as default
+};