@gomusdev/web-components 1.27.2 → 1.29.0

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

@@ -15,11 +15,10 @@ export declare class FormDetails {
     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.
      */
-    get fields(): readonly Field[];
+    get fields(): any[];
     constructor(formId: string, form: HTMLFormElement);
 }
 export declare const setDetails: (host: HTMLElement, details: FormDetails) => void;

package/dist-js/gomus-webcomponents.css

@@ -933,7 +933,7 @@
   }
 /*END CALENDARUI CSS*/
 
-ul[data-go-timeslots] {
+go-timeslots > ul {
   max-width: 650px;
   list-style: none;
   padding: 0;
@@ -942,12 +942,12 @@ ul[data-go-timeslots] {
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
 }
 
-ul[data-go-timeslots] li {
+go-timeslots > ul li {
     margin: 5px;
     display: flex;
   }
 
-ul[data-go-timeslots] label {
+go-timeslots > ul label {
     display: inline-block;
     padding: 10px 20px;
     border: 1px solid #ddd;
@@ -962,18 +962,18 @@ ul[data-go-timeslots] label {
 
 /* Available timeslot */
 
-ul[data-go-timeslots] .available {
+go-timeslots > ul .available {
     background-color: #fff;
     color: #333;
   }
 
-ul[data-go-timeslots] input[type='radio'] {
+go-timeslots > ul input[type='radio'] {
     display: none; /* Hide the radio button */
   }
 
 /* When a timeslot is selected (checked radio button) */
 
-ul[data-go-timeslots] label:has(input[type='radio']:checked) {
+go-timeslots > ul label:has(input[type='radio']:checked) {
     background-color: #12826a;
     background-color: var(--primary); /* blue-green color */
     border-color: #12826a;
@@ -985,29 +985,29 @@ ul[data-go-timeslots] label:has(input[type='radio']:checked) {
 
 /* Finished (unavailable) timeslot */
 
-ul[data-go-timeslots] .finished {
+go-timeslots > ul .finished {
     background-color: #f0f0f0;
     color: #999;
   }
 
-ul[data-go-timeslots] .finished input {
+go-timeslots > ul .finished input {
     display: none;
   }
 
-ul[data-go-timeslots] .finished {
+go-timeslots > ul .finished {
     pointer-events: none;
   }
 
 /* Disabled radio button appearance */
 
-ul[data-go-timeslots] input:disabled + label {
+go-timeslots > ul input:disabled + label {
     background-color: #e0e0e0;
     color: #bbb;
     cursor: not-allowed;
     border-color: #ddd;
   }
 
-ul[data-go-timeslots] label:hover {
+go-timeslots > ul label:hover {
     /*background-color: #f0f0f0;*/
     border-color: #12826a;
     border-color: var(--primary);
@@ -1017,7 +1017,7 @@ ul[data-go-timeslots] label:hover {
 
 /* Focus state for better accessibility */
 
-ul[data-go-timeslots] input:focus + label {
+go-timeslots > ul input:focus + label {
     outline: 2px solid #0052cc;
   }
 

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

@@ -15513,7 +15513,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     }
     #fields = /* @__PURE__ */ state(proxy([]));
     #apiErrors = /* @__PURE__ */ state(proxy([]));
-    #isValid = /* @__PURE__ */ user_derived(() => errors(get$2(this.#fields)) == 0);
+    #isValid = /* @__PURE__ */ user_derived(() => errors(this.fields) == 0);
     get isValid() {
       return get$2(this.#isValid);
     }
@@ -15534,7 +15534,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         if (!Number.isNaN(+x) && x.trim() !== "") return +x;
         return x;
       }
-      const validFields = get$2(this.#fields).filter((f) => f !== void 0).filter((f) => f.value !== "");
+      const validFields = this.fields.filter((f) => f !== void 0).filter((f) => f.value !== "");
       const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
       return ret;
     }
@@ -15547,7 +15547,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
      * @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(errors2) {
-      get$2(this.#fields).forEach((f) => f.apiErrors = []);
+      this.fields.forEach((f) => f.apiErrors = []);
       if (isArray(errors2)) {
         set(this.#apiErrors, errors2, true);
         return;
@@ -15567,7 +15567,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       }
     }
     validateForm() {
-      get$2(this.#fields).forEach((f) => this.validateField(f));
+      this.fields.forEach((f) => this.validateField(f));
     }
     validateField(field) {
       field.validate();
@@ -15583,14 +15583,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         }
       }
     }
-    addField(field) {
-      get$2(this.#fields).push(field);
-    }
     /**
      * The list of fields associated with form in the config.
      */
     get fields() {
-      return get$2(this.#fields);
+      const parent = this.form.closest("go-form");
+      return Array.from(this.form.querySelectorAll("go-field")).filter((fe) => fe.closest("go-form") === parent).map((fe) => fe.getField?.()).filter((f) => f);
     }
   }
   const KEY$3 = "go-form-details";
@@ -29496,12 +29494,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     let field = /* @__PURE__ */ state(proxy(Forms.createField(key(), required())));
     const _details = getDetails$1($$props.$$host);
     const details = /* @__PURE__ */ user_derived(() => _details.value);
-    user_effect(() => {
-      if (!get$2(details)) return;
-      untrack(() => {
-        get$2(details).addField(get$2(field));
-      });
-    });
     const getField = () => get$2(field);
     let allErrors = /* @__PURE__ */ user_derived(() => get$2(field) ? [...get$2(field).errors, ...get$2(field).apiErrors].map((e) => shop.t(e)) : []);
     let descriptionId = /* @__PURE__ */ user_derived(() => `go-description-${Math.random().toString(36).substring(2, 9)}`);
@@ -29656,7 +29648,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         set(errorsOnSubmit, errors(get$2(details)?.fields), true);
       });
     });
-    let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(get$2(details)?.fields));
+    let errorsRealtime = /* @__PURE__ */ state(void 0);
+    setInterval(
+      () => {
+        set(errorsRealtime, errors(get$2(details)?.fields), true);
+      },
+      100
+    );
     let errorsOnSubmit = /* @__PURE__ */ state(-1);
     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();
@@ -31210,18 +31208,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return ret;
     }
   };
-  function dataAttr(name, condition, value = "") {
-    return function(element) {
-      const n = "data-go-" + name;
-      if (condition) {
-        element.setAttribute(n, value);
-      } else {
-        element.removeAttribute(n);
-      }
-    };
-  }
   var root_2$1 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
-  var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
+  var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots"></ul>`);
   function Timeslots($$anchor, $$props) {
     push($$props, true);
     const binding_group = [];
@@ -31251,10 +31239,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
           var input_value;
           reset(label);
           reset(li);
-          attach(li, () => dataAttr("selected", get$2(selected)));
           template_effect(() => {
-            set_class(li, 1, clsx(timeslot.capacity == 0 ? "sold-out" : ""));
-            set_class(label, 1, clsx(timeslot.available ? "" : "disabled"));
+            set_class(li, 1, clsx([
+              timeslot.capacity === 0 && "is-sold-out",
+              !timeslot.available && "is-disabled",
+              get$2(selected) && "is-selected"
+            ]));
             set_text(text2, `${timeslot.timeFormatted ?? ""} `);
             input.disabled = timeslot.capacity == 0;
             set_attribute(input, "aria-disabled", timeslot.capacity == 0);
@@ -31542,18 +31532,28 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
                                     children: ($$anchor13, $$slotProps4) => {
                                       var fragment_11 = comment();
                                       var node_16 = first_child(fragment_11);
-                                      component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
-                                        Calendar_Day($$anchor14, {
-                                          class: "go-calendar-day",
-                                          children: ($$anchor15, $$slotProps5) => {
-                                            next();
-                                            var text_3 = text();
-                                            template_effect(() => set_text(text_3, get$2(date2).day));
-                                            append($$anchor15, text_3);
-                                          },
-                                          $$slots: { default: true }
+                                      {
+                                        let $0 = /* @__PURE__ */ user_derived(() => [
+                                          "go-calendar-day",
+                                          calendarClass().isDateUnavailable(get$2(date2)) && "is-unavailable",
+                                          calendarClass().isDateDisabled(get$2(date2)) && "is-disabled",
+                                          calendarClass().selected === get$2(date2) && "is-selected"
+                                        ]);
+                                        component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
+                                          Calendar_Day($$anchor14, {
+                                            get class() {
+                                              return get$2($0);
+                                            },
+                                            children: ($$anchor15, $$slotProps5) => {
+                                              next();
+                                              var text_3 = text();
+                                              template_effect(() => set_text(text_3, get$2(date2).day));
+                                              append($$anchor15, text_3);
+                                            },
+                                            $$slots: { default: true }
+                                          });
                                         });
-                                      });
+                                      }
                                       append($$anchor13, fragment_11);
                                     },
                                     $$slots: { default: true }
@@ -31694,7 +31694,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return ret;
     }
   }
-  var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button">Add to cart</button>`);
+  var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button"> </button>`);
   function AddToCartButton($$anchor, $$props) {
     push($$props, true);
     const _tsd = getTicketSelectionDetails($$props.$$host);
@@ -31702,14 +31702,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     var $$exports = { details };
     var button = root();
     button.__click = () => details.addToCart();
+    var text2 = child(button, true);
+    reset(button);
     template_effect(
-      ($0, $1) => {
+      ($0, $1, $2) => {
         button.disabled = $0;
         set_attribute(button, "data-x", $1);
+        set_text(text2, $2);
       },
       [
         () => !details.anyTicketsSelected(),
-        () => !details.anyTicketsSelected()
+        () => !details.anyTicketsSelected(),
+        () => shop.t("common.actions.cart")
       ]
     );
     append($$anchor, button);

package/dist-js/gomus-webcomponents.js

@@ -15513,7 +15513,7 @@ class FormDetails {
   }
   #fields = /* @__PURE__ */ state(proxy([]));
   #apiErrors = /* @__PURE__ */ state(proxy([]));
-  #isValid = /* @__PURE__ */ user_derived(() => errors(get$2(this.#fields)) == 0);
+  #isValid = /* @__PURE__ */ user_derived(() => errors(this.fields) == 0);
   get isValid() {
     return get$2(this.#isValid);
   }
@@ -15534,7 +15534,7 @@ class FormDetails {
       if (!Number.isNaN(+x) && x.trim() !== "") return +x;
       return x;
     }
-    const validFields = get$2(this.#fields).filter((f) => f !== void 0).filter((f) => f.value !== "");
+    const validFields = this.fields.filter((f) => f !== void 0).filter((f) => f.value !== "");
     const ret = Object.fromEntries(validFields.map((f) => [f.apiKey, coerce2(f.value)]));
     return ret;
   }
@@ -15547,7 +15547,7 @@ 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(errors2) {
-    get$2(this.#fields).forEach((f) => f.apiErrors = []);
+    this.fields.forEach((f) => f.apiErrors = []);
     if (isArray(errors2)) {
       set(this.#apiErrors, errors2, true);
       return;
@@ -15567,7 +15567,7 @@ class FormDetails {
     }
   }
   validateForm() {
-    get$2(this.#fields).forEach((f) => this.validateField(f));
+    this.fields.forEach((f) => this.validateField(f));
   }
   validateField(field) {
     field.validate();
@@ -15583,14 +15583,12 @@ class FormDetails {
       }
     }
   }
-  addField(field) {
-    get$2(this.#fields).push(field);
-  }
   /**
    * The list of fields associated with form in the config.
    */
   get fields() {
-    return get$2(this.#fields);
+    const parent = this.form.closest("go-form");
+    return Array.from(this.form.querySelectorAll("go-field")).filter((fe) => fe.closest("go-form") === parent).map((fe) => fe.getField?.()).filter((f) => f);
   }
 }
 const KEY$3 = "go-form-details";
@@ -29496,12 +29494,6 @@ function Field($$anchor, $$props) {
   let field = /* @__PURE__ */ state(proxy(Forms.createField(key(), required())));
   const _details = getDetails$1($$props.$$host);
   const details = /* @__PURE__ */ user_derived(() => _details.value);
-  user_effect(() => {
-    if (!get$2(details)) return;
-    untrack(() => {
-      get$2(details).addField(get$2(field));
-    });
-  });
   const getField = () => get$2(field);
   let allErrors = /* @__PURE__ */ user_derived(() => get$2(field) ? [...get$2(field).errors, ...get$2(field).apiErrors].map((e) => shop.t(e)) : []);
   let descriptionId = /* @__PURE__ */ user_derived(() => `go-description-${Math.random().toString(36).substring(2, 9)}`);
@@ -29656,7 +29648,13 @@ function ErrorsFeedback($$anchor, $$props) {
       set(errorsOnSubmit, errors(get$2(details)?.fields), true);
     });
   });
-  let errorsRealtime = /* @__PURE__ */ user_derived(() => errors(get$2(details)?.fields));
+  let errorsRealtime = /* @__PURE__ */ state(void 0);
+  setInterval(
+    () => {
+      set(errorsRealtime, errors(get$2(details)?.fields), true);
+    },
+    100
+  );
   let errorsOnSubmit = /* @__PURE__ */ state(-1);
   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();
@@ -31210,18 +31208,8 @@ let Details$1 = class Details {
     return ret;
   }
 };
-function dataAttr(name, condition, value = "") {
-  return function(element) {
-    const n = "data-go-" + name;
-    if (condition) {
-      element.setAttribute(n, value);
-    } else {
-      element.removeAttribute(n);
-    }
-  };
-}
 var root_2$1 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
-var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
+var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots"></ul>`);
 function Timeslots($$anchor, $$props) {
   push($$props, true);
   const binding_group = [];
@@ -31251,10 +31239,12 @@ function Timeslots($$anchor, $$props) {
         var input_value;
         reset(label);
         reset(li);
-        attach(li, () => dataAttr("selected", get$2(selected)));
         template_effect(() => {
-          set_class(li, 1, clsx(timeslot.capacity == 0 ? "sold-out" : ""));
-          set_class(label, 1, clsx(timeslot.available ? "" : "disabled"));
+          set_class(li, 1, clsx([
+            timeslot.capacity === 0 && "is-sold-out",
+            !timeslot.available && "is-disabled",
+            get$2(selected) && "is-selected"
+          ]));
           set_text(text2, `${timeslot.timeFormatted ?? ""} `);
           input.disabled = timeslot.capacity == 0;
           set_attribute(input, "aria-disabled", timeslot.capacity == 0);
@@ -31542,18 +31532,28 @@ function CalendarUI($$anchor, $$props) {
                                   children: ($$anchor13, $$slotProps4) => {
                                     var fragment_11 = comment();
                                     var node_16 = first_child(fragment_11);
-                                    component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
-                                      Calendar_Day($$anchor14, {
-                                        class: "go-calendar-day",
-                                        children: ($$anchor15, $$slotProps5) => {
-                                          next();
-                                          var text_3 = text();
-                                          template_effect(() => set_text(text_3, get$2(date2).day));
-                                          append($$anchor15, text_3);
-                                        },
-                                        $$slots: { default: true }
+                                    {
+                                      let $0 = /* @__PURE__ */ user_derived(() => [
+                                        "go-calendar-day",
+                                        calendarClass().isDateUnavailable(get$2(date2)) && "is-unavailable",
+                                        calendarClass().isDateDisabled(get$2(date2)) && "is-disabled",
+                                        calendarClass().selected === get$2(date2) && "is-selected"
+                                      ]);
+                                      component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
+                                        Calendar_Day($$anchor14, {
+                                          get class() {
+                                            return get$2($0);
+                                          },
+                                          children: ($$anchor15, $$slotProps5) => {
+                                            next();
+                                            var text_3 = text();
+                                            template_effect(() => set_text(text_3, get$2(date2).day));
+                                            append($$anchor15, text_3);
+                                          },
+                                          $$slots: { default: true }
+                                        });
                                       });
-                                    });
+                                    }
                                     append($$anchor13, fragment_11);
                                   },
                                   $$slots: { default: true }
@@ -31694,7 +31694,7 @@ class Details2 {
     return ret;
   }
 }
-var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button">Add to cart</button>`);
+var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button"> </button>`);
 function AddToCartButton($$anchor, $$props) {
   push($$props, true);
   const _tsd = getTicketSelectionDetails($$props.$$host);
@@ -31702,14 +31702,18 @@ function AddToCartButton($$anchor, $$props) {
   var $$exports = { details };
   var button = root();
   button.__click = () => details.addToCart();
+  var text2 = child(button, true);
+  reset(button);
   template_effect(
-    ($0, $1) => {
+    ($0, $1, $2) => {
       button.disabled = $0;
       set_attribute(button, "data-x", $1);
+      set_text(text2, $2);
     },
     [
       () => !details.anyTicketsSelected(),
-      () => !details.anyTicketsSelected()
+      () => !details.anyTicketsSelected(),
+      () => shop.t("common.actions.cart")
     ]
   );
   append($$anchor, button);

package/package.json

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