@gomusdev/web-components 1.56.1 → 1.57.0

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

@@ -12635,6 +12635,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 +12750,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 +16041,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 +16249,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 +16294,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 +16304,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 +16412,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 +16575,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 +17035,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 +17191,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 +17220,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 +31230,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 +31375,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 +31535,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 +31597,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 +31677,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 +31695,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 +31712,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 +31773,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 +31822,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 +31832,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 +31860,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 +31904,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       select,
       radio,
       date: date2,
+      file,
       textarea: null,
       paymentMode
     };
@@ -31781,6 +31926,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 +31976,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"]);

package/dist-js/gomus-webcomponents.js

@@ -12635,6 +12635,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 +12750,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 +16041,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 +16249,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 +16294,8 @@ function createField(data, required) {
 function defaultValue(fieldType) {
   if (fieldType === "checkbox") {
     return false;
+  } else if (fieldType === "file") {
+    return null;
   } else {
     return "";
   }
@@ -16252,7 +16304,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 +16412,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 +16575,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 +17035,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 +17191,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 +17220,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 +31230,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 +31375,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 +31535,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 +31597,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 +31677,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 +31695,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 +31712,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 +31773,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 +31822,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 +31832,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 +31860,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 +31904,7 @@ function InputAndLabel($$anchor, $$props) {
     select,
     radio,
     date: date2,
+    file,
     textarea: null,
     paymentMode
   };
@@ -31781,6 +31926,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 +31976,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"]);

package/dist-js/src/components/annualTicketPersonalization/specs/AnnualTicketPersonalizationFormPhoto.spec.d.ts

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

package/dist-js/src/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' | 'paymentMode';
+export type FieldType = 'input' | 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'checkbox' | 'select' | 'radio' | 'textarea' | 'date' | 'file' | 'paymentMode';
 export interface Field {
     key: string;
     apiKey?: string;
@@ -11,7 +11,7 @@ export interface Field {
         value: string | number;
         label: string;
     }[];
-    value: string | boolean;
+    value: string | boolean | File | null;
     required: boolean;
     description: string | undefined;
     autocomplete: FullAutoFill;

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

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

package/dist-js/src/components/forms/ui/generic/FormDetails.svelte.d.ts

@@ -9,7 +9,7 @@ export declare class FormDetails {
      */
     successMessage: string | undefined;
     get formData(): Record<string, string | number | boolean>;
-    fieldValue(key: string): string | boolean | undefined;
+    fieldValue(key: string): string | boolean | File | null | undefined;
     get apiErrors(): string[] | Record<string, string[]>;
     /**
      * Sets API errors for the current instance.

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

@@ -6,7 +6,7 @@ import { Auth } from '../../../lib/stores/auth.svelte.ts';
 import { User } from '../../../lib/stores/user.svelte.ts';
 import { OpenApiClient } from '@gomus/api';
 import { TicketsAndQuotasParams, TicketsCalendarParams, TicketsParams } from '@gomus/api/lib/types.ts';
-import { CapacitiesResponse, CheckoutParams, CheckoutResponse, Country, Event, Exhibition, FinalizePersonalizationParams, FinalizePersonalizationResponse, LocaleOptions, Merchandise, Museum, PasswordResetResponse, PasswordUpdateResponse, PostCartParams, PostCartResponse, Salutation, ShopType, SignInParams, SignInResponse, SignUpParams, SignUpResponse, Tour, ValidateTokenResponse } from '@gomus/types';
+import { CapacitiesResponse, CheckoutParams, CheckoutResponse, Country, Event, Exhibition, FinalizePersonalizationParams, FinalizePersonalizationResponse, LocaleOptions, Merchandise, Museum, PasswordResetResponse, PasswordUpdateResponse, PostCartParams, PostCartResponse, Salutation, ShopType, SignInParams, SignInResponse, SignUpParams, SignUpResponse, Tour, UploadPersonalizationPhotoResponse, ValidateTokenResponse } from '@gomus/types';
 export type ShopKind = 'angular' | 'jmb';
 export declare class Shop {
     #private;
@@ -489,6 +489,7 @@ export declare class Shop {
         ticket_sales: import('@gomus/types').components["schemas"]["ticket_sale_personalization"][];
     } | undefined;
     finalizePersonalizations(token: string, params: FinalizePersonalizationParams): Promise<FinalizePersonalizationResponse>;
+    uploadPersonalizationPhoto(token: string, personalizationId: number, file: File): Promise<UploadPersonalizationPhotoResponse>;
     /**
      * Returns a reactive value that will contain the fetched data, no need to await.
      *
@@ -802,6 +803,10 @@ export declare class Shop {
         params?: Record<string, unknown>;
         requiredFields?: string[];
     }): Promise<T>;
+    apiUpload<T>(path: string, options: {
+        body: FormData;
+        params?: Record<string, unknown>;
+    }): Promise<T>;
     apiCall<T>(path: string, options: {
         method: 'POST' | 'PUT' | 'DELETE';
         body: Record<string, any>;

package/dist-js/src/mocks/MSWMocks.d.ts

@@ -10,6 +10,9 @@ export declare const MSWMocks: {
     mockSalutations: () => void;
     mockLocales: () => void;
     mockAnnualOrder: () => void;
+    mockAnnualOrderWithRequiredPhoto: () => void;
+    mockPersonalizationPhotoUpload: () => void;
+    mockPersonalizationPhotoUploadFailure: () => void;
     mockCountries: () => void;
     mockPersonalizationFormSubmit: () => void;
     tickets: {

package/package.json

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