@gomusdev/web-components 1.11.0 → 1.13.0

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}, `,
@@ -29382,7 +29423,7 @@ var root_6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$8 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function DatePicker_1($$anchor, $$props) {
   push($$props, true);
-  let dateString = prop($$props, "dateString", 15);
+  let dateString = prop($$props, "dateString", 15), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7);
   let date2 = /* @__PURE__ */ state(proxy($14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2())));
   user_effect(() => {
     dateString(get$2(date2).toString());
@@ -29394,6 +29435,20 @@ function DatePicker_1($$anchor, $$props) {
     set dateString($$value) {
       dateString($$value);
       flushSync();
+    },
+    get labelClass() {
+      return labelClass();
+    },
+    set labelClass($$value) {
+      labelClass($$value);
+      flushSync();
+    },
+    get inputClass() {
+      return inputClass();
+    },
+    set inputClass($$value) {
+      inputClass($$value);
+      flushSync();
     }
   };
   var fragment = comment();
@@ -29410,7 +29465,11 @@ function DatePicker_1($$anchor, $$props) {
         var fragment_1 = root_1$8();
         var node_1 = first_child(fragment_1);
         component(node_1, () => Date_field_label, ($$anchor4, DatePicker_Label) => {
-          DatePicker_Label($$anchor4, { class: "go-datepicker-label" });
+          DatePicker_Label($$anchor4, {
+            get class() {
+              return `go-datepicker-label $${labelClass() ?? ""}`;
+            }
+          });
         });
         var node_2 = sibling(node_1, 2);
         {
@@ -29447,7 +29506,9 @@ function DatePicker_1($$anchor, $$props) {
           };
           component(node_2, () => Date_field_input, ($$anchor4, DatePicker_Input) => {
             DatePicker_Input($$anchor4, {
-              class: "go-datepicker-input",
+              get class() {
+                return `go-datepicker-input $${inputClass() ?? ""}`;
+              },
               children,
               $$slots: { default: true }
             });
@@ -29607,7 +29668,7 @@ function DatePicker_1($$anchor, $$props) {
   append($$anchor, fragment);
   return pop($$exports);
 }
-create_custom_element(DatePicker_1, { dateString: {} }, [], [], true);
+create_custom_element(DatePicker_1, { dateString: {}, labelClass: {}, inputClass: {} }, [], [], true);
 var root_2$6 = /* @__PURE__ */ from_html(`<span class="go-field-star" aria-hidden="true">*</span>`);
 var root_1$7 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_3$4 = /* @__PURE__ */ from_html(`<label><!></label> <input/>`, 1);
@@ -29646,6 +29707,7 @@ function InputAndLabel($$anchor, $$props) {
       () => ({
         ...get$2(fieldAttributes),
         ...restProps,
+        class: inputClass(),
         placeholder: field().placeholder,
         type: field().type,
         name: field().key
@@ -29656,7 +29718,10 @@ function InputAndLabel($$anchor, $$props) {
       void 0,
       true
     );
-    template_effect(() => set_attribute(label, "for", get$2(inputId)));
+    template_effect(() => {
+      set_class(label, 1, clsx(labelClass()));
+      set_attribute(label, "for", get$2(inputId));
+    });
     bind_value(input_1, () => field().value, ($$value) => field(field().value = $$value, true));
     append($$anchor2, fragment_1);
   };
@@ -29684,7 +29749,10 @@ function InputAndLabel($$anchor, $$props) {
     labelText(node_3);
     reset(span_1);
     reset(label_1);
-    template_effect(() => set_attribute(label_1, "for", get$2(inputId)));
+    template_effect(() => {
+      set_class(label_1, 1, clsx(labelClass()));
+      set_attribute(label_1, "for", get$2(inputId));
+    });
     append($$anchor2, label_1);
   };
   const select = ($$anchor2) => {
@@ -29694,7 +29762,12 @@ function InputAndLabel($$anchor, $$props) {
     labelText(node_4);
     reset(label_2);
     var select_1 = sibling(label_2, 2);
-    attribute_effect(select_1, () => ({ ...get$2(fieldAttributes), ...restProps, name: field().key }));
+    attribute_effect(select_1, () => ({
+      ...get$2(fieldAttributes),
+      ...restProps,
+      name: field().key,
+      class: inputClass()
+    }));
     var node_5 = child(select_1);
     {
       var consequent_1 = ($$anchor3) => {
@@ -29720,12 +29793,21 @@ function InputAndLabel($$anchor, $$props) {
       });
     }
     reset(select_1);
-    template_effect(() => set_attribute(label_2, "for", get$2(inputId)));
+    template_effect(() => {
+      set_class(label_2, 1, clsx(labelClass()));
+      set_attribute(label_2, "for", get$2(inputId));
+    });
     bind_select_value(select_1, () => field().value, ($$value) => field(field().value = $$value, true));
     append($$anchor2, fragment_2);
   };
   const date2 = ($$anchor2) => {
     DatePicker_1($$anchor2, {
+      get labelClass() {
+        return labelClass();
+      },
+      get inputClass() {
+        return inputClass();
+      },
       get dateString() {
         return field().value;
       },
@@ -29749,9 +29831,23 @@ function InputAndLabel($$anchor, $$props) {
           var label_3 = root_11$1();
           var text_1 = child(label_3);
           var input_3 = sibling(text_1);
-          attribute_effect(input_3, () => ({ ...get$2(fieldAttributes), ...restProps, type: "radio" }), void 0, void 0, void 0, void 0, true);
+          attribute_effect(
+            input_3,
+            () => ({
+              ...get$2(fieldAttributes),
+              ...restProps,
+              class: inputClass(),
+              type: "radio"
+            }),
+            void 0,
+            void 0,
+            void 0,
+            void 0,
+            true
+          );
           reset(label_3);
           template_effect(() => {
+            set_class(label_3, 1, clsx(labelClass()));
             set_attribute(label_3, "for", get$2(inputId) + get$2(option));
             set_text(text_1, `${get$2(option) ?? ""} `);
           });
@@ -29767,14 +29863,21 @@ function InputAndLabel($$anchor, $$props) {
     reset(fieldset);
     append($$anchor2, fieldset);
   };
-  let field = prop($$props, "field", 15), describedById = prop($$props, "describedById", 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",
     "$$host",
     "field",
-    "describedById"
+    "describedById",
+    "labelClass",
+    "inputClass",
+    "host"
   ]);
+  let details = /* @__PURE__ */ state(void 0);
+  onMount(async () => {
+    set(details, await pollUntilTruthy(() => getDetails(host())), true);
+  });
   const map = {
     input,
     text: input,
@@ -29794,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),
@@ -29818,6 +29923,27 @@ function InputAndLabel($$anchor, $$props) {
     set describedById($$value) {
       describedById($$value);
       flushSync();
+    },
+    get labelClass() {
+      return labelClass();
+    },
+    set labelClass($$value) {
+      labelClass($$value);
+      flushSync();
+    },
+    get inputClass() {
+      return inputClass();
+    },
+    set inputClass($$value) {
+      inputClass($$value);
+      flushSync();
+    },
+    get host() {
+      return host();
+    },
+    set host($$value) {
+      host($$value);
+      flushSync();
     }
   };
   var fragment_6 = comment();
@@ -29836,14 +29962,26 @@ function InputAndLabel($$anchor, $$props) {
   append($$anchor, fragment_6);
   return pop($$exports);
 }
-create_custom_element(InputAndLabel, { field: {}, describedById: {} }, [], [], 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>`);
 var root$5 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function Field($$anchor, $$props) {
   push($$props, true);
-  let key = prop($$props, "key", 7), required = prop($$props, "required", 7, false);
+  let key = prop($$props, "key", 7), required = prop($$props, "required", 7, false), labelClass = prop($$props, "labelClass", 7), inputClass = prop($$props, "inputClass", 7);
   let field = /* @__PURE__ */ state(proxy(Forms.createField(key(), required())));
   let details = /* @__PURE__ */ state(void 0);
   onMount(async () => {
@@ -29868,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 = {
@@ -29886,6 +30024,20 @@ function Field($$anchor, $$props) {
     set required($$value = false) {
       required($$value);
       flushSync();
+    },
+    get labelClass() {
+      return labelClass();
+    },
+    set labelClass($$value) {
+      labelClass($$value);
+      flushSync();
+    },
+    get inputClass() {
+      return inputClass();
+    },
+    set inputClass($$value) {
+      inputClass($$value);
+      flushSync();
     }
   };
   var fragment = root$5();
@@ -29894,6 +30046,13 @@ function Field($$anchor, $$props) {
     get describedById() {
       return get$2(describedById);
     },
+    get labelClass() {
+      return labelClass();
+    },
+    get inputClass() {
+      return inputClass();
+    },
+    host: $$props.$$host,
     get field() {
       return get$2(field);
     },
@@ -29943,7 +30102,9 @@ customElements.define("go-field", create_custom_element(
   Field,
   {
     key: { attribute: "key", reflect: true, type: "String" },
-    required: { attribute: "required", reflect: true, type: "Boolean" }
+    required: { attribute: "required", reflect: true, type: "Boolean" },
+    labelClass: { attribute: "label-class", reflect: true, type: "String" },
+    inputClass: { attribute: "input-class", reflect: true, type: "String" }
   },
   [],
   ["getField"],
@@ -29976,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);
   {
@@ -30008,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);
@@ -30019,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);
@@ -30060,14 +30224,32 @@ function FormFeedback($$anchor, $$props) {
 customElements.define("go-form-feedback", create_custom_element(FormFeedback, {}, ["default"], [], false));
 function Submit($$anchor, $$props) {
   push($$props, true);
+  let buttonClass = prop($$props, "buttonClass", 7, "");
   let details = /* @__PURE__ */ state(void 0);
   onMount(() => {
     set(details, getDetails($$props.$$host), true);
-    wrapInElement($$props.$$host, "button", { type: "submit" });
+    wrapInElement($$props.$$host, "button", { type: "submit", class: buttonClass() });
   });
-  pop();
+  var $$exports = {
+    get buttonClass() {
+      return buttonClass();
+    },
+    set buttonClass($$value = "") {
+      buttonClass($$value);
+      flushSync();
+    }
+  };
+  return pop($$exports);
 }
-customElements.define("go-submit", create_custom_element(Submit, {}, [], [], false));
+customElements.define("go-submit", create_custom_element(
+  Submit,
+  {
+    buttonClass: { attribute: "button-class", reflect: true, type: "String" }
+  },
+  [],
+  [],
+  false
+));
 var root_1$3 = /* @__PURE__ */ from_html(`<p>Form submitted successfully!</p>`);
 var root$3 = /* @__PURE__ */ from_html(`<div aria-live="assertive"><!></div>`);
 function SuccessFeedback($$anchor, $$props) {
@@ -30258,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 {};