@feedmepos/mf-menu-portal 0.0.0-stage → 1.0.1-dev.1

package/dist/CookingGuide-CtDkm74r.js

@@ -0,0 +1,842 @@
+import { defineComponent as xe, resolveComponent as k, openBlock as m, createBlock as w, withCtx as p, createElementVNode as i, toDisplayString as g, computed as F, ref as L, shallowRef as ke, h as ee, withModifiers as D, onUnmounted as He, unref as t, createElementBlock as _, createVNode as n, Fragment as C, renderList as V, createCommentVNode as q, mergeProps as oe, createTextVNode as Qe, nextTick as Je } from "vue";
+import { _ as R, d as We } from "./FormSection.vue_vue_type_script_setup_true_lang-pY-_msnM.js";
+import { useI18n as Xe } from "@feedmepos/mf-common";
+import { useDialog as Ye, useBreakpoints as Ze, components as te } from "@feedmepos/ui-library";
+import { _ as eo } from "./index.vue_vue_type_script_setup_true_lang-CGPDazqs.js";
+import { _ as oo } from "./app-Bd7W2PYm.js";
+import { _ as to } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-D9jK-Fhn.js";
+import { _ as ao } from "./PageLayout.vue_vue_type_script_setup_true_lang-B3szUH39.js";
+import { u as lo } from "./useActionFeedback-DoFeBFpl.js";
+import { u as ye } from "./useEditorValidation-Ctef5Bxt.js";
+import { a as io, b as no, u as he } from "./provide-Tmjfji09.js";
+const so = { class: "fm-typo-en-body-lg-600" }, uo = { class: "fm-typo-en-body-lg-600" }, ro = /* @__PURE__ */ xe({
+  __name: "RemoveCookingGuideConfirmation",
+  props: {
+    row: {}
+  },
+  setup(Ce) {
+    return (x, o) => {
+      const $ = k("i18n-t");
+      return m(), w($, {
+        keypath: x.row.linkedProductCount > 0 ? "menu.cooking_guide.dialogs.remove.message.confirm_with_products" : "menu.cooking_guide.dialogs.remove.message.confirm",
+        scope: "global",
+        tag: "p"
+      }, {
+        count: p(() => [
+          i("span", so, g(x.row.linkedProductCount), 1)
+        ]),
+        name: p(() => [
+          i("span", uo, g(x.row.name), 1)
+        ]),
+        _: 1
+      }, 8, ["keypath"]);
+    };
+  }
+}), co = { class: "flex flex-1 justify-end" }, mo = {
+  key: 0,
+  class: "flex flex-col gap-16 items-start"
+}, po = {
+  role: "alert",
+  class: "text-fm-color-typo-secondary"
+}, vo = { class: "flex justify-end items-center" }, go = { class: "grow space-y-4" }, _o = { class: "fm-typo-en-body-lg-600" }, fo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, bo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ko = {
+  key: 2,
+  class: "fixed right-16 bottom-[72px] z-[100] w-[144px]"
+}, yo = { class: "fm-typo-en-title-md-600" }, ho = { class: "space-y-24" }, xo = { class: "flex items-center" }, Co = { class: "flex items-center gap-8" }, So = { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary" }, wo = { class: "flex-1" }, Fo = { class: "bg-fm-color-neutral-gray-100 px-16 py-8" }, Vo = { class: "px-16 py-8 flex-1 flex gap-4 overflow-auto min-w-0" }, Io = { class: "fm-typo-en-body-md-500" }, $o = { class: "px-16 py-8 flex gap-8" }, Eo = { class: "flex gap-8" }, Oo = { class: "flex items-center gap-8" }, Lo = { class: "fm-typo-en-title-md-600" }, Ko = { class: "flex flex-col gap-32" }, Po = { class: "flex bg-fm-color-neutral-gray-100 border-b border-b-fm-color-neutral-gray-200" }, Mo = { class: "w-2/5 px-16 py-8" }, Uo = { class: "grow px-16 py-8" }, Go = { class: "w-2/5 px-16 py-8" }, To = { class: "grow px-16 py-8" }, Ro = { class: "space-y-16" }, jo = { class: "flex flex-wrap gap-8 overflow-hidden mb-8" }, zo = { class: "flex gap-8 items-center justify-start" }, Ao = { class: "min-w-[700px]" }, Bo = { class: "flex bg-fm-color-neutral-gray-100" }, No = { class: "grow px-16 py-8" }, Do = { class: "w-[200px] px-16 py-8" }, qo = { class: "w-[200px] px-16 py-8" }, Ho = { class: "grow px-16 py-8" }, Qo = { class: "w-[200px] px-16 py-8" }, Jo = { class: "w-[200px] px-16 py-8" }, Wo = {
+  key: 0,
+  class: "h-8"
+}, ut = /* @__PURE__ */ xe({
+  __name: "CookingGuide",
+  setup(Ce) {
+    const x = io(), { t: o } = Xe(), $ = no(), ae = Ye(), { breakpoints: Se } = Ze(), { run: H } = lo(), K = he(x.cookingGuide.list), h = F(
+      () => K.value.status === "ready" ? K.value.value : null
+    ), we = F(() => {
+      var e;
+      return ((e = h.value) == null ? void 0 : e.query) ?? "";
+    }), le = F(() => {
+      var e;
+      return [...((e = h.value) == null ? void 0 : e.rows) ?? []];
+    }), j = F(() => Se.value.xs), P = L(!1), M = L(!1), U = L(!1), ie = L(null), E = L(!1), Q = L(!1), d = ke(
+      x.cookingGuide.editor()
+    ), G = ke(
+      d.value.get()
+    );
+    let z = d.value.subscribe(
+      (e) => G.value = e
+    );
+    const c = F(
+      () => G.value.status === "ready" ? G.value.value : null
+    ), J = ye(() => d.value), ne = F(
+      () => c.value ? J.issue(c.value.fieldIssues, "name") ?? c.value.nameIssue : null
+    ), T = ye(
+      () => {
+        var e, a;
+        return ((a = (e = c.value) == null ? void 0 : e.stepEditor) == null ? void 0 : a.id) ?? null;
+      }
+    );
+    function se(e, a) {
+      var y;
+      const s = T.issue(
+        ((y = c.value) == null ? void 0 : y.stepFieldIssues) ?? {},
+        `variables.${e}.${a}`
+      );
+      return s ? [$(s)] : [];
+    }
+    const ue = he(x.cookingGuide.productPicker), Fe = F(
+      () => ue.value.status === "ready" ? ue.value.value : null
+    );
+    function de(e) {
+      z(), d.value.dispose(), d.value = x.cookingGuide.editor(e), G.value = d.value.get(), z = d.value.subscribe(
+        (a) => G.value = a
+      );
+    }
+    function W() {
+      var e;
+      ((e = h.value) == null ? void 0 : e.create.state) === "allowed" && (de(), P.value = !0);
+    }
+    function re(e) {
+      de(e.id), P.value = !0;
+    }
+    function ce() {
+      P.value = !1, M.value = !1, U.value = !1, E.value = !1, z();
+    }
+    function X() {
+      ce(), d.value.dispose();
+    }
+    function me() {
+      var e;
+      if (!((e = c.value) != null && e.dirty)) return X();
+      ae.open({
+        title: o("menu.common.dialog.dismiss.title"),
+        message: o("menu.common.dialog.dismiss.message"),
+        primaryActions: {
+          text: o("menu.common.dialog.dismiss.discard"),
+          close: !0
+        },
+        secondaryActions: {
+          text: o("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(X);
+    }
+    function Ve(e) {
+      e ? P.value = !0 : me();
+    }
+    function pe() {
+      var S;
+      const e = ((S = c.value) == null ? void 0 : S.name) ?? "", a = d.value, s = J.submit(() => a.submit()), y = a.get(), f = y.status === "ready" && y.value.status === "submitting";
+      H(() => s, {
+        successMessage: o("menu.cooking_guide.manager.action.saved", { name: e }),
+        showLoading: () => {
+          var A;
+          return ((A = c.value) == null ? void 0 : A.status) === "submitting";
+        }
+      }).finally(() => {
+        f && a.dispose();
+      }), f && ce();
+    }
+    function Ie() {
+      var e;
+      return (((e = c.value) == null ? void 0 : e.bindings) ?? []).map(
+        (a) => a.combinationKey ? { itemId: a.productId, combinationKey: a.combinationKey } : { itemId: a.productId }
+      );
+    }
+    function $e(e) {
+      d.value.setLinkedProducts(
+        e.map((a) => ({
+          productId: a.itemId,
+          combinationKey: a.combinationKey ?? null
+        }))
+      ), M.value = !1;
+    }
+    function Ee() {
+      d.value.addStep();
+      const e = d.value.get(), a = e.status === "ready" ? e.value.steps : [], s = a[a.length - 1];
+      s && ve(s.id);
+    }
+    function ve(e) {
+      d.value.openStep(e), U.value = !0;
+    }
+    function Y() {
+      d.value.discardStep(), U.value = !1;
+    }
+    async function Oe() {
+      (await T.submit(async () => {
+        var s;
+        return d.value.saveStep() ? { kind: "success", value: void 0 } : { kind: "rejected", issues: Object.entries(
+          ((s = c.value) == null ? void 0 : s.stepFieldIssues) ?? {}
+        ).flatMap(
+          ([y, f]) => (f ?? []).map((S) => ({ ...S, field: y }))
+        ) };
+      })).kind === "success" && (U.value = !1);
+    }
+    function Le(e) {
+      d.value.removeStep(e);
+    }
+    function Ke(e) {
+      d.value.setSteps(e);
+    }
+    function ge() {
+      const e = ie.value, a = e instanceof HTMLElement ? e : e == null ? void 0 : e.$el;
+      return a instanceof HTMLTextAreaElement ? a : (a == null ? void 0 : a.querySelector("textarea")) ?? null;
+    }
+    function Pe(e) {
+      const a = ge(), s = a == null ? void 0 : a.selectionStart, y = a == null ? void 0 : a.selectionEnd;
+      d.value.appendStepVariable(
+        e,
+        s ?? void 0,
+        y ?? void 0
+      ), s != null && Je(() => {
+        const f = ge(), S = s + e.length + 4;
+        f == null || f.focus(), f == null || f.setSelectionRange(S, S);
+      });
+    }
+    function Me(e) {
+      d.value.openOverrides(e.productId, e.combinationKey), E.value = !0;
+    }
+    function Ue(e, a) {
+      var s, y, f;
+      return ((f = (y = (s = c.value) == null ? void 0 : s.overrideEditor) == null ? void 0 : y.values[e]) == null ? void 0 : f[a]) ?? "";
+    }
+    function Ge(e, a, s) {
+      d.value.setOverrideValue(e, a, s);
+    }
+    function Te() {
+      d.value.saveOverrides(), E.value = !1;
+    }
+    function _e() {
+      d.value.discardOverrides(), E.value = !1;
+    }
+    function fe(e) {
+      ae.open({
+        title: o("menu.cooking_guide.dialogs.remove.title"),
+        contentComponent: ee(ro, { row: e }),
+        primaryActions: {
+          text: o("menu.cooking_guide.actions.remove"),
+          close: !0,
+          variant: "destructive"
+        },
+        secondaryActions: {
+          text: o("menu.cooking_guide.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(
+        () => H(() => x.cookingGuide.remove(e.id), {
+          successMessage: o("menu.cooking_guide.manager.action.removed", {
+            name: e.name
+          })
+        })
+      );
+    }
+    async function Re() {
+      Q.value = !0;
+      try {
+        await H(() => x.cookingGuide.retryRead(), {
+          showLoading: !1
+        });
+      } finally {
+        Q.value = !1;
+      }
+    }
+    const je = F(() => [
+      {
+        accessorKey: "name",
+        header: () => o("menu.cooking_guide.table.columns.name"),
+        cell: (e) => e.getValue(),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "linkedProductCount",
+        header: () => o("menu.cooking_guide.table.columns.products"),
+        cell: (e) => $(e.row.original.productsCell),
+        enableSorting: !1
+      },
+      {
+        accessorKey: "stepCount",
+        header: () => o("menu.cooking_guide.table.columns.steps"),
+        cell: (e) => o("menu.cooking_guide.table.columns.steps", {
+          count: e.getValue()
+        }),
+        enableSorting: !1
+      },
+      {
+        id: "actions",
+        header: "",
+        size: 52,
+        meta: { cellClass: "pl-16", headerContentClass: "-mx-16" },
+        enableSorting: !1,
+        cell: (e) => ee("div", { class: "flex justify-end" }, [
+          ee(te.FmButton, {
+            icon: "delete",
+            variant: "tertiary",
+            textColor: "neutral-gray-400",
+            disabled: e.row.original.remove.state !== "allowed",
+            "aria-label": o("menu.cooking_guide.actions.remove"),
+            onClick: D(
+              () => fe(e.row.original),
+              ["stop", "prevent"]
+            )
+          })
+        ])
+      }
+    ]);
+    return He(() => {
+      x.cookingGuide.search(""), z(), d.value.dispose();
+    }), (e, a) => {
+      const s = k("FmButton"), y = k("FmCircularProgress"), f = k("FmSearch"), S = k("FmTable"), A = k("FmListItem"), ze = k("FmList"), B = k("FmTextField"), Ae = k("FmCardSection"), Be = k("FmCard"), Z = k("FmSpacer"), be = k("FmSideSheet"), Ne = k("FmChip"), De = k("FmTextarea"), qe = k("FmDialog");
+      return m(), w(ao, {
+        heading: t(o)("menu.cooking_guide.title")
+      }, {
+        "append-heading": p(() => [
+          i("div", co, [
+            h.value && h.value.totalCount > 0 && !j.value ? (m(), w(s, {
+              key: 0,
+              class: "ml-auto",
+              disabled: h.value.create.state !== "allowed",
+              label: t(o)("menu.cooking_guide.actions.add"),
+              "prepend-icon": "add",
+              variant: "primary",
+              onClick: W
+            }, null, 8, ["disabled", "label"])) : q("", !0)
+          ])
+        ]),
+        default: p(() => [
+          t(K).status === "error" ? (m(), _("div", mo, [
+            i("p", po, g(t($)(t(K).error.message)), 1),
+            n(s, {
+              label: t(o)("menu.common.actions.retry"),
+              loading: Q.value,
+              "prepend-icon": "refresh",
+              variant: "secondary",
+              onClick: Re
+            }, null, 8, ["label", "loading"])
+          ])) : t(K).status === "loading" ? (m(), w(y, { key: 1 })) : h.value && h.value.totalCount === 0 ? (m(), w(t(eo), {
+            key: 2,
+            action: h.value.create.state === "allowed" ? { text: t(o)("menu.cooking_guide.empty.action"), callback: W } : void 0,
+            subtitle: t(o)("menu.cooking_guide.empty.subtitle"),
+            title: t(o)("menu.cooking_guide.empty.title")
+          }, null, 8, ["action", "subtitle", "title"])) : h.value ? (m(), _(C, { key: 3 }, [
+            i("div", vo, [
+              n(f, {
+                autofocus: !j.value,
+                class: "my-8 w-[320px] xs:w-full xs:px-16",
+                "model-value": we.value,
+                placeholder: t(o)("menu.cooking_guide.table.search.placeholder"),
+                "onUpdate:modelValue": a[0] || (a[0] = (l) => t(x).cookingGuide.search(String(l ?? "")))
+              }, null, 8, ["autofocus", "model-value", "placeholder"])
+            ]),
+            j.value ? (m(), w(ze, {
+              key: 1,
+              class: "w-full px-16 flex-1 min-h-0 overflow-scroll pb-64",
+              separator: ""
+            }, {
+              default: p(() => [
+                (m(!0), _(C, null, V(le.value, (l) => (m(), w(A, {
+                  key: l.id,
+                  class: "!py-12 !px-0",
+                  onClick: (u) => re(l)
+                }, {
+                  default: p(() => [
+                    i("div", go, [
+                      i("div", _o, g(l.name), 1),
+                      i("div", null, [
+                        i("div", fo, g(t(o)("menu.cooking_guide.table.mobile.products_linked", {
+                          count: l.linkedProductCount
+                        })), 1),
+                        i("div", bo, g(t(o)("menu.cooking_guide.table.columns.steps", {
+                          count: l.stepCount
+                        })), 1)
+                      ])
+                    ]),
+                    n(s, {
+                      "aria-label": t(o)("menu.cooking_guide.actions.remove"),
+                      disabled: l.remove.state !== "allowed",
+                      icon: "delete",
+                      "text-color": "neutral-gray-400",
+                      variant: "tertiary",
+                      onClick: D((u) => fe(l), ["stop"])
+                    }, null, 8, ["aria-label", "disabled", "onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              _: 1
+            })) : (m(), w(oo, { key: 0 }, {
+              default: p(() => [
+                n(S, {
+                  "column-defs": je.value,
+                  "hide-footer": "",
+                  "page-size": h.value.rows.length,
+                  "row-data": le.value,
+                  "shrink-at": !1,
+                  "pin-header-row": "",
+                  onRowClick: a[1] || (a[1] = (l) => re(l.original))
+                }, null, 8, ["column-defs", "page-size", "row-data"])
+              ]),
+              _: 1
+            })),
+            h.value.totalCount > 0 && j.value ? (m(), _("div", ko, [
+              n(s, {
+                class: "w-full",
+                disabled: h.value.create.state !== "allowed",
+                label: t(o)("menu.cooking_guide.actions.add"),
+                "prepend-icon": "add",
+                variant: "fab",
+                onClick: W
+              }, null, 8, ["disabled", "label"])
+            ])) : q("", !0)
+          ], 64)) : q("", !0),
+          n(be, {
+            "model-value": P.value,
+            "is-container": t(te).FmForm,
+            "is-container-props": {
+              onValidationSuccess: pe,
+              blameFormChildOnValidationFailed: !0,
+              class: "flex flex-col h-full py-16"
+            },
+            "max-width": 560,
+            "onOn:clickedAway": me,
+            "onUpdate:modelValue": Ve
+          }, {
+            "side-sheet-header": p(() => {
+              var l;
+              return [
+                i("p", yo, g(((l = c.value) == null ? void 0 : l.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.title") : t(o)("menu.cooking_guide.dialog.add.title")), 1)
+              ];
+            }),
+            "side-sheet-footer": p(() => {
+              var l, u;
+              return [
+                i("div", Eo, [
+                  n(s, {
+                    disabled: ((l = c.value) == null ? void 0 : l.submit.state) !== "allowed",
+                    label: ((u = c.value) == null ? void 0 : u.mode) === "update" ? t(o)("menu.cooking_guide.dialog.update.action") : t(o)("menu.cooking_guide.dialog.add.action"),
+                    type: "button",
+                    variant: "primary",
+                    onClick: pe
+                  }, null, 8, ["disabled", "label"]),
+                  n(s, {
+                    label: t(o)("menu.cooking_guide.dialog.actions.cancel"),
+                    variant: "tertiary",
+                    onClick: X
+                  }, null, 8, ["label"])
+                ])
+              ];
+            }),
+            default: p(() => [
+              i("div", ho, [
+                n(R, {
+                  title: t(o)("menu.cooking_guide.dialog.sections.guide_detail.title")
+                }, {
+                  default: p(() => {
+                    var l, u;
+                    return [
+                      n(B, oe(
+                        {
+                          autofocus: ((l = c.value) == null ? void 0 : l.mode) === "create",
+                          "error-messages": ne.value ? [t($)(ne.value)] : [],
+                          label: t(o)("menu.cooking_guide.dialog.sections.guide_detail.name.label"),
+                          "model-value": ((u = c.value) == null ? void 0 : u.name) ?? "",
+                          placeholder: t(o)(
+                            "menu.cooking_guide.dialog.sections.guide_detail.name.placeholder"
+                          )
+                        },
+                        t(J).field(
+                          "name",
+                          (b) => d.value.setName(String(b ?? ""))
+                        )
+                      ), null, 16, ["autofocus", "error-messages", "label", "model-value", "placeholder"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"]),
+                n(R, {
+                  title: t(o)("menu.cooking_guide.dialog.sections.steps.title")
+                }, {
+                  "append-title": p(() => [
+                    n(s, {
+                      label: t(o)("menu.cooking_guide.dialog.sections.steps.add"),
+                      icon: "add",
+                      variant: "secondary",
+                      "text-color": "primary",
+                      "border-color": "primary",
+                      onClick: Ee
+                    }, null, 8, ["label"])
+                  ]),
+                  default: p(() => {
+                    var l;
+                    return [
+                      n(t(We), {
+                        "model-value": ((l = c.value) == null ? void 0 : l.steps) ?? [],
+                        class: "flex flex-col gap-16",
+                        handle: ".handle",
+                        "item-key": "id",
+                        "onUpdate:modelValue": Ke
+                      }, {
+                        item: p(({ element: u }) => [
+                          n(Be, {
+                            class: "rounded-md mb-16 items-center",
+                            horizontal: "",
+                            variant: "outlined",
+                            onClick: (b) => ve(u.id)
+                          }, {
+                            default: p(() => [
+                              i("div", xo, [
+                                n(s, {
+                                  class: "handle",
+                                  icon: "drag_handle",
+                                  variant: "tertiary"
+                                })
+                              ]),
+                              n(Ae, { class: "grow" }, {
+                                default: p(() => [
+                                  Qe(g(u.instruction), 1)
+                                ]),
+                                _: 2
+                              }, 1024),
+                              n(s, {
+                                "aria-label": t(o)("menu.cooking_guide.actions.remove"),
+                                "prepend-icon": "delete",
+                                "text-color": "neutral-gray-400",
+                                variant: "tertiary",
+                                onClick: D((b) => Le(u.id), ["stop"])
+                              }, null, 8, ["aria-label", "onClick"])
+                            ]),
+                            _: 2
+                          }, 1032, ["onClick"])
+                        ]),
+                        _: 1
+                      }, 8, ["model-value"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"]),
+                n(R, {
+                  title: t(o)("menu.cooking_guide.dialog.sections.apply_product.title")
+                }, {
+                  "append-title": p(() => [
+                    n(Z),
+                    n(s, {
+                      label: t(o)("menu.cooking_guide.dialog.sections.apply_product.link"),
+                      icon: "link",
+                      variant: "secondary",
+                      "text-color": "primary",
+                      "border-color": "primary",
+                      onClick: a[2] || (a[2] = (l) => M.value = !0)
+                    }, null, 8, ["label"])
+                  ]),
+                  default: p(() => {
+                    var l, u, b;
+                    return [
+                      i("div", Co, [
+                        i("div", So, g(t(o)(
+                          "menu.cooking_guide.dialog.sections.apply_product.products_linked",
+                          { count: ((l = c.value) == null ? void 0 : l.bindings.length) ?? 0 }
+                        )), 1),
+                        i("div", wo, [
+                          n(f, {
+                            "model-value": ((u = c.value) == null ? void 0 : u.linkedFilter) ?? "",
+                            placeholder: t(o)("menu.cooking_guide.dialog.sections.apply_product.search"),
+                            "onUpdate:modelValue": a[3] || (a[3] = (r) => d.value.setLinkedFilter(String(r ?? "")))
+                          }, null, 8, ["model-value", "placeholder"])
+                        ])
+                      ]),
+                      (m(!0), _(C, null, V(((b = c.value) == null ? void 0 : b.linkedGroups) ?? [], (r) => (m(), _(C, {
+                        key: r.name ?? "uncategorised"
+                      }, [
+                        i("div", Fo, g(r.isSynthetic ? t(o)("menu.tree_editor.labels.addon") : r.name), 1),
+                        (m(!0), _(C, null, V(r.bindings, (v) => (m(), _("div", {
+                          key: v.binding.productId + v.binding.combinationKey,
+                          class: "flex items-center"
+                        }, [
+                          i("div", Vo, [
+                            i("span", Io, g(v.label), 1)
+                          ]),
+                          i("div", $o, [
+                            n(s, {
+                              "aria-label": t(o)("menu.cooking_guide.step_override_dialog.title"),
+                              icon: "edit",
+                              variant: "tertiary",
+                              onClick: (O) => Me(v.binding)
+                            }, null, 8, ["aria-label", "onClick"]),
+                            n(s, {
+                              "aria-label": t(o)("menu.cooking_guide.actions.remove"),
+                              icon: "delete",
+                              variant: "tertiary",
+                              onClick: (O) => {
+                                var N;
+                                return d.value.setLinkedProducts(
+                                  (((N = c.value) == null ? void 0 : N.bindings) ?? []).filter(
+                                    (I) => I.productId !== v.binding.productId || I.combinationKey !== v.binding.combinationKey
+                                  ).map((I) => ({
+                                    productId: I.productId,
+                                    combinationKey: I.combinationKey
+                                  }))
+                                );
+                              }
+                            }, null, 8, ["aria-label", "onClick"])
+                          ])
+                        ]))), 128))
+                      ], 64))), 128))
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value", "is-container", "is-container-props"]),
+          n(to, {
+            modelValue: M.value,
+            "onUpdate:modelValue": a[4] || (a[4] = (l) => M.value = l),
+            catalogue: Fe.value,
+            "selected-products": Ie(),
+            "select-variant": !0,
+            onSubmitLinks: $e
+          }, null, 8, ["modelValue", "catalogue", "selected-products"]),
+          n(be, {
+            "close-button": !1,
+            "model-value": U.value,
+            "is-container": t(te).FmForm,
+            "is-container-props": {
+              onValidationSuccess: Oe,
+              blameFormChildOnValidationFailed: !0,
+              class: "flex flex-col h-full"
+            },
+            "max-width": 560,
+            "onUpdate:modelValue": Y
+          }, {
+            "side-sheet-header": p(() => {
+              var l, u;
+              return [
+                i("div", Oo, [
+                  n(s, {
+                    label: t(o)("menu.cooking_guide.step_dialog.actions.back"),
+                    "prepend-icon": "arrow_back",
+                    variant: "tertiary",
+                    onClick: Y
+                  }, null, 8, ["label"]),
+                  i("span", Lo, g((u = (l = c.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.title") : t(o)("menu.cooking_guide.step_dialog.update.title")), 1)
+                ])
+              ];
+            }),
+            "side-sheet-footer": p(() => {
+              var l, u;
+              return [
+                i("div", zo, [
+                  n(s, {
+                    label: (u = (l = c.value) == null ? void 0 : l.stepEditor) != null && u.isNew ? t(o)("menu.cooking_guide.step_dialog.add.action") : t(o)("menu.cooking_guide.step_dialog.update.action"),
+                    size: "lg",
+                    type: "submit",
+                    variant: "primary"
+                  }, null, 8, ["label"]),
+                  n(s, {
+                    label: t(o)("menu.cooking_guide.step_dialog.actions.cancel"),
+                    size: "lg",
+                    variant: "tertiary",
+                    onClick: Y
+                  }, null, 8, ["label"])
+                ])
+              ];
+            }),
+            default: p(() => [
+              i("div", Ko, [
+                n(R, {
+                  title: t(o)("menu.cooking_guide.step_dialog.sections.variables.title")
+                }, {
+                  "append-title": p(() => [
+                    n(Z),
+                    n(s, {
+                      label: t(o)("menu.cooking_guide.step_dialog.sections.variables.add"),
+                      "prepend-icon": "add",
+                      variant: "secondary",
+                      "text-color": "primary",
+                      "border-color": "primary",
+                      onClick: d.value.addStepVariable
+                    }, null, 8, ["label", "onClick"])
+                  ]),
+                  default: p(() => {
+                    var l, u;
+                    return [
+                      i("div", null, [
+                        i("div", Po, [
+                          i("span", Mo, g(t(o)(
+                            "menu.cooking_guide.step_dialog.sections.variables.columns.key"
+                          )), 1),
+                          i("span", Uo, g(t(o)(
+                            "menu.cooking_guide.step_dialog.sections.variables.columns.value"
+                          )), 1)
+                        ]),
+                        (m(!0), _(C, null, V(((u = (l = c.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? [], (b, r) => (m(), _("div", {
+                          key: r,
+                          class: "flex items-center border-b border-b-fm-color-neutral-gray-100"
+                        }, [
+                          i("div", Go, [
+                            n(B, oe(
+                              {
+                                "aria-label": t(o)(
+                                  "menu.cooking_guide.step_dialog.sections.variables.accessibility.key_input",
+                                  { index: r + 1 }
+                                ),
+                                "model-value": b.key,
+                                placeholder: t(o)(
+                                  "menu.cooking_guide.step_dialog.sections.variables.placeholders.key"
+                                ),
+                                "error-messages": se(r, "key")
+                              },
+                              { ref_for: !0 },
+                              t(T).field(
+                                `variables.${r}.key`,
+                                (v) => d.value.setStepVariable(r, {
+                                  key: String(v ?? "")
+                                })
+                              )
+                            ), null, 16, ["aria-label", "model-value", "placeholder", "error-messages"])
+                          ]),
+                          i("div", To, [
+                            n(B, oe(
+                              {
+                                "aria-label": t(o)(
+                                  "menu.cooking_guide.step_dialog.sections.variables.accessibility.value_input",
+                                  { index: r + 1 }
+                                ),
+                                "model-value": b.value,
+                                placeholder: t(o)(
+                                  "menu.cooking_guide.step_dialog.sections.variables.placeholders.value"
+                                ),
+                                "error-messages": se(r, "value")
+                              },
+                              { ref_for: !0 },
+                              t(T).field(
+                                `variables.${r}.value`,
+                                (v) => d.value.setStepVariable(r, {
+                                  value: String(v ?? "")
+                                })
+                              )
+                            ), null, 16, ["aria-label", "model-value", "placeholder", "error-messages"])
+                          ]),
+                          n(s, {
+                            "aria-label": t(o)(
+                              "menu.cooking_guide.step_dialog.sections.variables.accessibility.remove",
+                              { index: r + 1 }
+                            ),
+                            icon: "delete",
+                            "text-color": "neutral-gray-400",
+                            variant: "tertiary",
+                            onClick: (v) => (t(T).removeRow("variables.", r), d.value.removeStepVariable(r))
+                          }, null, 8, ["aria-label", "onClick"])
+                        ]))), 128))
+                      ])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"]),
+                n(R, {
+                  title: t(o)("menu.cooking_guide.step_dialog.sections.instruction.title")
+                }, {
+                  default: p(() => {
+                    var l, u, b, r;
+                    return [
+                      i("div", Ro, [
+                        i("div", jo, [
+                          (m(!0), _(C, null, V((((u = (l = c.value) == null ? void 0 : l.stepEditor) == null ? void 0 : u.variables) ?? []).filter(
+                            (v, O, N) => v.key && N.findIndex(
+                              (I) => I.key === v.key
+                            ) === O
+                          ), (v) => (m(), w(Ne, {
+                            key: v.key,
+                            label: v.key,
+                            class: "text-fm-color-primary bg-fm-color-system-warning-100",
+                            onMousedown: D((O) => Pe(v.key), ["prevent"])
+                          }, null, 8, ["label", "onMousedown"]))), 128))
+                        ]),
+                        n(De, {
+                          ref_key: "instructionInput",
+                          ref: ie,
+                          "aria-label": t(o)("menu.cooking_guide.step_dialog.sections.instruction.title"),
+                          "model-value": ((r = (b = c.value) == null ? void 0 : b.stepEditor) == null ? void 0 : r.instruction) ?? "",
+                          "onUpdate:modelValue": a[5] || (a[5] = (v) => d.value.setStepInstruction(String(v ?? "")))
+                        }, null, 8, ["aria-label", "model-value"])
+                      ])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["title"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["model-value", "is-container", "is-container-props"]),
+          n(qe, {
+            "model-value": E.value,
+            "max-width": 748,
+            overlay: !0,
+            "onUpdate:modelValue": a[6] || (a[6] = (l) => {
+              l ? E.value = !0 : _e();
+            })
+          }, {
+            "dialog-header": p(() => [
+              i("span", null, g(t(o)("menu.cooking_guide.step_override_dialog.title")), 1)
+            ]),
+            "dialog-footer": p(() => [
+              n(Z),
+              n(s, {
+                label: t(o)("menu.cooking_guide.step_override_dialog.actions.cancel"),
+                variant: "tertiary",
+                onClick: _e
+              }, null, 8, ["label"]),
+              n(s, {
+                label: t(o)("menu.cooking_guide.step_override_dialog.actions.save"),
+                variant: "primary",
+                onClick: Te
+              }, null, 8, ["label"])
+            ]),
+            default: p(() => {
+              var l;
+              return [
+                i("div", Ao, [
+                  i("div", Bo, [
+                    i("span", No, g(t(o)("menu.cooking_guide.step_override_dialog.columns.instructions")), 1),
+                    i("span", Do, g(t(o)("menu.cooking_guide.step_override_dialog.columns.variables")), 1),
+                    i("span", qo, g(t(o)("menu.cooking_guide.step_override_dialog.columns.value")), 1)
+                  ]),
+                  (m(!0), _(C, null, V(((l = c.value) == null ? void 0 : l.steps) ?? [], (u) => (m(), _("div", {
+                    key: u.id,
+                    class: "flex border-t-2"
+                  }, [
+                    i("div", Ho, g(u.instruction), 1),
+                    i("div", Qo, [
+                      (m(!0), _(C, null, V(u.variables, (b, r) => (m(), _("div", {
+                        key: r,
+                        class: "py-8"
+                      }, g(r), 1))), 128))
+                    ]),
+                    i("div", Jo, [
+                      (m(!0), _(C, null, V(u.variables, (b, r, v) => (m(), _(C, { key: r }, [
+                        n(B, {
+                          "aria-label": t(o)(
+                            "menu.cooking_guide.step_override_dialog.accessibility.value_input",
+                            { instruction: u.instruction, variable: r }
+                          ),
+                          "model-value": Ue(u.id, r),
+                          placeholder: b,
+                          "onUpdate:modelValue": (O) => Ge(u.id, r, String(O ?? ""))
+                        }, null, 8, ["aria-label", "model-value", "placeholder", "onUpdate:modelValue"]),
+                        v < Object.keys(u.variables).length - 1 ? (m(), _("div", Wo)) : q("", !0)
+                      ], 64))), 128))
+                    ])
+                  ]))), 128))
+                ]),
+                a[7] || (a[7] = i("div", { class: "h-8" }, null, -1))
+              ];
+            }),
+            _: 1,
+            __: [7]
+          }, 8, ["model-value"])
+        ]),
+        _: 1
+      }, 8, ["heading"]);
+    };
+  }
+});
+export {
+  ut as default
+};