@gomusdev/web-components 1.12.0 → 1.13.0

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

@@ -13,13 +13,13 @@ export declare class Forms {
     static defineForm(options: defineFormOptions): void;
     static defineFields(fields: Record<string, FieldInit>): void;
     static setRequiredApiKeys(formId: string, requiredApiKeys: string[]): void;
-    static getRequiredApiKeys(formId: string): string[];
     static createField(key: string, required: boolean): Field;
     static getFormFields(formId: string): any;
     static getFieldInit(key: string): any;
 }
 /**
  * Calculates the number of fields that are mounted and have errors.
+ * Also validates that confirmation fields match their corresponding fields.
  *
  * @param {Field[] | undefined} fields - The list of fields to evaluate. Each field should have a `mounted` and an `errors` property.
  * @return {number} The count of fields that are mounted and contain errors. Returns 0 if no fields are provided.

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

@@ -5,8 +5,6 @@ export declare class FormDetails {
     form: HTMLFormElement;
     isValid: boolean;
     get formData(): any;
-    ensureApiRequiredFields(): boolean;
-    get requiredApiKeys(): string[];
     get apiErrors(): string[] | Record<string, string[]>;
     /**
      * Sets API errors for the current instance.
@@ -14,6 +12,8 @@ export declare class FormDetails {
      * @param {string[] | Record<string, string[]>} errors - Errors passed as an array or an object where keys are API field keys and values are arrays of error messages. If an array is provided, it assigns the errors directly. If an object is provided, it maps the errors to the respective fields based on their API keys.
      */
     set apiErrors(errors: string[] | Record<string, string[]>);
+    validateForm(): void;
+    validateField(field: Field): void;
     addField(field: Field): void;
     /**
      * The list of fields associated with form in the config.

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

@@ -5447,6 +5447,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     return function(host) {
       if (host) {
         const container = proxy({ data: void 0 });
+        if (!host.isConnected) {
+          console.error("(createGetDetails) Host is not mounted");
+          return void 0;
+        }
         host.dispatchEvent(new CustomEvent(KEY2, { detail: container, bubbles: true }));
         return container.data;
       } else {
@@ -6579,6 +6583,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         throw new Error("Unhandled shop type: " + never);
     }
   };
+  function isEmpty(value) {
+    return value === null || value === void 0 || typeof value === "string" && value.trim() === "";
+  }
+  function validateRequiredFields(body, requiredFields) {
+    const errors2 = {};
+    if (!requiredFields || requiredFields.length === 0) {
+      return errors2;
+    }
+    for (const field of requiredFields) {
+      if (!(field in body) || isEmpty(body[field])) {
+        errors2[field] = [`Field '${field}' is required and cannot be empty`];
+      }
+    }
+    return errors2;
+  }
+  function validateApiPostBody(body, requiredFields) {
+    return validateRequiredFields(body, requiredFields);
+  }
   var util;
   (function(util2) {
     util2.assertEqual = (val) => val;
@@ -11854,7 +11876,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return this.fetchAndCache(TICKETS_ENDPOINT, `tickets-${JSON.stringify(params)}`, "tickets", { cache: 60, query: params });
     }
     signIn(params) {
-      return this.apiPost(SIGN_IN_ENDPOINT, { body: params });
+      return this.apiPost(SIGN_IN_ENDPOINT, { body: params, requiredFields: ["email", "password"] });
     }
     signUp(params, asGuest = false) {
       const defaultParams = {
@@ -11865,10 +11887,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         level: asGuest ? CustomerLevels.SHOP_GUEST : CustomerLevels.SHOP
       };
       params = assign(defaultParams, params);
-      return this.apiPost(SIGN_UP_ENDPOINT, { body: params });
+      let requiredFields = [
+        "name",
+        //first name
+        "surname",
+        "email",
+        "email_confirmation",
+        "terms"
+      ];
+      if (!asGuest) requiredFields.push("password", "password_confirmation");
+      return this.apiPost(SIGN_UP_ENDPOINT, { body: params, requiredFields });
     }
     checkout(params) {
-      return this.apiPost(`/api/v4/orders`, { body: params });
+      return this.apiPost(`/api/v4/orders`, { body: params, requiredFields: ["items", "total"] });
     }
     order(token) {
       return this.fetchAndCache("/api/v4/orders/{id}", `order-${token}`, "order", { path: { id: token } });
@@ -11877,7 +11908,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return this.fetchAndCache("/api/v4/annual/order", `annual-order-${token}`, "order", { query: { token } });
     }
     finalizePersonalizations(token, params) {
-      return this.apiPost("/api/v4/annual/personalization/finalize", { body: params }, { query: { token } });
+      return this.apiPost("/api/v4/annual/personalization/finalize", { body: params, params: { query: { token } } });
     }
     /**
      * Returns a reactive value that will contain the fetched data, no need to await.
@@ -11951,8 +11982,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         }
       };
     }
-    async apiPost(path, { body }, params = {}) {
+    /**
+     * Sends a POST request to the specified API endpoint.
+     *
+     * @param {string} path - The API endpoint path to make the POST request.
+     * @param {Object} options - The options for the POST request.
+     * @param {Record<string, any>} options.body - The body of the POST request, containing the data to be sent.
+     * @param {Record<string, unknown>} [options.params] - Optional query parameters to include in the request.
+     * @param {string[]} [options.requiredFields] - Optional list of required field names to validate in the body.
+     * @return {Promise<T>} A promise that resolves with the typed response of the POST request.
+     */
+    async apiPost(path, options) {
       this.#ensureApi();
+      const { body, params = {}, requiredFields } = options;
+      const validationErrors = validateApiPostBody(body, requiredFields);
+      if (Object.keys(validationErrors).length > 0) {
+        console.log("shop.apiPost: validationErrors", { validationErrors, body });
+        return { error: { errors: validationErrors } };
+      }
       const ret = await this.client.POST(path, { body, params: assign(this.#defaultApiParams, params) });
       return ret;
     }
@@ -14704,7 +14751,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   const _Forms = class _Forms {
     static defineForm(options) {
       go.defineConfig({ forms: { [options.id]: { fields: options.fields } } });
-      __privateGet(_Forms, _requiredApiKeysMap)[options.id] = options.requiredApiKeys || [];
     }
     static defineFields(fields) {
       go.defineConfig({ fields });
@@ -14712,9 +14758,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     static setRequiredApiKeys(formId, requiredApiKeys) {
       __privateGet(_Forms, _requiredApiKeysMap)[formId] = requiredApiKeys;
     }
-    static getRequiredApiKeys(formId) {
-      return __privateGet(_Forms, _requiredApiKeysMap)[formId];
-    }
     static createField(key, required) {
       const init2 = _Forms.getFieldInit(key);
       if (!init2) {
@@ -14779,9 +14822,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         },
         []
       );
-      personalizationForms.forEach((detail) => {
-        detail.fields.forEach((f) => {
-          f.validate();
+      personalizationForms.forEach((details2) => {
+        details2.fields.forEach((f) => {
+          details2.validateField(f);
         });
       });
       const isValid2 = iterate(
@@ -14929,18 +14972,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
       return ret;
     }
-    ensureApiRequiredFields() {
-      const formData = this.formData;
-      const missingKeys = this.requiredApiKeys.filter((k) => !(k in formData));
-      if (missingKeys.length > 0) {
-        console.error("(ensureApiRequiredFields) Missing required API keys: " + missingKeys.join(","));
-        return false;
-      }
-      return true;
-    }
-    get requiredApiKeys() {
-      return Forms.getRequiredApiKeys(this.formId);
-    }
     get apiErrors() {
       return get$2(this.#apiErrors);
     }
@@ -14967,6 +14998,23 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         field.apiErrors = value;
       }
     }
+    validateForm() {
+      get$2(this.#fields).forEach((f) => this.validateField(f));
+    }
+    validateField(field) {
+      field.validate();
+      if (field.apiKey === "password_confirmation") {
+        const passwordField = this.fields.find((f) => f.apiKey === "password");
+        if (!passwordField || passwordField && field.value !== passwordField.value) {
+          field.errors.push("Passwords do not match");
+        }
+      } else if (field.apiKey === "email_confirmation") {
+        const emailField = this.fields.find((f) => f.apiKey === "email");
+        if (!emailField || emailField && field.value !== emailField.value) {
+          field.errors.push("Emails do not match");
+        }
+      }
+    }
     addField(field) {
       get$2(this.#fields).push(field);
     }
@@ -15011,9 +15059,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     setDetails($$props.$$host, details);
     async function handleSubmit(event) {
       event.preventDefault();
-      details.fields.forEach((f) => {
-        f.validate();
-      });
+      details.validateForm();
       details?.form?.dispatchEvent(new Event("after-validation", event));
       if (details.isValid) {
         details?.form?.dispatchEvent(new Event("go-submit", event));
@@ -15074,7 +15120,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let form;
     Forms.defineForm({
       id: "signIn",
-      requiredApiKeys: ["email", "password"],
       fields: [
         { key: "email", required: true },
         { key: "password", required: true }
@@ -15085,7 +15130,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         throw new Error("(go-sign-in: form not found");
       }
       const result = await shop.signIn(form.details.formData);
-      form.details.ensureApiRequiredFields();
       if (result.data) {
         $$props.$$host.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
       } else {
@@ -15297,6 +15341,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let lastLS = "";
     setInterval(
       () => {
+        if (!localStorage) {
+          console.warn("(syncCartToLocalStorage) localStorage is not available");
+          return;
+        }
         let newLS = localStorage.getItem("go-cart");
         if (lastLS && lastLS !== newLS) {
           loadFromLocalStorage(cart2);
@@ -15560,13 +15608,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         { key: "email", required: true },
         { key: "confirmEmail", required: true },
         { key: "acceptTerms", required: true }
-      ],
-      requiredApiKeys: [
-        "firstName",
-        "lastName",
-        "email",
-        "confirmEmail",
-        "acceptTerms"
       ]
     });
     wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -27571,7 +27612,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     getSegmentProps() {
       const segmentValues = this.root.segmentValues;
       const placeholder = this.root.placeholder.current;
-      const isEmpty = segmentValues[this.part] === null;
+      const isEmpty2 = segmentValues[this.part] === null;
       let date2 = placeholder;
       if (segmentValues[this.part]) {
         date2 = placeholder.set({ [this.part]: Number.parseInt(segmentValues[this.part]) });
@@ -27579,9 +27620,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       const valueNow = date2[this.part];
       const valueMin = this.#getMin();
       const valueMax = this.#getMax();
-      let valueText = isEmpty ? "Empty" : `${valueNow}`;
+      let valueText = isEmpty2 ? "Empty" : `${valueNow}`;
       if (this.part === "hour" && "dayPeriod" in segmentValues && segmentValues.dayPeriod) {
-        valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
+        valueText = isEmpty2 ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
       }
       return {
         "aria-label": `${this.part}, `,
@@ -29822,7 +29863,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       reset(fieldset);
       append($$anchor2, fieldset);
     };
-    let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), restProps = /* @__PURE__ */ rest_props($$props, [
+    let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
       "$$slots",
       "$$events",
       "$$legacy",
@@ -29830,8 +29871,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       "field",
       "describedById",
       "labelClass",
-      "inputClass"
+      "inputClass",
+      "host"
     ]);
+    let details = /* @__PURE__ */ state(void 0);
+    onMount(async () => {
+      set(details, await pollUntilTruthy(() => getDetails(host())), true);
+    });
     const map = {
       input,
       text: input,
@@ -29851,7 +29897,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
     function onblur() {
       if (field().type == "checkbox") return;
-      if (field().value) field().validate();
+      if (field().value) if (get$2(details))
+        get$2(details).validateField(field());
+      else field().validate();
     }
     const fieldAttributes = /* @__PURE__ */ user_derived(() => ({
       id: get$2(inputId),
@@ -29889,6 +29937,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       set inputClass($$value) {
         inputClass($$value);
         flushSync();
+      },
+      get host() {
+        return host();
+      },
+      set host($$value) {
+        host($$value);
+        flushSync();
       }
     };
     var fragment_6 = comment();
@@ -29907,7 +29962,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     append($$anchor, fragment_6);
     return pop($$exports);
   }
-  create_custom_element(InputAndLabel, { field: {}, describedById: {}, labelClass: {}, inputClass: {} }, [], [], true);
+  create_custom_element(
+    InputAndLabel,
+    {
+      field: {},
+      describedById: {},
+      labelClass: {},
+      inputClass: {},
+      host: {}
+    },
+    [],
+    [],
+    true
+  );
   var root_1$6 = /* @__PURE__ */ from_html(`<span> </span>`);
   var root_3$3 = /* @__PURE__ */ from_html(`<li> </li>`);
   var root_2$5 = /* @__PURE__ */ from_html(`<ul class="go-field-errors" role="alert"></ul>`);
@@ -29939,7 +30006,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         // Track the value
       ).value;
       untrack(() => {
-        if (get$2(field)?.errors.length) get$2(field).validate();
+        if (get$2(field)?.errors.length) get$2(details).validateField(get$2(field));
       });
     });
     var $$exports = {
@@ -29985,6 +30052,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       get inputClass() {
         return inputClass();
       },
+      host: $$props.$$host,
       get field() {
         return get$2(field);
       },
@@ -30069,15 +30137,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root_1$4 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
   function ErrorsFeedback($$anchor, $$props) {
     push($$props, true);
-    let details = getDetails($$props.$$host);
+    let details = /* @__PURE__ */ state(void 0);
+    onMount(async () => {
+      set(details, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+    });
     user_effect(() => {
-      details?.form?.addEventListener("after-validation", () => {
-        set(errorsOnSubmit, errors(details?.fields), true);
+      get$2(details)?.form?.addEventListener("after-validation", () => {
+        set(errorsOnSubmit, errors(get$2(details)?.fields), true);
       });
     });
-    let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(details?.fields));
+    let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(get$2(details)?.fields));
     let errorsOnSubmit = /* @__PURE__ */ state(-1);
-    let generalApiErrors = /* @__PURE__ */ user_derived(() => details && isArray(details.apiErrors) && details.apiErrors.length > 0 ? details.apiErrors : []);
+    let generalApiErrors = /* @__PURE__ */ user_derived(() => get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0 ? get$2(details).apiErrors : []);
     var fragment = comment();
     var node = first_child(fragment);
     {
@@ -30101,7 +30172,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         {
           var consequent_1 = ($$anchor3) => {
             var ul = root_3$2();
-            each(ul, 21, () => details?.apiErrors, index$1, ($$anchor4, error) => {
+            each(ul, 21, () => get$2(details)?.apiErrors, index$1, ($$anchor4, error) => {
               var li = root_4$1();
               var text_1 = child(li, true);
               reset(li);
@@ -30112,7 +30183,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
             append($$anchor3, ul);
           };
           if_block(node_2, ($$render) => {
-            if (details && isArray(details.apiErrors) && details.apiErrors.length > 0) $$render(consequent_1);
+            if (get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0) $$render(consequent_1);
           });
         }
         var node_3 = sibling(node_2, 2);
@@ -30369,7 +30440,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       }
     });
     onMount(async () => {
-      set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+      try {
+        set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+      } catch (error) {
+        console.error("(IF) Error fetching form details:", error);
+        console.error("Stack trace:", error instanceof Error ? error.stack : "No stack trace available");
+      }
     });
     var $$exports = {
       get data() {

package/dist-js/gomus-webcomponents.js

@@ -5447,6 +5447,10 @@ function createGetDetails(KEY2) {
   return function(host) {
     if (host) {
       const container = proxy({ data: void 0 });
+      if (!host.isConnected) {
+        console.error("(createGetDetails) Host is not mounted");
+        return void 0;
+      }
       host.dispatchEvent(new CustomEvent(KEY2, { detail: container, bubbles: true }));
       return container.data;
     } else {
@@ -6579,6 +6583,24 @@ const getUserProvider = (type) => {
       throw new Error("Unhandled shop type: " + never);
   }
 };
+function isEmpty(value) {
+  return value === null || value === void 0 || typeof value === "string" && value.trim() === "";
+}
+function validateRequiredFields(body, requiredFields) {
+  const errors2 = {};
+  if (!requiredFields || requiredFields.length === 0) {
+    return errors2;
+  }
+  for (const field of requiredFields) {
+    if (!(field in body) || isEmpty(body[field])) {
+      errors2[field] = [`Field '${field}' is required and cannot be empty`];
+    }
+  }
+  return errors2;
+}
+function validateApiPostBody(body, requiredFields) {
+  return validateRequiredFields(body, requiredFields);
+}
 var util;
 (function(util2) {
   util2.assertEqual = (val) => val;
@@ -11854,7 +11876,7 @@ class Shop {
     return this.fetchAndCache(TICKETS_ENDPOINT, `tickets-${JSON.stringify(params)}`, "tickets", { cache: 60, query: params });
   }
   signIn(params) {
-    return this.apiPost(SIGN_IN_ENDPOINT, { body: params });
+    return this.apiPost(SIGN_IN_ENDPOINT, { body: params, requiredFields: ["email", "password"] });
   }
   signUp(params, asGuest = false) {
     const defaultParams = {
@@ -11865,10 +11887,19 @@ class Shop {
       level: asGuest ? CustomerLevels.SHOP_GUEST : CustomerLevels.SHOP
     };
     params = assign(defaultParams, params);
-    return this.apiPost(SIGN_UP_ENDPOINT, { body: params });
+    let requiredFields = [
+      "name",
+      //first name
+      "surname",
+      "email",
+      "email_confirmation",
+      "terms"
+    ];
+    if (!asGuest) requiredFields.push("password", "password_confirmation");
+    return this.apiPost(SIGN_UP_ENDPOINT, { body: params, requiredFields });
   }
   checkout(params) {
-    return this.apiPost(`/api/v4/orders`, { body: params });
+    return this.apiPost(`/api/v4/orders`, { body: params, requiredFields: ["items", "total"] });
   }
   order(token) {
     return this.fetchAndCache("/api/v4/orders/{id}", `order-${token}`, "order", { path: { id: token } });
@@ -11877,7 +11908,7 @@ class Shop {
     return this.fetchAndCache("/api/v4/annual/order", `annual-order-${token}`, "order", { query: { token } });
   }
   finalizePersonalizations(token, params) {
-    return this.apiPost("/api/v4/annual/personalization/finalize", { body: params }, { query: { token } });
+    return this.apiPost("/api/v4/annual/personalization/finalize", { body: params, params: { query: { token } } });
   }
   /**
    * Returns a reactive value that will contain the fetched data, no need to await.
@@ -11951,8 +11982,24 @@ class Shop {
       }
     };
   }
-  async apiPost(path, { body }, params = {}) {
+  /**
+   * Sends a POST request to the specified API endpoint.
+   *
+   * @param {string} path - The API endpoint path to make the POST request.
+   * @param {Object} options - The options for the POST request.
+   * @param {Record<string, any>} options.body - The body of the POST request, containing the data to be sent.
+   * @param {Record<string, unknown>} [options.params] - Optional query parameters to include in the request.
+   * @param {string[]} [options.requiredFields] - Optional list of required field names to validate in the body.
+   * @return {Promise<T>} A promise that resolves with the typed response of the POST request.
+   */
+  async apiPost(path, options) {
     this.#ensureApi();
+    const { body, params = {}, requiredFields } = options;
+    const validationErrors = validateApiPostBody(body, requiredFields);
+    if (Object.keys(validationErrors).length > 0) {
+      console.log("shop.apiPost: validationErrors", { validationErrors, body });
+      return { error: { errors: validationErrors } };
+    }
     const ret = await this.client.POST(path, { body, params: assign(this.#defaultApiParams, params) });
     return ret;
   }
@@ -14704,7 +14751,6 @@ function validateField(field) {
 const _Forms = class _Forms {
   static defineForm(options) {
     go.defineConfig({ forms: { [options.id]: { fields: options.fields } } });
-    __privateGet(_Forms, _requiredApiKeysMap)[options.id] = options.requiredApiKeys || [];
   }
   static defineFields(fields) {
     go.defineConfig({ fields });
@@ -14712,9 +14758,6 @@ const _Forms = class _Forms {
   static setRequiredApiKeys(formId, requiredApiKeys) {
     __privateGet(_Forms, _requiredApiKeysMap)[formId] = requiredApiKeys;
   }
-  static getRequiredApiKeys(formId) {
-    return __privateGet(_Forms, _requiredApiKeysMap)[formId];
-  }
   static createField(key, required) {
     const init2 = _Forms.getFieldInit(key);
     if (!init2) {
@@ -14779,9 +14822,9 @@ function AnnualTicketPersonalizationForm($$anchor, $$props) {
       },
       []
     );
-    personalizationForms.forEach((detail) => {
-      detail.fields.forEach((f) => {
-        f.validate();
+    personalizationForms.forEach((details2) => {
+      details2.fields.forEach((f) => {
+        details2.validateField(f);
       });
     });
     const isValid2 = iterate(
@@ -14929,18 +14972,6 @@ class FormDetails {
     const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
     return ret;
   }
-  ensureApiRequiredFields() {
-    const formData = this.formData;
-    const missingKeys = this.requiredApiKeys.filter((k) => !(k in formData));
-    if (missingKeys.length > 0) {
-      console.error("(ensureApiRequiredFields) Missing required API keys: " + missingKeys.join(","));
-      return false;
-    }
-    return true;
-  }
-  get requiredApiKeys() {
-    return Forms.getRequiredApiKeys(this.formId);
-  }
   get apiErrors() {
     return get$2(this.#apiErrors);
   }
@@ -14967,6 +14998,23 @@ class FormDetails {
       field.apiErrors = value;
     }
   }
+  validateForm() {
+    get$2(this.#fields).forEach((f) => this.validateField(f));
+  }
+  validateField(field) {
+    field.validate();
+    if (field.apiKey === "password_confirmation") {
+      const passwordField = this.fields.find((f) => f.apiKey === "password");
+      if (!passwordField || passwordField && field.value !== passwordField.value) {
+        field.errors.push("Passwords do not match");
+      }
+    } else if (field.apiKey === "email_confirmation") {
+      const emailField = this.fields.find((f) => f.apiKey === "email");
+      if (!emailField || emailField && field.value !== emailField.value) {
+        field.errors.push("Emails do not match");
+      }
+    }
+  }
   addField(field) {
     get$2(this.#fields).push(field);
   }
@@ -15011,9 +15059,7 @@ function Form($$anchor, $$props) {
   setDetails($$props.$$host, details);
   async function handleSubmit(event) {
     event.preventDefault();
-    details.fields.forEach((f) => {
-      f.validate();
-    });
+    details.validateForm();
     details?.form?.dispatchEvent(new Event("after-validation", event));
     if (details.isValid) {
       details?.form?.dispatchEvent(new Event("go-submit", event));
@@ -15074,7 +15120,6 @@ function SignIn($$anchor, $$props) {
   let form;
   Forms.defineForm({
     id: "signIn",
-    requiredApiKeys: ["email", "password"],
     fields: [
       { key: "email", required: true },
       { key: "password", required: true }
@@ -15085,7 +15130,6 @@ function SignIn($$anchor, $$props) {
       throw new Error("(go-sign-in: form not found");
     }
     const result = await shop.signIn(form.details.formData);
-    form.details.ensureApiRequiredFields();
     if (result.data) {
       $$props.$$host.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
     } else {
@@ -15297,6 +15341,10 @@ function syncCartToLocalStorage(cart2) {
   let lastLS = "";
   setInterval(
     () => {
+      if (!localStorage) {
+        console.warn("(syncCartToLocalStorage) localStorage is not available");
+        return;
+      }
       let newLS = localStorage.getItem("go-cart");
       if (lastLS && lastLS !== newLS) {
         loadFromLocalStorage(cart2);
@@ -15560,13 +15608,6 @@ function CheckoutForm($$anchor, $$props) {
       { key: "email", required: true },
       { key: "confirmEmail", required: true },
       { key: "acceptTerms", required: true }
-    ],
-    requiredApiKeys: [
-      "firstName",
-      "lastName",
-      "email",
-      "confirmEmail",
-      "acceptTerms"
     ]
   });
   wrapInElement($$props.$$host, "go-form", { "form-id": "checkoutGuest", custom: custom2() });
@@ -27571,7 +27612,7 @@ class BaseNumericSegmentState {
   getSegmentProps() {
     const segmentValues = this.root.segmentValues;
     const placeholder = this.root.placeholder.current;
-    const isEmpty = segmentValues[this.part] === null;
+    const isEmpty2 = segmentValues[this.part] === null;
     let date2 = placeholder;
     if (segmentValues[this.part]) {
       date2 = placeholder.set({ [this.part]: Number.parseInt(segmentValues[this.part]) });
@@ -27579,9 +27620,9 @@ class BaseNumericSegmentState {
     const valueNow = date2[this.part];
     const valueMin = this.#getMin();
     const valueMax = this.#getMax();
-    let valueText = isEmpty ? "Empty" : `${valueNow}`;
+    let valueText = isEmpty2 ? "Empty" : `${valueNow}`;
     if (this.part === "hour" && "dayPeriod" in segmentValues && segmentValues.dayPeriod) {
-      valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
+      valueText = isEmpty2 ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
     }
     return {
       "aria-label": `${this.part}, `,
@@ -29822,7 +29863,7 @@ function InputAndLabel($$anchor, $$props) {
     reset(fieldset);
     append($$anchor2, fieldset);
   };
-  let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), restProps = /* @__PURE__ */ rest_props($$props, [
+  let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 7), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7), host = prop($$props, "host", 7), restProps = /* @__PURE__ */ rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -29830,8 +29871,13 @@ function InputAndLabel($$anchor, $$props) {
     "field",
     "describedById",
     "labelClass",
-    "inputClass"
+    "inputClass",
+    "host"
   ]);
+  let details = /* @__PURE__ */ state(void 0);
+  onMount(async () => {
+    set(details, await pollUntilTruthy(() => getDetails(host())), true);
+  });
   const map = {
     input,
     text: input,
@@ -29851,7 +29897,9 @@ function InputAndLabel($$anchor, $$props) {
   let inputId = /* @__PURE__ */ user_derived(() => $$props.id || `go-field-${Math.random().toString(36).substring(2, 9)}`);
   function onblur() {
     if (field().type == "checkbox") return;
-    if (field().value) field().validate();
+    if (field().value) if (get$2(details))
+      get$2(details).validateField(field());
+    else field().validate();
   }
   const fieldAttributes = /* @__PURE__ */ user_derived(() => ({
     id: get$2(inputId),
@@ -29889,6 +29937,13 @@ function InputAndLabel($$anchor, $$props) {
     set inputClass($$value) {
       inputClass($$value);
       flushSync();
+    },
+    get host() {
+      return host();
+    },
+    set host($$value) {
+      host($$value);
+      flushSync();
     }
   };
   var fragment_6 = comment();
@@ -29907,7 +29962,19 @@ function InputAndLabel($$anchor, $$props) {
   append($$anchor, fragment_6);
   return pop($$exports);
 }
-create_custom_element(InputAndLabel, { field: {}, describedById: {}, labelClass: {}, inputClass: {} }, [], [], true);
+create_custom_element(
+  InputAndLabel,
+  {
+    field: {},
+    describedById: {},
+    labelClass: {},
+    inputClass: {},
+    host: {}
+  },
+  [],
+  [],
+  true
+);
 var root_1$6 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_3$3 = /* @__PURE__ */ from_html(`<li> </li>`);
 var root_2$5 = /* @__PURE__ */ from_html(`<ul class="go-field-errors" role="alert"></ul>`);
@@ -29939,7 +30006,7 @@ function Field($$anchor, $$props) {
       // Track the value
     ).value;
     untrack(() => {
-      if (get$2(field)?.errors.length) get$2(field).validate();
+      if (get$2(field)?.errors.length) get$2(details).validateField(get$2(field));
     });
   });
   var $$exports = {
@@ -29985,6 +30052,7 @@ function Field($$anchor, $$props) {
     get inputClass() {
       return inputClass();
     },
+    host: $$props.$$host,
     get field() {
       return get$2(field);
     },
@@ -30069,15 +30137,18 @@ var root_5 = /* @__PURE__ */ from_html(`<p aria-hidden="true"> </p>`);
 var root_1$4 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function ErrorsFeedback($$anchor, $$props) {
   push($$props, true);
-  let details = getDetails($$props.$$host);
+  let details = /* @__PURE__ */ state(void 0);
+  onMount(async () => {
+    set(details, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+  });
   user_effect(() => {
-    details?.form?.addEventListener("after-validation", () => {
-      set(errorsOnSubmit, errors(details?.fields), true);
+    get$2(details)?.form?.addEventListener("after-validation", () => {
+      set(errorsOnSubmit, errors(get$2(details)?.fields), true);
     });
   });
-  let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(details?.fields));
+  let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(get$2(details)?.fields));
   let errorsOnSubmit = /* @__PURE__ */ state(-1);
-  let generalApiErrors = /* @__PURE__ */ user_derived(() => details && isArray(details.apiErrors) && details.apiErrors.length > 0 ? details.apiErrors : []);
+  let generalApiErrors = /* @__PURE__ */ user_derived(() => get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0 ? get$2(details).apiErrors : []);
   var fragment = comment();
   var node = first_child(fragment);
   {
@@ -30101,7 +30172,7 @@ function ErrorsFeedback($$anchor, $$props) {
       {
         var consequent_1 = ($$anchor3) => {
           var ul = root_3$2();
-          each(ul, 21, () => details?.apiErrors, index$1, ($$anchor4, error) => {
+          each(ul, 21, () => get$2(details)?.apiErrors, index$1, ($$anchor4, error) => {
             var li = root_4$1();
             var text_1 = child(li, true);
             reset(li);
@@ -30112,7 +30183,7 @@ function ErrorsFeedback($$anchor, $$props) {
           append($$anchor3, ul);
         };
         if_block(node_2, ($$render) => {
-          if (details && isArray(details.apiErrors) && details.apiErrors.length > 0) $$render(consequent_1);
+          if (get$2(details) && isArray(get$2(details).apiErrors) && get$2(details).apiErrors.length > 0) $$render(consequent_1);
         });
       }
       var node_3 = sibling(node_2, 2);
@@ -30369,7 +30440,12 @@ function If($$anchor, $$props) {
     }
   });
   onMount(async () => {
-    set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+    try {
+      set(formDetails, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
+    } catch (error) {
+      console.error("(IF) Error fetching form details:", error);
+      console.error("Stack trace:", error instanceof Error ? error.stack : "No stack trace available");
+    }
   });
   var $$exports = {
     get data() {

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

@@ -478,9 +478,21 @@ export declare class Shop {
         annualTicketPersonalizationList: (token: string) => string;
         annualTicketPersonalizationFormSubmit: (token: string) => string;
     } | undefined;
-    apiPost<T>(path: string, { body }: {
+    /**
+     * Sends a POST request to the specified API endpoint.
+     *
+     * @param {string} path - The API endpoint path to make the POST request.
+     * @param {Object} options - The options for the POST request.
+     * @param {Record<string, any>} options.body - The body of the POST request, containing the data to be sent.
+     * @param {Record<string, unknown>} [options.params] - Optional query parameters to include in the request.
+     * @param {string[]} [options.requiredFields] - Optional list of required field names to validate in the body.
+     * @return {Promise<T>} A promise that resolves with the typed response of the POST request.
+     */
+    apiPost<T>(path: string, options: {
         body: Record<string, any>;
-    }, params?: Record<string, unknown>): Promise<T>;
+        params?: Record<string, unknown>;
+        requiredFields?: string[];
+    }): Promise<T>;
     waitForAllFetches(...variables: unknown[]): Promise<void>;
     apiGet(path: `/api${string}`, query?: Record<string, unknown>, pathOptions?: Record<string, unknown>): Promise<unknown>;
 }

package/dist-js/lib/validation.d.ts

@@ -0,0 +1,18 @@
+export type ValidationErrors = Record<string, string[]>;
+/**
+ * Checks if a value is empty (null, undefined, empty string, or whitespace-only string)
+ */
+export declare function isEmpty(value: unknown): boolean;
+/**
+ * Validates that all required fields are present and non-empty in the body
+ * @returns Record of field names to error messages, empty if all valid
+ */
+export declare function validateRequiredFields(body: Record<string, any>, requiredFields?: string[]): ValidationErrors;
+/**
+ * Validates the entire request body for API POST requests
+ * - Validates required fields
+ * - Validates email fields
+ * - Validates password fields
+ * @returns Record of field names to error messages, empty if all valid
+ */
+export declare function validateApiPostBody(body: Record<string, any>, requiredFields?: string[]): ValidationErrors;

package/dist-js/lib/validation.spec.d.ts

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

package/package.json

@@ -4,7 +4,7 @@
     "name": "Giantmonkey GmbH"
   },
   "license": "MIT",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "type": "module",
   "main": "./dist-js/gomus-webcomponents.iife.js",
   "module": "./dist-js/gomus-webcomponents.iife.js",
@@ -92,7 +92,7 @@
     "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-string": "^1.2.3",
-    "vitest": "^4.0.5",
+    "vitest": "^3.2.4",
     "wait-for-expect": "^4.0.0",
     "eslint-plugin-storybook": "10.0.1"
   },