@bigz-app/booking-widget 0.3.5 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/booking-widget.js +167 -158
  2. package/dist/booking-widget.js.map +1 -1
  3. package/dist/components/EventInstanceSelection.d.ts.map +1 -1
  4. package/dist/index.cjs +167 -158
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.esm.js +167 -158
  7. package/dist/index.esm.js.map +1 -1
  8. package/package.json +1 -2
package/dist/components/EventInstanceSelection.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EventInstanceSelection.d.ts","sourceRoot":"","sources":["../../src/components/EventInstanceSelection.tsx"],"names":[],"mappings":"AAIA,UAAU,SAAS;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,2BAA2B;IACpC,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,SAAS,GAAG,IAAI,CAAC;IACpC,qBAAqB,EAAE,CAAC,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9D,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC;AAoOD,wBAAgB,sBAAsB,CAAC,EACtC,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,uBAA+B,EAC/B,qBAA6B,GAC7B,EAAE,2BAA2B,2CAwyB7B"}
1
+ {"version":3,"file":"EventInstanceSelection.d.ts","sourceRoot":"","sources":["../../src/components/EventInstanceSelection.tsx"],"names":[],"mappings":"AAIA,UAAU,SAAS;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,2BAA2B;IACpC,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,SAAS,GAAG,IAAI,CAAC;IACpC,qBAAqB,EAAE,CAAC,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9D,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC;AAoOD,wBAAgB,sBAAsB,CAAC,EACtC,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,MAAM,EACN,OAAO,EACP,uBAA+B,EAC/B,qBAA6B,GAC7B,EAAE,2BAA2B,2CAizB7B"}
package/dist/index.cjs CHANGED
@@ -10928,16 +10928,7 @@ const spinner = (borderColor) => (jsxRuntime.jsx("div", { style: {
10928
10928
  } }) }));
10929
10929
  function EventInstanceSelection({ eventInstances, selectedEventType, onEventInstanceSelect, onBackToEventTypes, isOpen, onClose, isLoadingEventInstances = false, isLoadingEventDetails = false, }) {
10930
10930
  const [selectedEventInstanceId, setSelectedEventInstanceId] = React__default.useState(null);
10931
- const [openMonths, setOpenMonths] = React__default.useState(new Set());
10932
- const getEventsForMonth = (monthIndex) => {
10933
- return eventInstances.filter((instance) => new Date(instance.startTime).getMonth() === monthIndex);
10934
- };
10935
- const getMinPriceForMonth = (monthIndex) => {
10936
- const monthEvents = getEventsForMonth(monthIndex);
10937
- if (monthEvents.length === 0)
10938
- return 0;
10939
- return Math.min(...monthEvents.map((event) => event.price));
10940
- };
10931
+ const [openGroups, setOpenGroups] = React__default.useState(new Set());
10941
10932
  const getMonthPriceDisplayInfo = (minPrice) => {
10942
10933
  return getPriceDisplayInfo(minPrice, yearPrices);
10943
10934
  };
@@ -10947,27 +10938,48 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
10947
10938
  .filter((instance) => new Date(instance.startTime).getFullYear() === currentYear)
10948
10939
  .map((instance) => instance.price);
10949
10940
  const today = new Date();
10950
- // Get months that have events
10951
- const monthsWithEvents = months
10952
- .map((month, index) => ({
10953
- month,
10954
- index,
10955
- events: getEventsForMonth(index).sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()),
10956
- minPrice: getMinPriceForMonth(index),
10957
- }))
10958
- .filter((monthData) => monthData.events.length > 0);
10941
+ // Group events by month and year, then sort chronologically (e.g., Aug 2025 before Apr 2026)
10942
+ const monthYearGroups = (() => {
10943
+ const groupsMap = new Map();
10944
+ for (const instance of eventInstances) {
10945
+ const date = new Date(instance.startTime);
10946
+ const year = date.getFullYear();
10947
+ const monthIndex = date.getMonth();
10948
+ const key = `${year}-${monthIndex}`;
10949
+ if (!groupsMap.has(key)) {
10950
+ groupsMap.set(key, {
10951
+ key,
10952
+ year,
10953
+ monthIndex,
10954
+ label: `${months[monthIndex]} ${year}`,
10955
+ events: [],
10956
+ minPrice: Number.POSITIVE_INFINITY,
10957
+ });
10958
+ }
10959
+ const group = groupsMap.get(key);
10960
+ group.events.push(instance);
10961
+ if (instance.price < group.minPrice)
10962
+ group.minPrice = instance.price;
10963
+ }
10964
+ return Array.from(groupsMap.values())
10965
+ .map((group) => ({
10966
+ ...group,
10967
+ events: group.events.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()),
10968
+ }))
10969
+ .sort((a, b) => (a.year === b.year ? a.monthIndex - b.monthIndex : a.year - b.year));
10970
+ })();
10959
10971
  const handleEventInstanceSelect = (eventInstance) => {
10960
10972
  setSelectedEventInstanceId(eventInstance.id);
10961
10973
  onEventInstanceSelect(eventInstance);
10962
10974
  };
10963
- const toggleMonth = (monthIndex) => {
10964
- if (openMonths.has(monthIndex)) {
10975
+ const toggleGroup = (key) => {
10976
+ if (openGroups.has(key)) {
10965
10977
  // Close if already open
10966
- setOpenMonths(new Set());
10978
+ setOpenGroups(new Set());
10967
10979
  }
10968
10980
  else {
10969
10981
  // Open only this one, close others
10970
- setOpenMonths(new Set([monthIndex]));
10982
+ setOpenGroups(new Set([key]));
10971
10983
  }
10972
10984
  };
10973
10985
  const handleClose = () => {
@@ -11224,10 +11236,7 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
11224
11236
  minHeight: "400px",
11225
11237
  textAlign: "center",
11226
11238
  padding: "var(--bw-spacing)",
11227
- }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { style: {
11228
- margin: "0 auto 16px",
11229
- fontSize: "48px",
11230
- }, children: "\uD83D\uDCC5" }), jsxRuntime.jsx("h3", { style: {
11239
+ }, children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h3", { style: {
11231
11240
  marginBottom: "8px",
11232
11241
  fontWeight: "600",
11233
11242
  fontSize: "var(--bw-font-size-large)",
@@ -11295,137 +11304,137 @@ function EventInstanceSelection({ eventInstances, selectedEventType, onEventInst
11295
11304
  font-size: 1.1rem !important;
11296
11305
  }
11297
11306
  }
11298
- ` }), jsxRuntime.jsx(Sidebar, { isOpen: isOpen, onClose: handleClose, title: `Terminauswahl - ${selectedEventType?.name || "Event"}`, children: jsxRuntime.jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: {
11299
- display: "flex",
11300
- flexDirection: "column",
11301
- gap: "20px",
11302
- }, children: monthsWithEvents.map(({ month, index, events, minPrice }) => {
11303
- const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
11304
- return (jsxRuntime.jsx(Accordion, { title: month, priceInfo: jsxRuntime.jsx("div", { style: {
11305
- fontSize: "1rem",
11306
- backgroundColor: monthPriceDisplayInfo
11307
- ? monthPriceDisplayInfo.backgroundColor
11308
- : "#14532d",
11309
- color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
11310
- fontWeight: 500,
11311
- marginLeft: "auto",
11312
- padding: "4px 8px",
11313
- borderRadius: "var(--bw-border-radius-small)",
11314
- border: monthPriceDisplayInfo ? "none" : undefined,
11315
- boxShadow: monthPriceDisplayInfo
11316
- ? "0 2px 4px rgba(0, 0, 0, 0.2)"
11317
- : undefined,
11318
- }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openMonths.has(index), onToggle: () => toggleMonth(index), children: jsxRuntime.jsx("div", { style: {
11319
- display: "flex",
11320
- flexDirection: "column",
11321
- gap: "12px",
11322
- paddingTop: "12px",
11323
- }, children: events.map((event) => {
11324
- const availableSpots = event.maxParticipants - event.participantCount;
11325
- const isFullyBooked = availableSpots === 0;
11326
- const startDate = new Date(event.startTime);
11327
- const isPastEvent = today.toISOString() >= startDate.toISOString();
11328
- return (jsxRuntime.jsxs("div", { className: "bw-event-instance-card", style: {
11329
- position: "relative",
11330
- cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
11331
- ? "pointer"
11332
- : "not-allowed",
11333
- border: "1px solid var(--bw-border-color)",
11334
- backgroundColor: "var(--bw-surface-color)",
11335
- borderRadius: "var(--bw-border-radius)",
11336
- padding: "16px 20px",
11337
- transition: "all 0.2s ease",
11338
- opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
11339
- filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
11340
- fontFamily: "var(--bw-font-family)",
11341
- }, onClick: () => {
11342
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11343
- handleEventInstanceSelect(event);
11344
- }
11345
- }, onMouseEnter: (e) => {
11346
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11347
- e.currentTarget.style.transform = "scale(1.02)";
11348
- e.currentTarget.style.backgroundColor =
11349
- "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
11350
- }
11351
- }, onMouseLeave: (e) => {
11352
- if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11353
- e.currentTarget.style.transform = "scale(1)";
11354
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
11355
- }
11356
- }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
11357
- position: "absolute",
11358
- top: 0,
11359
- left: 0,
11360
- width: "100%",
11361
- height: "100%",
11362
- backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
11363
- borderRadius: "var(--bw-border-radius)",
11364
- display: "flex",
11365
- alignItems: "center",
11366
- justifyContent: "center",
11367
- }, children: jsxRuntime.jsx("div", { style: {
11368
- width: "32px",
11369
- height: "32px",
11370
- color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
11371
- animation: "spin 1s linear infinite",
11372
- fontSize: "32px",
11373
- }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { style: {
11374
- display: "flex",
11375
- justifyContent: "space-between",
11376
- width: "100%",
11377
- alignItems: "start",
11378
- gap: "12px",
11379
- marginBottom: "4px",
11380
- }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [jsxRuntime.jsx("div", { className: "bw-event-instance-datebox", style: {
11381
- fontSize: "var(--bw-font-size)",
11382
- transition: "all 0.2s ease",
11383
- borderRadius: "var(--bw-border-radius-small)",
11384
- borderTop: `4px solid var(--bw-border-color)`,
11385
- border: "1px solid var(--bw-border-color)",
11386
- width: "40px",
11387
- height: "40px",
11388
- display: "flex",
11389
- alignItems: "center",
11390
- justifyContent: "center",
11391
- fontWeight: "bold",
11392
- color: "var(--bw-text-color)",
11393
- backgroundColor: "var(--bw-background-color)",
11394
- }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
11395
- fontSize: "var(--bw-font-size)",
11396
- color: "var(--bw-text-color)",
11397
- display: "flex",
11398
- flexDirection: "column",
11399
- alignItems: "start",
11400
- justifyContent: "start",
11401
- lineHeight: "1.2",
11402
- }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
11403
- formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
11404
- formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("span", { style: {
11405
- fontSize: "12px",
11406
- fontWeight: 400,
11407
- color: "var(--bw-text-muted)",
11408
- marginLeft: "6px",
11409
- background: "var(--bw-background-muted)",
11410
- whiteSpace: "nowrap",
11411
- }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsx("div", { className: "bw-event-instance-price", style: {
11412
- textAlign: "right",
11413
- display: "flex",
11414
- flexDirection: "column",
11415
- alignItems: "end",
11416
- }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { className: "bw-event-instance-title", style: {
11417
- fontSize: "var(--bw-font-size)",
11418
- fontWeight: "600",
11419
- color: "var(--bw-text-color)",
11420
- lineHeight: "1.25",
11421
- margin: "0 0 2px 0",
11422
- display: "flex",
11423
- alignItems: "center",
11424
- gap: "8px",
11425
- maxWidth: "230px",
11426
- }, children: event.name }))] }, event.id));
11427
- }) }) }, month));
11428
- }) }) }) })] }));
11307
+ ` }), jsxRuntime.jsxs(Sidebar, { isOpen: isOpen, onClose: handleClose, title: "Termin-Auswahl", children: [jsxRuntime.jsx("p", { className: "bw-event-instance-title", children: selectedEventType?.name }), jsxRuntime.jsx("div", { className: "bw-event-instance-list", style: { padding: "24px" }, children: jsxRuntime.jsx("div", { style: {
11308
+ display: "flex",
11309
+ flexDirection: "column",
11310
+ gap: "20px",
11311
+ }, children: monthYearGroups.map(({ key, label, events, minPrice }) => {
11312
+ const monthPriceDisplayInfo = getMonthPriceDisplayInfo(minPrice);
11313
+ return (jsxRuntime.jsx(Accordion, { title: label, priceInfo: jsxRuntime.jsx("div", { style: {
11314
+ fontSize: "1rem",
11315
+ backgroundColor: monthPriceDisplayInfo
11316
+ ? monthPriceDisplayInfo.backgroundColor
11317
+ : "#14532d",
11318
+ color: monthPriceDisplayInfo ? monthPriceDisplayInfo.textColor : "#4ade80",
11319
+ fontWeight: 500,
11320
+ marginLeft: "auto",
11321
+ padding: "4px 8px",
11322
+ borderRadius: "var(--bw-border-radius-small)",
11323
+ border: monthPriceDisplayInfo ? "none" : undefined,
11324
+ boxShadow: monthPriceDisplayInfo
11325
+ ? "0 2px 4px rgba(0, 0, 0, 0.2)"
11326
+ : undefined,
11327
+ }, children: `ab ${formatCurrency(minPrice)}` }), isOpen: openGroups.has(key), onToggle: () => toggleGroup(key), children: jsxRuntime.jsx("div", { style: {
11328
+ display: "flex",
11329
+ flexDirection: "column",
11330
+ gap: "12px",
11331
+ paddingTop: "12px",
11332
+ }, children: events.map((event) => {
11333
+ const availableSpots = event.maxParticipants - event.participantCount;
11334
+ const isFullyBooked = availableSpots === 0;
11335
+ const startDate = new Date(event.startTime);
11336
+ const isPastEvent = today.toISOString() >= startDate.toISOString();
11337
+ return (jsxRuntime.jsxs("div", { className: "bw-event-instance-card", style: {
11338
+ position: "relative",
11339
+ cursor: !isFullyBooked && !isPastEvent && event.bookingOpen
11340
+ ? "pointer"
11341
+ : "not-allowed",
11342
+ border: "1px solid var(--bw-border-color)",
11343
+ backgroundColor: "var(--bw-surface-color)",
11344
+ borderRadius: "var(--bw-border-radius)",
11345
+ padding: "16px 20px",
11346
+ transition: "all 0.2s ease",
11347
+ opacity: isFullyBooked || isPastEvent ? 0.3 : 1,
11348
+ filter: isFullyBooked || isPastEvent ? "grayscale(40%)" : "none",
11349
+ fontFamily: "var(--bw-font-family)",
11350
+ }, onClick: () => {
11351
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11352
+ handleEventInstanceSelect(event);
11353
+ }
11354
+ }, onMouseEnter: (e) => {
11355
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11356
+ e.currentTarget.style.transform = "scale(1.02)";
11357
+ e.currentTarget.style.backgroundColor =
11358
+ "var(--bw-surface-muted, rgba(59, 130, 246, 0.1))";
11359
+ }
11360
+ }, onMouseLeave: (e) => {
11361
+ if (!isFullyBooked && !isPastEvent && event.bookingOpen) {
11362
+ e.currentTarget.style.transform = "scale(1)";
11363
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
11364
+ }
11365
+ }, children: [selectedEventInstanceId === event.id && isLoadingEventDetails && (jsxRuntime.jsx("div", { style: {
11366
+ position: "absolute",
11367
+ top: 0,
11368
+ left: 0,
11369
+ width: "100%",
11370
+ height: "100%",
11371
+ backgroundColor: "var(--bw-overlay-color, rgba(15, 23, 42, 0.8))",
11372
+ borderRadius: "var(--bw-border-radius)",
11373
+ display: "flex",
11374
+ alignItems: "center",
11375
+ justifyContent: "center",
11376
+ }, children: jsxRuntime.jsx("div", { style: {
11377
+ width: "32px",
11378
+ height: "32px",
11379
+ color: "var(--bw-highlight-color-muted, rgba(59, 130, 246, 0.8))",
11380
+ animation: "spin 1s linear infinite",
11381
+ fontSize: "32px",
11382
+ }, children: spinner() }) })), jsxRuntime.jsx(SpecialPriceBadge, { price: event.price, yearPrices: yearPrices }), jsxRuntime.jsx(AllocationBadge, { availableSpots: availableSpots, maxParticipants: event.maxParticipants }), jsxRuntime.jsxs("div", { style: {
11383
+ display: "flex",
11384
+ justifyContent: "space-between",
11385
+ width: "100%",
11386
+ alignItems: "start",
11387
+ gap: "12px",
11388
+ marginBottom: "4px",
11389
+ }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "start", gap: "12px" }, children: [jsxRuntime.jsx("div", { className: "bw-event-instance-datebox", style: {
11390
+ fontSize: "var(--bw-font-size)",
11391
+ transition: "all 0.2s ease",
11392
+ borderRadius: "var(--bw-border-radius-small)",
11393
+ borderTop: `4px solid var(--bw-border-color)`,
11394
+ border: "1px solid var(--bw-border-color)",
11395
+ width: "40px",
11396
+ height: "40px",
11397
+ display: "flex",
11398
+ alignItems: "center",
11399
+ justifyContent: "center",
11400
+ fontWeight: "bold",
11401
+ color: "var(--bw-text-color)",
11402
+ backgroundColor: "var(--bw-background-color)",
11403
+ }, children: startDate.getDate() }), jsxRuntime.jsxs("div", { style: {
11404
+ fontSize: "var(--bw-font-size)",
11405
+ color: "var(--bw-text-color)",
11406
+ display: "flex",
11407
+ flexDirection: "column",
11408
+ alignItems: "start",
11409
+ justifyContent: "start",
11410
+ lineHeight: "1.2",
11411
+ }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.startTime) }), formatWeekday(event.startTime) !==
11412
+ formatWeekday(event.endTime) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { className: "bw-event-instance-title", style: { fontWeight: "600", marginBottom: "2px" }, children: formatWeekday(event.endTime) })] }))] }), jsxRuntime.jsx("div", { children: formatWeekday(event.startTime) ===
11413
+ formatWeekday(event.endTime) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.startTime) }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: " - " }), jsxRuntime.jsx("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: formatTime(event.endTime) })] })) : (jsxRuntime.jsxs("span", { style: { color: "var(--bw-text-muted)", fontSize: "14px" }, children: [formatTime(event.startTime), " Uhr"] })) })] }), jsxRuntime.jsxs("span", { style: {
11414
+ fontSize: "12px",
11415
+ fontWeight: 400,
11416
+ color: "var(--bw-text-muted)",
11417
+ marginLeft: "6px",
11418
+ background: "var(--bw-background-muted)",
11419
+ whiteSpace: "nowrap",
11420
+ }, children: [event.durationDays, " Tag", event.durationDays > 1 ? "e" : ""] })] }), jsxRuntime.jsx("div", { className: "bw-event-instance-price", style: {
11421
+ textAlign: "right",
11422
+ display: "flex",
11423
+ flexDirection: "column",
11424
+ alignItems: "end",
11425
+ }, children: jsxRuntime.jsx(PriceDisplay, { price: event.price, yearPrices: yearPrices }) })] }), event.name !== selectedEventType?.name && (jsxRuntime.jsx("h4", { className: "bw-event-instance-title", style: {
11426
+ fontSize: "var(--bw-font-size)",
11427
+ fontWeight: "600",
11428
+ color: "var(--bw-text-color)",
11429
+ lineHeight: "1.25",
11430
+ margin: "0 0 2px 0",
11431
+ display: "flex",
11432
+ alignItems: "center",
11433
+ gap: "8px",
11434
+ maxWidth: "230px",
11435
+ }, children: event.name }))] }, event.id));
11436
+ }) }) }, key));
11437
+ }) }) })] })] }));
11429
11438
  }
11430
11439
 
11431
11440
  // Loading skeleton component for NextEventsPreview