@gomusdev/web-components 1.56.1 → 1.57.1

package/dist-js/gomus-webcomponents.js

@@ -3534,23 +3534,23 @@ function index$1(_, i) {
 function pause_effects(state2, to_destroy, controlled_anchor) {
   var transitions = [];
   var length = to_destroy.length;
-  var group;
+  var group2;
   var remaining = to_destroy.length;
   for (var i = 0; i < length; i++) {
     let effect2 = to_destroy[i];
     pause_effect(
       effect2,
       () => {
-        if (group) {
-          group.pending.delete(effect2);
-          group.done.add(effect2);
-          if (group.pending.size === 0) {
+        if (group2) {
+          group2.pending.delete(effect2);
+          group2.done.add(effect2);
+          if (group2.pending.size === 0) {
             var groups = (
               /** @type {Set<EachOutroGroup>} */
               state2.outrogroups
             );
-            destroy_effects(array_from(group.done));
-            groups.delete(group);
+            destroy_effects(array_from(group2.done));
+            groups.delete(group2);
             if (groups.size === 0) {
               state2.outrogroups = null;
             }
@@ -3579,11 +3579,11 @@ function pause_effects(state2, to_destroy, controlled_anchor) {
     }
     destroy_effects(to_destroy, !fast_path);
   } else {
-    group = {
+    group2 = {
       pending: new Set(to_destroy),
       done: /* @__PURE__ */ new Set()
     };
-    (state2.outrogroups ??= /* @__PURE__ */ new Set()).add(group);
+    (state2.outrogroups ??= /* @__PURE__ */ new Set()).add(group2);
   }
 }
 function destroy_effects(to_destroy, remove_dom = true) {
@@ -3760,9 +3760,9 @@ function reconcile(state2, array2, anchor, flags2, get_key) {
     effect2 = /** @type {EachItem} */
     items.get(key).e;
     if (state2.outrogroups !== null) {
-      for (const group of state2.outrogroups) {
-        group.pending.delete(effect2);
-        group.done.delete(effect2);
+      for (const group2 of state2.outrogroups) {
+        group2.pending.delete(effect2);
+        group2.done.delete(effect2);
       }
     }
     if ((effect2.f & EFFECT_OFFSCREEN) !== 0) {
@@ -3843,10 +3843,10 @@ function reconcile(state2, array2, anchor, flags2, get_key) {
     current = skip_to_branch(effect2.next);
   }
   if (state2.outrogroups !== null) {
-    for (const group of state2.outrogroups) {
-      if (group.pending.size === 0) {
-        destroy_effects(array_from(group.done));
-        state2.outrogroups?.delete(group);
+    for (const group2 of state2.outrogroups) {
+      if (group2.pending.size === 0) {
+        destroy_effects(array_from(group2.done));
+        state2.outrogroups?.delete(group2);
       }
     }
     if (state2.outrogroups.size === 0) {
@@ -4839,11 +4839,11 @@ function bind_checked(input, get2, set2 = get2) {
     input.checked = Boolean(value);
   });
 }
-function get_binding_group_value(group, __value, checked) {
+function get_binding_group_value(group2, __value, checked) {
   var value = /* @__PURE__ */ new Set();
-  for (var i = 0; i < group.length; i += 1) {
-    if (group[i].checked) {
-      value.add(group[i].__value);
+  for (var i = 0; i < group2.length; i += 1) {
+    if (group2[i].checked) {
+      value.add(group2[i].__value);
     }
   }
   if (!checked) {
@@ -5618,6 +5618,15 @@ const isNumber = (value) => {
     return false;
   }
 };
+const group = (array2, getGroupId) => {
+  return array2.reduce((acc, item) => {
+    const groupId = getGroupId(item);
+    if (!acc[groupId])
+      acc[groupId] = [];
+    acc[groupId].push(item);
+    return acc;
+  }, {});
+};
 const boil = (array2, compareFunc) => {
   if (!array2 || (array2.length ?? 0) === 0)
     return null;
@@ -5633,10 +5642,24 @@ const sort = (array2, getter, desc = false) => {
   const dsc = (a2, b) => getter(b) - getter(a2);
   return array2.slice().sort(desc === true ? dsc : asc);
 };
+function max$2(array2, getter) {
+  const get2 = getter ?? ((v) => v);
+  return boil(array2, (a2, b) => get2(a2) > get2(b) ? a2 : b);
+}
 function min$2(array2, getter) {
-  const get2 = ((v) => v);
+  const get2 = getter ?? ((v) => v);
   return boil(array2, (a2, b) => get2(a2) < get2(b) ? a2 : b);
 }
+const unique = (array2, toKey) => {
+  const valueMap = array2.reduce((acc, item) => {
+    const key = item;
+    if (acc[key])
+      return acc;
+    acc[key] = item;
+    return acc;
+  }, {});
+  return Object.values(valueMap);
+};
 const iterate = (count, func, initValue) => {
   let value = initValue;
   for (let i = 1; i <= count; i++) {
@@ -11154,18 +11177,14 @@ function createQuotaManager(quotas) {
       return totalCap;
     },
     timeslotsOn(date2) {
-      const filtered = Object.values(
-        this.timeslots().filter((x) => x.timeSlot.startsWith(date2.toString())).reduce(
-          (acc, item) => {
-            if (!acc[item.timeSlot] || item.capacity < acc[item.timeSlot].capacity) {
-              acc[item.timeSlot] = item;
-            }
-            return acc;
-          },
-          {}
-        )
-      );
-      return filtered.sort((a2, b) => a2.timeSlot.localeCompare(b.timeSlot));
+      const rows = this.timeslots().filter((x) => x.timeSlot.startsWith(date2.toString()));
+      const bySlot = group(rows, (r2) => r2.timeSlot);
+      const result = Object.values(bySlot).map((slotRows) => {
+        const tickets = unique(slotRows.flatMap((r2) => r2.tickets));
+        const bindingPerTicket = tickets.map((t) => min$2(slotRows.filter((r2) => r2.tickets.includes(t)), (r2) => r2.capacity)).filter((r2) => r2 !== null);
+        return max$2(bindingPerTicket, (r2) => r2.capacity) ?? slotRows[0];
+      });
+      return result.sort((a2, b) => a2.timeSlot.localeCompare(b.timeSlot));
     }
   };
   return ret;
@@ -12635,6 +12654,14 @@ class Shop {
   finalizePersonalizations(token, params) {
     return this.apiPost("/api/v4/annual/personalization/finalize", { body: params, params: { query: { token } } });
   }
+  uploadPersonalizationPhoto(token, personalizationId, file) {
+    const fd = new FormData();
+    fd.append("file", file);
+    return this.apiUpload("/api/v4/annual/personalizations/{id}/upload", {
+      body: fd,
+      params: { path: { id: personalizationId }, query: { token } }
+    });
+  }
   /**
    * Returns a reactive value that will contain the fetched data, no need to await.
    *
@@ -12742,6 +12769,16 @@ class Shop {
   async apiDELETE(path, options) {
     return this.apiCall(path, { method: "DELETE", ...options });
   }
+  async apiUpload(path, options) {
+    this.#ensureApi();
+    const { body, params = {} } = options;
+    const ret = await this.client.POST(path, {
+      body,
+      params: assign(this.#defaultApiParams, { params }).params,
+      bodySerializer: (b) => b
+    });
+    return ret;
+  }
   async apiCall(path, options) {
     this.#ensureApi();
     const { body, params = {}, requiredFields } = options;
@@ -16023,6 +16060,28 @@ function refine(fn, _params = {}) {
 function superRefine(fn) {
   return /* @__PURE__ */ _superRefine(fn);
 }
+function _instanceof(cls, params = {}) {
+  const inst = new ZodCustom({
+    type: "custom",
+    check: "custom",
+    fn: (data) => data instanceof cls,
+    abort: true,
+    ...normalizeParams(params)
+  });
+  inst._zod.bag.Class = cls;
+  inst._zod.check = (payload) => {
+    if (!(payload.value instanceof cls)) {
+      payload.issues.push({
+        code: "invalid_type",
+        expected: cls.name,
+        input: payload.value,
+        inst,
+        path: [...inst._zod.def.path ?? []]
+      });
+    }
+  };
+  return inst;
+}
 var allFields = {
   salutation: {
     key: "salutation",
@@ -16209,6 +16268,16 @@ var allFields = {
     description: "",
     autocomplete: "off"
   },
+  photo: {
+    key: "photo",
+    apiKey: "file",
+    type: "file",
+    label: "ticket.annual.personalization.form.photo",
+    placeholder: "",
+    description: "",
+    autocomplete: "off",
+    validator: _instanceof(File)
+  },
   paymentMode: {
     key: "paymentMode",
     apiKey: "payment_mode_id",
@@ -16244,6 +16313,8 @@ function createField(data, required) {
 function defaultValue(fieldType) {
   if (fieldType === "checkbox") {
     return false;
+  } else if (fieldType === "file") {
+    return null;
   } else {
     return "";
   }
@@ -16252,7 +16323,8 @@ function validateField(field) {
   field.errors = [];
   if (!field.validator) {
     if (field.required) {
-      if (field.value === false || field.value === "") field.errors = field.value ? [] : [`common.fieldErrors.required`];
+      const empty2 = field.value === false || field.value === "" || field.value === null || field.value === void 0;
+      if (empty2) field.errors = [`common.fieldErrors.required`];
     }
     return;
   }
@@ -16359,6 +16431,33 @@ function AnnualTicketPersonalizationForm($$anchor, $$props) {
     if (!isValid2) {
       return;
     }
+    if (details.ticketSale?.photo_mandatory === "mandatory") {
+      const uploads = personalizationForms.map(async (detail, index2) => {
+        const personalizationId = details.ticketSale.personalizations[index2].id;
+        const photoField = detail.fields.find((f) => f.key === "photo");
+        const file = photoField?.value;
+        if (!(file instanceof File)) {
+          return {
+            ok: false,
+            error: "ticket.annual.personalization.photo.missing"
+          };
+        }
+        const result2 = await shop.uploadPersonalizationPhoto(token(), personalizationId, file);
+        if (result2.error) {
+          return {
+            ok: false,
+            error: result2.error.error ?? "ticket.annual.personalization.photo.upload_failed"
+          };
+        }
+        return { ok: true, error: "" };
+      });
+      const results = await Promise.all(uploads);
+      const firstFailure = results.find((r2) => !r2.ok);
+      if (firstFailure) {
+        form.details.apiErrors = [firstFailure.error];
+        return;
+      }
+    }
     const body = {
       personalization: {
         ticket_sale_id: details.ticketSaleId,
@@ -16495,7 +16594,7 @@ class FormDetails {
       if (!Number.isNaN(+x) && x.trim() !== "") return +x;
       return x;
     }
-    const validFields = this.fields.filter((f) => f !== void 0).filter((f) => f.value !== "");
+    const validFields = this.fields.filter((f) => f !== void 0).filter((f) => f.type !== "file").filter((f) => f.value !== "");
     const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
     return ret;
   }
@@ -16955,8 +17054,8 @@ var root_5$2 = /* @__PURE__ */ from_html(`<s class="go-cart-item-price-original"
 var root_6$3 = /* @__PURE__ */ from_html(`<span class="go-cart-item-price-discounted"> </span>`);
 var root_7$4 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_9$4 = /* @__PURE__ */ from_html(`<option> </option>`);
-var root_8$2 = /* @__PURE__ */ from_html(`<select class="go-cart-item-select"></select>`);
-var root_10$2 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button>⨉</button></li>`);
+var root_8$3 = /* @__PURE__ */ from_html(`<select class="go-cart-item-select"></select>`);
+var root_10$1 = /* @__PURE__ */ from_html(`<li class="go-cart-item-remove"><button>⨉</button></li>`);
 var root_1$i = /* @__PURE__ */ from_html(`<article class="go-cart-item-content"><ul><li class="go-cart-item-title-container"><!></li> <li class="go-cart-item-price"><!></li> <li class="go-cart-item-count"><!></li> <!> <li class="go-cart-item-sum"> </li></ul></article>`);
 function Item$1($$anchor, $$props) {
   push($$props, true);
@@ -17111,7 +17210,7 @@ function Item$1($$anchor, $$props) {
           append($$anchor3, span_2);
         };
         var alternate_2 = ($$anchor3) => {
-          var select = root_8$2();
+          var select = root_8$3();
           select.__change = (e) => update(e.target);
           each(select, 21, () => generateQuantityOptions(get$2(capacity).min, get$2(capacity).max, { floor: 1 }), (q) => q.value, ($$anchor4, q) => {
             var option2 = root_9$4();
@@ -17140,7 +17239,7 @@ function Item$1($$anchor, $$props) {
       var node_5 = sibling(li_2, 2);
       {
         var consequent_4 = ($$anchor3) => {
-          var li_3 = root_10$2();
+          var li_3 = root_10$1();
           var button = child(li_3);
           button.__click = del;
           reset(li_3);
@@ -31150,7 +31249,7 @@ create_custom_element(Date_picker_trigger, { ref: {}, onkeydown: {} }, [], [], {
 var root_4$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_9$2 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 var root_11$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_8$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_8$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$b = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function DatePicker_1($$anchor, $$props) {
   push($$props, true);
@@ -31295,7 +31394,7 @@ function DatePicker_1($$anchor, $$props) {
                   const children = ($$anchor6, $$arg0) => {
                     let months = () => $$arg0?.().months;
                     let weekdays = () => $$arg0?.().weekdays;
-                    var fragment_8 = root_8$1();
+                    var fragment_8 = root_8$2();
                     var node_10 = first_child(fragment_8);
                     component(node_10, () => Calendar_header, ($$anchor7, DatePicker_Header) => {
                       DatePicker_Header($$anchor7, {
@@ -31455,17 +31554,19 @@ create_custom_element(
 var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidden="true">*</span>`);
 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(`<img src="" alt=""/> <option> </option>`, 1);
-var root_6$1 = /* @__PURE__ */ from_html(`<option disabled hidden="" selected> </option> <!>`, 1);
+var root_5 = /* @__PURE__ */ from_html(`<figure role="status" aria-live="polite"><img class="go-file-preview"/> <figcaption class="go-file-preview-caption"> </figcaption></figure>`);
+var root_4$3 = /* @__PURE__ */ from_html(`<label><!></label> <input/> <!>`, 1);
+var root_6$1 = /* @__PURE__ */ from_html(`<label><input/> <span class="go-checkbox-label"><!></span></label>`);
+var root_9$1 = /* @__PURE__ */ from_html(`<img src="" alt=""/> <option> </option>`, 1);
+var root_8$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_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>`);
+var root_7$2 = /* @__PURE__ */ from_html(`<label><!></label> <select><!></select>`, 1);
+var root_14 = /* @__PURE__ */ from_html(`<img style="width: 60px" aria-hidden="true"/>`);
+var root_13 = /* @__PURE__ */ from_html(`<span class="go-payment-mode-icons"></span>`);
+var root_12$1 = /* @__PURE__ */ from_html(`<label><input type="radio"/> <!></label>`);
+var root_11$2 = /* @__PURE__ */ from_html(`<fieldset role="radiogroup"><legend><!></legend> <!></fieldset>`);
+var root_17 = /* @__PURE__ */ from_html(`<label> <input/></label>`);
+var root_15 = /* @__PURE__ */ from_html(`<fieldset><legend><!></legend> <!></fieldset>`);
 function InputAndLabel($$anchor, $$props) {
   push($$props, true);
   const labelText = ($$anchor2) => {
@@ -31515,11 +31616,73 @@ function InputAndLabel($$anchor, $$props) {
     bind_value(input_1, () => field().value, ($$value) => field(field().value = $$value, true));
     append($$anchor2, fragment_1);
   };
-  const checkbox = ($$anchor2) => {
-    var label_2 = root_4$3();
-    var input_2 = child(label_2);
+  const file = ($$anchor2) => {
+    var fragment_2 = root_4$3();
+    var label_2 = first_child(fragment_2);
+    var node_2 = child(label_2);
+    labelText(node_2);
+    reset(label_2);
+    var input_2 = sibling(label_2, 2);
+    var event_handler = (e) => {
+      const files = e.currentTarget.files;
+      field(field().value = files && files[0] ? files[0] : null, true);
+      if (get$2(details)) get$2(details).validateField(field());
+      else field().validate();
+    };
     attribute_effect(
       input_2,
+      () => ({
+        ...get$2(fieldAttributes),
+        ...restProps,
+        class: inputClass(),
+        type: "file",
+        accept: "image/*",
+        name: field().key,
+        onchange: event_handler
+      }),
+      void 0,
+      void 0,
+      void 0,
+      void 0,
+      true
+    );
+    var node_3 = sibling(input_2, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var figure = root_5();
+        var img = child(figure);
+        var figcaption = sibling(img, 2);
+        var text_1 = child(figcaption, true);
+        reset(figcaption);
+        reset(figure);
+        template_effect(
+          ($0) => {
+            set_attribute(figure, "data-field-preview", field().key);
+            set_attribute(img, "src", get$2(filePreviewUrl));
+            set_attribute(img, "alt", $0);
+            set_text(text_1, field().value.name);
+          },
+          [
+            () => shop.t("forms.file.preview_alt") || "User uploaded photo"
+          ]
+        );
+        append($$anchor3, figure);
+      };
+      if_block(node_3, ($$render) => {
+        if (get$2(filePreviewUrl) && field().value instanceof File) $$render(consequent_1);
+      });
+    }
+    template_effect(() => {
+      set_class(label_2, 1, clsx(labelClass()));
+      set_attribute(label_2, "for", get$2(inputId));
+    });
+    append($$anchor2, fragment_2);
+  };
+  const checkbox = ($$anchor2) => {
+    var label_3 = root_6$1();
+    var input_3 = child(label_3);
+    attribute_effect(
+      input_3,
       () => ({
         ...get$2(fieldAttributes),
         ...restProps,
@@ -31533,17 +31696,17 @@ function InputAndLabel($$anchor, $$props) {
       void 0,
       true
     );
-    var span_1 = sibling(input_2, 2);
-    var node_2 = child(span_1);
-    labelText(node_2);
+    var span_1 = sibling(input_3, 2);
+    var node_4 = child(span_1);
+    labelText(node_4);
     reset(span_1);
-    reset(label_2);
+    reset(label_3);
     template_effect(() => {
-      set_class(label_2, 1, clsx(labelClass()));
-      set_attribute(label_2, "for", get$2(inputId));
+      set_class(label_3, 1, clsx(labelClass()));
+      set_attribute(label_3, "for", get$2(inputId));
     });
     bind_checked(
-      input_2,
+      input_3,
       () => {
         return field().value === true;
       },
@@ -31551,15 +31714,15 @@ function InputAndLabel($$anchor, $$props) {
         field(field().value = value, true);
       }
     );
-    append($$anchor2, label_2);
+    append($$anchor2, label_3);
   };
   const select = ($$anchor2) => {
-    var fragment_2 = root_5();
-    var label_3 = first_child(fragment_2);
-    var node_3 = child(label_3);
-    labelText(node_3);
-    reset(label_3);
-    var select_1 = sibling(label_3, 2);
+    var fragment_3 = root_7$2();
+    var label_4 = first_child(fragment_3);
+    var node_5 = child(label_4);
+    labelText(node_5);
+    reset(label_4);
+    var select_1 = sibling(label_4, 2);
     attribute_effect(select_1, () => ({
       ...get$2(fieldAttributes),
       ...restProps,
@@ -31568,45 +31731,45 @@ function InputAndLabel($$anchor, $$props) {
     }));
     customizable_select(select_1, () => {
       var anchor = child(select_1);
-      var fragment_3 = select_content();
-      var node_4 = first_child(fragment_3);
+      var fragment_4 = select_content();
+      var node_6 = first_child(fragment_4);
       {
-        var consequent_1 = ($$anchor3) => {
-          var fragment_4 = root_6$1();
-          var option_1 = first_child(fragment_4);
-          var text_1 = child(option_1, true);
+        var consequent_2 = ($$anchor3) => {
+          var fragment_5 = root_8$1();
+          var option_1 = first_child(fragment_5);
+          var text_2 = 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);
+          var node_7 = sibling(option_1, 2);
+          each(node_7, 17, () => field().options(), (option2) => option2.value, ($$anchor4, option2) => {
+            var fragment_6 = root_9$1();
+            var option_2 = sibling(first_child(fragment_6), 2);
+            var text_3 = child(option_2, true);
             reset(option_2);
             var option_2_value = {};
             template_effect(() => {
-              set_text(text_2, get$2(option2).label);
+              set_text(text_3, 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, fragment_6);
           });
-          template_effect(($0) => set_text(text_1, $0), [() => shop.t("common.choose")]);
-          append($$anchor3, fragment_4);
+          template_effect(($0) => set_text(text_2, $0), [() => shop.t("common.choose")]);
+          append($$anchor3, fragment_5);
         };
-        if_block(node_4, ($$render) => {
-          if (field().options) $$render(consequent_1);
+        if_block(node_6, ($$render) => {
+          if (field().options) $$render(consequent_2);
         });
       }
-      append(anchor, fragment_3);
+      append(anchor, fragment_4);
     });
     template_effect(() => {
-      set_class(label_3, 1, clsx(labelClass()));
-      set_attribute(label_3, "for", get$2(inputId));
+      set_class(label_4, 1, clsx(labelClass()));
+      set_attribute(label_4, "for", get$2(inputId));
     });
     bind_select_value(select_1, () => field().value, ($$value) => field(field().value = $$value, true));
-    append($$anchor2, fragment_2);
+    append($$anchor2, fragment_3);
   };
   const date2 = ($$anchor2) => {
     DatePicker_1($$anchor2, {
@@ -31629,48 +31792,48 @@ function InputAndLabel($$anchor, $$props) {
   };
   const paymentMode = ($$anchor2) => {
     const modes = /* @__PURE__ */ user_derived(() => shop.payment_modes ? Object.values(shop.payment_modes) : []);
-    var fieldset = root_9$1();
+    var fieldset = root_11$2();
     var legend = child(fieldset);
-    var node_6 = child(legend);
-    labelText(node_6);
+    var node_8 = child(legend);
+    labelText(node_8);
     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 = () => {
+    var node_9 = sibling(legend, 2);
+    each(node_9, 17, () => get$2(modes), (mode) => mode.id, ($$anchor3, mode) => {
+      var label_5 = root_12$1();
+      var input_4 = child(label_5);
+      remove_input_defaults(input_4);
+      input_4.__change = () => {
         field(field().value = String(get$2(mode).id), true);
       };
-      var node_8 = sibling(input_3, 2);
+      var node_10 = sibling(input_4, 2);
       {
-        var consequent_2 = ($$anchor4) => {
-          var span_2 = root_11$2();
+        var consequent_3 = ($$anchor4) => {
+          var span_2 = root_13();
           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();
+            var img_1 = root_14();
             template_effect(() => {
-              set_class(img, 1, clsx(icon));
-              set_attribute(img, "src", get$2(url));
-              set_attribute(img, "alt", icon + " icon");
+              set_class(img_1, 1, clsx(icon));
+              set_attribute(img_1, "src", get$2(url));
+              set_attribute(img_1, "alt", icon + " icon");
             });
-            append($$anchor5, img);
+            append($$anchor5, img_1);
           });
           reset(span_2);
           append($$anchor4, span_2);
         };
-        if_block(node_8, ($$render) => {
-          if (get$2(mode).icons.length > 0) $$render(consequent_2);
+        if_block(node_10, ($$render) => {
+          if (get$2(mode).icons.length > 0) $$render(consequent_3);
         });
       }
-      reset(label_4);
+      reset(label_5);
       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);
+          set_attribute(input_4, "name", field().key);
+          set_value(input_4, $0);
+          set_checked(input_4, $1);
+          set_attribute(input_4, "hidden", get$2(modes).length === 1);
+          set_attribute(input_4, "aria-label", $2);
         },
         [
           () => String(get$2(mode).id),
@@ -31678,7 +31841,7 @@ function InputAndLabel($$anchor, $$props) {
           () => shop.t(`cart.paymentMode.ariaLabel.${get$2(mode).name.toLowerCase()}`)
         ]
       );
-      append($$anchor3, label_4);
+      append($$anchor3, label_5);
     });
     reset(fieldset);
     template_effect(() => {
@@ -31688,22 +31851,22 @@ function InputAndLabel($$anchor, $$props) {
     append($$anchor2, fieldset);
   };
   const radio = ($$anchor2) => {
-    var fieldset_1 = root_13();
+    var fieldset_1 = root_15();
     var legend_1 = child(fieldset_1);
-    var node_9 = child(legend_1);
-    labelText(node_9);
+    var node_11 = child(legend_1);
+    labelText(node_11);
     reset(legend_1);
-    var node_10 = sibling(legend_1, 2);
+    var node_12 = sibling(legend_1, 2);
     {
-      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);
+      var consequent_4 = ($$anchor3) => {
+        var fragment_8 = comment();
+        var node_13 = first_child(fragment_8);
+        each(node_13, 17, () => field().options, index$1, ($$anchor4, option2) => {
+          var label_6 = root_17();
+          var text_4 = child(label_6);
+          var input_5 = sibling(text_4);
           attribute_effect(
-            input_4,
+            input_5,
             () => ({
               ...get$2(fieldAttributes),
               ...restProps,
@@ -31716,19 +31879,19 @@ function InputAndLabel($$anchor, $$props) {
             void 0,
             true
           );
-          reset(label_5);
+          reset(label_6);
           template_effect(() => {
-            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) ?? ""} `);
+            set_class(label_6, 1, clsx(labelClass()));
+            set_attribute(label_6, "for", get$2(inputId) + get$2(option2));
+            set_text(text_4, `${get$2(option2) ?? ""} `);
           });
-          bind_value(input_4, () => field().value, ($$value) => field(field().value = $$value, true));
-          append($$anchor4, label_5);
+          bind_value(input_5, () => field().value, ($$value) => field(field().value = $$value, true));
+          append($$anchor4, label_6);
         });
-        append($$anchor3, fragment_7);
+        append($$anchor3, fragment_8);
       };
-      if_block(node_10, ($$render) => {
-        if (field().options) $$render(consequent_3);
+      if_block(node_12, ($$render) => {
+        if (field().options) $$render(consequent_4);
       });
     }
     reset(fieldset_1);
@@ -31760,6 +31923,7 @@ function InputAndLabel($$anchor, $$props) {
     select,
     radio,
     date: date2,
+    file,
     textarea: null,
     paymentMode
   };
@@ -31781,6 +31945,19 @@ function InputAndLabel($$anchor, $$props) {
   }));
   let label = /* @__PURE__ */ user_derived(() => shop.t(field().label) || field().label);
   const CDN_PATH = `https://cdn.shop.platform.gomus.de/`;
+  let filePreviewUrl = /* @__PURE__ */ state(null);
+  user_effect(() => {
+    const value = field().value;
+    if (value instanceof File && value.type.startsWith("image/")) {
+      const url = URL.createObjectURL(value);
+      set(filePreviewUrl, url, true);
+      return () => {
+        URL.revokeObjectURL(url);
+        set(filePreviewUrl, null);
+      };
+    }
+    set(filePreviewUrl, null);
+  });
   var $$exports = {
     get field() {
       return field();
@@ -31818,20 +31995,20 @@ function InputAndLabel($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment_8 = comment();
-  var node_12 = first_child(fragment_8);
+  var fragment_9 = comment();
+  var node_14 = first_child(fragment_9);
   {
-    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);
+    var consequent_5 = ($$anchor2) => {
+      var fragment_10 = comment();
+      var node_15 = first_child(fragment_10);
+      snippet(node_15, () => get$2(snippet$1));
+      append($$anchor2, fragment_10);
     };
-    if_block(node_12, ($$render) => {
-      if (get$2(snippet$1)) $$render(consequent_4);
+    if_block(node_14, ($$render) => {
+      if (get$2(snippet$1)) $$render(consequent_5);
     });
   }
-  append($$anchor, fragment_8);
+  append($$anchor, fragment_9);
   return pop($$exports);
 }
 delegate(["change"]);