@gomusdev/web-components 0.0.17 → 0.0.18

package/dist-js/gomus-webcomponents.css

@@ -975,3 +975,114 @@ ul[data-go-timeslots] label:hover {
 ul[data-go-timeslots] input:focus + label {
     outline: 2px solid #0052cc;
   }
+
+go-tickets {
+  /*// Tweak these numbers to change column ratios (must match header + rows)*/
+  --col-title: 2;
+  --col-desc: 4;
+  --col-price: 1;
+  --col-qty: 1;
+}
+
+go-tickets [data-testid='tickets'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    /*// Header row*/
+  }
+
+go-tickets [data-testid='tickets']  > li[data-go-tickets-header] {
+      top: 0;
+      background: inherit;
+    }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header]  > ul {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        font-weight: 600;
+      }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul  > li {
+          list-style: none;
+          /*// allow truncation*/
+          min-width: 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul > li:first-child {
+            padding-left: 0;
+          }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-title] {
+          flex: var(--col-title) 0 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-description] {
+          flex: var(--col-desc) 0 0;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-price] {
+          flex: var(--col-price) 0 0;
+          text-align: right;
+        }
+
+go-tickets [data-testid='tickets'] > li[data-go-tickets-header] > ul [data-go-tickets-quality] {
+          flex: var(--col-qty) 0 0;
+          text-align: right;
+        }
+
+/*// Data rows*/
+
+go-tickets [data-testid='tickets']  > li {
+      list-style: none;
+    }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket]  > ul {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          padding: 0.75rem 0;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul  > li {
+            list-style: none;
+            /*// enable text truncation*/
+            min-width: 0;
+            /*// Optional: single-line truncation (comment out if you want wrapping)*/
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-title] {
+            flex: var(--col-title) 0 0;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-description] {
+            flex: var(--col-desc) 0 0;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-price] {
+            flex: var(--col-price) 0 0;
+            text-align: right;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-quality] {
+            flex: var(--col-qty) 0 0;
+            text-align: right;
+          }
+
+go-tickets [data-testid='tickets'] > li > article[data-go-ticket] > ul [data-go-tickets-quality] select {
+              /*// keeps the quantity control aligned but not stretched*/
+              margin-left: auto;
+              /*// adjust as needed*/
+              max-width: 8rem;
+
+              min-width: 4rem;
+              min-height: 2rem;
+              width: auto;
+            }

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

@@ -11,7 +11,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 (function() {
   "use strict";
-  var _a, _previous, _callbacks, _pending, _deferred, _neutered, _async_effects, _boundary_async_effects, _render_effects, _effects, _block_effects, _dirty_effects, _maybe_dirty_effects, _Batch_instances, traverse_effect_tree_fn, defer_effects_fn, commit_fn, _events, _instance, _data, _fetchStatus, _Shop_instances, defaultApiParams_get, _canFetch, _ensureFetch, _items, _total, _b, _mode, _filters, _eventId, _museumIds, _exhibitionIds, _ticketIds, _selectedDate, _selectedTimeslot, _selectedTickets, _ticketList, _total2, _document, _subscribe, _name, _key, _root, _variant, _prefix, _visibleMonths, _months, _weekdays, _initialPlaceholderYear, _defaultYears, _CalendarRootState_instances, setupInitialFocusEffect_fn, setupAccessibleHeadingEffect_fn, setupFormatterEffect_fn, _isNextButtonDisabled, _isPrevButtonDisabled, _isInvalid, _headingValue, _fullCalendarLabel, isMultipleSelectionValid_fn, _snippetProps, _props, _props2, _cellDate, _isUnavailable, _isDateToday, _isOutsideMonth, _isOutsideVisibleMonths, _isDisabled, _isFocusedDate, _isSelectedDate, _labelText, _snippetProps2, _ariaDisabled, _sharedDataAttrs, _props3, _tabindex, _snippetProps3, _props4, _isDisabled2, _props5, _isDisabled3, _props6, _props7, _props8, _props9, _props10, _props11, _props12, _startAt, _selected, _c, _details, _params, _ticketSelectionDetails, _d, _ticketSelectionDetails2, _e, _ticketSelectionDetails3;
+  var _a, _previous, _callbacks, _pending, _deferred, _neutered, _async_effects, _boundary_async_effects, _render_effects, _effects, _block_effects, _dirty_effects, _maybe_dirty_effects, _Batch_instances, traverse_effect_tree_fn, defer_effects_fn, commit_fn, _events, _instance, _data, _fetchStatus, _Shop_instances, defaultApiParams_get, _canFetch, _ensureFetch, _priceCents, _priceFormatted, _quantity, _totalPriceCents, _totalPriceFormatted, _GomusTicket_instances, calcPriceCentes_fn, createTimeslots_fn, _items, _total, _b, _mode, _filters, _eventId, _museumIds, _exhibitionIds, _ticketIds, _selectedDate, _selectedTimeslot, _selectedTickets, _ticketList, _total2, _document, _subscribe, _name, _key, _root, _variant, _prefix, _visibleMonths, _months, _weekdays, _initialPlaceholderYear, _defaultYears, _CalendarRootState_instances, setupInitialFocusEffect_fn, setupAccessibleHeadingEffect_fn, setupFormatterEffect_fn, _isNextButtonDisabled, _isPrevButtonDisabled, _isInvalid, _headingValue, _fullCalendarLabel, isMultipleSelectionValid_fn, _snippetProps, _props, _props2, _cellDate, _isUnavailable, _isDateToday, _isOutsideMonth, _isOutsideVisibleMonths, _isDisabled, _isFocusedDate, _isSelectedDate, _labelText, _snippetProps2, _ariaDisabled, _sharedDataAttrs, _props3, _tabindex, _snippetProps3, _props4, _isDisabled2, _props5, _isDisabled3, _props6, _props7, _props8, _props9, _props10, _props11, _props12, _startAt, _selected, _c, _details, _params, _ticketSelectionDetails, _d, _ticketSelectionDetails2, _e, _ticketSelectionDetails3;
   const PUBLIC_VERSION = "5";
   if (typeof window !== "undefined") {
     ((_a = window.__svelte ?? (window.__svelte = {})).v ?? (_a.v = /* @__PURE__ */ new Set())).add(PUBLIC_VERSION);
@@ -3567,9 +3567,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   const whitespace = [..." 	\n\r\f \v\uFEFF"];
   function to_class(value, hash, directives) {
     var classname = value == null ? "" : "" + value;
-    if (hash) {
-      classname = classname ? classname + " " + hash : hash;
-    }
     if (directives) {
       for (var key in directives) {
         if (directives[key]) {
@@ -10924,109 +10921,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       {}
     );
   };
-  class GomusTicket {
-    constructor(ticketObject, minAvailableCapacity = 0, selectedTime = "", quantity) {
-      __publicField(this, "id");
-      __publicField(this, "title");
-      __publicField(this, "description");
-      __publicField(this, "type");
-      __publicField(this, "selectedTime");
-      __publicField(this, "_quantity", 0);
-      __publicField(this, "quantityOptions");
-      __publicField(this, "vatPct");
-      __publicField(this, "priceCents");
-      __publicField(this, "priceFormatted");
-      __publicField(this, "totalPriceCents");
-      __publicField(this, "totalPriceFormatted");
-      __publicField(this, "minQuantity");
-      __publicField(this, "maxQuantity");
-      __publicField(this, "maxPersons");
-      __publicField(this, "timeSlots");
-      __publicField(this, "capacities");
-      __publicField(this, "totalCapacities");
-      __publicField(this, "maxCapacity");
-      __publicField(this, "maxTotalCapacity");
-      __publicField(this, "quotaIds");
-      __publicField(this, "shopOrder");
-      __publicField(this, "minAvailableCapacity");
-      __publicField(this, "reductionReason");
-      __publicField(this, "ticketObject");
-      this.ticketObject = ticketObject;
-      this.minAvailableCapacity = minAvailableCapacity;
-      this.id = ticketObject.id;
-      this.title = ticketObject.title;
-      this.description = ticketObject.description;
-      this.type = ticketObject.ticket_type;
-      this.selectedTime = selectedTime;
-      this.vatPct = ticketObject.vat_pct;
-      if (ticketObject.tax_included) {
-        this.priceCents = ticketObject.price_cents;
-      } else {
-        this.priceCents = ticketObject.price_cents * (1 + this.vatPct / 100);
-      }
-      this.priceFormatted = formatCurrency$1(this.priceCents);
-      this.quantity = quantity || 0;
-      this.minQuantity = ticketObject.min_persons;
-      this.maxPersons = ticketObject.max_persons;
-      this.maxTotalCapacity = ticketObject.max_total_capacity;
-      this.capacities = { ...ticketObject.capacities };
-      this.totalCapacities = { ...ticketObject.total_capacities };
-      this.timeSlots = Object.keys(this.capacities).map((key) => {
-        return {
-          startAt: key,
-          timeFormatted: formatTime(key),
-          capacity: this.capacities[key],
-          totalCapacity: this.totalCapacities[key],
-          available: this.capacities[key] >= minAvailableCapacity,
-          selected: this.selectedTime === key,
-          quotaIds: ticketObject.quota_ids
-        };
-      });
-      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;
-    }
-    set quantity(value) {
-      this._quantity = value;
-      this.updateTotalPrices();
-    }
-    get quantity() {
-      return this._quantity;
-    }
-    updateMaxCapacity(isoTime) {
-      if (isoTime) {
-        this.maxCapacity = Math.max(0, this.capacities[isoTime] ?? 0);
-      } else {
-        this.maxCapacity = Math.max(0, ...Object.keys(this.capacities).map((key) => this.capacities[key])) + this.quantity;
-      }
-      this.updateMaxQuantity();
-    }
-    updateMaxQuantity() {
-      this.maxQuantity = Math.min(this.maxPersons, this.maxCapacity);
-      this.quantityOptions = generateQuantityOptions(this.minQuantity, this.maxQuantity);
-      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() {
-      this.totalPriceCents = this.quantity * this.priceCents;
-      this.totalPriceFormatted = formatCurrency$1(this.totalPriceCents);
-    }
-  }
-  function initGomusTickets(tickets) {
-    const tmpTickets = {};
-    Object.keys(tickets).forEach((ticketId) => {
-      if (tickets[ticketId]) tmpTickets[ticketId] = new GomusTicket(tickets[ticketId]);
-    });
-    return sort(Object.values(tmpTickets), (f) => f.shopOrder);
-  }
   class GomusAnnualTicket {
     constructor(ticketObject, minAvailableCapacity = 0, selectedTime = "", quantity) {
       __publicField(this, "id");
@@ -11419,6 +11313,140 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     };
   }
+  class GomusTicket {
+    constructor(apiTicket, options) {
+      __privateAdd(this, _GomusTicket_instances);
+      __publicField(this, "id");
+      __publicField(this, "title");
+      __publicField(this, "description");
+      __publicField(this, "type");
+      __publicField(this, "selectedTime");
+      __publicField(this, "quantityOptions");
+      __publicField(this, "vatPct");
+      __privateAdd(this, _priceCents, /* @__PURE__ */ state(0));
+      __privateAdd(this, _priceFormatted, /* @__PURE__ */ user_derived(() => formatCurrency$1(this.priceCents)));
+      __privateAdd(this, _quantity, /* @__PURE__ */ state(0));
+      __privateAdd(this, _totalPriceCents, /* @__PURE__ */ user_derived(() => this.quantity * this.priceCents));
+      __privateAdd(this, _totalPriceFormatted, /* @__PURE__ */ user_derived(() => formatCurrency$1(this.totalPriceCents)));
+      __publicField(this, "minQuantity");
+      __publicField(this, "maxQuantity");
+      __publicField(this, "maxPersons");
+      __publicField(this, "timeSlots");
+      __publicField(this, "capacities");
+      __publicField(this, "totalCapacities");
+      __publicField(this, "minAvailableCapacity");
+      __publicField(this, "maxCapacity");
+      __publicField(this, "maxTotalCapacity");
+      __publicField(this, "quotaIds");
+      __publicField(this, "shopOrder");
+      __publicField(this, "reductionReason");
+      __publicField(this, "apiTicket");
+      const { minAvailableCapacity = 0, selectedTime = "", quantity = 0 } = { ...options };
+      this.apiTicket = apiTicket;
+      this.minAvailableCapacity = minAvailableCapacity;
+      this.id = apiTicket.id;
+      this.title = apiTicket.title;
+      this.description = apiTicket.description;
+      this.type = apiTicket.ticket_type;
+      this.selectedTime = selectedTime;
+      this.vatPct = apiTicket.vat_pct;
+      __privateMethod(this, _GomusTicket_instances, calcPriceCentes_fn).call(this);
+      this.quantity = quantity;
+      this.minQuantity = apiTicket.min_persons;
+      this.maxPersons = apiTicket.max_persons;
+      this.maxTotalCapacity = apiTicket.max_total_capacity;
+      this.capacities = { ...apiTicket.capacities };
+      this.totalCapacities = { ...apiTicket.total_capacities };
+      this.timeSlots = __privateMethod(this, _GomusTicket_instances, createTimeslots_fn).call(this);
+      this.quotaIds = apiTicket.quota_ids;
+      this.updateMaxCapacity(selectedTime ?? null);
+      this.shopOrder = apiTicket.shop_order ? apiTicket.shop_order : 0;
+    }
+    get priceCents() {
+      return get(__privateGet(this, _priceCents));
+    }
+    set priceCents(value) {
+      set(__privateGet(this, _priceCents), value, true);
+    }
+    get priceFormatted() {
+      return get(__privateGet(this, _priceFormatted));
+    }
+    set priceFormatted(value) {
+      set(__privateGet(this, _priceFormatted), value);
+    }
+    get quantity() {
+      return get(__privateGet(this, _quantity));
+    }
+    set quantity(value) {
+      set(__privateGet(this, _quantity), value, true);
+    }
+    get totalPriceCents() {
+      return get(__privateGet(this, _totalPriceCents));
+    }
+    set totalPriceCents(value) {
+      set(__privateGet(this, _totalPriceCents), value);
+    }
+    get totalPriceFormatted() {
+      return get(__privateGet(this, _totalPriceFormatted));
+    }
+    set totalPriceFormatted(value) {
+      set(__privateGet(this, _totalPriceFormatted), value);
+    }
+    updateMaxCapacity(isoTime) {
+      if (isoTime) {
+        this.maxCapacity = Math.max(0, this.capacities[isoTime] ?? 0);
+      } else {
+        this.maxCapacity = Math.max(0, ...Object.keys(this.capacities).map((key) => this.capacities[key])) + this.quantity;
+      }
+      this.updateMaxQuantity();
+    }
+    updateMaxQuantity() {
+      this.maxQuantity = Math.min(this.maxPersons, this.maxCapacity);
+      this.quantityOptions = generateQuantityOptions(this.minQuantity, this.maxQuantity);
+      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;
+      });
+    }
+  }
+  _priceCents = new WeakMap();
+  _priceFormatted = new WeakMap();
+  _quantity = new WeakMap();
+  _totalPriceCents = new WeakMap();
+  _totalPriceFormatted = new WeakMap();
+  _GomusTicket_instances = new WeakSet();
+  calcPriceCentes_fn = function() {
+    if (this.apiTicket.tax_included) {
+      this.priceCents = this.apiTicket.price_cents;
+    } else {
+      this.priceCents = this.apiTicket.price_cents * (1 + this.vatPct / 100);
+    }
+  };
+  createTimeslots_fn = function() {
+    let ret = Object.keys(this.capacities).map((key) => ({
+      startAt: key,
+      timeFormatted: formatTime(key),
+      capacity: this.capacities[key],
+      totalCapacity: this.totalCapacities[key],
+      available: this.capacities[key] >= this.minAvailableCapacity,
+      selected: this.selectedTime === key,
+      quotaIds: this.apiTicket.quota_ids
+    }));
+    ret = ret.filter((st) => this.totalCapacities[st.startAt]).sort((a, b) => a.startAt > b.startAt ? 1 : -1);
+    return ret;
+  };
+  function initGomusTickets(tickets) {
+    const tmpTickets = {};
+    Object.keys(tickets).forEach((ticketId) => {
+      if (tickets[ticketId]) tmpTickets[ticketId] = new GomusTicket(tickets[ticketId]);
+    });
+    return sort(Object.values(tmpTickets), (f) => f.shopOrder);
+  }
   const defaultErrorConfig = {
     withStackTrace: false
   };
@@ -11909,7 +11937,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           }
           items.push(
             new CartItem(
-              new GomusTicket(cartItem.item.ticketObject, 0, cartItem.item.selectedTime, cartItem.attributes.quantity),
+              new GomusTicket(cartItem.item.apiTicket, {
+                minAvailableCapacity: 0,
+                selectedTime: cartItem.item.selectedTime,
+                quantity: cartItem.attributes.quantity
+              }),
               cartItem.type
             )
           );
@@ -14749,7 +14781,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   _props12 = new WeakMap();
   let CalendarHeaderState = _CalendarHeaderState;
-  var root_2$i = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$g = /* @__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, [
@@ -14850,7 +14882,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var div = root_2$i();
+        var div = root_2$g();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         snippet(node_2, () => children() ?? noop$1, () => rootState.snippetProps);
@@ -15098,7 +15130,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$h = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$f = /* @__PURE__ */ from_html(`<div><!></div>`);
   function Calendar_day($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15130,7 +15162,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$h();
+        var div = root_2$f();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -15191,7 +15223,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_day, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$g = /* @__PURE__ */ from_html(`<table><!></table>`);
+  var root_2$e = /* @__PURE__ */ from_html(`<table><!></table>`);
   function Calendar_grid($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15220,7 +15252,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var table = root_2$g();
+        var table = root_2$e();
         attribute_effect(table, () => ({ ...get(mergedProps) }));
         var node_2 = child(table);
         snippet(node_2, () => children() ?? noop$1);
@@ -15265,7 +15297,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$f = /* @__PURE__ */ from_html(`<tbody><!></tbody>`);
+  var root_2$d = /* @__PURE__ */ from_html(`<tbody><!></tbody>`);
   function Calendar_grid_body($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15294,7 +15326,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tbody = root_2$f();
+        var tbody = root_2$d();
         attribute_effect(tbody, () => ({ ...get(mergedProps) }));
         var node_2 = child(tbody);
         snippet(node_2, () => children() ?? noop$1);
@@ -15339,7 +15371,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_body, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$e = /* @__PURE__ */ from_html(`<td><!></td>`);
+  var root_2$c = /* @__PURE__ */ from_html(`<td><!></td>`);
   function Calendar_cell($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15375,7 +15407,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var td = root_2$e();
+        var td = root_2$c();
         attribute_effect(td, () => ({ ...get(mergedProps) }));
         var node_2 = child(td);
         snippet(node_2, () => children() ?? noop$1, () => cellState.snippetProps);
@@ -15447,7 +15479,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$d = /* @__PURE__ */ from_html(`<thead><!></thead>`);
+  var root_2$b = /* @__PURE__ */ from_html(`<thead><!></thead>`);
   function Calendar_grid_head($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15476,7 +15508,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var thead = root_2$d();
+        var thead = root_2$b();
         attribute_effect(thead, () => ({ ...get(mergedProps) }));
         var node_2 = child(thead);
         snippet(node_2, () => children() ?? noop$1);
@@ -15521,7 +15553,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_head, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$c = /* @__PURE__ */ from_html(`<th><!></th>`);
+  var root_2$a = /* @__PURE__ */ from_html(`<th><!></th>`);
   function Calendar_head_cell($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15550,7 +15582,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var th = root_2$c();
+        var th = root_2$a();
         attribute_effect(th, () => ({ ...get(mergedProps) }));
         var node_2 = child(th);
         snippet(node_2, () => children() ?? noop$1);
@@ -15595,7 +15627,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_head_cell, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$b = /* @__PURE__ */ from_html(`<tr><!></tr>`);
+  var root_2$9 = /* @__PURE__ */ from_html(`<tr><!></tr>`);
   function Calendar_grid_row($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15624,7 +15656,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tr = root_2$b();
+        var tr = root_2$9();
         attribute_effect(tr, () => ({ ...get(mergedProps) }));
         var node_2 = child(tr);
         snippet(node_2, () => children() ?? noop$1);
@@ -15669,7 +15701,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_row, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$a = /* @__PURE__ */ from_html(`<header><!></header>`);
+  var root_2$8 = /* @__PURE__ */ from_html(`<header><!></header>`);
   function Calendar_header($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15698,7 +15730,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var header = root_2$a();
+        var header = root_2$8();
         attribute_effect(header, () => ({ ...get(mergedProps) }));
         var node_2 = child(header);
         snippet(node_2, () => children() ?? noop$1);
@@ -15743,7 +15775,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_header, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$9 = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$7 = /* @__PURE__ */ from_html(`<div><!></div>`);
   function Calendar_heading($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15775,7 +15807,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$9();
+        var div = root_2$7();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -15836,7 +15868,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_heading, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$8 = /* @__PURE__ */ from_html(`<button><!></button>`);
+  var root_2$6 = /* @__PURE__ */ from_html(`<button><!></button>`);
   function Calendar_next_button($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15866,7 +15898,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var button = root_2$8();
+        var button = root_2$6();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -15918,7 +15950,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$7 = /* @__PURE__ */ from_html(`<button><!></button>`);
+  var root_2$5 = /* @__PURE__ */ from_html(`<button><!></button>`);
   function Calendar_prev_button($$anchor, $$props) {
     const uid = props_id();
     push($$props, true);
@@ -15948,7 +15980,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$5();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -16065,12 +16097,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _details = new WeakMap();
   _params = new WeakMap();
   const ticketsCalendar = new TicketsCalendar();
-  var root_3$3 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
+  var root_3$2 = /* @__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$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-  var root_1$5 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
+  var root_2$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+  var root_1$4 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
   function CalendarUI($$anchor, $$props) {
     push($$props, true);
     let calendarClass = prop($$props, "calendarClass", 7);
@@ -16082,18 +16114,18 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         bubbles: true
       }));
     });
-    var div = root_1$5();
+    var div = root_1$4();
     var node = child(div);
     {
       const children = ($$anchor2, $$arg0) => {
         let months = () => $$arg0 == null ? void 0 : $$arg0().months;
         let weekdays = () => $$arg0 == null ? void 0 : $$arg0().weekdays;
-        var fragment = root_2$6();
+        var fragment = root_2$4();
         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$3();
+              var fragment_1 = root_3$2();
               var node_2 = first_child(fragment_1);
               component(node_2, () => Calendar_prev_button, ($$anchor5, Calendar_PrevButton) => {
                 Calendar_PrevButton($$anchor5, {
@@ -16409,8 +16441,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       }
     };
   }
-  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>`);
+  var root_2$3 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
+  var root_1$3 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
   function Timeslots($$anchor, $$props) {
     push($$props, true);
     const binding_group = [];
@@ -16427,13 +16459,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var node = first_child(fragment);
     {
       var consequent = ($$anchor2) => {
-        var ul = root_1$4();
+        var ul = root_1$3();
         each(ul, 20, () => details.timeslots, (timeslot) => timeslot, ($$anchor3, timeslot) => {
           const selected = /* @__PURE__ */ user_derived(() => {
             var _a2;
             return ((_a2 = details.ticketSelectionDetails) == null ? void 0 : _a2.selectedTimeslot) === timeslot.startAt;
           });
-          var li = root_2$5();
+          var li = root_2$3();
           var label = child(li);
           var text2 = child(label);
           var input = sibling(text2);
@@ -16475,7 +16507,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$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
   var root$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   function Wrapper($$anchor, $$props) {
     push($$props, true);
@@ -16508,7 +16540,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var node_2 = sibling(node, 2);
     {
       var consequent_1 = ($$anchor2) => {
-        var div = root_2$4();
+        var div = root_2$2();
         attribute_effect(div, () => ({ ...restProps }));
         var node_3 = child(div);
         snippet(node_3, children);
@@ -16702,6 +16734,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     updateSelectedTickets(ticket, quantity) {
       var _a2, _b2, _c2;
+      if (!this.ticketSelectionDetails) return;
       const index2 = this.timeslotTickets.findIndex((t) => t.id == ticket.id);
       const duplicate = this.timeslotTickets[index2];
       duplicate.quantity = quantity;
@@ -16713,159 +16746,10 @@ 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$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);
-    let details = prop($$props, "details", 7);
-    var fragment = comment();
-    var node = first_child(fragment);
-    each(node, 16, () => Object.values(details().annualTickets), (ticket) => ticket, ($$anchor2, ticket) => {
-      var tr = root_1$3();
-      var td = child(tr);
-      var select = child(td);
-      each(select, 21, () => ticket.quantityOptions, index, ($$anchor3, quantity) => {
-        var option = root_2$3();
-        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);
-      reset(td);
-      var td_1 = sibling(td);
-      var p = child(td_1);
-      var text_1 = child(p, true);
-      reset(p);
-      var node_1 = sibling(p, 2);
-      html(node_1, () => ticket.description);
-      reset(td_1);
-      var td_2 = sibling(td_1);
-      var text_2 = child(td_2, true);
-      reset(td_2);
-      reset(tr);
-      template_effect(
-        ($0) => {
-          set_attribute(select, "name", $0);
-          set_text(text_1, ticket.title);
-          set_text(text_2, ticket.priceFormatted);
-        },
-        [() => ticket.id.toString()]
-      );
-      append($$anchor2, tr);
-    });
-    append($$anchor, fragment);
-    return pop({
-      get details() {
-        return details();
-      },
-      set details($$value) {
-        details($$value);
-        flushSync();
-      }
-    });
-  }
-  create_custom_element(Annual, { details: {} }, [], [], true);
-  var on_change = (e, details, ticket) => {
-    var _a2;
-    return details().updateSelectedTickets(ticket, parseInt((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value));
-  };
-  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);
-    function hasTimeSlotInCapacities(ticket) {
-      var _a2;
-      if ((_a2 = details().ticketSelectionDetails) == null ? void 0 : _a2.selectedTimeslot) {
-        return Object.keys(ticket.capacities).includes(details().ticketSelectionDetails.selectedTimeslot);
-      } else {
-        return false;
-      }
-    }
-    var fragment = comment();
-    var node = first_child(fragment);
-    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$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$2();
-            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($$anchor4, option);
-          });
-          reset(select);
-          reset(td);
-          var td_1 = sibling(td);
-          var p = child(td_1);
-          var text_1 = child(p, true);
-          reset(p);
-          var node_2 = sibling(p, 2);
-          html(node_2, () => ticket.description);
-          reset(td_1);
-          var td_2 = sibling(td_1);
-          var text_2 = child(td_2, true);
-          reset(td_2);
-          reset(tr);
-          template_effect(
-            ($0, $1) => {
-              classes = set_class(tr, 1, "", null, classes, $0);
-              set_attribute(select, "name", $1);
-              set_text(text_1, ticket.title);
-              set_text(text_2, ticket.priceFormatted);
-            },
-            [
-              () => ({ hidden: hasTimeSlotInCapacities(ticket) }),
-              () => ticket.id.toString()
-            ]
-          );
-          append($$anchor3, tr);
-        };
-        if_block(node_1, ($$render) => {
-          if (hasTimeSlotInCapacities(ticket) || ticket.type == "normal") $$render(consequent);
-        });
-      }
-      append($$anchor2, fragment_1);
-    });
-    append($$anchor, fragment);
-    return pop({
-      get details() {
-        return details();
-      },
-      set details($$value) {
-        details($$value);
-        flushSync();
-      }
-    });
-  }
-  delegate(["change"]);
-  create_custom_element(Timeslot, { details: {} }, [], [], true);
   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>`);
+  var root_3$1 = /* @__PURE__ */ from_html(`<ol 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) => {

package/package.json

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