@gomusdev/web-components 0.0.9 → 0.1.1

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

@@ -10941,7 +10941,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __publicField(this, "minQuantity");
       __publicField(this, "maxQuantity");
       __publicField(this, "maxPersons");
-      __publicField(this, "startTimes");
+      __publicField(this, "timeSlots");
       __publicField(this, "capacities");
       __publicField(this, "totalCapacities");
       __publicField(this, "maxCapacity");
@@ -10971,7 +10971,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.maxTotalCapacity = ticketObject.max_total_capacity;
       this.capacities = { ...ticketObject.capacities };
       this.totalCapacities = { ...ticketObject.total_capacities };
-      this.startTimes = Object.keys(this.capacities).map((key) => {
+      this.timeSlots = Object.keys(this.capacities).map((key) => {
         return {
           startAt: key,
           timeFormatted: formatTime(key),
@@ -10982,7 +10982,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           quotaIds: ticketObject.quota_ids
         };
       });
-      this.startTimes = this.startTimes.filter((st) => this.totalCapacities[st.startAt]).sort((a, b) => a.startAt > b.startAt ? 1 : -1);
+      this.timeSlots = this.timeSlots.filter((st) => this.totalCapacities[st.startAt]).sort((a, b) => a.startAt > b.startAt ? 1 : -1);
       this.quotaIds = ticketObject.quota_ids;
       this.updateMaxCapacity(selectedTime ?? null);
       this.shopOrder = ticketObject.shop_order ? ticketObject.shop_order : 0;
@@ -11005,14 +11005,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     updateMaxQuantity() {
       this.maxQuantity = Math.min(this.maxPersons, this.maxCapacity);
       this.quantityOptions = generateQuantityOptions(this.minQuantity, this.maxQuantity);
-      this.updateStartTimes();
-    }
-    updateStartTimes() {
-      this.startTimes.forEach((startTime) => {
-        startTime.capacity = Math.max(this.capacities[startTime.startAt], 0);
-        const selectedQuantity = startTime.startAt === this.selectedTime ? this.quantity : 0;
-        startTime.available = this.capacities[startTime.startAt] + selectedQuantity >= this.quantity && this.capacities[startTime.startAt] + selectedQuantity >= this.minAvailableCapacity;
-        startTime.selected = this.selectedTime === startTime.startAt;
+      this.updateTimeslots();
+    }
+    updateTimeslots() {
+      this.timeSlots.forEach((timeslot) => {
+        timeslot.capacity = Math.max(this.capacities[timeslot.startAt], 0);
+        const selectedQuantity = timeslot.startAt === this.selectedTime ? this.quantity : 0;
+        timeslot.available = this.capacities[timeslot.startAt] + selectedQuantity >= this.quantity && this.capacities[timeslot.startAt] + selectedQuantity >= this.minAvailableCapacity;
+        timeslot.selected = this.selectedTime === timeslot.startAt;
       });
     }
     updateTotalPrices() {
@@ -11212,7 +11212,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return this.fetchAndCache(TICKET_AND_QUOTAS_ENDPOINT, `ticketsAndQuotas-${JSON.stringify(params)}`, "", { cache: 60, query: params });
     }
     tickets(params) {
-      return this.fetchAndCache(TICKETS_ENDPOINT, `tickets-${JSON.stringify(params)}`, "", { cache: 60, query: params });
+      return this.fetchAndCache(TICKETS_ENDPOINT, `tickets-${JSON.stringify(params)}`, "tickets", { cache: 60, query: params });
     }
     /**
      * Returns a reactive value that will contain the fetched data, no need to await.
@@ -11348,6 +11348,56 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     false
   ));
+  function Init($$anchor, $$props) {
+    push($$props, true);
+    let apiDomain = prop($$props, "apiDomain", 7), shopDomain = prop($$props, "shopDomain", 7), locale = prop($$props, "locale", 7);
+    let apiUrl = `https://${apiDomain()}`;
+    GomusInit($$anchor, {
+      get apiUrl() {
+        return apiUrl;
+      },
+      get shopDomain() {
+        return shopDomain();
+      },
+      get locale() {
+        return locale();
+      }
+    });
+    return pop({
+      get apiDomain() {
+        return apiDomain();
+      },
+      set apiDomain($$value) {
+        apiDomain($$value);
+        flushSync();
+      },
+      get shopDomain() {
+        return shopDomain();
+      },
+      set shopDomain($$value) {
+        shopDomain($$value);
+        flushSync();
+      },
+      get locale() {
+        return locale();
+      },
+      set locale($$value) {
+        locale($$value);
+        flushSync();
+      }
+    });
+  }
+  customElements.define("go-init", create_custom_element(
+    Init,
+    {
+      apiDomain: { attribute: "api-domain", type: "String" },
+      shopDomain: { attribute: "shop-domain", type: "String" },
+      locale: { attribute: "locale", type: "String" }
+    },
+    [],
+    [],
+    false
+  ));
   function createSetDetails(KEY2) {
     return function(host, details) {
       if (host) {
@@ -12072,12 +12122,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     set total(value) {
       set(__privateGet(this, _total2), value);
     }
-    get selectedClasses() {
-      return [
-        this.selectedDate && "is-date-selected",
-        this.selectedTimeslot && "is-timeslot-selected",
-        this.selectedTickets.length && "is-tickets-selected"
-      ].filter(Boolean).join(" ");
+    get isTimeslotsVisible() {
+      var _a2;
+      return Boolean(((_a2 = this.filters) == null ? void 0 : _a2.includes("time_slot")) && this.selectedDate);
+    }
+    get isTicketsVisible() {
+      return Boolean(this.selectedDate && this.selectedTimeslot);
+    }
+    get isCalendarVisible() {
+      var _a2;
+      console.log("checking", this.filters);
+      return Boolean((_a2 = this.filters) == null ? void 0 : _a2.includes("time_slot"));
     }
   }
   _mode = new WeakMap();
@@ -14694,7 +14749,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   _props12 = new WeakMap();
   let CalendarHeaderState = _CalendarHeaderState;
-  var root_2$h = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$i = /* @__PURE__ */ from_html(`<div><!></div>`);
   function Calendar$2($$anchor, $$props) {
     push($$props, true);
     let child$1 = prop($$props, "child", 7), children = prop($$props, "children", 7), id = prop($$props, "id", 23, useId), ref = prop($$props, "ref", 15, null), value = prop($$props, "value", 15), onValueChange = prop($$props, "onValueChange", 7, noop), placeholder = prop($$props, "placeholder", 15), onPlaceholderChange = prop($$props, "onPlaceholderChange", 7, noop), weekdayFormat = prop($$props, "weekdayFormat", 7, "narrow"), weekStartsOn = prop($$props, "weekStartsOn", 7), pagedNavigation = prop($$props, "pagedNavigation", 7, false), isDateDisabled = prop($$props, "isDateDisabled", 7, () => false), isDateUnavailable = prop($$props, "isDateUnavailable", 7, () => false), fixedWeeks = prop($$props, "fixedWeeks", 7, false), numberOfMonths = prop($$props, "numberOfMonths", 7, 1), locale = prop($$props, "locale", 7), calendarLabel = prop($$props, "calendarLabel", 7, "Event"), disabled = prop($$props, "disabled", 7, false), readonly = prop($$props, "readonly", 7, false), minValue = prop($$props, "minValue", 7, void 0), maxValue = prop($$props, "maxValue", 7, void 0), preventDeselect = prop($$props, "preventDeselect", 7, false), type = prop($$props, "type", 7), disableDaysOutsideMonth = prop($$props, "disableDaysOutsideMonth", 7, true), initialFocus = prop($$props, "initialFocus", 7, false), maxDays = prop($$props, "maxDays", 7), monthFormat = prop($$props, "monthFormat", 7, "long"), yearFormat = prop($$props, "yearFormat", 7, "numeric"), restProps = /* @__PURE__ */ rest_props($$props, [
@@ -14795,7 +14850,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var div = root_2$h();
+        var div = root_2$i();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         snippet(node_2, () => children() ?? noop$1, () => rootState.snippetProps);
@@ -15043,7 +15098,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$g = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$h = /* @__PURE__ */ from_html(`<div><!></div>`);
   function Calendar_day($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15075,7 +15130,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$g();
+        var div = root_2$h();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -15136,7 +15191,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_day, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$f = /* @__PURE__ */ from_html(`<table><!></table>`);
+  var root_2$g = /* @__PURE__ */ from_html(`<table><!></table>`);
   function Calendar_grid($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15165,7 +15220,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var table = root_2$f();
+        var table = root_2$g();
         attribute_effect(table, () => ({ ...get(mergedProps) }));
         var node_2 = child(table);
         snippet(node_2, () => children() ?? noop$1);
@@ -15210,7 +15265,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$e = /* @__PURE__ */ from_html(`<tbody><!></tbody>`);
+  var root_2$f = /* @__PURE__ */ from_html(`<tbody><!></tbody>`);
   function Calendar_grid_body($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15239,7 +15294,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tbody = root_2$e();
+        var tbody = root_2$f();
         attribute_effect(tbody, () => ({ ...get(mergedProps) }));
         var node_2 = child(tbody);
         snippet(node_2, () => children() ?? noop$1);
@@ -15284,7 +15339,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_body, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$d = /* @__PURE__ */ from_html(`<td><!></td>`);
+  var root_2$e = /* @__PURE__ */ from_html(`<td><!></td>`);
   function Calendar_cell($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15320,7 +15375,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var td = root_2$d();
+        var td = root_2$e();
         attribute_effect(td, () => ({ ...get(mergedProps) }));
         var node_2 = child(td);
         snippet(node_2, () => children() ?? noop$1, () => cellState.snippetProps);
@@ -15392,7 +15447,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$c = /* @__PURE__ */ from_html(`<thead><!></thead>`);
+  var root_2$d = /* @__PURE__ */ from_html(`<thead><!></thead>`);
   function Calendar_grid_head($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15421,7 +15476,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var thead = root_2$c();
+        var thead = root_2$d();
         attribute_effect(thead, () => ({ ...get(mergedProps) }));
         var node_2 = child(thead);
         snippet(node_2, () => children() ?? noop$1);
@@ -15466,7 +15521,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_head, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$b = /* @__PURE__ */ from_html(`<th><!></th>`);
+  var root_2$c = /* @__PURE__ */ from_html(`<th><!></th>`);
   function Calendar_head_cell($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15495,7 +15550,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var th = root_2$b();
+        var th = root_2$c();
         attribute_effect(th, () => ({ ...get(mergedProps) }));
         var node_2 = child(th);
         snippet(node_2, () => children() ?? noop$1);
@@ -15540,7 +15595,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_head_cell, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$a = /* @__PURE__ */ from_html(`<tr><!></tr>`);
+  var root_2$b = /* @__PURE__ */ from_html(`<tr><!></tr>`);
   function Calendar_grid_row($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15569,7 +15624,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tr = root_2$a();
+        var tr = root_2$b();
         attribute_effect(tr, () => ({ ...get(mergedProps) }));
         var node_2 = child(tr);
         snippet(node_2, () => children() ?? noop$1);
@@ -15614,7 +15669,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_row, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$9 = /* @__PURE__ */ from_html(`<header><!></header>`);
+  var root_2$a = /* @__PURE__ */ from_html(`<header><!></header>`);
   function Calendar_header($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15643,7 +15698,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var header = root_2$9();
+        var header = root_2$a();
         attribute_effect(header, () => ({ ...get(mergedProps) }));
         var node_2 = child(header);
         snippet(node_2, () => children() ?? noop$1);
@@ -15688,7 +15743,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_header, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$8 = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$9 = /* @__PURE__ */ from_html(`<div><!></div>`);
   function Calendar_heading($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15720,7 +15775,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$8();
+        var div = root_2$9();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -15781,7 +15836,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_heading, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$7 = /* @__PURE__ */ from_html(`<button><!></button>`);
+  var root_2$8 = /* @__PURE__ */ from_html(`<button><!></button>`);
   function Calendar_next_button($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15811,7 +15866,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var button = root_2$7();
+        var button = root_2$8();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -15863,7 +15918,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_next_button, { children: {}, child: {}, id: {}, ref: {}, tabindex: {} }, [], [], true);
-  var root_2$6 = /* @__PURE__ */ from_html(`<button><!></button>`);
+  var root_2$7 = /* @__PURE__ */ from_html(`<button><!></button>`);
   function Calendar_prev_button($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15893,7 +15948,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var button = root_2$6();
+        var button = root_2$7();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -16010,11 +16065,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _details = new WeakMap();
   _params = new WeakMap();
   const ticketsCalendar = new TicketsCalendar();
-  var root_3$2 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
+  var root_3$3 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
   var root_11 = /* @__PURE__ */ from_html(`<div> </div>`);
   var root_17 = /* @__PURE__ */ from_html(`<div></div> `, 1);
   var root_7 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-  var root_2$5 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+  var root_2$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   var root_1$5 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
   function CalendarUI($$anchor, $$props) {
     push($$props, true);
@@ -16033,12 +16088,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const children = ($$anchor2, $$arg0) => {
         let months = () => $$arg0 == null ? void 0 : $$arg0().months;
         let weekdays = () => $$arg0 == null ? void 0 : $$arg0().weekdays;
-        var fragment = root_2$5();
+        var fragment = root_2$6();
         var node_1 = first_child(fragment);
         component(node_1, () => Calendar_header, ($$anchor3, Calendar_Header) => {
           Calendar_Header($$anchor3, {
             children: ($$anchor4, $$slotProps) => {
-              var fragment_1 = root_3$2();
+              var fragment_1 = root_3$3();
               var node_2 = first_child(fragment_1);
               component(node_2, () => Calendar_prev_button, ($$anchor5, Calendar_PrevButton) => {
                 Calendar_PrevButton($$anchor5, {
@@ -16344,15 +16399,23 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return generateAvailableTimeSlots(result.tickets, result.quotas);
     }
   }, _ticketSelectionDetails = new WeakMap(), _d);
-  var root_2$4 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
+  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$5 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
   var root_1$4 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
   function Timeslots($$anchor, $$props) {
     push($$props, true);
     const binding_group = [];
     const details = new Details$2();
-    onMount(() => {
-      details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
-    });
+    details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
     const change = (e) => {
       e.target.dispatchEvent(new CustomEvent("go-timeslot-select", {
         detail: { selected: details.ticketSelectionDetails.selectedTimeslot },
@@ -16366,7 +16429,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       var consequent = ($$anchor2) => {
         var ul = root_1$4();
         each(ul, 20, () => details.timeslots, (timeslot) => timeslot, ($$anchor3, timeslot) => {
-          var li = root_2$4();
+          const selected = /* @__PURE__ */ user_derived(() => {
+            var _a2;
+            return ((_a2 = details.ticketSelectionDetails) == null ? void 0 : _a2.selectedTimeslot) === timeslot.startAt;
+          });
+          var li = root_2$5();
           var label = child(li);
           var text2 = child(label);
           var input = sibling(text2);
@@ -16375,6 +16442,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           var input_value;
           reset(label);
           reset(li);
+          attach(li, () => dataAttr("selected", get(selected)));
           template_effect(() => {
             set_class(label, 1, clsx(timeslot.available ? "" : "disabled"));
             set_text(text2, `${timeslot.timeFormatted ?? ""} `);
@@ -16407,7 +16475,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   }
   delegate(["change"]);
   customElements.define("go-timeslots", create_custom_element(Timeslots, {}, [], ["details"], false));
-  var root_2$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
   var root$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   function Wrapper($$anchor, $$props) {
     push($$props, true);
@@ -16440,7 +16508,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var node_2 = sibling(node, 2);
     {
       var consequent_1 = ($$anchor2) => {
-        var div = root_2$3();
+        var div = root_2$4();
         attribute_effect(div, () => ({ ...restProps }));
         var node_3 = child(div);
         snippet(node_3, children);
@@ -16486,22 +16554,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       "ticketIds"
     ]);
     const details = new TicketSelectionDetails();
-    details.mode = mode();
-    details.filters = [filter()];
-    details.eventId = eventId();
-    details.museumIds = parseIds(museumIds());
-    details.exhibitionIds = parseIds(exhibitionIds());
-    details.ticketIds = parseIds(ticketIds());
+    user_effect(() => {
+      details.mode = mode();
+      details.filters = [filter()];
+      details.eventId = eventId();
+      details.museumIds = parseIds(museumIds());
+      details.exhibitionIds = parseIds(exhibitionIds());
+      details.ticketIds = parseIds(ticketIds());
+    });
     setTicketSelectionDetails($$props.$$host, details);
-    let cls = /* @__PURE__ */ user_derived(() => [
-      "go-ticket-selection",
-      details.selectedClasses,
-      (restProps == null ? void 0 : restProps["class"]) || ""
-    ].join(" "));
     Wrapper($$anchor, spread_props({ host: $$props.$$host }, () => restProps, {
-      get class() {
-        return get(cls);
-      },
       children: ($$anchor2, $$slotProps) => {
         var fragment_1 = comment();
         var node = first_child(fragment_1);
@@ -16569,15 +16631,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       mode: { attribute: "mode", reflect: true, type: "String" },
       eventId: { attribute: "event-id", reflect: true, type: "Number" },
       ticketIds: { attribute: "ticket-ids", reflect: true, type: "String" },
+      museumIds: { attribute: "museum-ids", reflect: true, type: "String" },
+      exhibitionIds: { attribute: "exhibition-ids", reflect: true, type: "String" },
       filter: {},
-      children: {},
-      museumIds: {},
-      exhibitionIds: {}
+      children: {}
     },
     [],
     ["details"],
     false
   ));
+  function SelectionTotal($$anchor, $$props) {
+    push($$props, true);
+    let ticketSelectionDetails = /* @__PURE__ */ state(void 0);
+    onMount(() => {
+      set(ticketSelectionDetails, getTicketSelectionDetails($$props.$$host), true);
+    });
+    next();
+    var text$1 = text();
+    template_effect(() => {
+      var _a2;
+      return set_text(text$1, (_a2 = get(ticketSelectionDetails)) == null ? void 0 : _a2.total);
+    });
+    append($$anchor, text$1);
+    pop();
+  }
+  customElements.define("go-total", create_custom_element(SelectionTotal, {}, [], [], false));
   let Details$1 = (_e = class {
     constructor() {
       __privateAdd(this, _ticketSelectionDetails2, /* @__PURE__ */ state());
@@ -16588,44 +16666,44 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     set ticketSelectionDetails(value) {
       set(__privateGet(this, _ticketSelectionDetails2), value, true);
     }
-    get tickets() {
-      var _a2, _b2, _c2, _d2, _e2, _f;
-      const date = (_a2 = this.ticketSelectionDetails) == null ? void 0 : _a2.selectedDate;
-      const ticketTypes = (_b2 = this.ticketSelectionDetails) == null ? void 0 : _b2.filters;
-      const museumIds = (_c2 = this.ticketSelectionDetails) == null ? void 0 : _c2.museumIds;
-      const exhibitionIds = (_d2 = this.ticketSelectionDetails) == null ? void 0 : _d2.exhibitionIds;
-      const ticketIds = (_e2 = this.ticketSelectionDetails) == null ? void 0 : _e2.ticketIds;
-      if (!date && !((_f = this.ticketSelectionDetails) == null ? void 0 : _f.selectedTimeslot) && (ticketTypes == null ? void 0 : ticketTypes.includes("time_slot"))) return [];
+    get allTickets() {
+      return [...this.timeslotTickets, ...this.annualTickets];
+    }
+    get timeslotTickets() {
+      var _a2, _b2;
+      const tsd = this.ticketSelectionDetails;
+      if (!tsd) return [];
+      if (!tsd.selectedDate && !tsd.selectedTimeslot && ((_a2 = tsd.filters) == null ? void 0 : _a2.includes("time_slot"))) return [];
       const result = snapshot(shop.ticketsAndQuotas({
         by_bookable: true,
-        valid_at: date == null ? void 0 : date.toString(),
+        valid_at: (_b2 = tsd.selectedDate) == null ? void 0 : _b2.toString(),
         // @ts-ignore
-        "by_ticket_types[]": ticketTypes,
-        "by_museum_ids[]": museumIds,
-        "by_exhibition_ids[]": exhibitionIds,
-        "by_ticket_ids[]": ticketIds
+        "by_ticket_types[]": tsd.filters,
+        "by_museum_ids[]": tsd.museumIds,
+        "by_exhibition_ids[]": tsd.exhibitionIds,
+        "by_ticket_ids[]": tsd.ticketIds
       }));
       if (!result) return [];
       return initGomusTickets(result.tickets);
     }
     get annualTickets() {
-      var _a2, _b2;
-      const ticketTypes = (_a2 = this.ticketSelectionDetails) == null ? void 0 : _a2.filters;
-      const ticketIds = (_b2 = this.ticketSelectionDetails) == null ? void 0 : _b2.ticketIds;
-      if (!(ticketTypes == null ? void 0 : ticketTypes.includes("annual"))) return [];
+      var _a2;
+      const tsd = this.ticketSelectionDetails;
+      if (!tsd) return [];
+      if (!((_a2 = tsd.filters) == null ? void 0 : _a2.includes("annual"))) return [];
       const result = snapshot(shop.tickets({
         by_bookable: true,
         // @ts-ignore
-        "by_ticket_types[]": ticketTypes,
-        "by_ticket_ids[]": ticketIds
+        "by_ticket_types[]": tsd.filters,
+        "by_ticket_ids[]": tsd.ticketIds
       }));
       if (!result) return [];
-      return initAnnualTickets(result.tickets);
+      return initAnnualTickets(result);
     }
     updateSelectedTickets(ticket, quantity) {
       var _a2, _b2, _c2;
-      const index2 = this.tickets.findIndex((t) => t.id == ticket.id);
-      const duplicate = this.tickets[index2];
+      const index2 = this.timeslotTickets.findIndex((t) => t.id == ticket.id);
+      const duplicate = this.timeslotTickets[index2];
       duplicate.quantity = quantity;
       if (ticket.type == "time_slot") {
         duplicate.selectedTime = ((_a2 = this.ticketSelectionDetails) == null ? void 0 : _a2.selectedTimeslot) || "";
@@ -16635,7 +16713,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       this.ticketSelectionDetails.ticketList = (_c2 = this.ticketSelectionDetails) == null ? void 0 : _c2.ticketList.concat(duplicate);
     }
   }, _ticketSelectionDetails2 = new WeakMap(), _e);
-  var root_2$2 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_2$3 = /* @__PURE__ */ from_html(`<option> </option>`);
   var root_1$3 = /* @__PURE__ */ from_html(`<tr><td><select></select></td><td><p> </p> <!></td><td> </td></tr>`);
   function Annual($$anchor, $$props) {
     push($$props, true);
@@ -16647,7 +16725,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       var td = child(tr);
       var select = child(td);
       each(select, 21, () => ticket.quantityOptions, index, ($$anchor3, quantity) => {
-        var option = root_2$2();
+        var option = root_2$3();
         var text2 = child(option, true);
         reset(option);
         var option_value = {};
@@ -16699,8 +16777,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var _a2;
     return details().updateSelectedTickets(ticket, parseInt((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value));
   };
-  var root_3$1 = /* @__PURE__ */ from_html(`<option> </option>`);
-  var root_2$1 = /* @__PURE__ */ from_html(`<tr><td><select></select></td><td><p> </p> <!></td><td> </td></tr>`);
+  var root_3$2 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_2$2 = /* @__PURE__ */ from_html(`<tr><td><select></select></td><td><p> </p> <!></td><td> </td></tr>`);
   function Timeslot($$anchor, $$props) {
     push($$props, true);
     let details = prop($$props, "details", 7);
@@ -16714,18 +16792,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     var fragment = comment();
     var node = first_child(fragment);
-    each(node, 16, () => Object.values(details().tickets), (ticket) => ticket, ($$anchor2, ticket) => {
+    each(node, 16, () => Object.values(details().timeslotTickets), (ticket) => ticket, ($$anchor2, ticket) => {
       var fragment_1 = comment();
       var node_1 = first_child(fragment_1);
       {
         var consequent = ($$anchor3) => {
-          var tr = root_2$1();
+          var tr = root_2$2();
           let classes;
           var td = child(tr);
           var select = child(td);
           select.__change = [on_change, details, ticket];
           each(select, 21, () => ticket.quantityOptions, index, ($$anchor4, quantity) => {
-            var option = root_3$1();
+            var option = root_3$2();
             var text2 = child(option, true);
             reset(option);
             var option_value = {};
@@ -16784,9 +16862,36 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   }
   delegate(["change"]);
   create_custom_element(Timeslot, { details: {} }, [], [], true);
-  var root_1$2 = /* @__PURE__ */ from_html(`<table><thead><tr><th scope="col">Quantity</th><th scope="col">Ticket</th><th scope="col">Price</th></tr></thead><tbody><!></tbody></table>`);
+  var root_2$1 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_1$2 = /* @__PURE__ */ from_html(`<select></select>`);
+  var root_4$1 = /* @__PURE__ */ from_html(`<li><article data-go-ticket=""><ul><li data-go-tickets-title=""> </li> <li data-go-tickets-description=""><!></li> <li data-go-tickets-price=""> </li> <li data-go-tickets-quality=""><!></li></ul></article></li>`);
+  var root_3$1 = /* @__PURE__ */ from_html(`<ol data-go-tickets="" data-testid="tickets"><li data-go-tickets-header="" data-testid="tickets-header"><ul><li data-go-tickets-title="">Title</li> <li data-go-tickets-description="">Description</li> <li data-go-tickets-price="">Price</li> <li data-go-tickets-quality="">Quantity</li></ul></li> <!></ol>`);
   function Tickets($$anchor, $$props) {
     push($$props, true);
+    const select = ($$anchor2, ticket = noop$1) => {
+      var select_1 = root_1$2();
+      select_1.__change = (e) => {
+        var _a2;
+        return details.updateSelectedTickets(ticket(), parseInt((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value));
+      };
+      each(select_1, 21, () => ticket().quantityOptions, index, ($$anchor3, quantity) => {
+        var option = root_2$1();
+        var text2 = child(option, true);
+        reset(option);
+        var option_value = {};
+        template_effect(() => {
+          set_selected(option, get(quantity).selected);
+          set_text(text2, get(quantity).label);
+          if (option_value !== (option_value = get(quantity).value)) {
+            option.value = (option.__value = get(quantity).value) ?? "";
+          }
+        });
+        append($$anchor3, option);
+      });
+      reset(select_1);
+      template_effect(($0) => set_attribute(select_1, "name", $0), [() => ticket().id.toString()]);
+      append($$anchor2, select_1);
+    };
     const details = new Details$1();
     onMount(() => {
       details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
@@ -16794,43 +16899,49 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var fragment = comment();
     var node = first_child(fragment);
     {
-      var consequent_1 = ($$anchor2) => {
-        var table = root_1$2();
-        var tbody = sibling(child(table));
-        var node_1 = child(tbody);
-        {
-          var consequent = ($$anchor3) => {
-            Annual($$anchor3, {
-              get details() {
-                return details;
-              }
-            });
-          };
-          var alternate = ($$anchor3) => {
-            Timeslot($$anchor3, {
-              get details() {
-                return details;
-              }
-            });
-          };
-          if_block(node_1, ($$render) => {
-            var _a2, _b2;
-            if ((_b2 = (_a2 = details.ticketSelectionDetails) == null ? void 0 : _a2.filters) == null ? void 0 : _b2.includes("annual")) $$render(consequent);
-            else $$render(alternate, false);
+      var consequent = ($$anchor2) => {
+        var ol = root_3$1();
+        var node_1 = sibling(child(ol), 2);
+        each(node_1, 17, () => details.timeslotTickets, index, ($$anchor3, ticket) => {
+          var li = root_4$1();
+          var article = child(li);
+          var ul = child(article);
+          var li_1 = child(ul);
+          var text_1 = child(li_1, true);
+          reset(li_1);
+          var li_2 = sibling(li_1, 2);
+          var node_2 = child(li_2);
+          html(node_2, () => get(ticket).description);
+          reset(li_2);
+          var li_3 = sibling(li_2, 2);
+          var text_2 = child(li_3, true);
+          reset(li_3);
+          var li_4 = sibling(li_3, 2);
+          var node_3 = child(li_4);
+          select(node_3, () => get(ticket));
+          reset(li_4);
+          reset(ul);
+          reset(article);
+          reset(li);
+          template_effect(() => {
+            set_attribute(article, "data-testid", "ticket-" + get(ticket).id);
+            set_text(text_1, get(ticket).title);
+            set_text(text_2, get(ticket).totalPriceFormatted);
           });
-        }
-        reset(tbody);
-        reset(table);
-        append($$anchor2, table);
+          append($$anchor3, li);
+        });
+        reset(ol);
+        append($$anchor2, ol);
       };
       if_block(node, ($$render) => {
         var _a2;
-        if (details.ticketSelectionDetails && details.ticketSelectionDetails.selectedTimeslot || ((_a2 = details.ticketSelectionDetails) == null ? void 0 : _a2.selectedDate)) $$render(consequent_1);
+        if (((_a2 = details.ticketSelectionDetails) == null ? void 0 : _a2.isTicketsVisible) && details.allTickets.length > 0) $$render(consequent);
       });
     }
     append($$anchor, fragment);
     return pop({ details });
   }
+  delegate(["change"]);
   customElements.define("go-tickets", create_custom_element(Tickets, {}, [], ["details"], false));
   var root_2 = /* @__PURE__ */ from_html(`<span> </span>`);
   var root_1$1 = /* @__PURE__ */ from_html(`<span> </span> <!>`, 1);