@feedmepos/mf-menu 0.18.17 → 0.19.0-beta.2

package/dist/CookingGuide-BKon8TdH.js

@@ -0,0 +1,862 @@
+import { defineComponent as le, ref as h, computed as w, resolveComponent as x, openBlock as g, createBlock as P, unref as t, withCtx as c, createElementVNode as a, createVNode as i, toDisplayString as V, createElementBlock as $, Fragment as z, renderList as q, createTextVNode as be, withModifiers as se, createCommentVNode as ce, h as R } from "vue";
+import { n as ie, d as Z, b as ee, h as ue, u as ye, i as ke, a as he, _ as xe, f as Ce, k as we, j as Ve } from "./app-t9ONnc0s.js";
+import { components as de, useSnackbar as Fe, useDialog as Se } from "@feedmepos/ui-library";
+import { V as $e } from "./vuedraggable-WU01qJgi.js";
+import { _ as Ie } from "./ApplyProducts.vue_vue_type_script_setup_true_lang-CXoRwrTi.js";
+import "@feedmepos/mf-common";
+import { _ as X } from "./FormSection.vue_vue_type_script_setup_true_lang-BWJUD8NZ.js";
+import { u as me, l as pe } from "./lodash-VivR_BQ2.js";
+const Oe = { class: "flex items-center gap-8" }, De = { class: "grow" }, Ne = { class: "space-y-32" }, Le = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Ue = { class: "px-16 py-8 w-[40%]" }, Ge = { class: "px-16 py-8 grow" }, Ke = { class: "flex items-center border-b border-b-fm-color-neutral-gray-100" }, Be = { class: "px-16 py-8 w-[40%]" }, Ee = { class: "px-16 py-8 grow" }, Me = { class: "space-y-16" }, ze = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, Te = { class: "flex gap-8 items-center justify-start" }, Re = /* @__PURE__ */ le({
+  __name: "CookingGuideStepDialog",
+  emits: ["onComplete"],
+  setup(U, { expose: r, emit: j }) {
+    const { t: d } = ie();
+    r({
+      show: u,
+      hide: I
+    });
+    const G = j;
+    function L() {
+      return {
+        id: "",
+        variables: {},
+        instruction: ""
+      };
+    }
+    const k = h(!1), B = h(!1), D = h(void 0);
+    function u(f) {
+      B.value = !!f, D.value = f ? Z(f) : L(), m.value = Z(D.value), C.value = Object.entries(m.value.variables).map(
+        ([l, y]) => ({ key: l, value: y })
+      ), k.value = !0;
+    }
+    function I() {
+      k.value = !1;
+    }
+    const m = h(L()), C = h([]);
+    function Y() {
+      C.value.push({ key: "", value: "" });
+    }
+    function A(f) {
+      C.value.splice(f, 1);
+    }
+    function K(f) {
+      m.value = {
+        ...m.value,
+        instruction: `${m.value.instruction}{{${f}}}`
+      };
+    }
+    const b = w(() => C.value.reduce(
+      (f, { key: l }) => (l && f.every((y) => y.label !== l) && f.push({
+        label: l
+      }), f),
+      []
+    )), n = w(() => B.value ? d("menu.cooking_guide.step_dialog.update.title") : d("menu.cooking_guide.step_dialog.add.title")), s = w(() => B.value ? d("menu.cooking_guide.step_dialog.update.action") : d("menu.cooking_guide.step_dialog.add.action"));
+    h();
+    const N = me(
+      () => !pe.isEqual(
+        {
+          ...m.value,
+          variables: C.value.reduce((f, { key: l, value: y }) => ({ ...f, [l]: y }), {})
+        },
+        D.value
+      ),
+      () => {
+        k.value = !1;
+      }
+    );
+    function E() {
+      I(), G("onComplete", {
+        ...m.value,
+        variables: C.value.reduce((f, { key: l, value: y }) => ({ ...f, [l]: y }), {})
+      });
+    }
+    return (f, l) => {
+      const y = x("FmButton"), _ = x("FmTextField"), J = x("FmChip"), oe = x("FmTextarea"), Q = x("FmSideSheet");
+      return g(), P(Q, {
+        modelValue: k.value,
+        "onUpdate:modelValue": l[1] || (l[1] = (M) => k.value = M),
+        closeButton: !1,
+        header: n.value,
+        "max-width": 560,
+        "is-container": t(de).FmForm,
+        "is-container-props": {
+          onValidationSuccess: E,
+          blameFormChildOnValidationFailed: !0,
+          class: "flex flex-col h-full"
+        },
+        "onOn:clickedAway": t(N)
+      }, {
+        "side-sheet-header": c(() => [
+          a("div", Oe, [
+            i(y, {
+              icon: "arrow_back",
+              variant: "tertiary",
+              label: t(d)("menu.cooking_guide.step_dialog.actions.back"),
+              onClick: I
+            }, null, 8, ["label"]),
+            a("div", De, V(n.value), 1)
+          ])
+        ]),
+        "side-sheet-footer": c(() => [
+          a("div", Te, [
+            i(y, {
+              label: s.value,
+              size: "lg",
+              variant: "primary",
+              type: "submit"
+            }, null, 8, ["label"]),
+            i(y, {
+              label: t(d)("menu.cooking_guide.step_dialog.actions.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: I
+            }, null, 8, ["label"])
+          ])
+        ]),
+        default: c(() => [
+          a("div", Ne, [
+            i(X, {
+              title: t(d)("menu.cooking_guide.step_dialog.sections.variables.title")
+            }, {
+              "append-title": c(() => [
+                i(y, {
+                  icon: "add",
+                  label: t(d)("menu.cooking_guide.step_dialog.sections.variables.add"),
+                  variant: "secondary",
+                  "text-color": "primary",
+                  "border-color": "primary",
+                  onClick: Y
+                }, null, 8, ["label"])
+              ]),
+              default: c(() => [
+                a("div", null, [
+                  a("div", Le, [
+                    a("div", Ue, V(t(d)("menu.cooking_guide.step_dialog.sections.variables.columns.key")), 1),
+                    a("div", Ge, V(t(d)("menu.cooking_guide.step_dialog.sections.variables.columns.value")), 1)
+                  ]),
+                  (g(!0), $(z, null, q(C.value, (M, T) => (g(), $("div", Ke, [
+                    a("div", Be, [
+                      i(_, {
+                        modelValue: C.value[T].key,
+                        "onUpdate:modelValue": (O) => C.value[T].key = O,
+                        rules: [
+                          (O) => !!O || t(d)("menu.cooking_guide.step_dialog.sections.variables.validation.required"),
+                          (O) => !O || /^[a-z]+$/.test(O) || t(d)("menu.cooking_guide.step_dialog.sections.variables.validation.lowercase"),
+                          (O) => !O || C.value.findIndex((ae) => ae.key === O) === T || t(d)("menu.cooking_guide.step_dialog.sections.variables.validation.duplicate")
+                        ],
+                        placeholder: t(d)("menu.cooking_guide.step_dialog.sections.variables.placeholders.key")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
+                    ]),
+                    a("div", Ee, [
+                      i(_, {
+                        modelValue: C.value[T].value,
+                        "onUpdate:modelValue": (O) => C.value[T].value = O,
+                        rules: [
+                          (O) => !!O || t(d)("menu.cooking_guide.step_dialog.sections.variables.validation.required")
+                        ],
+                        placeholder: t(d)("menu.cooking_guide.step_dialog.sections.variables.placeholders.value")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "rules", "placeholder"])
+                    ]),
+                    i(y, {
+                      icon: "delete",
+                      variant: "tertiary",
+                      "text-color": "neutral-gray-400",
+                      onClick: () => A(T)
+                    }, null, 8, ["onClick"])
+                  ]))), 256))
+                ])
+              ]),
+              _: 1
+            }, 8, ["title"]),
+            i(X, {
+              title: t(d)("menu.cooking_guide.step_dialog.sections.instruction.title")
+            }, {
+              default: c(() => [
+                a("div", Me, [
+                  a("div", ze, [
+                    (g(!0), $(z, null, q(b.value, (M) => (g(), P(J, {
+                      key: M.label,
+                      label: M.label,
+                      class: "text-fm-color-primary bg-fm-color-system-warning-100",
+                      onClick: () => K(M.label)
+                    }, null, 8, ["label", "onClick"]))), 128))
+                  ]),
+                  i(oe, {
+                    modelValue: m.value.instruction,
+                    "onUpdate:modelValue": l[0] || (l[0] = (M) => m.value.instruction = M)
+                  }, null, 8, ["modelValue"])
+                ])
+              ]),
+              _: 1
+            }, 8, ["title"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]);
+    };
+  }
+}), Ae = { class: "w-[700px]" }, Pe = { class: "flex bg-fm-color-neutral-gray-100" }, qe = { class: "px-16 py-8 grow" }, je = { class: "px-16 py-8 w-[200px]" }, Ye = { class: "px-16 py-8 w-[200px]" }, He = { class: "px-16 py-8 grow" }, Je = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, Qe = { class: "px-16 py-8 w-[200px] flex flex-col gap-8" }, We = /* @__PURE__ */ le({
+  __name: "CookingGuideStepOverrideDialog",
+  emits: ["onComplete"],
+  setup(U, { expose: r, emit: j }) {
+    const { t: d } = ie();
+    r({
+      show: u,
+      hide: I
+    });
+    const G = j;
+    function L() {
+      return {
+        productId: "",
+        overrides: []
+      };
+    }
+    const k = h(!1), B = h(""), D = h([]);
+    function u(b) {
+      B.value = b.itemName, D.value = b.steps, m.value = b.bindings ? Z(b.bindings) : L(), k.value = !0;
+    }
+    function I() {
+      k.value = !1;
+    }
+    const m = h(L()), C = w(() => m.value.overrides.reduce((b, n) => (b[n.id] = n, b), {}));
+    function Y(b, n) {
+      var s;
+      return ((s = C.value[b]) == null ? void 0 : s.variables[n]) ?? "";
+    }
+    function A(b, n, s) {
+      const N = m.value.overrides.findIndex((E) => E.id === b);
+      s ? N < 0 ? m.value.overrides.push({
+        id: b,
+        variables: { [n]: s }
+      }) : m.value.overrides[N].variables[n] = s : N >= 0 && (delete m.value.overrides[N].variables[n], Object.keys(m.value.overrides[N].variables).length || m.value.overrides.splice(N, 1));
+    }
+    function K() {
+      I(), G("onComplete", m.value);
+    }
+    return (b, n) => {
+      const s = x("FmTextField"), N = x("FmSpacer"), E = x("FmButton"), f = x("FmDialog");
+      return g(), P(f, {
+        modelValue: k.value,
+        "onUpdate:modelValue": n[0] || (n[0] = (l) => k.value = l),
+        overlay: !0,
+        contentClass: "test",
+        "min-width": "min(calc(100% - 48px), 748px)"
+      }, {
+        "dialog-header": c(() => [
+          a("div", null, V(t(d)("menu.cooking_guide.step_override_dialog.title")), 1)
+        ]),
+        "dialog-footer": c(() => [
+          i(N),
+          i(E, {
+            class: "sm:w-full xs:w-full",
+            label: t(d)("menu.cooking_guide.step_override_dialog.actions.cancel"),
+            size: "md",
+            variant: "tertiary",
+            onClick: I
+          }, null, 8, ["label"]),
+          i(E, {
+            class: "sm:w-full xs:w-full",
+            label: t(d)("menu.cooking_guide.step_override_dialog.actions.save"),
+            size: "md",
+            variant: "primary",
+            onClick: K
+          }, null, 8, ["label"])
+        ]),
+        default: c(() => [
+          a("div", Ae, [
+            a("div", Pe, [
+              a("div", qe, V(t(d)("menu.cooking_guide.step_override_dialog.columns.instructions")), 1),
+              a("div", je, V(t(d)("menu.cooking_guide.step_override_dialog.columns.variables")), 1),
+              a("div", Ye, V(t(d)("menu.cooking_guide.step_override_dialog.columns.value")), 1)
+            ]),
+            (g(!0), $(z, null, q(D.value, (l) => (g(), $("div", {
+              key: l.id,
+              class: "flex border-t-2"
+            }, [
+              a("div", He, V(l.instruction), 1),
+              a("div", Je, [
+                (g(!0), $(z, null, q(l.variables, (y, _) => (g(), $("div", {
+                  key: _,
+                  class: "py-8 w-full text-ellipsis overflow-hidden whitespace-nowrap"
+                }, V(_), 1))), 128))
+              ]),
+              a("div", Qe, [
+                (g(!0), $(z, null, q(l.variables, (y, _) => (g(), $("div", { key: _ }, [
+                  i(s, {
+                    "model-value": Y(l.id, _.toString()),
+                    placeholder: y,
+                    "onUpdate:modelValue": (J) => A(l.id, _.toString(), J)
+                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
+                ]))), 128))
+              ])
+            ]))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Xe = { class: "fm-typo-en-title-md-600" }, Ze = { class: "space-y-24" }, eo = { class: "flex items-center" }, oo = { class: "flex-1" }, no = { class: "flex items-center gap-8" }, to = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, lo = { class: "flex-1" }, io = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, ao = { class: "flex" }, so = { class: "px-16 py-8 flex-1" }, uo = { class: "px-16 py-8 flex gap-8" }, ro = { class: "flex gap-8 items-center justify-start" }, co = /* @__PURE__ */ le({
+  __name: "CookingGuideDialog",
+  props: {
+    categorizedItems: {
+      type: Array,
+      required: !0
+    },
+    canApplyItems: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["onSave"],
+  setup(U, { expose: r, emit: j }) {
+    const d = U;
+    r({
+      showModal: B,
+      hideModal: D
+    });
+    function G() {
+      return {
+        _id: "",
+        name: "",
+        bindings: [],
+        steps: []
+      };
+    }
+    const L = h(!1), k = h(void 0);
+    function B(e) {
+      k.value = e ? Z(e) : G(), u.value = Z(k.value), L.value = !0;
+    }
+    function D() {
+      L.value = !1;
+    }
+    const u = h(G()), I = h();
+    function m() {
+      var e;
+      (e = I.value) == null || e.show();
+    }
+    function C(e) {
+      var o;
+      (o = I.value) == null || o.show(e);
+    }
+    function Y(e) {
+      u.value.steps.splice(e, 1);
+    }
+    function A(e) {
+      if (!e.id)
+        u.value.steps.push({ ...e, id: (/* @__PURE__ */ new Date()).toISOString() });
+      else {
+        const o = u.value.steps.findIndex(({ id: p }) => e.id === p);
+        o >= 0 && u.value.steps.splice(o, 1, e);
+      }
+    }
+    function K(e) {
+      u.value = {
+        ...u.value,
+        bindings: e
+      };
+    }
+    function b(e, o) {
+      return u.value.bindings.find(
+        (v) => v.productId === e && v.combinationKey == o
+      );
+    }
+    function n(e) {
+      const o = Object.entries(e).reduce(
+        (p, [v, F]) => {
+          var H;
+          return p = F.length > 0 ? [
+            ...p,
+            ...F.map((ne) => {
+              var te;
+              return {
+                productId: v,
+                combinationKey: ne,
+                overrides: ((te = b(v, ne)) == null ? void 0 : te.overrides) ?? []
+              };
+            })
+          ] : [
+            ...p,
+            {
+              productId: v,
+              overrides: ((H = b(v)) == null ? void 0 : H.overrides) ?? []
+            }
+          ], p;
+        },
+        []
+      );
+      K(o);
+    }
+    const s = h();
+    function N(e) {
+      var o;
+      (o = s.value) == null || o.show({
+        itemName: e.itemName,
+        steps: u.value.steps,
+        bindings: b(e.itemId, e.combinationKey)
+      });
+    }
+    function E({ productId: e, combinationKey: o, overrides: p }) {
+      const v = u.value.bindings.map((F) => ({
+        ...F,
+        overrides: F.productId === e && F.combinationKey == o ? p : F.overrides
+      }));
+      K(v);
+    }
+    function f(e) {
+      const o = u.value.bindings.findIndex(
+        (p) => p.productId === e.itemId && e.combinationKey == p.combinationKey
+      );
+      o >= 0 && u.value.bindings.splice(o, 1);
+    }
+    const { t: l } = ie(), y = w(() => u.value._id ? l("menu.cooking_guide.dialog.update.title") : l("menu.cooking_guide.dialog.add.title")), _ = w(() => u.value._id ? l("menu.cooking_guide.dialog.update.action") : l("menu.cooking_guide.dialog.add.action")), J = w(() => u.value.bindings.length), oe = w(
+      () => u.value.bindings.reduce((e, o) => {
+        const p = e[o.productId] ?? [];
+        return o.combinationKey ? e[o.productId] = [...p, o.combinationKey] : e[o.productId] = [], e;
+      }, {})
+    ), Q = h(""), M = w(() => d.categorizedItems.reduce((e, o) => {
+      var p, v;
+      for (const F of o.items)
+        (p = F.variant) != null && p.variantGroupIds.length && ((v = F.variant) == null ? void 0 : v.variantGroupIds.length) > 0 ? e = [
+          ...e,
+          ...F.variant.variantCombinations.map((H) => ({
+            categoryId: o.id,
+            categoryName: o.name,
+            itemId: F._id,
+            itemName: `${F.name} - ${H.codeName}`,
+            combinationKey: H.combinationKey
+          }))
+        ] : e.push({
+          categoryId: o.id,
+          categoryName: o.name,
+          itemId: F._id,
+          itemName: F.name
+        });
+      return e;
+    }, [])), T = w(() => M.value.filter((e) => {
+      const o = oe.value[e.itemId];
+      return !!o && (!e.combinationKey || o.includes(e.combinationKey));
+    })), O = w(() => {
+      const e = Q.value.toLowerCase();
+      return e ? T.value.filter(
+        (o) => o.itemName.toLowerCase().includes(e) || o.categoryName.toLowerCase().includes(e)
+      ) : T.value;
+    }), ae = w(() => O.value.reduce(
+      (e, o) => {
+        const p = e.findIndex((v) => v.id === o.categoryId);
+        return p < 0 ? e.push({
+          id: o.categoryId,
+          name: o.categoryName,
+          items: [o]
+        }) : e[p] = {
+          ...e[p],
+          items: [...e[p].items, o]
+        }, e;
+      },
+      []
+    )), re = h();
+    function ge() {
+      var e;
+      (e = re.value) == null || e.show(oe.value);
+    }
+    const _e = j;
+    h();
+    const ve = me(
+      () => !pe.isEqual(k.value, u.value),
+      () => {
+        L.value = !1;
+      }
+    );
+    function fe() {
+      D(), _e("onSave", u.value);
+    }
+    return (e, o) => {
+      const p = x("FmTextField"), v = x("FmButton"), F = x("FmCardSection"), H = x("FmCard"), ne = x("FmSearch"), te = x("FmSideSheet");
+      return g(), $(z, null, [
+        i(te, {
+          modelValue: L.value,
+          "onUpdate:modelValue": o[3] || (o[3] = (S) => L.value = S),
+          header: y.value,
+          "max-width": 560,
+          "is-container": t(de).FmForm,
+          "is-container-props": {
+            onValidationSuccess: fe,
+            blameFormChildOnValidationFailed: !0,
+            class: "flex flex-col h-full py-16"
+          },
+          "onOn:clickedAway": t(ve)
+        }, {
+          "side-sheet-header": c(() => [
+            a("span", Xe, V(y.value), 1)
+          ]),
+          "side-sheet-footer": c(() => [
+            a("div", ro, [
+              i(v, {
+                variant: "primary",
+                label: _.value,
+                size: "lg",
+                type: "submit"
+              }, null, 8, ["label"]),
+              i(v, {
+                variant: "tertiary",
+                label: t(l)("menu.cooking_guide.dialog.actions.cancel"),
+                size: "lg",
+                onClick: D
+              }, null, 8, ["label"])
+            ])
+          ]),
+          default: c(() => [
+            a("div", Ze, [
+              i(X, {
+                title: t(l)("menu.cooking_guide.dialog.sections.guide_detail.title")
+              }, {
+                default: c(() => [
+                  i(p, {
+                    autofocus: "",
+                    modelValue: u.value.name,
+                    "onUpdate:modelValue": o[0] || (o[0] = (S) => u.value.name = S),
+                    label: t(l)("menu.cooking_guide.dialog.sections.guide_detail.name.label"),
+                    placeholder: t(l)("menu.cooking_guide.dialog.sections.guide_detail.name.placeholder"),
+                    rules: [
+                      (S) => !!S || t(l)("menu.cooking_guide.dialog.sections.guide_detail.name.required")
+                    ]
+                  }, null, 8, ["modelValue", "label", "placeholder", "rules"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              i(X, {
+                title: t(l)("menu.cooking_guide.dialog.sections.steps.title")
+              }, {
+                "append-title": c(() => [
+                  i(v, {
+                    label: t(l)("menu.cooking_guide.dialog.sections.steps.add"),
+                    variant: "secondary",
+                    "text-color": "primary",
+                    "border-color": "primary",
+                    icon: "add",
+                    onClick: m
+                  }, null, 8, ["label"])
+                ]),
+                default: c(() => [
+                  i(t($e), {
+                    modelValue: u.value.steps,
+                    "onUpdate:modelValue": o[1] || (o[1] = (S) => u.value.steps = S),
+                    handle: ".handle",
+                    "item-key": "id"
+                  }, {
+                    item: c(({ element: S, index: W }) => [
+                      i(H, {
+                        variant: "outlined",
+                        class: "rounded-md mb-16 items-center",
+                        horizontal: "",
+                        onClick: () => C(S)
+                      }, {
+                        default: c(() => [
+                          a("div", eo, [
+                            i(v, {
+                              class: "handle",
+                              icon: "drag_handle",
+                              variant: "tertiary"
+                            }),
+                            a("p", oo, V(S.name), 1)
+                          ]),
+                          i(F, { class: "grow" }, {
+                            default: c(() => [
+                              be(V(S.instruction), 1)
+                            ]),
+                            _: 2
+                          }, 1024),
+                          i(v, {
+                            icon: "delete",
+                            variant: "tertiary",
+                            onClick: se(() => Y(W), ["stop"])
+                          }, null, 8, ["onClick"])
+                        ]),
+                        _: 2
+                      }, 1032, ["onClick"])
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              U.canApplyItems ? (g(), P(X, {
+                key: 0,
+                title: t(l)("menu.cooking_guide.dialog.sections.apply_product.title")
+              }, {
+                "append-title": c(() => [
+                  i(v, {
+                    variant: "secondary",
+                    icon: "link",
+                    label: t(l)("menu.cooking_guide.dialog.sections.apply_product.link"),
+                    "text-color": "primary",
+                    "border-color": "primary",
+                    onClick: ge
+                  }, null, 8, ["label"])
+                ]),
+                default: c(() => [
+                  a("div", no, [
+                    a("div", to, V(t(l)("menu.cooking_guide.dialog.sections.apply_product.products_linked", {
+                      count: J.value
+                    })), 1),
+                    a("div", lo, [
+                      i(ne, {
+                        modelValue: Q.value,
+                        "onUpdate:modelValue": o[2] || (o[2] = (S) => Q.value = S),
+                        placeholder: t(l)("menu.cooking_guide.dialog.sections.apply_product.search")
+                      }, null, 8, ["modelValue", "placeholder"])
+                    ])
+                  ]),
+                  (g(!0), $(z, null, q(ae.value, (S) => (g(), $("div", null, [
+                    a("div", io, V(S.name), 1),
+                    (g(!0), $(z, null, q(S.items, (W) => (g(), $("div", ao, [
+                      a("div", so, V(W.itemName), 1),
+                      a("div", uo, [
+                        i(v, {
+                          icon: "edit",
+                          variant: "tertiary",
+                          onClick: () => N(W)
+                        }, null, 8, ["onClick"]),
+                        i(v, {
+                          icon: "delete",
+                          variant: "tertiary",
+                          onClick: () => f(W)
+                        }, null, 8, ["onClick"])
+                      ])
+                    ]))), 256))
+                  ]))), 256))
+                ]),
+                _: 1
+              }, 8, ["title"])) : ce("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "header", "is-container", "is-container-props", "onOn:clickedAway"]),
+        i(Ie, {
+          ref_key: "applyProductRef",
+          ref: re,
+          title: "Link product",
+          options: U.categorizedItems,
+          "can-select-variant": !0,
+          onOnComplete: n
+        }, null, 8, ["options"]),
+        i(Re, {
+          ref_key: "cookingGuideStepDialogRef",
+          ref: I,
+          onOnComplete: A
+        }, null, 512),
+        i(We, {
+          ref_key: "cookingGuideStepOverrideDialogRef",
+          ref: s,
+          onOnComplete: E
+        }, null, 512)
+      ], 64);
+    };
+  }
+});
+function mo(U) {
+  return {
+    module: ee.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: ue.F_OPERATION_TYPE.create,
+    data: ee.FdoMenuCookingGuide.parse(U)
+  };
+}
+function po(U) {
+  return {
+    module: ee.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: ue.F_OPERATION_TYPE.update,
+    data: ee.FdoMenuCookingGuide.parse(U)
+  };
+}
+function go(U) {
+  return {
+    module: ee.F_MENU_MODULE_V4_KEY.enum.cookingGuide,
+    operation: ue.F_OPERATION_TYPE.delete,
+    data: U._id
+  };
+}
+const _o = {
+  class: "flex flex-1 justify-end"
+}, vo = {
+  class: "flex justify-end items-center"
+}, fo = {
+  class: "grow space-y-4"
+}, bo = {
+  class: "fm-typo-en-body-lg-600"
+}, yo = {
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, ko = {
+  class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, Io = /* @__PURE__ */ le({
+  __name: "CookingGuide",
+  setup(U) {
+    const {
+      t: r
+    } = ie(), j = w(() => [{
+      accessorKey: "name",
+      header: () => r("menu.cooking_guide.table.columns.name"),
+      cell: (n) => n.getValue(),
+      enableSorting: !1
+    }, {
+      accessorKey: "bindings",
+      header: () => r("menu.cooking_guide.table.columns.products"),
+      cell: (n) => {
+        const s = n.getValue();
+        return r("menu.cooking_guide.table.columns.products", {
+          count: s.length
+        });
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "steps",
+      header: () => r("menu.cooking_guide.table.columns.steps"),
+      cell: (n) => {
+        const s = n.getValue();
+        return r("menu.cooking_guide.table.columns.steps", {
+          count: s.length
+        });
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "_id",
+      header: "",
+      size: 52,
+      meta: {
+        cellClass: "pl-16",
+        headerContentClass: "-mx-16"
+      },
+      enableSorting: !1,
+      cell: (n) => R("div", {
+        class: "flex justify-end"
+      }, [R(de.FmButton, {
+        icon: "delete",
+        textColor: "neutral-gray-400",
+        variant: "tertiary",
+        onClick: se(() => {
+          A(n.row.original);
+        }, ["stop", "prevent"])
+      })])
+    }]), d = ye(), G = w(() => D.checkMenuIsLoading()), L = w(() => d.categorizedRawMenuItems), k = w(() => d.state.menu.modules.cookingGuide), B = w(() => k.value.length > 0), D = ke(he(Fe())), u = h();
+    function I() {
+      var n;
+      G.value || (n = u.value) == null || n.showModal();
+    }
+    function m(n) {
+      var s;
+      G.value || (s = u.value) == null || s.showModal(n);
+    }
+    async function C(n) {
+      const s = n._id ? po(n) : mo(n);
+      await D.updateMenu(s, n.name);
+    }
+    const Y = Se();
+    async function A(n) {
+      let s = [R("span", r("menu.cooking_guide.dialogs.remove.message.prefix")), R("span", {
+        class: "fm-typo-en-body-lg-600"
+      }, n.name), R("span", "?")];
+      n.bindings.length && (s = [R("span", r("menu.cooking_guide.dialogs.remove.message.products_using")), R("span", {
+        class: "fm-typo-en-body-lg-600"
+      }, n.bindings.length), R("span", r("menu.cooking_guide.dialogs.remove.message.products_count")), ...s]), Y.open({
+        title: r("menu.cooking_guide.dialogs.remove.title"),
+        contentComponent: R("div", s),
+        primaryActions: {
+          text: r("menu.cooking_guide.actions.remove"),
+          close: !0,
+          variant: "destructive"
+        },
+        secondaryActions: {
+          text: r("menu.cooking_guide.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async () => {
+        await D.updateMenu(go(n), n.name, !0);
+      });
+    }
+    const K = h(""), b = w(() => {
+      const n = K.value.toLowerCase();
+      return n ? k.value.filter((s) => s.name.toLowerCase().includes(n)) : k.value;
+    });
+    return (n, s) => {
+      const N = x("FmSearch"), E = x("FmTable"), f = x("FmButton"), l = x("FmListItem"), y = x("FmList");
+      return g(), P(xe, {
+        heading: t(r)("menu.cooking_guide.title")
+      }, {
+        "append-heading": c(() => [a("div", _o, [B.value ? (g(), P(Ce, {
+          key: 0,
+          disabled: G.value,
+          icon: "add",
+          label: t(r)("menu.cooking_guide.actions.add"),
+          variant: "primary",
+          onClick: s[0] || (s[0] = () => I())
+        }, null, 8, ["disabled", "label"])) : ce("", !0)])]),
+        default: c(() => [B.value ? (g(), $(z, {
+          key: 1
+        }, [a("div", vo, [i(N, {
+          modelValue: K.value,
+          "onUpdate:modelValue": s[1] || (s[1] = (_) => K.value = _),
+          autofocus: "",
+          class: "my-8 w-[320px] xs:w-full xs:px-16",
+          placeholder: t(r)("menu.cooking_guide.table.search.placeholder")
+        }, null, 8, ["modelValue", "placeholder"])]), i(Ve, {
+          class: "xs:hidden block"
+        }, {
+          default: c(() => [i(E, {
+            "column-defs": j.value,
+            loading: G.value,
+            "page-size": k.value.length,
+            "row-data": k.value,
+            "search-value": K.value,
+            shrinkAt: !1,
+            "hide-footer": "",
+            "pin-header-row": "",
+            onRowClick: s[2] || (s[2] = (_) => m(_.original))
+          }, null, 8, ["column-defs", "loading", "page-size", "row-data", "search-value"])]),
+          _: 1
+        }), i(y, {
+          class: "w-full px-16 xs:block hidden flex-1 min-h-0 overflow-scroll pb-64",
+          separator: ""
+        }, {
+          default: c(() => [(g(!0), $(z, null, q(b.value, (_) => (g(), P(l, {
+            key: _._id,
+            label: _.name,
+            style: {
+              padding: "12px 0 !important"
+            },
+            onClick: () => m(_)
+          }, {
+            default: c(() => [a("div", fo, [a("div", bo, V(_.name), 1), a("div", null, [a("div", yo, V(t(r)("menu.cooking_guide.table.mobile.products_linked", {
+              count: _.bindings.length
+            })), 1), a("div", ko, V(t(r)("menu.cooking_guide.table.columns.steps", {
+              count: _.steps.length
+            })), 1)])]), i(f, {
+              disabled: G.value,
+              icon: "delete",
+              variant: "tertiary",
+              "text-color": "neutral-gray-400",
+              onClick: se(() => A(_), ["stop"])
+            }, null, 8, ["disabled", "onClick"])]),
+            _: 2
+          }, 1032, ["label", "onClick"]))), 128))]),
+          _: 1
+        })], 64)) : (g(), P(t(we), {
+          key: 0,
+          action: {
+            text: t(r)("menu.cooking_guide.empty.action"),
+            callback: () => I()
+          },
+          subtitle: t(r)("menu.cooking_guide.empty.subtitle"),
+          title: t(r)("menu.cooking_guide.empty.title")
+        }, null, 8, ["action", "subtitle", "title"])), i(co, {
+          ref_key: "cookingGuideDialogRef",
+          ref: u,
+          "categorized-items": L.value,
+          onOnSave: C
+        }, null, 8, ["categorized-items"])]),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  Io as default
+};