@gomusdev/web-components 1.51.0 → 1.52.0

package/dist-js/components/forms/lib/Field.svelte.d.ts

@@ -1,6 +1,6 @@
 import { FullAutoFill } from 'svelte/elements';
 import { ZodType } from 'zod';
-export type FieldType = 'input' | 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'checkbox' | 'select' | 'radio' | 'textarea' | 'date';
+export type FieldType = 'input' | 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'checkbox' | 'select' | 'radio' | 'textarea' | 'date' | 'paymentMode';
 export interface Field {
     key: string;
     apiKey?: string;

package/dist-js/components/forms/ui/generic/PaymentModeField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-js/components/ticketSelection/subcomponents/tickets/subcomponents/segment/SegmentDetails.svelte.d.ts

@@ -7,6 +7,7 @@ export declare class SegmentDetails {
         coupons: string[];
         contingent: number;
         uid: string;
+        paymentModeId: string | undefined;
         readonly nonEmptyItems: import('../../../../../../lib/models/cart/types').CartItem[];
         readonly totalPriceCents: number;
         readonly totalQuantity: number;

package/dist-js/gomus-webcomponents.iife.js

@@ -2045,6 +2045,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   function should_defer_append() {
     return false;
   }
+  function create_comment(data = "") {
+    return document.createComment(data);
+  }
   function autofocus(dom, value) {
     if (value) {
       const body = document.body;
@@ -4369,6 +4372,14 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     }
     element.value = value ?? "";
   }
+  function set_checked(element, checked) {
+    var attributes = get_attributes(element);
+    if (attributes.checked === (attributes.checked = // treat null and undefined the same for the initial value
+    checked ?? void 0)) {
+      return;
+    }
+    element.checked = checked;
+  }
   function set_selected(element, selected) {
     if (selected) {
       if (!element.hasAttribute("selected")) {
@@ -4657,6 +4668,36 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     }
     return setters;
   }
+  let supported = null;
+  function is_supported() {
+    if (supported === null) {
+      var select = document.createElement("select");
+      select.innerHTML = "<option><span>t</span></option>";
+      supported = /** @type {Element} */
+      select.firstChild?.firstChild?.nodeType === 1;
+    }
+    return supported;
+  }
+  function customizable_select(element, rich_fn) {
+    var was_hydrating = hydrating;
+    if (!is_supported()) {
+      set_hydrating(false);
+      element.textContent = "";
+      element.append(create_comment(""));
+    }
+    try {
+      rich_fn();
+    } finally {
+      if (was_hydrating) {
+        if (hydrating) {
+          reset(element);
+        } else {
+          set_hydrating(true);
+          set_hydrate_node(element);
+        }
+      }
+    }
+  }
   function bind_value(input, get2, set2 = get2) {
     var batches2 = /* @__PURE__ */ new WeakSet();
     listen_to_event_and_reset_event(input, "input", async (is_reset) => {
@@ -11306,12 +11347,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   function createCart(products, contingent = 20) {
     const items = proxy([]);
     const coupons = proxy([]);
+    let paymentModeId = /* @__PURE__ */ state(void 0);
     const cart = {
       items,
       coupons,
       contingent,
       // caps the total number of items in the cart
       uid: `cart-${lastUuid++}`,
+      get paymentModeId() {
+        return get$2(paymentModeId);
+      },
+      set paymentModeId(value) {
+        set(paymentModeId, value, true);
+      },
       get nonEmptyItems() {
         return this.items.filter((i) => i.quantity > 0);
       },
@@ -11333,7 +11381,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
           shipping_address_id: null,
           comment: null,
           reference: null,
-          payment_mode_id: shop.settings?.defaultPaymentModeId,
+          payment_mode_id: this.paymentModeId ?? shop.settings?.defaultPaymentModeId,
           coupons: this.coupons,
           donations: [],
           affiliate: {},
@@ -16153,6 +16201,19 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       placeholder: "",
       description: "",
       autocomplete: "off"
+    },
+    paymentMode: {
+      key: "paymentMode",
+      apiKey: "payment_mode_id",
+      type: "paymentMode",
+      label: "cart.paymentMode.label",
+      placeholder: "",
+      description: "",
+      autocomplete: "off",
+      options: () => {
+        const modes = shop.payment_modes ? Object.values(shop.payment_modes) : [];
+        return modes.map((m) => ({ value: String(m.id), label: m.name }));
+      }
     }
   };
   function createField(data, required) {
@@ -17176,7 +17237,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         { key: "lastName", required: true },
         { key: "email", required: true },
         { key: "confirmEmail", required: true },
-        { key: "acceptTerms", required: true }
+        { key: "acceptTerms", required: true },
+        { key: "paymentMode", required: true }
       ]
     });
     wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -31157,11 +31219,16 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   var root_1$a = /* @__PURE__ */ from_html(` <!>`, 1);
   var root_3$6 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
   var root_4$3 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
-  var root_7$2 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_7$2 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
   var root_6$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
+  var select_content = /* @__PURE__ */ from_html(`<!>`, 1);
   var root_5 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
-  var root_11$2 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-  var root_9$1 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+  var root_12$1 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
+  var root_11$2 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
+  var root_10$1 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+  var root_9$1 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+  var root_15 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+  var root_13 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
   function InputAndLabel($$anchor, $$props) {
     push($$props, true);
     const labelText = ($$anchor2) => {
@@ -31262,36 +31329,41 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         name: field().key,
         class: inputClass()
       }));
-      var node_4 = child(select_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var fragment_3 = root_6$1();
-          var option_1 = first_child(fragment_3);
-          var text_1 = child(option_1, true);
-          reset(option_1);
-          option_1.value = option_1.__value = "";
-          var node_5 = sibling(option_1, 2);
-          each(node_5, 17, () => field().options(), index$1, ($$anchor4, option2) => {
-            var option_2 = root_7$2();
-            var text_2 = child(option_2, true);
-            reset(option_2);
-            var option_2_value = {};
-            template_effect(() => {
-              set_text(text_2, get$2(option2).label);
-              if (option_2_value !== (option_2_value = get$2(option2).value)) {
-                option_2.value = (option_2.__value = get$2(option2).value) ?? "";
-              }
+      customizable_select(select_1, () => {
+        var anchor = child(select_1);
+        var fragment_3 = select_content();
+        var node_4 = first_child(fragment_3);
+        {
+          var consequent_1 = ($$anchor3) => {
+            var fragment_4 = root_6$1();
+            var option_1 = first_child(fragment_4);
+            var text_1 = child(option_1, true);
+            reset(option_1);
+            option_1.value = option_1.__value = "";
+            var node_5 = sibling(option_1, 2);
+            each(node_5, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
+              var fragment_5 = root_7$2();
+              var option_2 = sibling(first_child(fragment_5), 2);
+              var text_2 = child(option_2, true);
+              reset(option_2);
+              var option_2_value = {};
+              template_effect(() => {
+                set_text(text_2, get$2(option2).label);
+                if (option_2_value !== (option_2_value = get$2(option2).value)) {
+                  option_2.value = (option_2.__value = get$2(option2).value) ?? "";
+                }
+              });
+              append($$anchor4, fragment_5);
             });
-            append($$anchor4, option_2);
+            template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
+            append($$anchor3, fragment_4);
+          };
+          if_block(node_4, ($$render) => {
+            if (field().options) $$render(consequent_1);
           });
-          template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
-          append($$anchor3, fragment_3);
-        };
-        if_block(node_4, ($$render) => {
-          if (field().options) $$render(consequent_1);
-        });
-      }
-      reset(select_1);
+        }
+        append(anchor, fragment_3);
+      });
       template_effect(() => {
         set_class(label_3, 1, clsx(labelClass()));
         set_attribute(label_3, "for", get$2(inputId));
@@ -31318,23 +31390,83 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         }
       });
     };
-    const radio = ($$anchor2) => {
+    const paymentMode = ($$anchor2) => {
+      const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
       var fieldset = root_9$1();
       var legend = child(fieldset);
       var node_6 = child(legend);
       labelText(node_6);
       reset(legend);
       var node_7 = sibling(legend, 2);
+      each(node_7, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
+        var label_4 = root_10$1();
+        var input_3 = child(label_4);
+        remove_input_defaults(input_3);
+        input_3.__change = () => {
+          field(field().value = String(get$2(mode).id), true);
+        };
+        var node_8 = sibling(input_3, 2);
+        {
+          var consequent_2 = ($$anchor4) => {
+            var span_2 = root_11$2();
+            each(span_2, 20, () => get$2(mode).icons, (icon) => icon, ($$anchor5, icon) => {
+              const url = /* @__PURE__ */ user_derived(() => CDN_PATH + icon + ".svg");
+              var img = root_12$1();
+              template_effect(() => {
+                set_class(img, 1, clsx(icon));
+                set_attribute(img, "src", get$2(url));
+                set_attribute(img, "alt", icon + " icon");
+              });
+              append($$anchor5, img);
+            });
+            reset(span_2);
+            append($$anchor4, span_2);
+          };
+          if_block(node_8, ($$render) => {
+            if (get$2(mode).icons.length > 0) $$render(consequent_2);
+          });
+        }
+        reset(label_4);
+        template_effect(
+          ($0, $1, $2) => {
+            set_attribute(input_3, "name", field().key);
+            set_value(input_3, $0);
+            set_checked(input_3, $1);
+            set_attribute(input_3, "hidden", get$2(modes).length === 1);
+            set_attribute(input_3, "aria-label", $2);
+          },
+          [
+            () => String(get$2(mode).id),
+            () => get$2(modes).length === 1 || String(get$2(mode).id) === String(field().value),
+            () => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
+          ]
+        );
+        append($$anchor3, label_4);
+      });
+      reset(fieldset);
+      template_effect(() => {
+        set_attribute(fieldset, "aria-required", field().required);
+        set_attribute(fieldset, "aria-invalid", field().errors.length > 0);
+      });
+      append($$anchor2, fieldset);
+    };
+    const radio = ($$anchor2) => {
+      var fieldset_1 = root_13();
+      var legend_1 = child(fieldset_1);
+      var node_9 = child(legend_1);
+      labelText(node_9);
+      reset(legend_1);
+      var node_10 = sibling(legend_1, 2);
       {
-        var consequent_2 = ($$anchor3) => {
-          var fragment_5 = comment();
-          var node_8 = first_child(fragment_5);
-          each(node_8, 17, () => field().options, index$1, ($$anchor4, option2) => {
-            var label_4 = root_11$2();
-            var text_3 = child(label_4);
-            var input_3 = sibling(text_3);
+        var consequent_3 = ($$anchor3) => {
+          var fragment_7 = comment();
+          var node_11 = first_child(fragment_7);
+          each(node_11, 17, () => field().options, index$1, ($$anchor4, option2) => {
+            var label_5 = root_15();
+            var text_3 = child(label_5);
+            var input_4 = sibling(text_3);
             attribute_effect(
-              input_3,
+              input_4,
               () => ({
                 ...get$2(fieldAttributes),
                 ...restProps,
@@ -31347,23 +31479,23 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
               void 0,
               true
             );
-            reset(label_4);
+            reset(label_5);
             template_effect(() => {
-              set_class(label_4, 1, clsx(labelClass()));
-              set_attribute(label_4, "for", get$2(inputId) + get$2(option2));
+              set_class(label_5, 1, clsx(labelClass()));
+              set_attribute(label_5, "for", get$2(inputId) + get$2(option2));
               set_text(text_3, `${get$2(option2) ?? ""} `);
             });
-            bind_value(input_3, () => field().value, ($$value) => field(field().value = $$value, true));
-            append($$anchor4, label_4);
+            bind_value(input_4, () => field().value, ($$value) => field(field().value = $$value, true));
+            append($$anchor4, label_5);
           });
-          append($$anchor3, fragment_5);
+          append($$anchor3, fragment_7);
         };
-        if_block(node_7, ($$render) => {
-          if (field().options) $$render(consequent_2);
+        if_block(node_10, ($$render) => {
+          if (field().options) $$render(consequent_3);
         });
       }
-      reset(fieldset);
-      append($$anchor2, fieldset);
+      reset(fieldset_1);
+      append($$anchor2, fieldset_1);
     };
     let field = prop($$props, "field", 15), describedByIds = prop($$props, "describedByIds", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
       "$$slots",
@@ -31391,7 +31523,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       select,
       radio,
       date: date2,
-      textarea: null
+      textarea: null,
+      paymentMode
     };
     const snippet$1 = /* @__PURE__ */ user_derived(() => map[field().type]);
     let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
@@ -31410,6 +31543,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       onblur
     }));
     let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
+    const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
     var $$exports = {
       get field() {
         return field();
@@ -31447,22 +31581,23 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         flushSync();
       }
     };
-    var fragment_6 = comment();
-    var node_9 = first_child(fragment_6);
+    var fragment_8 = comment();
+    var node_12 = first_child(fragment_8);
     {
-      var consequent_3 = ($$anchor2) => {
-        var fragment_7 = comment();
-        var node_10 = first_child(fragment_7);
-        snippet(node_10, () => get$2(snippet$1));
-        append($$anchor2, fragment_7);
+      var consequent_4 = ($$anchor2) => {
+        var fragment_9 = comment();
+        var node_13 = first_child(fragment_9);
+        snippet(node_13, () => get$2(snippet$1));
+        append($$anchor2, fragment_9);
       };
-      if_block(node_9, ($$render) => {
-        if (get$2(snippet$1)) $$render(consequent_3);
+      if_block(node_12, ($$render) => {
+        if (get$2(snippet$1)) $$render(consequent_4);
       });
     }
-    append($$anchor, fragment_6);
+    append($$anchor, fragment_8);
     return pop($$exports);
   }
+  delegate(["change"]);
   create_custom_element(
     InputAndLabel,
     {

package/dist-js/gomus-webcomponents.js

@@ -2043,6 +2043,9 @@ function clear_text_content(node) {
 function should_defer_append() {
   return false;
 }
+function create_comment(data = "") {
+  return document.createComment(data);
+}
 function autofocus(dom, value) {
   if (value) {
     const body = document.body;
@@ -4367,6 +4370,14 @@ function set_value(element, value) {
   }
   element.value = value ?? "";
 }
+function set_checked(element, checked) {
+  var attributes = get_attributes(element);
+  if (attributes.checked === (attributes.checked = // treat null and undefined the same for the initial value
+  checked ?? void 0)) {
+    return;
+  }
+  element.checked = checked;
+}
 function set_selected(element, selected) {
   if (selected) {
     if (!element.hasAttribute("selected")) {
@@ -4656,6 +4667,36 @@ function get_setters(element) {
   }
   return setters;
 }
+let supported = null;
+function is_supported() {
+  if (supported === null) {
+    var select = document.createElement("select");
+    select.innerHTML = "<option><span>t</span></option>";
+    supported = /** @type {Element} */
+    select.firstChild?.firstChild?.nodeType === 1;
+  }
+  return supported;
+}
+function customizable_select(element, rich_fn) {
+  var was_hydrating = hydrating;
+  if (!is_supported()) {
+    set_hydrating(false);
+    element.textContent = "";
+    element.append(create_comment(""));
+  }
+  try {
+    rich_fn();
+  } finally {
+    if (was_hydrating) {
+      if (hydrating) {
+        reset(element);
+      } else {
+        set_hydrating(true);
+        set_hydrate_node(element);
+      }
+    }
+  }
+}
 function bind_value(input, get2, set2 = get2) {
   var batches2 = /* @__PURE__ */ new WeakSet();
   listen_to_event_and_reset_event(input, "input", async (is_reset) => {
@@ -11306,12 +11347,19 @@ let lastUuid = 0;
 function createCart(products, contingent = 20) {
   const items = proxy([]);
   const coupons = proxy([]);
+  let paymentModeId = /* @__PURE__ */ state(void 0);
   const cart = {
     items,
     coupons,
     contingent,
     // caps the total number of items in the cart
     uid: `cart-${lastUuid++}`,
+    get paymentModeId() {
+      return get$2(paymentModeId);
+    },
+    set paymentModeId(value) {
+      set(paymentModeId, value, true);
+    },
     get nonEmptyItems() {
       return this.items.filter((i) => i.quantity > 0);
     },
@@ -11333,7 +11381,7 @@ function createCart(products, contingent = 20) {
         shipping_address_id: null,
         comment: null,
         reference: null,
-        payment_mode_id: shop.settings?.defaultPaymentModeId,
+        payment_mode_id: this.paymentModeId ?? shop.settings?.defaultPaymentModeId,
         coupons: this.coupons,
         donations: [],
         affiliate: {},
@@ -16153,6 +16201,19 @@ var allFields = {
     placeholder: "",
     description: "",
     autocomplete: "off"
+  },
+  paymentMode: {
+    key: "paymentMode",
+    apiKey: "payment_mode_id",
+    type: "paymentMode",
+    label: "cart.paymentMode.label",
+    placeholder: "",
+    description: "",
+    autocomplete: "off",
+    options: () => {
+      const modes = shop.payment_modes ? Object.values(shop.payment_modes) : [];
+      return modes.map((m) => ({ value: String(m.id), label: m.name }));
+    }
   }
 };
 function createField(data, required) {
@@ -17176,7 +17237,8 @@ function CheckoutForm($$anchor, $$props) {
       { key: "lastName", required: true },
       { key: "email", required: true },
       { key: "confirmEmail", required: true },
-      { key: "acceptTerms", required: true }
+      { key: "acceptTerms", required: true },
+      { key: "paymentMode", required: true }
     ]
   });
   wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -31157,11 +31219,16 @@ var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidde
 var root_1$a = /* @__PURE__ */ from_html(` <!>`, 1);
 var root_3$6 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
 var root_4$3 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<option> </option>`);
+var root_7$2 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
 var root_6$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
+var select_content = /* @__PURE__ */ from_html(`<!>`, 1);
 var root_5 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
-var root_11$2 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
-var root_9$1 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
+var root_11$2 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
+var root_10$1 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+var root_9$1 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+var root_15 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+var root_13 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 function InputAndLabel($$anchor, $$props) {
   push($$props, true);
   const labelText = ($$anchor2) => {
@@ -31262,36 +31329,41 @@ function InputAndLabel($$anchor, $$props) {
       name: field().key,
       class: inputClass()
     }));
-    var node_4 = child(select_1);
-    {
-      var consequent_1 = ($$anchor3) => {
-        var fragment_3 = root_6$1();
-        var option_1 = first_child(fragment_3);
-        var text_1 = child(option_1, true);
-        reset(option_1);
-        option_1.value = option_1.__value = "";
-        var node_5 = sibling(option_1, 2);
-        each(node_5, 17, () => field().options(), index$1, ($$anchor4, option2) => {
-          var option_2 = root_7$2();
-          var text_2 = child(option_2, true);
-          reset(option_2);
-          var option_2_value = {};
-          template_effect(() => {
-            set_text(text_2, get$2(option2).label);
-            if (option_2_value !== (option_2_value = get$2(option2).value)) {
-              option_2.value = (option_2.__value = get$2(option2).value) ?? "";
-            }
+    customizable_select(select_1, () => {
+      var anchor = child(select_1);
+      var fragment_3 = select_content();
+      var node_4 = first_child(fragment_3);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_4 = root_6$1();
+          var option_1 = first_child(fragment_4);
+          var text_1 = child(option_1, true);
+          reset(option_1);
+          option_1.value = option_1.__value = "";
+          var node_5 = sibling(option_1, 2);
+          each(node_5, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
+            var fragment_5 = root_7$2();
+            var option_2 = sibling(first_child(fragment_5), 2);
+            var text_2 = child(option_2, true);
+            reset(option_2);
+            var option_2_value = {};
+            template_effect(() => {
+              set_text(text_2, get$2(option2).label);
+              if (option_2_value !== (option_2_value = get$2(option2).value)) {
+                option_2.value = (option_2.__value = get$2(option2).value) ?? "";
+              }
+            });
+            append($$anchor4, fragment_5);
           });
-          append($$anchor4, option_2);
+          template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
+          append($$anchor3, fragment_4);
+        };
+        if_block(node_4, ($$render) => {
+          if (field().options) $$render(consequent_1);
         });
-        template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
-        append($$anchor3, fragment_3);
-      };
-      if_block(node_4, ($$render) => {
-        if (field().options) $$render(consequent_1);
-      });
-    }
-    reset(select_1);
+      }
+      append(anchor, fragment_3);
+    });
     template_effect(() => {
       set_class(label_3, 1, clsx(labelClass()));
       set_attribute(label_3, "for", get$2(inputId));
@@ -31318,23 +31390,83 @@ function InputAndLabel($$anchor, $$props) {
       }
     });
   };
-  const radio = ($$anchor2) => {
+  const paymentMode = ($$anchor2) => {
+    const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
     var fieldset = root_9$1();
     var legend = child(fieldset);
     var node_6 = child(legend);
     labelText(node_6);
     reset(legend);
     var node_7 = sibling(legend, 2);
+    each(node_7, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
+      var label_4 = root_10$1();
+      var input_3 = child(label_4);
+      remove_input_defaults(input_3);
+      input_3.__change = () => {
+        field(field().value = String(get$2(mode).id), true);
+      };
+      var node_8 = sibling(input_3, 2);
+      {
+        var consequent_2 = ($$anchor4) => {
+          var span_2 = root_11$2();
+          each(span_2, 20, () => get$2(mode).icons, (icon) => icon, ($$anchor5, icon) => {
+            const url = /* @__PURE__ */ user_derived(() => CDN_PATH + icon + ".svg");
+            var img = root_12$1();
+            template_effect(() => {
+              set_class(img, 1, clsx(icon));
+              set_attribute(img, "src", get$2(url));
+              set_attribute(img, "alt", icon + " icon");
+            });
+            append($$anchor5, img);
+          });
+          reset(span_2);
+          append($$anchor4, span_2);
+        };
+        if_block(node_8, ($$render) => {
+          if (get$2(mode).icons.length > 0) $$render(consequent_2);
+        });
+      }
+      reset(label_4);
+      template_effect(
+        ($0, $1, $2) => {
+          set_attribute(input_3, "name", field().key);
+          set_value(input_3, $0);
+          set_checked(input_3, $1);
+          set_attribute(input_3, "hidden", get$2(modes).length === 1);
+          set_attribute(input_3, "aria-label", $2);
+        },
+        [
+          () => String(get$2(mode).id),
+          () => get$2(modes).length === 1 || String(get$2(mode).id) === String(field().value),
+          () => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
+        ]
+      );
+      append($$anchor3, label_4);
+    });
+    reset(fieldset);
+    template_effect(() => {
+      set_attribute(fieldset, "aria-required", field().required);
+      set_attribute(fieldset, "aria-invalid", field().errors.length > 0);
+    });
+    append($$anchor2, fieldset);
+  };
+  const radio = ($$anchor2) => {
+    var fieldset_1 = root_13();
+    var legend_1 = child(fieldset_1);
+    var node_9 = child(legend_1);
+    labelText(node_9);
+    reset(legend_1);
+    var node_10 = sibling(legend_1, 2);
     {
-      var consequent_2 = ($$anchor3) => {
-        var fragment_5 = comment();
-        var node_8 = first_child(fragment_5);
-        each(node_8, 17, () => field().options, index$1, ($$anchor4, option2) => {
-          var label_4 = root_11$2();
-          var text_3 = child(label_4);
-          var input_3 = sibling(text_3);
+      var consequent_3 = ($$anchor3) => {
+        var fragment_7 = comment();
+        var node_11 = first_child(fragment_7);
+        each(node_11, 17, () => field().options, index$1, ($$anchor4, option2) => {
+          var label_5 = root_15();
+          var text_3 = child(label_5);
+          var input_4 = sibling(text_3);
           attribute_effect(
-            input_3,
+            input_4,
             () => ({
               ...get$2(fieldAttributes),
               ...restProps,
@@ -31347,23 +31479,23 @@ function InputAndLabel($$anchor, $$props) {
             void 0,
             true
           );
-          reset(label_4);
+          reset(label_5);
           template_effect(() => {
-            set_class(label_4, 1, clsx(labelClass()));
-            set_attribute(label_4, "for", get$2(inputId) + get$2(option2));
+            set_class(label_5, 1, clsx(labelClass()));
+            set_attribute(label_5, "for", get$2(inputId) + get$2(option2));
             set_text(text_3, `${get$2(option2) ?? ""} `);
           });
-          bind_value(input_3, () => field().value, ($$value) => field(field().value = $$value, true));
-          append($$anchor4, label_4);
+          bind_value(input_4, () => field().value, ($$value) => field(field().value = $$value, true));
+          append($$anchor4, label_5);
         });
-        append($$anchor3, fragment_5);
+        append($$anchor3, fragment_7);
       };
-      if_block(node_7, ($$render) => {
-        if (field().options) $$render(consequent_2);
+      if_block(node_10, ($$render) => {
+        if (field().options) $$render(consequent_3);
       });
     }
-    reset(fieldset);
-    append($$anchor2, fieldset);
+    reset(fieldset_1);
+    append($$anchor2, fieldset_1);
   };
   let field = prop($$props, "field", 15), describedByIds = prop($$props, "describedByIds", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
     "$$slots",
@@ -31391,7 +31523,8 @@ function InputAndLabel($$anchor, $$props) {
     select,
     radio,
     date: date2,
-    textarea: null
+    textarea: null,
+    paymentMode
   };
   const snippet$1 = /* @__PURE__ */ user_derived(() => map[field().type]);
   let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
@@ -31410,6 +31543,7 @@ function InputAndLabel($$anchor, $$props) {
     onblur
   }));
   let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
+  const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
   var $$exports = {
     get field() {
       return field();
@@ -31447,22 +31581,23 @@ function InputAndLabel($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment_6 = comment();
-  var node_9 = first_child(fragment_6);
+  var fragment_8 = comment();
+  var node_12 = first_child(fragment_8);
   {
-    var consequent_3 = ($$anchor2) => {
-      var fragment_7 = comment();
-      var node_10 = first_child(fragment_7);
-      snippet(node_10, () => get$2(snippet$1));
-      append($$anchor2, fragment_7);
+    var consequent_4 = ($$anchor2) => {
+      var fragment_9 = comment();
+      var node_13 = first_child(fragment_9);
+      snippet(node_13, () => get$2(snippet$1));
+      append($$anchor2, fragment_9);
     };
-    if_block(node_9, ($$render) => {
-      if (get$2(snippet$1)) $$render(consequent_3);
+    if_block(node_12, ($$render) => {
+      if (get$2(snippet$1)) $$render(consequent_4);
     });
   }
-  append($$anchor, fragment_6);
+  append($$anchor, fragment_8);
   return pop($$exports);
 }
+delegate(["change"]);
 create_custom_element(
   InputAndLabel,
   {

package/dist-js/lib/models/cart/cart.svelte.d.ts

@@ -5,6 +5,7 @@ export declare function createCart(products?: Product[], contingent?: number): {
     coupons: string[];
     contingent: number;
     uid: string;
+    paymentModeId: string | undefined;
     readonly nonEmptyItems: CartItem[];
     readonly totalPriceCents: number;
     readonly totalQuantity: number;
@@ -55,6 +56,7 @@ export declare function createMainCart(): {
     coupons: string[];
     contingent: number;
     uid: string;
+    paymentModeId: string | undefined;
     readonly nonEmptyItems: CartItem[];
     readonly totalPriceCents: number;
     readonly totalQuantity: number;

package/dist-js/lib/stores/shop.svelte.d.ts

@@ -77,6 +77,7 @@ export declare class Shop {
         coupons: string[];
         contingent: number;
         uid: string;
+        paymentModeId: string | undefined;
         readonly nonEmptyItems: import('../models/cart/types').CartItem[];
         readonly totalPriceCents: number;
         readonly totalQuantity: number;
@@ -170,12 +171,10 @@ export declare class Shop {
         };
     };
     get payment_modes(): {
-        [key: string]: {
-            id: number;
-            name: string;
-            icons: string[];
-        };
-    };
+        id: number;
+        name: string;
+        icons: string[];
+    }[];
     get content(): {
         [key: string]: string;
     };

package/package.json

@@ -4,7 +4,7 @@
     "name": "Giantmonkey GmbH"
   },
   "license": "MIT",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "type": "module",
   "main": "./dist-js/gomus-webcomponents.iife.js",
   "module": "./dist-js/gomus-webcomponents.iife.js",