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

package/dist/ProductGroupCreateSheet.vue_vue_type_script_setup_true_lang-Cx_mW05R.js

@@ -0,0 +1,1246 @@
+import { defineComponent as W, computed as U, toDisplayString as $, ref as oe, watch as fe, openBlock as m, createBlock as O, withKeys as Le, createSlots as ye, withCtx as d, renderSlot as se, createElementBlock as h, createVNode as r, createCommentVNode as B, nextTick as Ae, resolveComponent as y, unref as n, createElementVNode as v, Fragment as G, renderList as Q, shallowRef as Ie, onBeforeUnmount as xe, h as _, mergeProps as ae } from "vue";
+import { useI18n as X, CustomAttributesForm as ve } from "@feedmepos/mf-common";
+import { useDialog as he, components as K } from "@feedmepos/ui-library";
+import { RemyButton as _e } from "@feedmepos/mf-remy-panel";
+import { _ as ze } from "./AddPriceGroupDialog.vue_vue_type_script_setup_true_lang-DhKyG3gY.js";
+import { u as we } from "./useEditorValidation-Ctef5Bxt.js";
+import { b as ke, u as ue } from "./provide-Tmjfji09.js";
+import { _ as Ne } from "./TranslationSideSheet.vue_vue_type_script_setup_true_lang-B0j2PNih.js";
+import { _ as J, b as Ue } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+import { a as Be, _ as le } from "./FormSection.vue_vue_type_script_setup_true_lang-pY-_msnM.js";
+import { _ as re } from "./FormItem.vue_vue_type_script_setup_true_lang-C2S6QCyR.js";
+import { _ as De } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { a as Ee, A as Me, _ as Ke } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-D9jK-Fhn.js";
+import { u as Re } from "./useActionFeedback-DoFeBFpl.js";
+const Fe = /* @__PURE__ */ W({
+  __name: "LocalizedCurrencySymbol",
+  props: {
+    currency: {}
+  },
+  setup(I) {
+    const S = I, { n: g } = X(), f = U(() => {
+      if (!S.currency) return "";
+      const e = g(0, {
+        useGrouping: !1,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      });
+      return g(0, {
+        style: "currency",
+        currency: S.currency,
+        currencyDisplay: "narrowSymbol",
+        useGrouping: !1,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      }).replace(e, "").trim() || S.currency;
+    });
+    return (e, k) => $(f.value);
+  }
+}), Ge = { key: 0 }, ie = /* @__PURE__ */ W({
+  __name: "ProductMoneyField",
+  props: {
+    modelValue: {},
+    currency: {},
+    commitOnInput: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(I, { expose: S, emit: g }) {
+    const f = I, e = g, { n: k, locale: L } = X(), T = oe();
+    S({
+      inputEl: U(() => {
+        var b;
+        return ((b = T.value) == null ? void 0 : b.inputEl) ?? null;
+      }),
+      focus: () => {
+        var b, C;
+        return (C = (b = T.value) == null ? void 0 : b.inputEl) == null ? void 0 : C.focus();
+      }
+    });
+    const p = U(
+      () => f.modelValue === null ? "" : k(f.modelValue, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        useGrouping: !1
+      })
+    ), a = oe(p.value);
+    fe(p, (b) => {
+      a.value = b;
+    });
+    async function j() {
+      var z, E, q;
+      const b = ((E = (z = T.value) == null ? void 0 : z.inputEl) == null ? void 0 : E.value) ?? "", C = ((q = new Intl.NumberFormat(L.value).formatToParts(1.5).find((i) => i.type === "decimal")) == null ? void 0 : q.value) ?? ".", P = b.trim() === "" ? null : Number(b.replace(C, "."));
+      (P === null || Number.isFinite(P)) && e("update:modelValue", P), await Ae(), a.value = p.value;
+    }
+    async function l(b) {
+      var z;
+      if (a.value = String(b ?? ""), !f.commitOnInput) return;
+      const C = ((z = new Intl.NumberFormat(L.value).formatToParts(1.5).find((E) => E.type === "decimal")) == null ? void 0 : z.value) ?? ".", P = a.value.trim() === "" ? null : Number(a.value.replace(C, "."));
+      (P === null || Number.isFinite(P)) && e("update:modelValue", P);
+    }
+    function F(b) {
+      var C, P;
+      b ? (P = (C = T.value) == null ? void 0 : C.inputEl) == null || P.select() : j();
+    }
+    return (b, C) => (m(), O(J, {
+      ref_key: "field",
+      ref: T,
+      "model-value": a.value,
+      inputmode: "decimal",
+      "onUpdate:modelValue": l,
+      onFocusChanged: F,
+      onKeydown: Le(j, ["enter"])
+    }, ye({
+      prepend: d(() => [
+        b.currency ? (m(), h("span", Ge, [
+          r(Fe, { currency: b.currency }, null, 8, ["currency"])
+        ])) : B("", !0)
+      ]),
+      append: d(() => [
+        se(b.$slots, "append")
+      ]),
+      _: 2
+    }, [
+      b.$slots["helper-text"] ? {
+        name: "helper-text",
+        fn: d(() => [
+          se(b.$slots, "helper-text")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["model-value"]));
+  }
+}), Ro = /* @__PURE__ */ W({
+  __name: "ProductPriceTierButton",
+  props: {
+    configured: { type: Boolean },
+    label: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["open"],
+  setup(I, { emit: S }) {
+    const g = S, { t: f } = X();
+    return (e, k) => {
+      const L = y("FmButton"), T = y("FmTooltip");
+      return m(), O(T, {
+        content: n(f)("menu.price_tier.price_tier_config"),
+        "z-index": 999,
+        placement: "top"
+      }, {
+        default: d(() => [
+          r(L, {
+            icon: "price_change",
+            variant: "tertiary",
+            "text-color": "neutral-gray-400",
+            "overwrite-icon-outline": e.configured ? "filled" : "outline",
+            "aria-label": e.label,
+            disabled: e.disabled,
+            onClick: k[0] || (k[0] = (p) => g("open"))
+          }, null, 8, ["overwrite-icon-outline", "aria-label", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["content"]);
+    };
+  }
+}), je = { class: "flex flex-col gap-8 p-8" }, Ye = { class: "fm-typo-en-body-md-600" }, He = { class: "flex flex-col gap-4" }, qe = { key: 0 }, Je = /* @__PURE__ */ W({
+  __name: "ProductMemberPriceTooltip",
+  props: {
+    prices: {},
+    currency: {}
+  },
+  setup(I) {
+    const S = I, { t: g, n: f } = X(), e = U(
+      () => Object.entries(S.prices).flatMap(
+        ([k, L]) => L === null ? [] : [{ name: k, amount: L }]
+      )
+    );
+    return (k, L) => {
+      const T = y("FmIcon"), p = y("FmTooltip");
+      return m(), O(p, {
+        variant: "plain",
+        placement: "right",
+        "z-index": 100
+      }, {
+        default: d(() => [
+          r(T, {
+            name: "info",
+            outline: ""
+          })
+        ]),
+        content: d(() => [
+          v("div", je, [
+            v("p", Ye, $(n(g)("menu.member_pricing.title")), 1),
+            v("ul", He, [
+              e.value.length === 0 ? (m(), h("li", qe, $(n(g)("menu.member_pricing.tooltip.no_member_price")), 1)) : B("", !0),
+              (m(!0), h(G, null, Q(e.value, (a) => (m(), h("li", {
+                key: a.name,
+                class: "fm-typo-en-body-md-400"
+              }, $(n(g)("menu.common.labels.a11y_labelled_name", {
+                label: a.name,
+                name: n(f)(
+                  a.amount,
+                  k.currency ? { style: "currency", currency: k.currency, minimumFractionDigits: 2 } : { minimumFractionDigits: 2 }
+                )
+              })), 1))), 128))
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Qe = { class: "fm-typo-en-title-md-600" }, We = {
+  key: 0,
+  class: "flex flex-col gap-32"
+}, Xe = { class: "flex flex-col fm-corner-radius-lg p-16 border border-fm-color-neutral-gray-100 gap-4" }, Ze = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, eo = {
+  key: 0,
+  class: "fm-typo-en-body-lg-600"
+}, oo = { class: "flex flex-col gap-24" }, no = { class: "fm-typo-en-title-sm-600" }, to = { class: "flex flex-col gap-16" }, lo = { class: "flex flex-col gap-4" }, ao = { class: "fm-typo-en-body-lg-600" }, io = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ro = {
+  key: 1,
+  class: "py-16 space-y-32"
+}, so = { class: "space-y-8" }, uo = { class: "flex items-center justify-between" }, mo = { class: "space-y-8" }, co = { class: "fm-typo-en-body-lg-600" }, po = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, go = { class: "flex gap-8" }, Go = /* @__PURE__ */ W({
+  __name: "ProductPricingSheet",
+  props: {
+    session: {},
+    onCreatePriceGroup: { type: Function, default: void 0 },
+    zIndex: { default: void 0 },
+    mainPricingLabel: { type: Boolean, default: !0 }
+  },
+  emits: ["close", "suggest"],
+  setup(I, { emit: S }) {
+    const g = I, f = S, { t: e } = X(), k = he(), L = ke(), T = ue(g.session), p = U(
+      () => T.value.status === "ready" ? T.value.value : null
+    ), a = we(() => g.session);
+    function j(i, s) {
+      var w;
+      const x = a.issue(((w = p.value) == null ? void 0 : w.fieldIssues) ?? {}, `rows.${i}.amount`) ?? s.issue;
+      return x ? [L(x)] : [];
+    }
+    function l(i) {
+      var x;
+      const s = a.issue(
+        ((x = p.value) == null ? void 0 : x.fieldIssues) ?? {},
+        `rows.0.members.${i.key}`
+      ) ?? i.issue;
+      return s ? [L(s)] : [];
+    }
+    const F = Ie(null);
+    function b() {
+      var i;
+      (i = F.value) == null || i.dispose(), F.value = null;
+    }
+    function C(i) {
+      b(), F.value = g.session.memberEditor(i);
+    }
+    xe(b);
+    const P = U(() => [
+      {
+        accessorKey: "key",
+        header: () => e(
+          "menu.product.form.member_price.configure.member_selling_price.table.tier"
+        ),
+        enableSorting: !1
+      },
+      {
+        id: "amount",
+        header: () => e(
+          "menu.product.form.member_price.configure.member_selling_price.table.selling_price"
+        ),
+        enableSorting: !1,
+        cell: ({ row: i }) => _(
+          ie,
+          {
+            modelValue: i.original.amount,
+            commitOnInput: !0,
+            "aria-label": i.original.key,
+            errorMessages: l(i.original),
+            ...a.field(
+              `rows.0.members.${i.original.key}`,
+              (s) => {
+                var x, w;
+                return g.session.setAmount(
+                  ((w = (x = p.value) == null ? void 0 : x.rows[0]) == null ? void 0 : w.tier) ?? null,
+                  i.original.key,
+                  s
+                );
+              }
+            )
+          },
+          {
+            append: () => {
+              var s;
+              return (s = p.value) != null && s.showSuggestion ? _(_e, {
+                pureStyling: !0,
+                class: "shrink-0 scale-75",
+                "aria-label": e("menu.product.remy.pricing"),
+                onClick: () => f("suggest")
+              }) : null;
+            }
+          }
+        )
+      }
+    ]), z = U(() => [
+      {
+        accessorKey: "tier",
+        header: () => e("menu.price_tier.form.table.columns.name"),
+        enableSorting: !1
+      },
+      {
+        id: "amount",
+        header: () => e("menu.price_tier.form.table.columns.price"),
+        enableSorting: !1,
+        cell: ({ row: i }) => _(ie, {
+          modelValue: i.original.amount,
+          commitOnInput: !0,
+          // Every tier row rendered this field under one name, so a step naming
+          // a particular tier's price had nothing to distinguish the rows by.
+          // Qualify it with the tier, as the frozen baselines name it
+          // ("Default selling price: DISC TIER CLEAR").
+          "aria-label": i.original.tier ? e("menu.common.labels.a11y_labelled_name", {
+            label: e(
+              "menu.product.form.member_price.configure.default_selling_price"
+            ),
+            name: i.original.tier
+          }) : e(
+            "menu.product.form.member_price.configure.default_selling_price"
+          ),
+          errorMessages: j(i.index, i.original),
+          ...a.field(
+            `rows.${i.index}.amount`,
+            (s) => g.session.setAmount(i.original.tier, null, s)
+          )
+        })
+      },
+      {
+        id: "members",
+        header: () => e("menu.price_tier.form.table.columns.member_price"),
+        enableSorting: !1,
+        cell: ({ row: i }) => {
+          var w;
+          const s = i.original.members.filter(
+            (D) => D.amount !== null
+          ).length, x = s ? e("menu.product.form.member_price.configure.title_with_tier", {
+            num: s
+          }) : e("menu.product.form.member_price.configure.title");
+          return _("div", { class: "flex items-center justify-between" }, [
+            _(
+              K.FmButton,
+              {
+                variant: "plain",
+                label: x,
+                // This is the nested pricing-sheet action. Keep it distinct from
+                // the product form's row-level "Member price" action while
+                // qualifying the tier, so both independently reachable surfaces
+                // stay semantic.
+                "aria-label": s ? x : i.original.tier ? e("menu.common.labels.a11y_labelled_name", {
+                  label: e(
+                    "menu.product.form.member_price.configure.title"
+                  ),
+                  name: i.original.tier
+                }) : void 0,
+                onClick: () => i.original.tier && C(i.original.tier)
+              },
+              {
+                default: () => _(
+                  "span",
+                  { class: "underline line-clamp-2 break-all" },
+                  x
+                )
+              }
+            ),
+            _(Je, {
+              prices: Object.fromEntries(
+                i.original.members.map((D) => [D.key, D.amount])
+              ),
+              currency: (w = p.value) == null ? void 0 : w.currency
+            })
+          ]);
+        }
+      }
+    ]);
+    function E() {
+      var s;
+      if (g.session.apply()) {
+        f("close");
+        return;
+      }
+      const i = Object.entries(((s = p.value) == null ? void 0 : s.fieldIssues) ?? {}).flatMap(
+        ([x, w]) => (w ?? []).map((D) => ({ ...D, field: x }))
+      );
+      a.submit(async () => ({ kind: "rejected", issues: i }));
+    }
+    function q() {
+      g.onCreatePriceGroup && k.open({
+        zIndex: 200,
+        title: e("menu.price_tier.add_price_group"),
+        contentComponent: ze,
+        primaryActions: {
+          text: e("menu.category.manager.dialog.add.action"),
+          close: !1
+        },
+        secondaryActions: {
+          text: e("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(async (i) => {
+        const s = String(i ?? "");
+        await g.onCreatePriceGroup(s) && (g.session.addTier(s), k.close());
+      });
+    }
+    return (i, s) => {
+      var R;
+      const x = y("FmTable"), w = y("FmButton"), D = y("FmSideSheet"), Z = y("ProductPricingSheet", !0);
+      return m(), h(G, null, [
+        r(D, {
+          "model-value": !0,
+          "z-index": g.zIndex ?? 300,
+          "max-width": ((R = p.value) == null ? void 0 : R.mode) === "members" ? 720 : 560,
+          "is-container": n(K).FmForm,
+          "is-container-props": {
+            onValidationSuccess: E,
+            blameFormChildOnValidationFailed: !0
+          },
+          "onUpdate:modelValue": s[2] || (s[2] = (N) => !N && f("close"))
+        }, {
+          "side-sheet-header": d(() => {
+            var N;
+            return [
+              v("p", Qe, $(n(e)(
+                ((N = p.value) == null ? void 0 : N.mode) === "tiers" ? "menu.price_tier.price_tier_config" : "menu.product.form.member_price.configure.title"
+              )), 1)
+            ];
+          }),
+          "side-sheet-footer": d(() => {
+            var N, Y, M;
+            return [
+              v("div", go, [
+                r(w, {
+                  label: ((N = p.value) == null ? void 0 : N.mode) === "tiers" ? n(e)("menu.common.actions.update") : n(e)("menu.common.actions.apply"),
+                  "aria-label": ((Y = p.value) == null ? void 0 : Y.mode) === "tiers" ? n(e)("menu.price_tier.action.update") : void 0,
+                  variant: "primary",
+                  size: "lg",
+                  type: "button",
+                  onClick: E
+                }, null, 8, ["label", "aria-label"]),
+                r(w, {
+                  label: n(e)("menu.common.actions.cancel"),
+                  "aria-label": ((M = p.value) == null ? void 0 : M.mode) === "tiers" ? n(e)("menu.price_tier.action.cancel") : n(e)("menu.product.form.member_price.configure.cancel"),
+                  variant: "tertiary",
+                  size: "lg",
+                  onClick: s[1] || (s[1] = (ee) => f("close"))
+                }, null, 8, ["label", "aria-label"])
+              ])
+            ];
+          }),
+          default: d(() => {
+            var N, Y;
+            return [
+              ((N = p.value) == null ? void 0 : N.mode) === "members" ? (m(), h("div", We, [
+                v("div", Xe, [
+                  v("p", Ze, $(n(e)("menu.product.form.member_price.configure.current_configuration")), 1),
+                  p.value.configurationName || i.mainPricingLabel ? (m(), h("p", eo, $(p.value.configurationName ?? n(e)("menu.product.form.member_price.configure.main_pricing")), 1)) : B("", !0)
+                ]),
+                v("div", oo, [
+                  v("p", no, $(n(e)("menu.product.form.member_price.configure.pricing_grid")), 1),
+                  (m(!0), h(G, null, Q(p.value.rows, (M, ee) => (m(), O(ie, ae(
+                    {
+                      key: M.tier ?? "base",
+                      class: "w-[258px] xs:w-full",
+                      label: n(e)("menu.product.form.member_price.configure.default_selling_price"),
+                      "model-value": M.amount,
+                      "commit-on-input": "",
+                      currency: p.value.currency,
+                      "error-messages": j(ee, M)
+                    },
+                    { ref_for: !0 },
+                    n(a).field(
+                      `rows.${ee}.amount`,
+                      (ne) => i.session.setAmount(M.tier, null, ne)
+                    )
+                  ), {
+                    append: d(() => [
+                      p.value.showSuggestion ? (m(), O(n(_e), {
+                        key: 0,
+                        "pure-styling": "",
+                        class: "shrink-0 scale-75",
+                        "aria-label": n(e)("menu.product.remy.pricing"),
+                        onClick: s[0] || (s[0] = (ne) => f("suggest"))
+                      }, null, 8, ["aria-label"])) : B("", !0)
+                    ]),
+                    _: 2
+                  }, 1040, ["label", "model-value", "currency", "error-messages"]))), 128))
+                ]),
+                v("div", to, [
+                  v("div", lo, [
+                    v("p", ao, $(n(e)(
+                      "menu.product.form.member_price.configure.member_selling_price.label"
+                    )), 1),
+                    v("p", io, $(n(e)(
+                      "menu.product.form.member_price.configure.member_selling_price.sublabel"
+                    )), 1)
+                  ]),
+                  r(x, {
+                    "column-defs": P.value,
+                    "row-data": [...((Y = p.value.rows[0]) == null ? void 0 : Y.members) ?? []],
+                    "hide-footer": ""
+                  }, null, 8, ["column-defs", "row-data"])
+                ])
+              ])) : p.value ? (m(), h("div", ro, [
+                v("div", so, [
+                  v("div", uo, [
+                    v("div", mo, [
+                      v("p", co, $(n(e)("menu.price_tier.price_group")), 1),
+                      v("p", po, $(n(e)("menu.price_tier.description")), 1)
+                    ]),
+                    g.onCreatePriceGroup ? (m(), O(w, {
+                      key: 0,
+                      class: "min-w-fit",
+                      label: n(e)("menu.price_tier.add_price_group"),
+                      icon: "add",
+                      variant: "secondary",
+                      onClick: q
+                    }, null, 8, ["label"])) : B("", !0)
+                  ]),
+                  r(x, {
+                    "column-defs": z.value,
+                    "row-data": [...p.value.rows],
+                    "hide-footer": ""
+                  }, null, 8, ["column-defs", "row-data"])
+                ])
+              ])) : B("", !0)
+            ];
+          }),
+          _: 1
+        }, 8, ["z-index", "max-width", "is-container", "is-container-props"]),
+        F.value ? (m(), O(Z, {
+          key: 0,
+          session: F.value,
+          "z-index": (g.zIndex ?? 300) + 100,
+          "main-pricing-label": i.mainPricingLabel,
+          onClose: b
+        }, null, 8, ["session", "z-index", "main-pricing-label"])) : B("", !0)
+      ], 64);
+    };
+  }
+}), bo = {}, vo = { class: "flex gap-16" };
+function _o(I, S) {
+  return m(), h("div", vo, [
+    se(I.$slots, "default")
+  ]);
+}
+const fo = /* @__PURE__ */ De(bo, [["render", _o]]), yo = { class: "fm-typo-en-title-md-600" }, xo = {
+  key: 0,
+  class: "pt-8 space-y-32"
+}, ho = { class: "xs:overflow-x-scroll" }, wo = { class: "xs:min-w-[640px]" }, ko = { class: "flex gap-8 items-center justify-start" }, Fo = { class: "fm-typo-en-title-md-600" }, Co = { class: "pt-8 space-y-24" }, $o = { class: "flex gap-8 flex-wrap" }, So = { class: "fm-typo-en-body-md-600 text-fm-color-primary" }, To = { class: "flex gap-8" }, jo = /* @__PURE__ */ W({
+  __name: "ProductGroupCreateSheet",
+  props: {
+    sdk: {},
+    presentation: {}
+  },
+  emits: ["close", "created"],
+  setup(I, { emit: S }) {
+    const g = I, f = S, { t: e } = X(), k = y("i18n-t"), L = ke(), { run: T } = Re(), p = he(), a = g.sdk.group.creationEditor(
+      g.presentation === "tree" ? { surface: "editor" } : void 0
+    ), j = ue(a), l = U(
+      () => j.value.status === "ready" ? j.value.value : null
+    ), F = we(() => a), b = U(
+      () => {
+        var o;
+        return Object.fromEntries(
+          Object.entries(((o = l.value) == null ? void 0 : o.attributeValueOptions) ?? {}).map(
+            ([t, V]) => [t, [...V]]
+          )
+        );
+      }
+    ), C = ue(g.sdk.linkProduct.catalogue), P = U(
+      () => C.value.status === "ready" ? C.value.value : null
+    ), z = oe(!1), E = oe({}), q = U(
+      () => {
+        var o;
+        return (((o = l.value) == null ? void 0 : o.options) ?? []).map((t) => ({
+          ...t,
+          subRows: t.variants
+        }));
+      }
+    ), i = (o) => o.combinationKey ? `${o.id}:${o.combinationKey}` : o.id, s = (o, t, V, H) => o.combinationKey ? e("menu.common.labels.a11y_labelled_name", {
+      label: e(V),
+      name: o.name || o.inheritedName
+    }) : H ? e(H, { index: t + 1 }) : e("menu.group.a11y.row", { label: e(V), index: t + 1 });
+    function x(o) {
+      a.setProducts([...o]), z.value = !1;
+    }
+    function w() {
+      a.cancelTranslation();
+    }
+    function D() {
+      var o;
+      if (!((o = l.value) != null && o.translationDirty)) {
+        a.cancelTranslation();
+        return;
+      }
+      p.open({
+        title: e("menu.common.dialog.discard.title"),
+        message: e("menu.common.dialog.discard.message"),
+        primaryActions: {
+          text: e("menu.common.actions.discard"),
+          close: !0,
+          variant: "destructive"
+        },
+        secondaryActions: {
+          text: e("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(() => a.cancelTranslation());
+    }
+    xe(() => a.dispose());
+    const Z = (o) => l.value ? F.issue(l.value.fieldIssues, o) ?? l.value.issues.find((t) => t.field === o) : void 0, R = (o) => {
+      const t = Z(o);
+      return t ? L(t) : "";
+    }, N = ["NORMAL", "PRODUCT", "DYNAMIC"], Y = oe(0);
+    function M() {
+      a.confirmTypeChange(!1), Y.value += 1;
+    }
+    fe(
+      () => {
+        var o;
+        return (o = l.value) == null ? void 0 : o.typeChange;
+      },
+      (o) => {
+        o && p.open({
+          title: e("menu.common.dialog.change_type.title"),
+          message: e("menu.common.dialog.change_type.message"),
+          primaryActions: { text: e("menu.common.actions.yes"), close: !0 },
+          secondaryActions: { text: e("menu.common.actions.no"), close: !0 }
+        }).onPrimary(() => a.confirmTypeChange(!0)).onSecondary(() => M()).onClose(() => M());
+      }
+    );
+    async function ee() {
+      var V;
+      const o = ((V = l.value) == null ? void 0 : V.name) ?? "";
+      (await T(() => F.submit(() => a.submit()), {
+        showLoading: () => {
+          var H;
+          return ((H = l.value) == null ? void 0 : H.status) === "submitting";
+        }
+      })).kind === "success" && (f("created", o), f("close"));
+    }
+    const ne = U(() => [
+      {
+        accessorKey: "isDefault",
+        size: 35,
+        header: () => e("menu.group.option.is_default"),
+        enableSorting: !1,
+        cell: (o) => (
+          // A product with variants has no default of its own; its
+          // combinations do (OptionTable.vue:143-145).
+          o.row.original.variants.length ? null : _(K.FmCheckbox, {
+            modelValue: o.row.original.isDefault,
+            value: i(o.row.original),
+            "aria-label": s(
+              o.row.original,
+              o.row.index,
+              "menu.group.option.is_default"
+            ),
+            "onUpdate:modelValue": (t) => {
+              a.setOption(
+                o.row.original.id,
+                { isDefault: t },
+                o.row.original.combinationKey
+              ), F.touch("options");
+            }
+          })
+        )
+      },
+      {
+        accessorKey: "code",
+        size: 100,
+        header: () => e("menu.group.option.code"),
+        enableSorting: !1,
+        cell: (o) => _("div", { class: "break-all max-w-[100px]" }, o.row.original.code)
+      },
+      {
+        accessorKey: "name",
+        header: () => {
+          var o;
+          return _("div", { class: "flex items-center w-full gap-8" }, [
+            _("span", e("menu.group.option.product_title")),
+            ((o = l.value) == null ? void 0 : o.showTranslation) === !1 ? null : _(K.FmButton, {
+              icon: "g_translate",
+              variant: "tertiary",
+              textColor: "neutral-gray-400",
+              // Distinct from the group-name translate button below, AND from
+              // every field's own name: `getByLabel` is substring-matching, so
+              // "Translate group name" made the "Group name" textbox resolve two
+              // elements and the frozen create input could not run at all. Both
+              // are named so that no control's accessible name contains another's
+              // (including the collision that the first renaming created).
+              // Distinct from the group-name translate button below: both are
+              // `g_translate` FmButtons inside one side sheet, and one shared
+              // name made two controls of one role indistinguishable — the same
+              // ADR-0003 §1 condition as on the option cells. Neither name is
+              // visible, so this changes no rendering.
+              "aria-label": e("menu.group.translation.translate_options"),
+              onClick: () => a.beginTranslation("options")
+            })
+          ]);
+        },
+        enableSorting: !1,
+        cell: (o) => _(
+          J,
+          {
+            class: "min-w-[300px]",
+            modelValue: o.row.original.name,
+            placeholder: o.row.original.inheritedName,
+            errorMessages: Z(`option.${o.row.original.id}.name`) ? [R(`option.${o.row.original.id}.name`)] : [],
+            // Named PER ROW: "Option 1 title", "Option 2 title", …
+            //
+            // The accessible name is an addition the MIGRATED app owns — legacy
+            // renders these cells unlabelled, with no accessible name at all, so
+            // nothing here is matched to legacy's DOM. One shared name was the
+            // first attempt and it could not work: after the second "Add option"
+            // two textboxes answer to it, so a locator that must resolve one
+            // element fails. The index has to lead rather than trail, because
+            // `getByLabel` is substring-matching — "Option title 1"
+            // and "Option title 2" would both still match a recorded
+            // "Option title", while "Option 1 title" is not a substring of
+            // "Option 2 title". Owner-approved 2026-09-08 together with the
+            // baseline refresh that re-records the four steps against these names.
+            //
+            // The visible column header stays "Title", which is what the golden
+            // shows; this is the accessible name only.
+            "aria-label": s(
+              o.row.original,
+              o.row.index,
+              "menu.group.option.product_title",
+              "menu.group.option.option_title_numbered"
+            ),
+            ...F.field(
+              `option.${o.row.original.id}.name`,
+              (t) => a.setOption(
+                o.row.original.id,
+                { name: t },
+                o.row.original.combinationKey
+              )
+            )
+          },
+          o.row.original.variants.length ? {
+            // Legacy puts the toggle inside the title field
+            // (OptionTable.vue:228-243).
+            append: () => _(
+              "button",
+              {
+                type: "button",
+                class: "flex",
+                "aria-label": e(
+                  o.row.getIsExpanded() ? "menu.apply_product.table.collapse_combinations" : "menu.apply_product.table.expand_combinations",
+                  {
+                    name: o.row.original.name || o.row.original.inheritedName
+                  }
+                ),
+                onClick: o.row.getToggleExpandedHandler()
+              },
+              _(K.FmIcon, {
+                name: "keyboard_arrow_up",
+                class: [
+                  "cursor-pointer transition-transform",
+                  o.row.getIsExpanded() ? "rotate-180" : ""
+                ]
+              })
+            )
+          } : void 0
+        )
+      },
+      {
+        accessorKey: "priceAmount",
+        size: 400,
+        header: () => _(
+          k,
+          { keypath: "menu.group.option.price", tag: "span" },
+          {
+            symbol: () => {
+              var o;
+              return _(Fe, { currency: (o = l.value) == null ? void 0 : o.currency });
+            }
+          }
+        ),
+        enableSorting: !1,
+        cell: (o) => (
+          // Legacy wraps the price control in `flex items-center gap-8`
+          // (`portal .../GroupManager/OptionTable.vue:290`), so the input takes
+          // its natural width inside the 400px column instead of stretching to
+          // fill it. Without the wrapper the field runs ~127px wider than the
+          // frozen `group/v3-create/form-normal` golden shows.
+          _("div", { class: "flex items-center gap-8" }, [
+            _(ie, {
+              modelValue: o.row.original.priceAmount,
+              // Indexed for the same reason as the title above; the visible
+              // header keeps its currency symbol.
+              "aria-label": s(
+                o.row.original,
+                o.row.index,
+                "menu.group.option.price",
+                "menu.group.option.option_price_numbered"
+              ),
+              "onUpdate:modelValue": (t) => a.setOption(
+                o.row.original.id,
+                { priceAmount: t },
+                o.row.original.combinationKey
+              )
+            })
+          ])
+        )
+      },
+      {
+        accessorKey: "orderFrom",
+        size: 100,
+        header: () => e("menu.common.labels.order_from"),
+        enableSorting: !1,
+        cell: (o) => _(K.FmSelect, {
+          modelValue: o.row.original.orderFrom,
+          disabled: !o.row.original.editOrderFrom,
+          "aria-label": s(
+            o.row.original,
+            o.row.index,
+            "menu.common.labels.order_from"
+          ),
+          items: ["ALL", "POS_ONLY", "NONE"].map((t) => ({
+            value: t,
+            label: e(Ee[t])
+          })),
+          "onUpdate:modelValue": (t) => a.setOption(
+            o.row.original.id,
+            { orderFrom: t },
+            o.row.original.combinationKey
+          )
+        })
+      },
+      {
+        id: "action",
+        meta: { cellClass: "" },
+        size: 80,
+        enableSorting: !1,
+        cell: (o) => {
+          var t;
+          return _("div", { class: "flex items-center justify-end" }, [
+            // Legacy offers inventory binding on an option row for every V4 group
+            // and, on V3, only for a NORMAL one. It is rendered disabled for the
+            // same reason as the nested-group affordance below: no approved
+            // scenario in this module covers an inventory intent, so there is
+            // nothing to open, but the button's presence is part of the frozen
+            // `group/v3-create/form-normal` layout — it is what narrows the Price
+            // column to the width the golden shows.
+            ...(t = l.value) != null && t.showInventory ? [
+              _(K.FmButton, {
+                prependIcon: "inventory_2",
+                variant: "tertiary",
+                textColor: "neutral-gray-400",
+                disabled: !0,
+                "aria-label": s(
+                  o.row.original,
+                  o.row.index,
+                  "menu.group.option.inventory"
+                )
+              })
+            ] : [],
+            // Legacy retains the disabled nested-group affordance on empty rows.
+            // There is no nested edit intent when the product links no groups.
+            ...o.row.original.nestedGroupCount ? [] : [
+              _(K.FmButton, {
+                prependIcon: "arrow_split",
+                variant: "tertiary",
+                textColor: "neutral-gray-400",
+                disabled: !0,
+                "aria-label": s(
+                  o.row.original,
+                  o.row.index,
+                  "menu.group.nested.title"
+                )
+              })
+            ],
+            _(K.FmButton, {
+              prependIcon: "delete",
+              variant: "tertiary",
+              textColor: "neutral-gray-400",
+              "aria-label": s(
+                o.row.original,
+                o.row.index,
+                "menu.common.actions.remove"
+              ),
+              // A combination is removed with its product (OptionTable.vue:547-556).
+              disabled: !!o.row.original.combinationKey,
+              onClick: () => a.removeOption(o.row.original.id)
+            })
+          ]);
+        }
+      }
+    ]);
+    return (o, t) => {
+      var pe, ge, be;
+      const V = y("FmButton"), H = y("FmTooltip"), me = y("FmStepperField"), ce = y("FmFormGroup"), Ce = y("FmRadio"), $e = y("FmRadioGroup"), Se = y("FmSwitch"), Te = y("FmTable"), de = y("FmSideSheet"), Pe = y("FmChip"), Ve = y("FmSelect");
+      return m(), h(G, null, [
+        r(de, {
+          "model-value": !0,
+          "max-width": o.presentation === "tree" ? 720 : 800,
+          "is-container": n(K).FmForm,
+          "is-container-props": { onValidationSuccess: ee },
+          "onUpdate:modelValue": t[9] || (t[9] = (u) => !u && f("close"))
+        }, {
+          "side-sheet-header": d(() => [
+            v("p", yo, $(n(e)("menu.group.add")), 1)
+          ]),
+          "side-sheet-footer": d(() => {
+            var u;
+            return [
+              v("div", ko, [
+                r(V, {
+                  label: n(e)("menu.common.actions.add"),
+                  disabled: ((u = l.value) == null ? void 0 : u.submit.state) !== "allowed",
+                  size: "lg",
+                  type: "submit",
+                  variant: "primary"
+                }, null, 8, ["label", "disabled"]),
+                r(V, {
+                  label: n(e)("menu.common.actions.cancel"),
+                  size: "lg",
+                  variant: "tertiary",
+                  onClick: t[8] || (t[8] = (c) => f("close"))
+                }, null, 8, ["label"])
+              ])
+            ];
+          }),
+          default: d(() => [
+            l.value ? (m(), h("div", xo, [
+              r(Be, null, {
+                default: d(() => {
+                  var u;
+                  return [
+                    r(J, ae({
+                      autofocus: "",
+                      label: n(e)("menu.common.labels.group_name"),
+                      "model-value": l.value.name,
+                      "error-messages": Z("name") ? [R("name")] : []
+                    }, n(F).field("name", n(a).setName)), ye({ _: 2 }, [
+                      l.value.showTranslation !== !1 ? {
+                        name: "append",
+                        fn: d(() => [
+                          r(H, {
+                            variant: "plain",
+                            placement: "top",
+                            "z-index": 999
+                          }, {
+                            default: d(() => [
+                              r(V, {
+                                variant: "tertiary",
+                                icon: "g_translate",
+                                disabled: !l.value.canTranslateName,
+                                "aria-label": n(e)("menu.group.translation.translate_name"),
+                                onClick: t[0] || (t[0] = (c) => n(a).beginTranslation("group"))
+                              }, null, 8, ["disabled", "aria-label"])
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1040, ["label", "model-value", "error-messages"]),
+                    r(ce, {
+                      "model-value": `${l.value.min} ${l.value.max}`,
+                      invalid: !!R("bounds"),
+                      "helper-text": R("bounds")
+                    }, {
+                      default: d(() => [
+                        r(fo, null, {
+                          default: d(() => [
+                            r(me, ae({
+                              class: "flex-1",
+                              min: 0,
+                              label: n(e)("menu.common.labels.min_select"),
+                              "model-value": l.value.min
+                            }, n(F).field("bounds", n(a).setMin)), null, 16, ["label", "model-value"]),
+                            r(me, ae({
+                              class: "flex-1",
+                              min: l.value.min,
+                              label: n(e)("menu.common.labels.max_select"),
+                              "model-value": l.value.max
+                            }, n(F).field("bounds", n(a).setMax)), null, 16, ["min", "label", "model-value"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["model-value", "invalid", "helper-text"]),
+                    l.value.showType ? (m(), O(re, {
+                      key: 0,
+                      label: n(e)("menu.common.labels.group_type")
+                    }, {
+                      default: d(() => [
+                        (m(), O($e, {
+                          key: Y.value,
+                          "model-value": l.value.type,
+                          "onUpdate:modelValue": t[1] || (t[1] = (c) => n(a).setType(c))
+                        }, {
+                          default: d(() => [
+                            (m(), h(G, null, Q(N, (c) => r(Ce, {
+                              key: c,
+                              value: c,
+                              label: n(e)(n(Me)[c])
+                            }, null, 8, ["value", "label"])), 64))
+                          ]),
+                          _: 1
+                        }, 8, ["model-value"]))
+                      ]),
+                      _: 1
+                    }, 8, ["label"])) : B("", !0),
+                    r(re, {
+                      label: n(e)("menu.common.labels.configuration")
+                    }, {
+                      default: d(() => [
+                        r(Se, {
+                          "model-value": l.value.stackable,
+                          label: n(e)("menu.common.labels.stackable"),
+                          "label-placement": "right",
+                          sublabel: n(e)("menu.common.labels.stackable_sublabel"),
+                          "onUpdate:modelValue": t[2] || (t[2] = (c) => n(a).setStackable(c))
+                        }, null, 8, ["model-value", "label", "sublabel"])
+                      ]),
+                      _: 1
+                    }, 8, ["label"]),
+                    (u = l.value.tagging) != null && u.visible ? (m(), h(G, { key: 1 }, [
+                      o.presentation === "tree" ? (m(), O(n(ve), {
+                        key: 0,
+                        entity: "group",
+                        "model-value": l.value.customAttributes ?? {},
+                        "value-options": b.value,
+                        "onUpdate:modelValue": t[3] || (t[3] = (c) => n(a).setCustomAttributes(c ?? null))
+                      }, null, 8, ["model-value", "value-options"])) : (m(), O(le, {
+                        key: 1,
+                        title: n(e)("menu.group.form.tagging.title"),
+                        "sub-title": n(e)("menu.group.form.tagging.subtitle")
+                      }, {
+                        default: d(() => [
+                          r(n(ve), {
+                            entity: "group",
+                            "model-value": l.value.customAttributes ?? {},
+                            "value-options": b.value,
+                            "onUpdate:modelValue": t[4] || (t[4] = (c) => n(a).setCustomAttributes(c ?? null))
+                          }, null, 8, ["model-value", "value-options"])
+                        ]),
+                        _: 1
+                      }, 8, ["title", "sub-title"]))
+                    ], 64)) : B("", !0)
+                  ];
+                }),
+                _: 1
+              }),
+              r(ce, {
+                tag: "div",
+                "model-value": l.value.options,
+                invalid: !!R("options"),
+                "helper-text": R("options") || n(e)("menu.common.validation.default_items_tip", {
+                  count: l.value.defaultCount,
+                  max: l.value.max
+                })
+              }, {
+                default: d(() => [
+                  r(le, {
+                    title: n(e)("menu.group.option.title"),
+                    "sub-title": l.value.linkProducts && o.presentation !== "tree" ? n(e)("menu.group.option.subtitle") : ""
+                  }, {
+                    "append-title": d(() => [
+                      r(V, {
+                        variant: "secondary",
+                        "text-color": "primary",
+                        "border-color": "primary",
+                        "prepend-icon": l.value.linkProducts ? "link" : "add",
+                        label: n(e)(
+                          l.value.linkProducts ? "menu.group.option.link_products" : "menu.group.option.add_option"
+                        ),
+                        onClick: t[5] || (t[5] = (u) => l.value.linkProducts ? z.value = !0 : n(a).addOption())
+                      }, null, 8, ["prepend-icon", "label"])
+                    ]),
+                    default: d(() => [
+                      v("div", ho, [
+                        v("div", wo, [
+                          r(Te, {
+                            draggable: "",
+                            onDndChanged: t[6] || (t[6] = (u) => n(a).reorderOptions(
+                              u.map((c) => c.id)
+                            )),
+                            "column-defs": ne.value,
+                            "column-visibility": {
+                              code: l.value.showCode,
+                              priceAmount: l.value.showPrice,
+                              orderFrom: l.value.showOrderFrom
+                            },
+                            "row-data": q.value,
+                            "get-row-id": i,
+                            "expanded-state": E.value,
+                            "onUpdate:expandedState": t[7] || (t[7] = (u) => E.value = u),
+                            "page-size": Math.max(l.value.options.length, 1),
+                            "shrink-at": !1,
+                            "hide-footer": ""
+                          }, null, 8, ["column-defs", "column-visibility", "row-data", "expanded-state", "page-size"])
+                        ])
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["title", "sub-title"])
+                ]),
+                _: 1
+              }, 8, ["model-value", "invalid", "helper-text"])
+            ])) : B("", !0)
+          ]),
+          _: 1
+        }, 8, ["max-width", "is-container", "is-container-props"]),
+        ((pe = l.value) == null ? void 0 : pe.translationMode) === "group" ? (m(), O(Ne, {
+          key: 0,
+          "model-value": !0,
+          name: l.value.name,
+          "name-locale": l.value.nameLocale,
+          "supported-locales": l.value.supportedLocales,
+          dirty: l.value.translationDirty,
+          title: n(e)("menu.group.translation.title"),
+          "name-section-label": n(e)("menu.common.translation.name_section", {
+            entity: n(e)("menu.group.title")
+          }),
+          "onUpdate:modelValue": t[10] || (t[10] = (u) => !u && w()),
+          "onUpdate:name": t[11] || (t[11] = (u) => n(a).setName(u)),
+          "onUpdate:nameLocale": t[12] || (t[12] = (u) => n(a).setNameLocale(u)),
+          onSave: t[13] || (t[13] = (u) => n(a).applyTranslation()),
+          onDiscard: t[14] || (t[14] = (u) => n(a).cancelTranslation())
+        }, null, 8, ["name", "name-locale", "supported-locales", "dirty", "title", "name-section-label"])) : B("", !0),
+        ((ge = l.value) == null ? void 0 : ge.translationMode) === "options" ? (m(), O(de, {
+          key: 1,
+          "model-value": !0,
+          "max-width": 720,
+          "onUpdate:modelValue": t[17] || (t[17] = (u) => !u && w()),
+          "onOn:clickedAway": D
+        }, {
+          "side-sheet-header": d(() => [
+            v("p", Fo, $(n(e)("menu.group.translation.title")), 1)
+          ]),
+          "side-sheet-footer": d(() => [
+            v("div", To, [
+              r(V, {
+                label: n(e)("menu.common.actions.save"),
+                size: "lg",
+                onClick: t[16] || (t[16] = (u) => n(a).applyTranslation())
+              }, null, 8, ["label"]),
+              r(V, {
+                label: n(e)("menu.common.actions.cancel"),
+                variant: "tertiary",
+                size: "lg",
+                onClick: D
+              }, null, 8, ["label"])
+            ])
+          ]),
+          default: d(() => [
+            v("div", Co, [
+              r(re, {
+                label: n(e)("menu.group.translation.language")
+              }, {
+                default: d(() => {
+                  var u;
+                  return [
+                    v("div", $o, [
+                      (m(!0), h(G, null, Q(l.value.optionTranslationLocales, (c) => {
+                        var A;
+                        return m(), O(Pe, {
+                          key: c,
+                          removable: "",
+                          label: ((A = l.value.supportedLocales.find((te) => te.code === c)) == null ? void 0 : A.name) ?? c,
+                          onChipClosed: (te) => n(a).setOptionTranslationLocales(
+                            l.value.optionTranslationLocales.filter((Oe) => Oe !== c)
+                          )
+                        }, null, 8, ["label", "onChipClosed"]);
+                      }), 128)),
+                      r(Ve, {
+                        items: (((u = l.value) == null ? void 0 : u.supportedLocales) ?? []).filter(
+                          (c) => {
+                            var A;
+                            return !(((A = l.value) == null ? void 0 : A.optionTranslationLocales) ?? []).includes(c.code);
+                          }
+                        ).map((c) => ({ value: c.code, label: c.name })),
+                        placeholder: n(e)("menu.group.translation.add_language"),
+                        "model-value": null,
+                        "onUpdate:modelValue": t[15] || (t[15] = (c) => n(a).setOptionTranslationLocales([
+                          ...l.value.optionTranslationLocales,
+                          c
+                        ]))
+                      }, null, 8, ["items", "placeholder"])
+                    ])
+                  ];
+                }),
+                _: 1
+              }, 8, ["label"]),
+              r(le, {
+                title: n(e)("menu.group.translation.group_name")
+              }, {
+                default: d(() => [
+                  r(J, {
+                    "model-value": l.value.name,
+                    readonly: ""
+                  }, null, 8, ["model-value"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              r(le, {
+                title: n(e)("menu.group.translation.product_name")
+              }, {
+                default: d(() => [
+                  (m(!0), h(G, null, Q(l.value.options, (u, c) => (m(), h("div", {
+                    key: u.id,
+                    class: "space-y-8"
+                  }, [
+                    v("p", So, $(n(e)("menu.group.translation.option", { number: c + 1 })), 1),
+                    r(J, {
+                      label: n(e)("menu.group.translation.option_default", { number: c + 1 }),
+                      "model-value": u.name,
+                      "onUpdate:modelValue": (A) => n(a).setOption(u.id, { name: A })
+                    }, null, 8, ["label", "model-value", "onUpdate:modelValue"]),
+                    (m(!0), h(G, null, Q(l.value.optionTranslationLocales, (A) => (m(), h("div", {
+                      key: A,
+                      class: "flex gap-8 items-center"
+                    }, [
+                      r(Ue, { code: A }, null, 8, ["code"]),
+                      r(J, {
+                        class: "flex-1",
+                        "aria-label": n(e)("menu.group.translation.option_translation", {
+                          number: c + 1,
+                          language: A
+                        }),
+                        "model-value": u.nameLocale[A] ?? "",
+                        placeholder: n(e)("menu.group.translation.placeholder"),
+                        "onUpdate:modelValue": (te) => n(a).setOptionNameLocale(u.id, {
+                          ...u.nameLocale,
+                          [A]: te
+                        })
+                      }, null, 8, ["aria-label", "model-value", "placeholder", "onUpdate:modelValue"])
+                    ]))), 128))
+                  ]))), 128))
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ])
+          ]),
+          _: 1
+        })) : B("", !0),
+        r(Ke, {
+          modelValue: z.value,
+          "onUpdate:modelValue": t[18] || (t[18] = (u) => z.value = u),
+          catalogue: P.value,
+          "selected-product-ids": ((be = l.value) == null ? void 0 : be.selectedProductIds) ?? [],
+          title: n(e)("menu.group.option.link_products"),
+          onSubmit: x
+        }, null, 8, ["modelValue", "catalogue", "selected-product-ids", "title"])
+      ], 64);
+    };
+  }
+});
+export {
+  fo as F,
+  ie as _,
+  Je as a,
+  Go as b,
+  Ro as c,
+  jo as d
+};