@gomusdev/web-components 0.0.6 → 0.0.8

package/README.md

@@ -1,3 +1,6 @@
-# TODO
+# Changelog
 
-# WRITE ME
+## 0.0.8
+- When `go-ticket-selection` filter is `annual`, should correctly show the annual tickets
+- Hide `go-calendar` and `go-timeslots` when filter is `annual`
+- Hide `go-timeslots` when filter is `normal`

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, _mode, _filters, _eventId, _museumIds, _exhibitionIds, _selectedDate, _selectedTimeslot, _selectedTickets, _ticketList, _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, _b, _params, _ticketSelectionDetails, _c, _ticketSelectionDetails2;
+  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, _mode, _filters, _eventId, _museumIds, _exhibitionIds, _ticketIds, _selectedDate, _selectedTimeslot, _selectedTickets, _ticketList, _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, _b, _details, _params, _ticketSelectionDetails, _c, _ticketSelectionDetails2;
   const PUBLIC_VERSION = "5";
   if (typeof window !== "undefined") {
     ((_a = window.__svelte ?? (window.__svelte = {})).v ?? (_a.v = /* @__PURE__ */ new Set())).add(PUBLIC_VERSION);
@@ -4726,6 +4726,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     return void 0;
   }
+  function parseIds(ids) {
+    if (!ids) {
+      return void 0;
+    }
+    const parsed = ids.split(",").map((id) => id.trim()).map(Number).filter((num) => !isNaN(num) && num > 0);
+    return parsed.length > 0 ? parsed : void 0;
+  }
   class User {
     get isAuthenticated() {
       return this.isLoggedIn || this.isGuest;
@@ -5585,6 +5592,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   }
   const TICKETS_CALENDAR_ENDPOINT = "/api/v4/tickets/calendar";
   const TICKET_AND_QUOTAS_ENDPOINT = "/api/v4/tickets/list_and_quotas";
+  const TICKETS_ENDPOINT = "/api/v4/tickets";
   var util;
   (function(util2) {
     util2.assertEqual = (val) => val;
@@ -9518,40 +9526,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     start_at: z.string().date(),
     personalizations: z.array(PersonalizationSchema)
   });
-  const isObject$1 = (value) => {
-    return !!value && value.constructor === Object;
-  };
-  const sort = (array, getter, desc = false) => {
-    if (!array)
-      return [];
-    const asc = (a, b) => getter(a) - getter(b);
-    const dsc = (a, b) => getter(b) - getter(a);
-    return array.slice().sort(desc === true ? dsc : asc);
-  };
-  const alphabetical = (array, getter, dir = "asc") => {
-    if (!array)
-      return [];
-    const asc = (a, b) => `${getter(a)}`.localeCompare(getter(b));
-    const dsc = (a, b) => `${getter(b)}`.localeCompare(getter(a));
-    return array.slice().sort(dir === "desc" ? dsc : asc);
-  };
-  const assign = (initial, override) => {
-    if (!initial || !override)
-      return initial ?? override ?? {};
-    return Object.entries({ ...initial, ...override }).reduce(
-      (acc, [key, value]) => {
-        return {
-          ...acc,
-          [key]: (() => {
-            if (isObject$1(initial[key]))
-              return assign(initial[key], value);
-            return value;
-          })()
-        };
-      },
-      {}
-    );
-  };
   function $2b4dce13dd5a17fa$export$842a2cf37af977e1(amount, numerator) {
     return amount - numerator * Math.floor(amount / numerator);
   }
@@ -10756,6 +10730,40 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       })
     ];
   }
+  const isObject$1 = (value) => {
+    return !!value && value.constructor === Object;
+  };
+  const sort = (array, getter, desc = false) => {
+    if (!array)
+      return [];
+    const asc = (a, b) => getter(a) - getter(b);
+    const dsc = (a, b) => getter(b) - getter(a);
+    return array.slice().sort(desc === true ? dsc : asc);
+  };
+  const alphabetical = (array, getter, dir = "asc") => {
+    if (!array)
+      return [];
+    const asc = (a, b) => `${getter(a)}`.localeCompare(getter(b));
+    const dsc = (a, b) => `${getter(b)}`.localeCompare(getter(a));
+    return array.slice().sort(dir === "desc" ? dsc : asc);
+  };
+  const assign = (initial, override) => {
+    if (!initial || !override)
+      return initial ?? override ?? {};
+    return Object.entries({ ...initial, ...override }).reduce(
+      (acc, [key, value]) => {
+        return {
+          ...acc,
+          [key]: (() => {
+            if (isObject$1(initial[key]))
+              return assign(initial[key], value);
+            return value;
+          })()
+        };
+      },
+      {}
+    );
+  };
   class GomusTicket {
     constructor(ticketObject, minAvailableCapacity = 0, selectedTime = "", quantity) {
       __publicField(this, "id");
@@ -10859,6 +10867,66 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
     return sort(Object.values(tmpTickets), (f) => f.shopOrder);
   }
+  class GomusAnnualTicket {
+    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, "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 = "annual";
+      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(this.priceCents);
+      this.quantity = quantity || 0;
+      this.minQuantity = ticketObject.min_persons;
+      this.maxPersons = ticketObject.max_persons;
+      this.quantityOptions = generateQuantityOptions(this.minQuantity, this.maxPersons);
+      this.shopOrder = ticketObject.shop_order ? ticketObject.shop_order : 0;
+    }
+    set quantity(value) {
+      this._quantity = value;
+      this.updateTotalPrices();
+    }
+    get quantity() {
+      return this._quantity;
+    }
+    updateTotalPrices() {
+      this.totalPriceCents = this.quantity * this.priceCents;
+      this.totalPriceFormatted = formatCurrency(this.totalPriceCents);
+    }
+  }
+  function initAnnualTickets(tickets) {
+    const tmpTickets = {};
+    Object.keys(tickets).forEach((ticketId) => {
+      if (tickets[ticketId]) tmpTickets[ticketId] = new GomusAnnualTicket(tickets[ticketId]);
+    });
+    return sort(Object.values(tmpTickets), (f) => f.shopOrder);
+  }
   class Shop {
     constructor(apiUrl, shopDomain, locale, type = "angular") {
       __privateAdd(this, _Shop_instances);
@@ -10983,6 +11051,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     ticketsAndQuotas(params) {
       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 });
+    }
     /**
      * Returns a reactive value that will contain the fetched data, no need to await.
      *
@@ -11145,6 +11216,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       __privateAdd(this, _eventId, /* @__PURE__ */ state());
       __privateAdd(this, _museumIds, /* @__PURE__ */ state());
       __privateAdd(this, _exhibitionIds, /* @__PURE__ */ state());
+      __privateAdd(this, _ticketIds, /* @__PURE__ */ state());
       __privateAdd(this, _selectedDate, /* @__PURE__ */ state());
       __privateAdd(this, _selectedTimeslot, /* @__PURE__ */ state());
       __privateAdd(this, _selectedTickets, /* @__PURE__ */ state(proxy([])));
@@ -11180,6 +11252,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     set exhibitionIds(value) {
       set(__privateGet(this, _exhibitionIds), value, true);
     }
+    get ticketIds() {
+      return get(__privateGet(this, _ticketIds));
+    }
+    set ticketIds(value) {
+      set(__privateGet(this, _ticketIds), value, true);
+    }
     get selectedDate() {
       return get(__privateGet(this, _selectedDate));
     }
@@ -11217,6 +11295,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   _eventId = new WeakMap();
   _museumIds = new WeakMap();
   _exhibitionIds = new WeakMap();
+  _ticketIds = new WeakMap();
   _selectedDate = new WeakMap();
   _selectedTimeslot = new WeakMap();
   _selectedTickets = new WeakMap();
@@ -13824,7 +13903,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   };
   _props12 = new WeakMap();
   let CalendarHeaderState = _CalendarHeaderState;
-  var root_2$e = /* @__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, [
@@ -13925,7 +14004,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var div = root_2$e();
+        var div = root_2$g();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         snippet(node_2, () => children() ?? noop$1, () => rootState.snippetProps);
@@ -14173,7 +14252,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$d = /* @__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);
@@ -14205,7 +14284,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$d();
+        var div = root_2$f();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -14266,7 +14345,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_day, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$c = /* @__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);
@@ -14295,7 +14374,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var table = root_2$c();
+        var table = root_2$e();
         attribute_effect(table, () => ({ ...get(mergedProps) }));
         var node_2 = child(table);
         snippet(node_2, () => children() ?? noop$1);
@@ -14340,7 +14419,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$b = /* @__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);
@@ -14369,7 +14448,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tbody = root_2$b();
+        var tbody = root_2$d();
         attribute_effect(tbody, () => ({ ...get(mergedProps) }));
         var node_2 = child(tbody);
         snippet(node_2, () => children() ?? noop$1);
@@ -14414,7 +14493,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_body, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$a = /* @__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);
@@ -14450,7 +14529,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var td = root_2$a();
+        var td = root_2$c();
         attribute_effect(td, () => ({ ...get(mergedProps) }));
         var node_2 = child(td);
         snippet(node_2, () => children() ?? noop$1, () => cellState.snippetProps);
@@ -14522,7 +14601,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     [],
     true
   );
-  var root_2$9 = /* @__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);
@@ -14551,7 +14630,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var thead = root_2$9();
+        var thead = root_2$b();
         attribute_effect(thead, () => ({ ...get(mergedProps) }));
         var node_2 = child(thead);
         snippet(node_2, () => children() ?? noop$1);
@@ -14596,7 +14675,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_head, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$8 = /* @__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);
@@ -14625,7 +14704,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var th = root_2$8();
+        var th = root_2$a();
         attribute_effect(th, () => ({ ...get(mergedProps) }));
         var node_2 = child(th);
         snippet(node_2, () => children() ?? noop$1);
@@ -14670,7 +14749,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_head_cell, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$7 = /* @__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);
@@ -14699,7 +14778,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var tr = root_2$7();
+        var tr = root_2$9();
         attribute_effect(tr, () => ({ ...get(mergedProps) }));
         var node_2 = child(tr);
         snippet(node_2, () => children() ?? noop$1);
@@ -14744,7 +14823,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_grid_row, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$6 = /* @__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);
@@ -14773,7 +14852,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var header = root_2$6();
+        var header = root_2$8();
         attribute_effect(header, () => ({ ...get(mergedProps) }));
         var node_2 = child(header);
         snippet(node_2, () => children() ?? noop$1);
@@ -14818,7 +14897,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_header, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$5 = /* @__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);
@@ -14850,7 +14929,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate_1 = ($$anchor2) => {
-        var div = root_2$5();
+        var div = root_2$7();
         attribute_effect(div, () => ({ ...get(mergedProps) }));
         var node_2 = child(div);
         {
@@ -14911,7 +14990,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
   }
   create_custom_element(Calendar_heading, { children: {}, child: {}, ref: {}, id: {} }, [], [], true);
-  var root_2$4 = /* @__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);
@@ -14941,7 +15020,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var button = root_2$4();
+        var button = root_2$6();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -14993,7 +15072,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$3 = /* @__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);
@@ -15023,7 +15102,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, fragment_1);
       };
       var alternate = ($$anchor2) => {
-        var button = root_2$3();
+        var button = root_2$5();
         attribute_effect(button, () => ({ ...get(mergedProps) }));
         var node_2 = child(button);
         snippet(node_2, () => children() ?? noop$1);
@@ -15078,7 +15157,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   let Calendar$1 = (_b = class {
     constructor() {
       __privateAdd(this, _startAt, /* @__PURE__ */ state(proxy($14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()))));
-      __privateAdd(this, _selected, /* @__PURE__ */ state(proxy($14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()))));
+      __privateAdd(this, _selected, /* @__PURE__ */ state(void 0));
     }
     get startAt() {
       return get(__privateGet(this, _startAt));
@@ -15105,16 +15184,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   class TicketsCalendar extends Calendar$1 {
     constructor() {
       super(...arguments);
-      __privateAdd(this, _params, /* @__PURE__ */ user_derived(() => ({
-        by_bookable: true,
-        "by_ticket_types[]": void 0,
-        "by_ticket_ids[]": void 0,
-        "by_museum_ids[]": void 0,
-        "by_exhibition_ids[]": void 0,
-        // these logic are there to minimize fetches
-        start_at: this.startAt.set({ day: 1 }).toString(),
-        end_at: this.startAt.add({ months: 1 }).set({ day: 7 }).toString()
-      })));
+      __privateAdd(this, _details, /* @__PURE__ */ state());
+      __privateAdd(this, _params, /* @__PURE__ */ user_derived(() => {
+        var _a2, _b2, _c2, _d;
+        return {
+          by_bookable: true,
+          "by_ticket_types[]": (_a2 = this.details) == null ? void 0 : _a2.filters,
+          "by_ticket_ids[]": (_b2 = this.details) == null ? void 0 : _b2.ticketIds,
+          "by_museum_ids[]": (_c2 = this.details) == null ? void 0 : _c2.museumIds,
+          "by_exhibition_ids[]": (_d = this.details) == null ? void 0 : _d.exhibitionIds,
+          start_at: this.startAt.set({ day: 1 }).toString(),
+          end_at: this.startAt.add({ months: 1 }).set({ day: 7 }).toString()
+        };
+      }));
+    }
+    get details() {
+      return get(__privateGet(this, _details));
+    }
+    set details(value) {
+      set(__privateGet(this, _details), value, true);
     }
     get params() {
       return get(__privateGet(this, _params));
@@ -15127,14 +15215,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return ret;
     }
   }
+  _details = new WeakMap();
   _params = new WeakMap();
   const ticketsCalendar = new TicketsCalendar();
   var root_3$1 = /* @__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$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-  var root_1$2 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
+  var root_2$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+  var root_1$3 = /* @__PURE__ */ from_html(`<div data-calendar-wrapper=""><!></div>`);
   function CalendarUI($$anchor, $$props) {
     push($$props, true);
     let calendarClass = prop($$props, "calendarClass", 7);
@@ -15146,13 +15235,13 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         bubbles: true
       }));
     });
-    var div = root_1$2();
+    var div = root_1$3();
     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$2();
+        var fragment = root_2$4();
         var node_1 = first_child(fragment);
         component(node_1, () => Calendar_header, ($$anchor3, Calendar_Header) => {
           Calendar_Header($$anchor3, {
@@ -15352,7 +15441,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let ticketSelectionDetails = /* @__PURE__ */ state(void 0);
     onMount(() => {
       set(ticketSelectionDetails, getTicketSelectionDetails($$props.$$host), true);
-      if (get(ticketSelectionDetails)) get(ticketSelectionDetails).selectedDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
+      ticketsCalendar.details = get(ticketSelectionDetails);
+      if (get(ticketSelectionDetails)) get(ticketSelectionDetails).selectedDate = void 0;
     });
     let wrapper = /* @__PURE__ */ state(void 0);
     onMount(() => {
@@ -15372,8 +15462,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         });
       };
       if_block(node, ($$render) => {
-        var _a2;
-        if (((_a2 = get(ticketSelectionDetails)) == null ? void 0 : _a2.mode) === "ticket") $$render(consequent);
+        var _a2, _b2;
+        if (((_a2 = get(ticketSelectionDetails)) == null ? void 0 : _a2.mode) === "ticket" && !((_b2 = get(ticketSelectionDetails).filters) == null ? void 0 : _b2.includes("annual"))) $$render(consequent);
       });
     }
     reset(div);
@@ -15442,11 +15532,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       set(__privateGet(this, _ticketSelectionDetails), value, true);
     }
     get timeslots() {
-      var _a2, _b2, _c2, _d;
+      var _a2, _b2, _c2, _d, _e;
       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 = (_d = this.ticketSelectionDetails) == null ? void 0 : _d.exhibitionIds;
+      const ticketIds = (_e = this.ticketSelectionDetails) == null ? void 0 : _e.ticketIds;
       if (!date) return [];
       const result = snapshot(shop.ticketsAndQuotas({
         by_bookable: true,
@@ -15454,14 +15545,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         // @ts-ignore
         "by_ticket_types[]": ticketTypes,
         "by_museum_ids[]": museumIds,
-        "by_exhibition_ids[]": exhibitionIds
+        "by_exhibition_ids[]": exhibitionIds,
+        "by_ticket_ids[]": ticketIds,
+        locale: shop.locale
       }));
       if (!result) return [];
       return generateAvailableTimeSlots(result.tickets, result.quotas);
     }
   }, _ticketSelectionDetails = new WeakMap(), _c);
-  var root_2$1 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
-  var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
+  var root_2$3 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
+  var root_1$2 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
   function Timeslots($$anchor, $$props) {
     push($$props, true);
     const binding_group = [];
@@ -15480,9 +15573,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var node = first_child(fragment);
     {
       var consequent = ($$anchor2) => {
-        var ul = root_1$1();
+        var ul = root_1$2();
         each(ul, 20, () => details.timeslots, (timeslot) => timeslot, ($$anchor3, timeslot) => {
-          var li = root_2$1();
+          var li = root_2$3();
           var label = child(li);
           var text2 = child(label);
           var input = sibling(text2);
@@ -15514,7 +15607,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         append($$anchor2, ul);
       };
       if_block(node, ($$render) => {
-        if (details.ticketSelectionDetails) $$render(consequent);
+        var _a2;
+        if (details.ticketSelectionDetails && ((_a2 = details.ticketSelectionDetails.filters) == null ? void 0 : _a2.includes("time_slot"))) $$render(consequent);
       });
     }
     append($$anchor, fragment);
@@ -15522,7 +15616,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 = /* @__PURE__ */ from_html(`<div><!></div>`);
+  var root_2$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
   var root = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   function Wrapper($$anchor, $$props) {
     push($$props, true);
@@ -15555,7 +15649,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     var node_2 = sibling(node, 2);
     {
       var consequent_1 = ($$anchor2) => {
-        var div = root_2();
+        var div = root_2$2();
         attribute_effect(div, () => ({ ...restProps }));
         var node_3 = child(div);
         snippet(node_3, children);
@@ -15587,7 +15681,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   create_custom_element(Wrapper, { host: {}, children: {} }, [], [], true);
   function TicketSelection($$anchor, $$props) {
     push($$props, true);
-    let mode = prop($$props, "mode", 7), filter = prop($$props, "filter", 7), eventId = prop($$props, "eventId", 7), children = prop($$props, "children", 7), museumId = prop($$props, "museumId", 7), exhibitionId = prop($$props, "exhibitionId", 7), restProps = /* @__PURE__ */ rest_props($$props, [
+    let mode = prop($$props, "mode", 7), filter = prop($$props, "filter", 7), eventId = prop($$props, "eventId", 7), children = prop($$props, "children", 7), museumIds = prop($$props, "museumIds", 7), exhibitionIds = prop($$props, "exhibitionIds", 7), ticketIds = prop($$props, "ticketIds", 7), restProps = /* @__PURE__ */ rest_props($$props, [
       "$$slots",
       "$$events",
       "$$legacy",
@@ -15596,15 +15690,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       "filter",
       "eventId",
       "children",
-      "museumId",
-      "exhibitionId"
+      "museumIds",
+      "exhibitionIds",
+      "ticketIds"
     ]);
     const details = new TicketSelectionDetails();
     details.mode = mode();
     details.filters = [filter()];
     details.eventId = eventId();
-    details.museumIds = [museumId()];
-    details.exhibitionIds = [exhibitionId()];
+    details.museumIds = parseIds(museumIds());
+    details.exhibitionIds = parseIds(exhibitionIds());
+    details.ticketIds = parseIds(ticketIds());
     setTicketSelectionDetails($$props.$$host, details);
     let cls = /* @__PURE__ */ user_derived(() => [
       "go-ticket-selection",
@@ -15653,18 +15749,25 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         children($$value);
         flushSync();
       },
-      get museumId() {
-        return museumId();
+      get museumIds() {
+        return museumIds();
       },
-      set museumId($$value) {
-        museumId($$value);
+      set museumIds($$value) {
+        museumIds($$value);
         flushSync();
       },
-      get exhibitionId() {
-        return exhibitionId();
+      get exhibitionIds() {
+        return exhibitionIds();
       },
-      set exhibitionId($$value) {
-        exhibitionId($$value);
+      set exhibitionIds($$value) {
+        exhibitionIds($$value);
+        flushSync();
+      },
+      get ticketIds() {
+        return ticketIds();
+      },
+      set ticketIds($$value) {
+        ticketIds($$value);
         flushSync();
       }
     });
@@ -15676,8 +15779,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       eventId: { attribute: "event-id", reflect: true, type: "Number" },
       filter: {},
       children: {},
-      museumId: {},
-      exhibitionId: {}
+      museumIds: {},
+      exhibitionIds: {},
+      ticketIds: {}
     },
     [],
     ["details"],
@@ -15694,132 +15798,231 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       set(__privateGet(this, _ticketSelectionDetails2), value, true);
     }
     get tickets() {
-      var _a2, _b2, _c2, _d, _e;
+      var _a2, _b2, _c2, _d, _e, _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 = (_d = this.ticketSelectionDetails) == null ? void 0 : _d.exhibitionIds;
-      if (!date && !((_e = this.ticketSelectionDetails) == null ? void 0 : _e.selectedTimeslot)) return [];
+      const ticketIds = (_e = this.ticketSelectionDetails) == null ? void 0 : _e.ticketIds;
+      if (!date && (!((_f = this.ticketSelectionDetails) == null ? void 0 : _f.selectedTimeslot) && (ticketTypes == null ? void 0 : ticketTypes.includes("time_slot")))) return [];
       const result = snapshot(shop.ticketsAndQuotas({
         by_bookable: true,
         valid_at: date == null ? void 0 : date.toString(),
         // @ts-ignore
         "by_ticket_types[]": ticketTypes,
         "by_museum_ids[]": museumIds,
-        "by_exhibition_ids[]": exhibitionIds
+        "by_exhibition_ids[]": exhibitionIds,
+        "by_ticket_ids[]": ticketIds,
+        locale: shop.locale
       }));
       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 [];
+      const result = snapshot(shop.tickets({
+        by_bookable: true,
+        // @ts-ignore
+        "by_ticket_types[]": ticketTypes,
+        "by_ticket_ids[]": ticketIds,
+        locale: shop.locale
+      }));
+      if (!result) return [];
+      return initAnnualTickets(result.tickets);
+    }
   }
   _ticketSelectionDetails2 = new WeakMap();
-  var root_4 = /* @__PURE__ */ from_html(`<option> </option>`);
-  var root_3 = /* @__PURE__ */ from_html(`<tr><td><select></select></td><td><p> </p> <!></td><td> </td><td> </td></tr>`);
-  var root_1 = /* @__PURE__ */ from_html(`<table><thead><tr><th>Quantity</th><th>Ticket</th><th>Price</th><th>Total</th></tr></thead><tbody></tbody></table>`);
-  function Tickets($$anchor, $$props) {
+  var root_2$1 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_1$1 = /* @__PURE__ */ from_html(`<tr><td><select></select></td><td><p> </p> <!></td><td> </td></tr>`);
+  function Annual($$anchor, $$props) {
     push($$props, true);
-    const details = new Details();
-    onMount(() => {
-      details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    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$1();
+      var td = child(tr);
+      var select = child(td);
+      each(select, 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);
+      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();
+      }
     });
-    let selection = prop($$props, "selection", 7), timeslot = prop($$props, "timeslot", 7);
+  }
+  create_custom_element(Annual, { details: {} }, [], [], true);
+  var root_3 = /* @__PURE__ */ from_html(`<option> </option>`);
+  var root_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);
+      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().tickets), (ticket) => ticket, ($$anchor2, ticket) => {
+      var fragment_1 = comment();
+      var node_1 = first_child(fragment_1);
+      {
+        var consequent = ($$anchor3) => {
+          var tr = root_2();
+          let classes;
+          var td = child(tr);
+          var select = child(td);
+          each(select, 21, () => ticket.quantityOptions, index, ($$anchor4, quantity) => {
+            var option = root_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($$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();
+      }
+    });
+  }
+  create_custom_element(Timeslot, { details: {} }, [], [], true);
+  var root_1 = /* @__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>`);
+  function Tickets($$anchor, $$props) {
+    push($$props, true);
+    const details = new Details();
+    onMount(() => {
+      details.ticketSelectionDetails = getTicketSelectionDetails($$props.$$host);
+    });
+    var fragment = comment();
+    var node = first_child(fragment);
     {
       var consequent_1 = ($$anchor2) => {
         var table = root_1();
         var tbody = sibling(child(table));
-        each(tbody, 20, () => Object.values(details.tickets), (ticket) => ticket, ($$anchor3, ticket) => {
-          var fragment_1 = comment();
-          var node_1 = first_child(fragment_1);
-          {
-            var consequent = ($$anchor4) => {
-              var tr = root_3();
-              let classes;
-              var td = child(tr);
-              var select = child(td);
-              each(select, 21, () => ticket.quantityOptions, index, ($$anchor5, quantity) => {
-                var option = root_4();
-                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($$anchor5, 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);
-              var td_3 = sibling(td_2);
-              var text_3 = child(td_3, true);
-              reset(td_3);
-              reset(tr);
-              template_effect(
-                ($0) => {
-                  classes = set_class(tr, 1, "", null, classes, $0);
-                  set_attribute(select, "name", ticket.id);
-                  set_text(text_1, ticket.title);
-                  set_text(text_2, ticket.priceFormatted);
-                  set_text(text_3, ticket.totalPriceFormatted);
-                },
-                [() => ({ hidden: hasTimeSlotInCapacities(ticket) })]
-              );
-              append($$anchor4, tr);
-            };
-            if_block(node_1, ($$render) => {
-              if (hasTimeSlotInCapacities(ticket)) $$render(consequent);
+        var node_1 = child(tbody);
+        {
+          var consequent = ($$anchor3) => {
+            Annual($$anchor3, {
+              get details() {
+                return details;
+              }
             });
-          }
-          append($$anchor3, fragment_1);
-        });
+          };
+          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);
+          });
+        }
         reset(tbody);
         reset(table);
         append($$anchor2, table);
       };
       if_block(node, ($$render) => {
-        if (details.ticketSelectionDetails && details.ticketSelectionDetails.selectedTimeslot) $$render(consequent_1);
+        if (details.ticketSelectionDetails) $$render(consequent_1);
       });
     }
     append($$anchor, fragment);
-    return pop({
-      details,
-      get selection() {
-        return selection();
-      },
-      set selection($$value) {
-        selection($$value);
-        flushSync();
-      },
-      get timeslot() {
-        return timeslot();
-      },
-      set timeslot($$value) {
-        timeslot($$value);
-        flushSync();
-      }
-    });
+    return pop({ details });
   }
-  customElements.define("go-tickets", create_custom_element(Tickets, { selection: {}, timeslot: {} }, [], ["details"], false));
+  customElements.define("go-tickets", create_custom_element(Tickets, {}, [], ["details"], false));
 })();

package/package.json

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