@gomusdev/web-components 1.56.1 → 1.57.1

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

@@ -3536,23 +3536,23 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   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;
               }
@@ -3581,11 +3581,11 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       }
       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) {
@@ -3762,9 +3762,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       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) {
@@ -3845,10 +3845,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       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) {
@@ -4840,11 +4840,11 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       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 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       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 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     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 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         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 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     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 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   function defaultValue(fieldType) {
     if (fieldType === "checkbox") {
       return false;
+    } else if (fieldType === "file") {
+      return null;
     } else {
       return "";
     }
@@ -16252,7 +16323,8 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
             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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
                     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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
           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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       }));
       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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     };
     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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
             () => 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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
               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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       select,
       radio,
       date: date2,
+      file,
       textarea: null,
       paymentMode
     };
@@ -31781,6 +31945,19 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }));
     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 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
         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"]);