@gomusdev/web-components 1.14.0 → 1.16.0

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

@@ -5432,29 +5432,86 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     Class;
     return Class;
   }
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+  function isEmail(email2) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email2);
+  }
+  function isBoolean(value) {
+    return typeof value === "boolean";
+  }
+  function pollUntilTruthy(callback, maxDuration = 1e3) {
+    return new Promise((resolve, reject) => {
+      const startTime = Date.now();
+      const interval = 20;
+      const poll = () => {
+        try {
+          const result = callback();
+          if (result) {
+            resolve(result);
+            return;
+          }
+          if (Date.now() - startTime >= maxDuration) {
+            reject(new Error("Timeout reached without truthy value"));
+            return;
+          }
+          setTimeout(poll, interval);
+        } catch (error) {
+          reject(error);
+        }
+      };
+      poll();
+    });
+  }
   function createSetDetails(KEY2) {
     return function(host, details) {
       if (host) {
         host.addEventListener(KEY2, (e) => {
           e.stopPropagation();
-          e.detail.data = details;
+          e.detail.value = details;
         });
+      } else {
+        throw new Error("(createSetDetails) Host is undefined, You are probably trying to use this in a non-web-component context.");
       }
-      setContext(KEY2, details);
     };
   }
+  class DetailsWrapper {
+    constructor(host, KEY2, pollDuration = 1e3) {
+      this.host = host;
+      this.KEY = KEY2;
+      this.pollDuration = pollDuration;
+    }
+    #data = /* @__PURE__ */ state(proxy({ value: void 0 }));
+    error = false;
+    load() {
+      pollUntilTruthy(
+        () => {
+          this.host.dispatchEvent(new CustomEvent(this.KEY, { detail: this, bubbles: true }));
+          return this.value;
+        },
+        this.pollDuration
+      ).then(() => {
+      }, () => {
+        this.error = true;
+        console.warn("(createGetDetails) could not load data for:", this.KEY);
+      });
+    }
+    get value() {
+      return get$2(this.#data).value;
+    }
+    set value(newValue) {
+      get$2(this.#data).value = newValue;
+    }
+  }
   function createGetDetails(KEY2) {
-    return function(host) {
+    return function(host, options = { pollDuration: 1e3 }) {
       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;
+        const details = new DetailsWrapper(host, KEY2, options.pollDuration);
+        details.load(options.pollDuration);
+        return details;
       } else {
-        return getContext(KEY2);
+        throw new Error("(createGetDetails) Host is undefined, You are probably trying to use this in a non-web-component context.");
       }
     };
   }
@@ -5508,39 +5565,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     const groups = shop.settings?.multipleToursMenuItems.tour_groups[id] || [];
     return `/#/products/tours?category_id=${groups.join("&category_id=")}`;
   }
-  function wait(ms) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-  function isEmail(email2) {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email2);
-  }
-  function isBoolean(value) {
-    return typeof value === "boolean";
-  }
-  function pollUntilTruthy(callback) {
-    return new Promise((resolve, reject) => {
-      const startTime = Date.now();
-      const maxDuration = 1e3;
-      const interval = 20;
-      const poll = () => {
-        try {
-          const result = callback();
-          if (result) {
-            resolve(result);
-            return;
-          }
-          if (Date.now() - startTime >= maxDuration) {
-            resolve(void 0);
-            return;
-          }
-          setTimeout(poll, interval);
-        } catch (error) {
-          reject(error);
-        }
-      };
-      poll();
-    });
-  }
   const defaultErrorConfig = {
     withStackTrace: false
   };
@@ -11898,6 +11922,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       if (!asGuest) requiredFields.push("password", "password_confirmation");
       return this.apiPost(SIGN_UP_ENDPOINT, { body: params, requiredFields });
     }
+    passwordReset(params) {
+      return this.apiPost("/api/v4/auth/password", { body: params, requiredFields: ["email"] });
+    }
     checkout(params) {
       return this.apiPost(`/api/v4/orders`, { body: params, requiredFields: ["items", "total"] });
     }
@@ -14961,6 +14988,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     set isValid(value) {
       set(this.#isValid, value);
     }
+    #successMessage = /* @__PURE__ */ state();
+    get successMessage() {
+      return get$2(this.#successMessage);
+    }
+    set successMessage(value) {
+      set(this.#successMessage, value, true);
+    }
     get formData() {
       function coerce2(x) {
         if (isNumber(x) || isBoolean(x)) return x;
@@ -14968,7 +15002,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         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 = get$2(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;
     }
@@ -15025,7 +15059,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       return get$2(this.#fields);
     }
   }
-  const KEY$2 = "go-request-form";
+  const KEY$2 = "go-form-details";
   const setDetails = createSetDetails(KEY$2);
   const getDetails = createGetDetails(KEY$2);
   function wrapInElement(host, tag, props) {
@@ -15115,6 +15149,48 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     false
   ));
   var root$8 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
+  function PasswordReset($$anchor, $$props) {
+    push($$props, true);
+    let form;
+    let custom2 = prop($$props, "custom", 7, false);
+    Forms.defineForm({
+      id: "passwordReset",
+      fields: [{ key: "email", required: true }]
+    });
+    async function passwordReset() {
+      if (!form) {
+        throw new Error("(go-password-reset: form not found");
+      }
+      const result = await shop.passwordReset(form.details.formData);
+      if (result.data) {
+        $$props.$$host.dispatchEvent(new Event("go-success", { bubbles: true, composed: true }));
+        form.details.successMessage = result.data.message;
+        form.details.apiErrors = [];
+      } else {
+        form.details.apiErrors = result.error.errors;
+      }
+    }
+    onMount(() => {
+      $$props.$$host.addEventListener("go-submit", passwordReset);
+    });
+    var $$exports = {
+      get custom() {
+        return custom2();
+      },
+      set custom($$value = false) {
+        custom2($$value);
+        flushSync();
+      }
+    };
+    var go_form = root$8();
+    set_custom_element_data(go_form, "formId", "passwordReset");
+    template_effect(() => set_custom_element_data(go_form, "custom", custom2()));
+    bind_this(go_form, ($$value) => form = $$value, () => form);
+    append($$anchor, go_form);
+    return pop($$exports);
+  }
+  customElements.define("go-password-reset", create_custom_element(PasswordReset, { custom: {} }, [], [], false));
+  var root$7 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
   function SignIn($$anchor, $$props) {
     push($$props, true);
     let form;
@@ -15139,7 +15215,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     onMount(() => {
       $$props.$$host.addEventListener("go-submit", signIn);
     });
-    var go_form = root$8();
+    var go_form = root$7();
     set_custom_element_data(go_form, "formId", "signIn");
     bind_this(go_form, ($$value) => form = $$value, () => form);
     append($$anchor, go_form);
@@ -15154,7 +15230,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     [],
     false
   ));
-  var root$7 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
+  var root$6 = /* @__PURE__ */ from_html(`<go-form></go-form>`, 2);
   function SignUp($$anchor, $$props) {
     push($$props, true);
     Forms.defineForm({
@@ -15191,7 +15267,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     onMount(() => {
       $$props.$$host.addEventListener("go-submit", signUp);
     });
-    var go_form = root$7();
+    var go_form = root$6();
     set_custom_element_data(go_form, "formId", "signUp");
     bind_this(go_form, ($$value) => form = $$value, () => form);
     append($$anchor, go_form);
@@ -15206,6 +15282,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     [],
     false
   ));
+  function dispathCartEvents() {
+    let lastLength = 0;
+    effect_root(() => {
+      user_effect(() => {
+        if (cart.items.length === lastLength) {
+          return;
+        }
+        const event = cart.items.length > lastLength ? "go-cart-item-added" : "go-cart-item-removed";
+        lastLength = cart.items.length;
+        document.dispatchEvent(new CustomEvent(event, { detail: cart.items.length }));
+      });
+    });
+  }
   function createCartItem(ticket, options) {
     const finalOptions = {
       quantity: 0,
@@ -15414,12 +15503,13 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     if (tickets) tickets.forEach((t) => cart2.addItem(createCartItem(t)));
     return cart2;
   }
-  const cart = proxy(createCart([]));
-  syncCartToLocalStorage(cart);
   function formatCurrency(priceCents) {
     priceCents = priceCents ?? 0;
     return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(priceCents / 100);
   }
+  const cart = proxy(createCart([]));
+  syncCartToLocalStorage(cart);
+  dispathCartEvents();
   var root_2$p = /* @__PURE__ */ from_html(`<li data-go-cart-header-remove="">remove</li>`);
   var root_5$2 = /* @__PURE__ */ from_html(`<span class="go-cart-item-time" data-testid="cart-item-time"> </span>`);
   var root_4$4 = /* @__PURE__ */ from_html(`<span class="go-cart-item-date" data-testid="cart-item-date"> </span> <!>`, 1);
@@ -28010,7 +28100,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   }
   create_custom_element(Date_field_hidden_input, {}, [], [], true);
   var root_2$b = /* @__PURE__ */ from_html(`<div><!></div>`);
-  var root$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+  var root$5 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   function Date_field_input($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -28068,7 +28158,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         flushSync();
       }
     };
-    var fragment = root$6();
+    var fragment = root$5();
     var node = first_child(fragment);
     {
       var consequent = ($$anchor2) => {
@@ -29874,10 +29964,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       "inputClass",
       "host"
     ]);
-    let details = /* @__PURE__ */ state(void 0);
-    onMount(async () => {
-      set(details, await pollUntilTruthy(() => getDetails(host())), true);
-    });
+    const _details = getDetails(host());
+    const details = /* @__PURE__ */ user_derived(() => _details.value);
     const map = {
       input,
       text: input,
@@ -29978,16 +30066,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   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);
+  var root$4 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
   function Field($$anchor, $$props) {
     push($$props, true);
     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 () => {
-      set(details, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
-      if (!get$2(details)) throw new Error(`Could not find a parent form. Make sure the field is inside a <go-form> or <go-form-details> component.`);
-      get$2(details).addField(get$2(field));
+    const _details = getDetails($$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] : []);
@@ -30040,7 +30130,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         flushSync();
       }
     };
-    var fragment = root$5();
+    var fragment = root$4();
     var node = first_child(fragment);
     InputAndLabel(node, {
       get describedById() {
@@ -30113,11 +30203,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root_1$5 = /* @__PURE__ */ from_html(`<go-field></go-field>`, 2);
   function AllFields($$anchor, $$props) {
     push($$props, true);
-    let details = /* @__PURE__ */ state(void 0);
+    let _details = getDetails($$props.$$host);
+    let details = /* @__PURE__ */ user_derived(() => _details.value);
     let allFields2 = /* @__PURE__ */ user_derived(() => get$2(details) ? Forms.getFormFields(get$2(details)?.formId) : []);
-    onMount(async () => {
-      set(details, getDetails($$props.$$host), true);
-    });
     var fragment = comment();
     var node = first_child(fragment);
     each(node, 17, () => get$2(allFields2), index$1, ($$anchor2, field) => {
@@ -30137,10 +30225,8 @@ 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 = /* @__PURE__ */ state(void 0);
-    onMount(async () => {
-      set(details, await pollUntilTruthy(() => getDetails($$props.$$host)), true);
-    });
+    const _details = getDetails($$props.$$host);
+    const details = /* @__PURE__ */ user_derived(() => _details.value);
     user_effect(() => {
       get$2(details)?.form?.addEventListener("after-validation", () => {
         set(errorsOnSubmit, errors(get$2(details)?.fields), true);
@@ -30206,16 +30292,16 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         append($$anchor2, div);
       };
       if_block(node, ($$render) => {
-        if (get$2(errorsRealtime) > 0 || get$2(errorsOnSubmit) > 0 || get$2(generalApiErrors)) $$render(consequent_3);
+        if (get$2(errorsRealtime) > 0 || get$2(errorsOnSubmit) > 0 || get$2(generalApiErrors).length > 0) $$render(consequent_3);
       });
     }
     append($$anchor, fragment);
     pop();
   }
   customElements.define("go-errors-feedback", create_custom_element(ErrorsFeedback, {}, [], [], false));
-  var root$4 = /* @__PURE__ */ from_html(`<div class="go-form-feedback"><!></div>`);
+  var root$3 = /* @__PURE__ */ from_html(`<div class="go-form-feedback"><!></div>`);
   function FormFeedback($$anchor, $$props) {
-    var div = root$4();
+    var div = root$3();
     var node = child(div);
     slot(node, $$props, "default", {});
     reset(div);
@@ -30225,9 +30311,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   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", class: buttonClass() });
     });
     var $$exports = {
@@ -30250,38 +30334,30 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     [],
     false
   ));
-  var root_1$3 = /* @__PURE__ */ from_html(`<p>Form submitted successfully!</p>`);
-  var root$3 = /* @__PURE__ */ from_html(`<div aria-live="assertive"><!></div>`);
+  var root_1$3 = /* @__PURE__ */ from_html(`<div aria-live="assertive"> </div>`);
   function SuccessFeedback($$anchor, $$props) {
     push($$props, true);
-    let details = /* @__PURE__ */ state(void 0);
-    onMount(() => {
-      set(details, getDetails($$props.$$host), true);
-    });
-    let show = /* @__PURE__ */ state(false);
-    user_effect(() => {
-      if (!get$2(details)?.form) return;
-      untrack(() => {
-        get$2(details)?.form?.addEventListener("success", () => {
-          set(show, errors(get$2(details)?.fields) === 0);
-        });
-      });
-    });
-    var div = root$3();
-    let classes;
-    var node = child(div);
+    const _details = getDetails($$props.$$host);
+    const details = /* @__PURE__ */ user_derived(() => _details.value);
+    var fragment = comment();
+    var node = first_child(fragment);
     {
       var consequent = ($$anchor2) => {
-        var p2 = root_1$3();
-        append($$anchor2, p2);
+        var div = root_1$3();
+        let classes;
+        var text2 = child(div, true);
+        reset(div);
+        template_effect(() => {
+          classes = set_class(div, 1, "go-success-feedback go-feedback", null, classes, { "is-successful": get$2(details).successMessage });
+          set_text(text2, get$2(details)?.successMessage);
+        });
+        append($$anchor2, div);
       };
       if_block(node, ($$render) => {
-        if (get$2(show)) $$render(consequent);
+        if (get$2(details)?.successMessage) $$render(consequent);
       });
     }
-    reset(div);
-    template_effect(() => classes = set_class(div, 1, "go-success-feedback go-feedback", null, classes, { "is-successful": get$2(show) }));
-    append($$anchor, div);
+    append($$anchor, fragment);
     pop();
   }
   customElements.define("go-success-feedback", create_custom_element(SuccessFeedback, {}, [], [], false));
@@ -30413,14 +30489,21 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   function If($$anchor, $$props) {
     push($$props, true);
     let when = prop($$props, "when", 7), then = prop($$props, "then", 7, "show");
-    const data = /* @__PURE__ */ state(proxy({}));
-    get$2(data).ticketSelection = getTicketSelectionDetails($$props.$$host);
-    let formDetails = /* @__PURE__ */ state(void 0);
-    user_effect(() => {
-      if (!get$2(formDetails)) return;
-      get$2(data).formData = get$2(formDetails).formData;
-    });
-    get$2(data).cart = cart;
+    const _ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    const ticketSelectionDetails = /* @__PURE__ */ user_derived(() => _ticketSelectionDetails.value);
+    const _formDetails = getDetails($$props.$$host);
+    const formDetails = /* @__PURE__ */ user_derived(() => _formDetails.value);
+    let data = /* @__PURE__ */ user_derived(() => ({
+      ticketSelection: get$2(ticketSelectionDetails),
+      formData: get$2(formDetails)?.formData,
+      cart
+    }));
+    const _setData = (_data) => {
+      set(data, _data);
+    };
+    const _getData = () => {
+      return get$2(data);
+    };
     let evaluatedWhen = /* @__PURE__ */ user_derived(() => evaluateExpression(when(), get$2(data)));
     let content = null;
     user_effect(() => {
@@ -30439,21 +30522,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         }
       }
     });
-    onMount(async () => {
-      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() {
-        return get$2(data);
-      },
-      set data($$value) {
-        set(data, proxy($$value));
-      },
+      _setData,
+      _getData,
       get when() {
         return when();
       },
@@ -30478,7 +30549,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       then: { attribute: "then", reflect: true, type: "String" }
     },
     [],
-    ["data"],
+    ["_setData", "_getData"],
     false
   ));
   function GomusInit($$anchor, $$props) {
@@ -30746,9 +30817,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   ));
   function Tickets($$anchor, $$props) {
     push($$props, true);
-    const ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    const _tsd = getTicketSelectionDetails($$props.$$host);
+    const tsd = /* @__PURE__ */ user_derived(() => _tsd.value);
     user_effect(() => {
-      if (!ticketSelectionDetails?.isTicketsVisible) {
+      if (!get$2(tsd)?.isTicketsVisible) {
         $$props.$$host.style.display = "none";
       } else {
         $$props.$$host.style.display = "block";
@@ -30759,18 +30831,24 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   customElements.define("go-tickets", create_custom_element(Tickets, {}, [], [], false));
   function TicketsSum($$anchor, $$props) {
     push($$props, true);
-    const tsd = getTicketSelectionDetails($$props.$$host);
-    if (!tsd) console.error("Ticket Sum must be inside a Ticket Selection Details");
-    let val = /* @__PURE__ */ user_derived(() => sum(tsd?.preCarts || [], (c) => c.totalPriceCents));
-    var $$exports = { tsd };
+    const _tsd = getTicketSelectionDetails($$props.$$host);
+    const tsd = /* @__PURE__ */ user_derived(() => _tsd.value);
+    let val = /* @__PURE__ */ user_derived(() => sum(get$2(tsd)?.preCarts || [], (c) => c.totalPriceCents));
     next();
     var text2 = text$1();
     template_effect(($0) => set_text(text2, $0), [() => formatCurrency(get$2(val))]);
     append($$anchor, text2);
-    return pop($$exports);
+    pop();
   }
-  customElements.define("go-tickets-sum", create_custom_element(TicketsSum, {}, [], ["tsd"], false));
+  customElements.define("go-tickets-sum", create_custom_element(TicketsSum, {}, [], [], false));
   class TicketGroupDetails {
+    #ticketSelectionDetails;
+    get ticketSelectionDetails() {
+      return get$2(this.#ticketSelectionDetails);
+    }
+    set ticketSelectionDetails(value) {
+      set(this.#ticketSelectionDetails, value);
+    }
     #tickets = /* @__PURE__ */ state(proxy([]));
     get tickets() {
       return get$2(this.#tickets);
@@ -30792,17 +30870,17 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     set filters(value) {
       set(this.#filters, value, true);
     }
-    #ticketSelectionDetails = /* @__PURE__ */ state();
-    get ticketSelectionDetails() {
-      return get$2(this.#ticketSelectionDetails);
-    }
-    set ticketSelectionDetails(value) {
-      set(this.#ticketSelectionDetails, value, true);
-    }
-    constructor(type, ticketSelectionDetails) {
+    constructor(type, tsdWrapper) {
       this.filters = type;
-      this.ticketSelectionDetails = ticketSelectionDetails;
-      this.ticketSelectionDetails.addTicketGroup(this);
+      this.#ticketSelectionDetails = /* @__PURE__ */ user_derived(() => tsdWrapper.value);
+      effect_root(() => {
+        user_effect(() => {
+          this.ticketSelectionDetails;
+          untrack(() => {
+            this.ticketSelectionDetails?.addTicketGroup(this);
+          });
+        });
+      });
     }
     preCartTickets() {
       switch (this.filters) {
@@ -30872,10 +30950,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   function TicketSegment($$anchor, $$props) {
     push($$props, true);
     const filters = prop($$props, "filters", 7);
-    const ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
     if (!filters()) throw new Error("filters is required");
-    if (!ticketSelectionDetails) throw new Error("Ticket Group should be an ancestor of a Ticket Selection Details element");
-    const details = new TicketGroupDetails(filters(), ticketSelectionDetails);
+    const tsdWrapper = getTicketSelectionDetails($$props.$$host);
+    const details = new TicketGroupDetails(filters(), tsdWrapper);
     setTicketGroupDetails($$props.$$host, details);
     user_effect(() => {
       details.filters = filters();
@@ -30950,7 +31027,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     const select = ($$anchor2, ci = noop$1) => {
       const ticket = /* @__PURE__ */ user_derived(() => ci().item);
       var select_1 = root_1$2();
-      select_1.__change = (e) => updateSelectedTickets(ci(), e.target, tsd);
+      select_1.__change = (e) => updateSelectedTickets(ci(), e.target, get$2(details)?.ticketSelectionDetails);
       each(select_1, 21, () => generateQuantityOptions(get$2(ticket)), index$1, ($$anchor3, quantity) => {
         var option = root_2$2();
         var text2 = child(option, true);
@@ -30968,18 +31045,16 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       reset(select_1);
       append($$anchor2, select_1);
     };
-    let details = getTicketGroupDetails($$props.$$host);
-    if (!details) {
-      throw new Error("Ticket Group Body must be inside a Ticket Group");
-    }
-    let tsd = details.ticketSelectionDetails;
+    const _details = getTicketGroupDetails($$props.$$host);
+    const details = /* @__PURE__ */ user_derived(() => _details.value);
+    const anyItems = /* @__PURE__ */ user_derived(() => get$2(details)?.preCart?.items.length && get$2(details)?.preCart?.items.length > 0);
     var fragment = comment();
     var node = first_child(fragment);
     {
       var consequent = ($$anchor2) => {
         var ol = root_3$1();
         var node_1 = sibling(child(ol), 2);
-        each(node_1, 17, () => details?.preCart.items, index$1, ($$anchor3, ci) => {
+        each(node_1, 17, () => get$2(details)?.preCart.items, index$1, ($$anchor3, ci) => {
           var li = root_4();
           var article = child(li);
           var ul = child(article);
@@ -31011,7 +31086,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         append($$anchor2, ol);
       };
       if_block(node, ($$render) => {
-        if (details?.preCart.items.length > 0) $$render(consequent);
+        if (get$2(anyItems)) $$render(consequent);
       });
     }
     append($$anchor, fragment);
@@ -31021,16 +31096,15 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   customElements.define("go-ticket-segment-body", create_custom_element(Body, {}, [], [], false));
   function Sum($$anchor, $$props) {
     push($$props, true);
-    const details = getTicketGroupDetails($$props.$$host);
-    if (!details) console.warn("TicketGroupSum: details not found");
-    var $$exports = { details };
+    const _details = getTicketGroupDetails($$props.$$host);
+    const details = /* @__PURE__ */ user_derived(() => _details.value);
     next();
     var text2 = text$1();
-    template_effect(() => set_text(text2, details?.preCart.totalFormatted));
+    template_effect(() => set_text(text2, get$2(details)?.preCart.totalFormatted));
     append($$anchor, text2);
-    return pop($$exports);
+    pop();
   }
-  customElements.define("go-ticket-segment-sum", create_custom_element(Sum, {}, [], ["details"], false));
+  customElements.define("go-ticket-segment-sum", create_custom_element(Sum, {}, [], [], false));
   function createTimeSlotEntriesFromTicket(ticket) {
     return Object.keys(ticket.capacities).map((startAt) => {
       return {
@@ -31080,15 +31154,19 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
     return combineSlots(quotaSlots);
   }
   let Details$1 = class Details {
-    #ticketSelectionDetails = /* @__PURE__ */ state();
-    get ticketSelectionDetails() {
-      return get$2(this.#ticketSelectionDetails);
+    #tsd;
+    get tsd() {
+      return get$2(this.#tsd);
     }
-    set ticketSelectionDetails(value) {
-      set(this.#ticketSelectionDetails, value, true);
+    set tsd(value) {
+      set(this.#tsd, value);
+    }
+    constructor(tsdWrapper) {
+      if (!tsdWrapper) return;
+      this.#tsd = /* @__PURE__ */ user_derived(() => tsdWrapper.value);
     }
     get timeslots() {
-      const tsd = this.ticketSelectionDetails;
+      const tsd = this.tsd;
       if (!tsd) return [];
       const date2 = tsd.selectedDate;
       if (!date2) return [];
@@ -31121,11 +31199,11 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   function Timeslots($$anchor, $$props) {
     push($$props, true);
     const binding_group = [];
-    const details = new Details$1();
-    details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    const _tsd = getTicketSelectionDetails($$props.$$host);
+    const details = new Details$1(_tsd);
     const change = (e) => {
       e.target.dispatchEvent(new CustomEvent("go-timeslot-select", {
-        detail: { selected: details.ticketSelectionDetails.selectedTimeslot },
+        detail: { selected: details.tsd.selectedTimeslot },
         bubbles: true,
         composed: true
       }));
@@ -31137,7 +31215,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
       var consequent = ($$anchor2) => {
         var ul = root_1$1();
         each(ul, 20, () => details.timeslots, (timeslot) => timeslot, ($$anchor3, timeslot) => {
-          const selected = /* @__PURE__ */ user_derived(() => details.ticketSelectionDetails?.selectedTimeslot === timeslot.startAt);
+          const selected = /* @__PURE__ */ user_derived(() => details.tsd?.selectedTimeslot === timeslot.startAt);
           var li = root_2$1();
           var label = child(li);
           var text2 = child(label);
@@ -31161,9 +31239,9 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
             input,
             () => {
               timeslot.startAt;
-              return details.ticketSelectionDetails.selectedTimeslot;
+              return details.tsd.selectedTimeslot;
             },
-            ($$value) => details.ticketSelectionDetails.selectedTimeslot = $$value
+            ($$value) => details.tsd.selectedTimeslot = $$value
           );
           append($$anchor3, li);
         });
@@ -31171,7 +31249,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
         append($$anchor2, ul);
       };
       if_block(node, ($$render) => {
-        if (details.ticketSelectionDetails && details.ticketSelectionDetails.filters?.includes("timeslot")) $$render(consequent);
+        if (details.tsd && details.tsd.filters?.includes("timeslot")) $$render(consequent);
       });
     }
     append($$anchor, fragment);
@@ -31454,11 +31532,11 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root$1 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
   function Calendar($$anchor, $$props) {
     push($$props, true);
-    let ticketSelectionDetails = /* @__PURE__ */ state(void 0);
     const ticketsCalendar = new TicketsCalendar();
     const details = ticketsCalendar;
-    onMount(() => {
-      set(ticketSelectionDetails, getTicketSelectionDetails($$props.$$host), true);
+    const _ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    const ticketSelectionDetails = /* @__PURE__ */ user_derived(() => _ticketSelectionDetails.value);
+    user_effect(() => {
       ticketsCalendar.details = get$2(ticketSelectionDetails);
       if (get$2(ticketSelectionDetails)) get$2(ticketSelectionDetails).selectedDate = void 0;
     });
@@ -31490,12 +31568,16 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   }
   customElements.define("go-calendar", create_custom_element(Calendar, {}, [], ["details"], false));
   class Details {
-    #ticketSelectionDetails = /* @__PURE__ */ state();
+    #ticketSelectionDetails;
     get ticketSelectionDetails() {
       return get$2(this.#ticketSelectionDetails);
     }
     set ticketSelectionDetails(value) {
-      set(this.#ticketSelectionDetails, value, true);
+      set(this.#ticketSelectionDetails, value);
+    }
+    constructor(tsdWrapper) {
+      if (!tsdWrapper) return;
+      this.#ticketSelectionDetails = /* @__PURE__ */ user_derived(() => tsdWrapper.value);
     }
     addToCart() {
       if (!cart) {
@@ -31525,8 +31607,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
   var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button">Add to cart</button>`);
   function AddToCartButton($$anchor, $$props) {
     push($$props, true);
-    const details = new Details();
-    details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    const _tsd = getTicketSelectionDetails($$props.$$host);
+    const details = new Details(_tsd);
     var $$exports = { details };
     var button = root();
     button.__click = () => details.addToCart();