@gomusdev/web-components 1.15.0 → 1.16.1

package/dist-js/gomus-webcomponents.js

@@ -5432,29 +5432,86 @@ function create_custom_element(Component, props_definition, slots, exports, use_
   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 @@ function toursGroupUrl(id) {
   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 @@ class Shop {
     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 @@ class FormDetails {
   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 @@ class FormDetails {
       if (!Number.isNaN(+x) && x.trim() !== "") return +x;
       return x;
     }
-    const validFields = this.fields.filter((f) => f !== void 0).filter((f) => f.value !== "");
+    const validFields = 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 @@ class FormDetails {
     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 @@ customElements.define("go-form", create_custom_element(
   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 @@ function SignIn($$anchor, $$props) {
   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 @@ customElements.define("go-sign-in", create_custom_element(
   [],
   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 @@ function SignUp($$anchor, $$props) {
   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);
@@ -28024,7 +28100,7 @@ function Date_field_hidden_input($$anchor, $$props) {
 }
 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);
@@ -28082,7 +28158,7 @@ function Date_field_input($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$6();
+  var fragment = root$5();
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
@@ -29888,10 +29964,8 @@ function InputAndLabel($$anchor, $$props) {
     "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,
@@ -29992,16 +30066,18 @@ create_custom_element(
 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] : []);
@@ -30054,7 +30130,7 @@ function Field($$anchor, $$props) {
       flushSync();
     }
   };
-  var fragment = root$5();
+  var fragment = root$4();
   var node = first_child(fragment);
   InputAndLabel(node, {
     get describedById() {
@@ -30127,11 +30203,9 @@ customElements.define("go-field", create_custom_element(
 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) => {
@@ -30151,10 +30225,8 @@ 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 = /* @__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);
@@ -30220,16 +30292,16 @@ function ErrorsFeedback($$anchor, $$props) {
       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);
@@ -30239,9 +30311,7 @@ customElements.define("go-form-feedback", create_custom_element(FormFeedback, {}
 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 = {
@@ -30264,38 +30334,30 @@ customElements.define("go-submit", create_custom_element(
   [],
   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));
@@ -30304,7 +30366,6 @@ function evaluateExpression(expression, data) {
     const func = new Function("data", `return ${expression};`);
     return func(data);
   } catch (error) {
-    throw new Error(`Error while evaluating when (${expression}) in go-if: ${error.message}`);
   }
 }
 const validTicketSelectionFilters = ["timeslot", "day", "annual"];
@@ -30427,14 +30488,21 @@ const getTicketSelectionDetails = createGetDetails(KEY$1);
 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(() => {
@@ -30453,21 +30521,9 @@ function If($$anchor, $$props) {
       }
     }
   });
-  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();
     },
@@ -30492,7 +30548,7 @@ customElements.define("go-if", create_custom_element(
     then: { attribute: "then", reflect: true, type: "String" }
   },
   [],
-  ["data"],
+  ["_setData", "_getData"],
   false
 ));
 function GomusInit($$anchor, $$props) {
@@ -30760,9 +30816,10 @@ customElements.define("go-ticket-selection", create_custom_element(
 ));
 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";
@@ -30773,18 +30830,24 @@ function Tickets($$anchor, $$props) {
 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);
@@ -30806,17 +30869,17 @@ class TicketGroupDetails {
   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) {
@@ -30886,10 +30949,9 @@ const getTicketGroupDetails = createGetDetails(KEY);
 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 Segment 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();
@@ -30964,7 +31026,7 @@ function Body($$anchor, $$props) {
   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);
@@ -30982,18 +31044,16 @@ function Body($$anchor, $$props) {
     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);
@@ -31025,7 +31085,7 @@ function Body($$anchor, $$props) {
       append($$anchor2, ol);
     };
     if_block(node, ($$render) => {
-      if (details?.preCart.items.length > 0) $$render(consequent);
+      if (get$2(anyItems)) $$render(consequent);
     });
   }
   append($$anchor, fragment);
@@ -31035,16 +31095,15 @@ delegate(["change"]);
 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 {
@@ -31094,15 +31153,19 @@ function generateAvailableTimeSlots(tickets, quotas) {
   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 [];
@@ -31135,11 +31198,11 @@ var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-ti
 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
     }));
@@ -31151,7 +31214,7 @@ function Timeslots($$anchor, $$props) {
     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);
@@ -31175,9 +31238,9 @@ function Timeslots($$anchor, $$props) {
           input,
           () => {
             timeslot.startAt;
-            return details.ticketSelectionDetails.selectedTimeslot;
+            return details.tsd.selectedTimeslot;
           },
-          ($$value) => details.ticketSelectionDetails.selectedTimeslot = $$value
+          ($$value) => details.tsd.selectedTimeslot = $$value
         );
         append($$anchor3, li);
       });
@@ -31185,7 +31248,7 @@ function Timeslots($$anchor, $$props) {
       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);
@@ -31468,11 +31531,11 @@ create_custom_element(CalendarUI, { calendarClass: {} }, [], ["details"], true);
 var root$1 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
 function Calendar2($$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;
   });
@@ -31504,12 +31567,16 @@ function Calendar2($$anchor, $$props) {
 }
 customElements.define("go-calendar", create_custom_element(Calendar2, {}, [], ["details"], false));
 class Details2 {
-  #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) {
@@ -31539,8 +31606,8 @@ class Details2 {
 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 Details2();
-  details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+  const _tsd = getTicketSelectionDetails($$props.$$host);
+  const details = new Details2(_tsd);
   var $$exports = { details };
   var button = root();
   button.__click = () => details.addToCart();