@bigz-app/booking-widget 0.1.13 → 0.1.15
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.
- package/dist/booking-widget.js +385 -99
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/EventTypeDetailsDialog.d.ts +28 -0
- package/dist/components/EventTypeDetailsDialog.d.ts.map +1 -0
- package/dist/components/EventTypeSelection.d.ts +1 -0
- package/dist/components/EventTypeSelection.d.ts.map +1 -1
- package/dist/components/UniversalBookingWidget.d.ts +1 -0
- package/dist/components/UniversalBookingWidget.d.ts.map +1 -1
- package/dist/index.cjs +385 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +385 -99
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/booking-widget.js
CHANGED
|
@@ -6499,6 +6499,279 @@
|
|
|
6499
6499
|
ZodOptional.create;
|
|
6500
6500
|
ZodNullable.create;
|
|
6501
6501
|
|
|
6502
|
+
// Simple markdown to HTML converter with better list handling
|
|
6503
|
+
function convertMarkdownToHtml(markdown) {
|
|
6504
|
+
if (!markdown)
|
|
6505
|
+
return "";
|
|
6506
|
+
let html = markdown;
|
|
6507
|
+
// Process line by line to handle lists properly
|
|
6508
|
+
const lines = html.split("\n");
|
|
6509
|
+
const processedLines = [];
|
|
6510
|
+
let inUlList = false;
|
|
6511
|
+
let inOlList = false;
|
|
6512
|
+
for (let i = 0; i < lines.length; i++) {
|
|
6513
|
+
const line = lines[i];
|
|
6514
|
+
const trimmedLine = line.trim();
|
|
6515
|
+
// Handle unordered lists
|
|
6516
|
+
if (trimmedLine.startsWith("* ")) {
|
|
6517
|
+
if (!inUlList) {
|
|
6518
|
+
processedLines.push("<ul>");
|
|
6519
|
+
inUlList = true;
|
|
6520
|
+
}
|
|
6521
|
+
processedLines.push(`<li>${trimmedLine.substring(2)}</li>`);
|
|
6522
|
+
}
|
|
6523
|
+
// Handle ordered lists
|
|
6524
|
+
else if (/^\d+\.\s/.test(trimmedLine)) {
|
|
6525
|
+
if (!inOlList) {
|
|
6526
|
+
processedLines.push("<ol>");
|
|
6527
|
+
inOlList = true;
|
|
6528
|
+
}
|
|
6529
|
+
processedLines.push(`<li>${trimmedLine.replace(/^\d+\.\s/, "")}</li>`);
|
|
6530
|
+
}
|
|
6531
|
+
// Not a list item
|
|
6532
|
+
else {
|
|
6533
|
+
// Close any open lists
|
|
6534
|
+
if (inUlList) {
|
|
6535
|
+
processedLines.push("</ul>");
|
|
6536
|
+
inUlList = false;
|
|
6537
|
+
}
|
|
6538
|
+
if (inOlList) {
|
|
6539
|
+
processedLines.push("</ol>");
|
|
6540
|
+
inOlList = false;
|
|
6541
|
+
}
|
|
6542
|
+
// Process other markdown
|
|
6543
|
+
if (trimmedLine) {
|
|
6544
|
+
processedLines.push(line);
|
|
6545
|
+
}
|
|
6546
|
+
else {
|
|
6547
|
+
processedLines.push("");
|
|
6548
|
+
}
|
|
6549
|
+
}
|
|
6550
|
+
}
|
|
6551
|
+
// Close any remaining open lists
|
|
6552
|
+
if (inUlList)
|
|
6553
|
+
processedLines.push("</ul>");
|
|
6554
|
+
if (inOlList)
|
|
6555
|
+
processedLines.push("</ol>");
|
|
6556
|
+
html = processedLines.join("\n");
|
|
6557
|
+
// Apply other markdown formatting
|
|
6558
|
+
return (html
|
|
6559
|
+
// Headers
|
|
6560
|
+
.replace(/^### (.*$)/gm, "<h3>$1</h3>")
|
|
6561
|
+
.replace(/^## (.*$)/gm, "<h2>$1</h2>")
|
|
6562
|
+
.replace(/^# (.*$)/gm, "<h1>$1</h1>")
|
|
6563
|
+
// Bold
|
|
6564
|
+
.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
|
|
6565
|
+
// Italic
|
|
6566
|
+
.replace(/\*(.*?)\*/g, "<em>$1</em>")
|
|
6567
|
+
// Underline
|
|
6568
|
+
.replace(/__(.*?)__/g, "<u>$1</u>")
|
|
6569
|
+
// Links
|
|
6570
|
+
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
|
|
6571
|
+
// Blockquotes
|
|
6572
|
+
.replace(/^> (.*$)/gm, "<blockquote>$1</blockquote>")
|
|
6573
|
+
// Paragraphs (but not for lines that are already HTML tags)
|
|
6574
|
+
.replace(/^(?!<[^>]+>)(.+)$/gm, "<p>$1</p>")
|
|
6575
|
+
// Clean up empty paragraphs
|
|
6576
|
+
.replace(/<p>\s*<\/p>/g, "")
|
|
6577
|
+
// Line breaks within paragraphs
|
|
6578
|
+
.replace(/\n(?!<)/g, "<br>"));
|
|
6579
|
+
}
|
|
6580
|
+
const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$1("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6581
|
+
const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6582
|
+
function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
|
|
6583
|
+
if (!isOpen || !eventType)
|
|
6584
|
+
return null;
|
|
6585
|
+
const isAvailable = eventType.hasAvailableInstances;
|
|
6586
|
+
// Memoize the complete HTML including styles to prevent DOM updates
|
|
6587
|
+
const descriptionHtml = Rn.useMemo(() => {
|
|
6588
|
+
if (!eventType.description)
|
|
6589
|
+
return "";
|
|
6590
|
+
const convertedMarkdown = convertMarkdownToHtml(eventType.description);
|
|
6591
|
+
// Return complete HTML with styles to prevent recreation on each render
|
|
6592
|
+
return `<style>
|
|
6593
|
+
.event-description p { margin: 0 0 12px 0; }
|
|
6594
|
+
.event-description p:last-child { margin-bottom: 0; }
|
|
6595
|
+
.event-description strong { font-weight: 600; color: var(--bw-text-color); }
|
|
6596
|
+
.event-description em { font-style: italic; }
|
|
6597
|
+
.event-description u { text-decoration: underline; }
|
|
6598
|
+
.event-description ul, .event-description ol {
|
|
6599
|
+
margin: 12px 0;
|
|
6600
|
+
padding-left: 20px;
|
|
6601
|
+
list-style-type: disc;
|
|
6602
|
+
}
|
|
6603
|
+
.event-description ol { list-style-type: decimal; }
|
|
6604
|
+
.event-description li { margin-bottom: 4px; display: list-item; }
|
|
6605
|
+
.event-description blockquote {
|
|
6606
|
+
margin: 12px 0;
|
|
6607
|
+
padding-left: 16px;
|
|
6608
|
+
border-left: 3px solid var(--bw-border-color);
|
|
6609
|
+
font-style: italic;
|
|
6610
|
+
}
|
|
6611
|
+
.event-description a {
|
|
6612
|
+
color: var(--bw-highlight-color);
|
|
6613
|
+
text-decoration: underline;
|
|
6614
|
+
}
|
|
6615
|
+
.event-description h1, .event-description h2, .event-description h3 {
|
|
6616
|
+
color: var(--bw-text-color);
|
|
6617
|
+
font-weight: 600;
|
|
6618
|
+
margin: 16px 0 8px 0;
|
|
6619
|
+
}
|
|
6620
|
+
.event-description h1 { font-size: 20px; }
|
|
6621
|
+
.event-description h2 { font-size: 18px; }
|
|
6622
|
+
.event-description h3 { font-size: 16px; }
|
|
6623
|
+
</style><div class="event-description">${convertedMarkdown}</div>`;
|
|
6624
|
+
}, [eventType.description]);
|
|
6625
|
+
const handleBookingClick = () => {
|
|
6626
|
+
onEventTypeSelect(eventType);
|
|
6627
|
+
onClose();
|
|
6628
|
+
};
|
|
6629
|
+
return (u$1("div", { style: {
|
|
6630
|
+
position: "fixed",
|
|
6631
|
+
top: 0,
|
|
6632
|
+
left: 0,
|
|
6633
|
+
right: 0,
|
|
6634
|
+
bottom: 0,
|
|
6635
|
+
zIndex: 10000,
|
|
6636
|
+
display: "flex",
|
|
6637
|
+
alignItems: "center",
|
|
6638
|
+
justifyContent: "center",
|
|
6639
|
+
padding: "var(--bw-spacing)",
|
|
6640
|
+
}, onClick: onClose, children: u$1("div", { style: {
|
|
6641
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6642
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6643
|
+
maxWidth: "700px",
|
|
6644
|
+
width: "100%",
|
|
6645
|
+
maxHeight: "90vh",
|
|
6646
|
+
overflow: "auto",
|
|
6647
|
+
position: "relative",
|
|
6648
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6649
|
+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
6650
|
+
fontFamily: "var(--bw-font-family)",
|
|
6651
|
+
}, onClick: (e) => e.stopPropagation(), children: [u$1("button", { onClick: onClose, style: {
|
|
6652
|
+
position: "absolute",
|
|
6653
|
+
top: "var(--bw-spacing)",
|
|
6654
|
+
right: "var(--bw-spacing)",
|
|
6655
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6656
|
+
border: "1px solid var(--bw-border-color)",
|
|
6657
|
+
fontSize: "24px",
|
|
6658
|
+
cursor: "pointer",
|
|
6659
|
+
color: "var(--bw-text-muted)",
|
|
6660
|
+
width: "32px",
|
|
6661
|
+
height: "32px",
|
|
6662
|
+
display: "flex",
|
|
6663
|
+
alignItems: "center",
|
|
6664
|
+
justifyContent: "center",
|
|
6665
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6666
|
+
zIndex: 10,
|
|
6667
|
+
}, onMouseEnter: (e) => {
|
|
6668
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
6669
|
+
}, onMouseLeave: (e) => {
|
|
6670
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
6671
|
+
}, children: "\u00D7" }), u$1("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
|
|
6672
|
+
marginBottom: "24px",
|
|
6673
|
+
padding: "16px",
|
|
6674
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6675
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6676
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6677
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
6678
|
+
fontSize: "14px",
|
|
6679
|
+
fontWeight: "600",
|
|
6680
|
+
color: "var(--bw-highlight-color)",
|
|
6681
|
+
marginBottom: "8px",
|
|
6682
|
+
fontFamily: "var(--bw-font-family)",
|
|
6683
|
+
}, children: eventType.category.name }), u$1("h2", { style: {
|
|
6684
|
+
fontSize: "28px",
|
|
6685
|
+
fontWeight: "700",
|
|
6686
|
+
color: "var(--bw-text-color)",
|
|
6687
|
+
marginBottom: "16px",
|
|
6688
|
+
lineHeight: "1.3",
|
|
6689
|
+
fontFamily: "var(--bw-font-family)",
|
|
6690
|
+
margin: "0 0 16px 0",
|
|
6691
|
+
}, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: u$1("div", { style: { marginBottom: "24px" }, children: u$1("ul", { style: {
|
|
6692
|
+
listStyle: "none",
|
|
6693
|
+
padding: "0",
|
|
6694
|
+
margin: "0",
|
|
6695
|
+
display: "flex",
|
|
6696
|
+
flexDirection: "column",
|
|
6697
|
+
gap: "3px",
|
|
6698
|
+
}, children: eventType.highlights
|
|
6699
|
+
.filter((highlight) => highlight.trim())
|
|
6700
|
+
.map((highlight, index) => (u$1("li", { style: {
|
|
6701
|
+
display: "flex",
|
|
6702
|
+
alignItems: "flex-start",
|
|
6703
|
+
gap: "10px",
|
|
6704
|
+
fontFamily: "var(--bw-font-family)",
|
|
6705
|
+
fontSize: "16px",
|
|
6706
|
+
lineHeight: "1.6",
|
|
6707
|
+
color: "var(--bw-text-color)",
|
|
6708
|
+
}, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$1("div", { style: {
|
|
6709
|
+
marginBottom: "24px",
|
|
6710
|
+
color: "var(--bw-text-muted)",
|
|
6711
|
+
fontSize: "16px",
|
|
6712
|
+
lineHeight: "1.6",
|
|
6713
|
+
fontFamily: "var(--bw-font-family)",
|
|
6714
|
+
padding: "0px 20px",
|
|
6715
|
+
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
|
|
6716
|
+
display: "flex",
|
|
6717
|
+
justifyContent: "space-between",
|
|
6718
|
+
alignItems: "center",
|
|
6719
|
+
marginTop: "32px",
|
|
6720
|
+
padding: "20px",
|
|
6721
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6722
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6723
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6724
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
6725
|
+
fontSize: "14px",
|
|
6726
|
+
color: "var(--bw-text-muted)",
|
|
6727
|
+
fontFamily: "var(--bw-font-family)",
|
|
6728
|
+
marginBottom: "4px",
|
|
6729
|
+
}, children: "Preis ab" }), u$1("div", { style: {
|
|
6730
|
+
fontSize: "32px",
|
|
6731
|
+
fontWeight: "700",
|
|
6732
|
+
color: "var(--bw-text-color)",
|
|
6733
|
+
fontFamily: "var(--bw-font-family)",
|
|
6734
|
+
}, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (u$1("button", { onClick: handleBookingClick, style: {
|
|
6735
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6736
|
+
color: "white",
|
|
6737
|
+
padding: "14px 28px",
|
|
6738
|
+
border: "none",
|
|
6739
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6740
|
+
fontSize: "16px",
|
|
6741
|
+
fontWeight: "600",
|
|
6742
|
+
fontFamily: "var(--bw-font-family)",
|
|
6743
|
+
display: "flex",
|
|
6744
|
+
alignItems: "center",
|
|
6745
|
+
gap: "8px",
|
|
6746
|
+
cursor: "pointer",
|
|
6747
|
+
transition: "all 0.2s ease",
|
|
6748
|
+
}, onMouseEnter: (e) => {
|
|
6749
|
+
e.currentTarget.style.opacity = "0.9";
|
|
6750
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
6751
|
+
}, onMouseLeave: (e) => {
|
|
6752
|
+
e.currentTarget.style.opacity = "1";
|
|
6753
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6754
|
+
}, children: [u$1(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
|
|
6755
|
+
position: "absolute",
|
|
6756
|
+
inset: 0,
|
|
6757
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
6758
|
+
backdropFilter: "blur(2px)",
|
|
6759
|
+
display: "flex",
|
|
6760
|
+
alignItems: "center",
|
|
6761
|
+
justifyContent: "center",
|
|
6762
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6763
|
+
}, children: u$1("div", { style: {
|
|
6764
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
6765
|
+
padding: "16px 32px",
|
|
6766
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6767
|
+
color: "var(--bw-text-color)",
|
|
6768
|
+
fontWeight: "600",
|
|
6769
|
+
fontSize: "18px",
|
|
6770
|
+
fontFamily: "var(--bw-font-family)",
|
|
6771
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6772
|
+
}, children: "Ausgebucht" }) }))] }) }));
|
|
6773
|
+
}
|
|
6774
|
+
|
|
6502
6775
|
// Carousel navigation icons
|
|
6503
6776
|
const IconChevronLeft = ({ size = 20, color = "white" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$1("polyline", { points: "15 18 9 12 15 6" }) }));
|
|
6504
6777
|
const IconChevronRight = ({ size = 20, color = "white" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$1("polyline", { points: "9 18 15 12 9 6" }) }));
|
|
@@ -6677,6 +6950,7 @@
|
|
|
6677
6950
|
// Custom minimal SVG icons (Lucide-style)
|
|
6678
6951
|
const IconClock = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("circle", { cx: "12", cy: "12", r: "10" }), u$1("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
6679
6952
|
const IconCalendar = ({ size = 16, color = "#3b82f6" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), u$1("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), u$1("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), u$1("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
|
|
6953
|
+
const IconCheck = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$1("polyline", { points: "20 6 9 17 4 12" }) }));
|
|
6680
6954
|
// Wave icon for booking action
|
|
6681
6955
|
const IconWave = ({ size = 20, color = "#0ea5e9" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
|
|
6682
6956
|
// Loading skeleton component that matches the actual design
|
|
@@ -6798,13 +7072,23 @@
|
|
|
6798
7072
|
height: "14px",
|
|
6799
7073
|
backgroundColor: "var(--bw-border-color)",
|
|
6800
7074
|
borderRadius: "4px",
|
|
6801
|
-
} })] })] }), u$1("div", { className: "bw-skeleton-desc bw-event-type-
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
borderRadius: "4px",
|
|
7075
|
+
} })] })] }), u$1("div", { className: "bw-skeleton-desc bw-event-type-highlights", style: { marginBottom: "20px", minHeight: "128px" }, children: Array.from({ length: 4 }).map((_, lineIdx) => (u$1("div", { style: {
|
|
7076
|
+
display: "flex",
|
|
7077
|
+
alignItems: "center",
|
|
7078
|
+
gap: "8px",
|
|
6806
7079
|
marginBottom: "8px",
|
|
6807
|
-
}
|
|
7080
|
+
}, children: [u$1("div", { style: {
|
|
7081
|
+
width: "14px",
|
|
7082
|
+
height: "14px",
|
|
7083
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7084
|
+
borderRadius: "50%",
|
|
7085
|
+
flexShrink: 0,
|
|
7086
|
+
} }), u$1("div", { style: {
|
|
7087
|
+
width: lineIdx === 3 ? "60%" : "85%",
|
|
7088
|
+
height: "16px",
|
|
7089
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7090
|
+
borderRadius: "4px",
|
|
7091
|
+
} })] }, lineIdx))) }), u$1("div", { style: {
|
|
6808
7092
|
display: "flex",
|
|
6809
7093
|
justifyContent: "space-between",
|
|
6810
7094
|
alignItems: "center",
|
|
@@ -6825,59 +7109,18 @@
|
|
|
6825
7109
|
justifyContent: "center",
|
|
6826
7110
|
} })] })] })] }, idx))) }) })] }));
|
|
6827
7111
|
function EventTypeSelection({ eventTypes, onEventTypeSelect, isLoading = false, skeletonCount = 4, }) {
|
|
6828
|
-
// State
|
|
6829
|
-
const [
|
|
6830
|
-
|
|
6831
|
-
|
|
6832
|
-
|
|
6833
|
-
|
|
6834
|
-
|
|
6835
|
-
setExpandedDescriptions((prev) => {
|
|
6836
|
-
const newSet = new Set(prev);
|
|
6837
|
-
if (newSet.has(eventTypeId)) {
|
|
6838
|
-
newSet.delete(eventTypeId);
|
|
6839
|
-
}
|
|
6840
|
-
else {
|
|
6841
|
-
newSet.add(eventTypeId);
|
|
6842
|
-
}
|
|
6843
|
-
return newSet;
|
|
6844
|
-
});
|
|
6845
|
-
};
|
|
6846
|
-
// Check if text is truncated by comparing scroll height with client height
|
|
6847
|
-
const checkTruncation = () => {
|
|
6848
|
-
const newTruncated = new Set();
|
|
6849
|
-
descriptionRefs.current.forEach((element, eventTypeId) => {
|
|
6850
|
-
if (element && !expandedDescriptions.has(eventTypeId)) {
|
|
6851
|
-
// Add a small tolerance for rounding differences
|
|
6852
|
-
if (element.scrollHeight > element.clientHeight + 2) {
|
|
6853
|
-
newTruncated.add(eventTypeId);
|
|
6854
|
-
}
|
|
6855
|
-
}
|
|
6856
|
-
});
|
|
6857
|
-
setTruncatedDescriptions(newTruncated);
|
|
7112
|
+
// State for details dialog
|
|
7113
|
+
const [detailsDialogOpen, setDetailsDialogOpen] = d(false);
|
|
7114
|
+
const [selectedEventTypeForDetails, setSelectedEventTypeForDetails] = d(null);
|
|
7115
|
+
// Handle opening details dialog
|
|
7116
|
+
const handleShowDetails = (eventType) => {
|
|
7117
|
+
setSelectedEventTypeForDetails(eventType);
|
|
7118
|
+
setDetailsDialogOpen(true);
|
|
6858
7119
|
};
|
|
6859
|
-
//
|
|
6860
|
-
|
|
6861
|
-
|
|
6862
|
-
|
|
6863
|
-
setTimeout(checkTruncation, 100);
|
|
6864
|
-
};
|
|
6865
|
-
window.addEventListener("resize", handleResize);
|
|
6866
|
-
return () => {
|
|
6867
|
-
clearTimeout(timeoutId);
|
|
6868
|
-
window.removeEventListener("resize", handleResize);
|
|
6869
|
-
};
|
|
6870
|
-
}, [eventTypes, expandedDescriptions]);
|
|
6871
|
-
// Set ref for description element
|
|
6872
|
-
const setDescriptionRef = (eventTypeId) => (element) => {
|
|
6873
|
-
if (element) {
|
|
6874
|
-
descriptionRefs.current.set(eventTypeId, element);
|
|
6875
|
-
// Check truncation when ref is set
|
|
6876
|
-
setTimeout(checkTruncation, 50);
|
|
6877
|
-
}
|
|
6878
|
-
else {
|
|
6879
|
-
descriptionRefs.current.delete(eventTypeId);
|
|
6880
|
-
}
|
|
7120
|
+
// Handle closing details dialog
|
|
7121
|
+
const handleCloseDetails = () => {
|
|
7122
|
+
setDetailsDialogOpen(false);
|
|
7123
|
+
setSelectedEventTypeForDetails(null);
|
|
6881
7124
|
};
|
|
6882
7125
|
// Show loading skeleton
|
|
6883
7126
|
if (isLoading) {
|
|
@@ -7027,56 +7270,92 @@
|
|
|
7027
7270
|
lineHeight: "1.3",
|
|
7028
7271
|
fontFamily: "var(--bw-font-family)",
|
|
7029
7272
|
margin: "0 0 12px 0",
|
|
7030
|
-
}, children: eventType.name }), u$1("div", { style: {
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7034
|
-
|
|
7273
|
+
}, children: eventType.name }), u$1("div", { style: {
|
|
7274
|
+
display: "flex",
|
|
7275
|
+
alignItems: "center",
|
|
7276
|
+
gap: "6px",
|
|
7277
|
+
marginLeft: "10px",
|
|
7278
|
+
}, children: [u$1(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$1("span", { style: {
|
|
7035
7279
|
fontFamily: "var(--bw-font-family)",
|
|
7036
7280
|
fontSize: "14px",
|
|
7037
7281
|
color: "var(--bw-text-muted)",
|
|
7038
7282
|
}, children: eventType.nextAvailableDate
|
|
7039
7283
|
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
7040
|
-
: "Keine Termine frei" })] }), u$1("div", {
|
|
7284
|
+
: "Keine Termine frei" })] }), u$1("div", { style: { marginLeft: "10px", cursor: "pointer" }, onClick: (e) => {
|
|
7285
|
+
e.stopPropagation();
|
|
7286
|
+
handleShowDetails(eventType);
|
|
7287
|
+
}, children: eventType.highlights && eventType.highlights.length > 0 ? (
|
|
7288
|
+
// Show highlights as list
|
|
7289
|
+
u$1("div", { className: "bw-event-type-highlights", style: {
|
|
7290
|
+
margin: "10px 0px 10px 0px",
|
|
7291
|
+
minHeight: "128px",
|
|
7292
|
+
display: "-webkit-box",
|
|
7293
|
+
WebkitLineClamp: 5,
|
|
7294
|
+
WebkitBoxOrient: "vertical",
|
|
7295
|
+
overflow: "hidden",
|
|
7296
|
+
textOverflow: "ellipsis",
|
|
7297
|
+
}, children: u$1("ul", { style: {
|
|
7298
|
+
listStyle: "none",
|
|
7299
|
+
padding: "0",
|
|
7300
|
+
margin: "0",
|
|
7301
|
+
display: "flex",
|
|
7302
|
+
flexDirection: "column",
|
|
7303
|
+
gap: "3px",
|
|
7304
|
+
}, children: eventType.highlights
|
|
7305
|
+
.filter((highlight) => highlight.trim())
|
|
7306
|
+
.map((highlight, index) => (u$1("li", { style: {
|
|
7307
|
+
display: "flex",
|
|
7308
|
+
alignItems: "flex-start",
|
|
7309
|
+
gap: "8px",
|
|
7310
|
+
fontFamily: "var(--bw-font-family)",
|
|
7311
|
+
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7312
|
+
lineHeight: "1.6",
|
|
7313
|
+
color: "var(--bw-text-muted)",
|
|
7314
|
+
}, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { children: highlight.trim() })] }, index))) }) })) : (
|
|
7315
|
+
// Fallback to description
|
|
7316
|
+
u$1(k$2, { children: u$1("p", { className: "bw-event-type-desc", style: {
|
|
7041
7317
|
color: "var(--bw-text-muted)",
|
|
7042
7318
|
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7043
7319
|
lineHeight: "1.6",
|
|
7044
7320
|
fontFamily: "var(--bw-font-family)",
|
|
7045
7321
|
margin: "10px 0 10px 0",
|
|
7046
|
-
|
|
7047
|
-
|
|
7048
|
-
|
|
7049
|
-
|
|
7050
|
-
|
|
7051
|
-
|
|
7052
|
-
|
|
7053
|
-
|
|
7054
|
-
|
|
7055
|
-
|
|
7056
|
-
|
|
7057
|
-
|
|
7058
|
-
|
|
7059
|
-
|
|
7060
|
-
|
|
7061
|
-
|
|
7062
|
-
|
|
7063
|
-
|
|
7064
|
-
|
|
7065
|
-
|
|
7066
|
-
|
|
7067
|
-
|
|
7068
|
-
|
|
7069
|
-
|
|
7070
|
-
|
|
7071
|
-
|
|
7072
|
-
|
|
7073
|
-
|
|
7074
|
-
|
|
7075
|
-
|
|
7076
|
-
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7322
|
+
display: "-webkit-box",
|
|
7323
|
+
WebkitLineClamp: 5,
|
|
7324
|
+
WebkitBoxOrient: "vertical",
|
|
7325
|
+
overflow: "hidden",
|
|
7326
|
+
textOverflow: "ellipsis",
|
|
7327
|
+
minHeight: "128px",
|
|
7328
|
+
maxHeight: "128px",
|
|
7329
|
+
}, children: eventType.description || " " }) })) }), (eventType.description || eventType.highlights?.length) && (u$1("button", { onClick: (e) => {
|
|
7330
|
+
e.stopPropagation();
|
|
7331
|
+
handleShowDetails(eventType);
|
|
7332
|
+
}, style: {
|
|
7333
|
+
color: "var(--bw-highlight-color)",
|
|
7334
|
+
background: "var(--bw-surface-color)",
|
|
7335
|
+
padding: "12px 24px",
|
|
7336
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7337
|
+
fontSize: "14px",
|
|
7338
|
+
fontWeight: "600",
|
|
7339
|
+
fontFamily: "var(--bw-font-family)",
|
|
7340
|
+
display: "flex",
|
|
7341
|
+
alignItems: "center",
|
|
7342
|
+
gap: "8px",
|
|
7343
|
+
border: "2px solid var(--bw-highlight-color)",
|
|
7344
|
+
cursor: "pointer",
|
|
7345
|
+
boxShadow: " -30px -15px 10px 0px var(--bw-surface-color)",
|
|
7346
|
+
marginLeft: "auto",
|
|
7347
|
+
position: "absolute",
|
|
7348
|
+
right: "24px",
|
|
7349
|
+
bottom: "79px",
|
|
7350
|
+
opacity: "0.8",
|
|
7351
|
+
transition: "all 0.2s ease",
|
|
7352
|
+
}, onMouseEnter: (e) => {
|
|
7353
|
+
e.currentTarget.style.opacity = "1";
|
|
7354
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7355
|
+
}, onMouseLeave: (e) => {
|
|
7356
|
+
e.currentTarget.style.opacity = "0.8";
|
|
7357
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7358
|
+
}, children: "Mehr anzeigen" })), u$1("div", { style: {
|
|
7080
7359
|
display: "flex",
|
|
7081
7360
|
justifyContent: "space-between",
|
|
7082
7361
|
alignItems: "center",
|
|
@@ -7099,6 +7378,13 @@
|
|
|
7099
7378
|
gap: "8px",
|
|
7100
7379
|
border: "none",
|
|
7101
7380
|
cursor: "pointer",
|
|
7381
|
+
transition: "all 0.2s ease",
|
|
7382
|
+
}, onMouseEnter: (e) => {
|
|
7383
|
+
e.currentTarget.style.opacity = "0.9";
|
|
7384
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7385
|
+
}, onMouseLeave: (e) => {
|
|
7386
|
+
e.currentTarget.style.opacity = "1";
|
|
7387
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7102
7388
|
}, children: [u$1(IconWave, { size: 20, color: "var(--bw-text-color)" }), " Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
|
|
7103
7389
|
position: "absolute",
|
|
7104
7390
|
inset: 0,
|
|
@@ -7117,7 +7403,7 @@
|
|
|
7117
7403
|
fontFamily: "var(--bw-font-family)",
|
|
7118
7404
|
boxShadow: "var(--bw-shadow-md)",
|
|
7119
7405
|
}, children: "Ausgebucht" }) }))] }, eventType.id));
|
|
7120
|
-
}) }) }))] }));
|
|
7406
|
+
}) }) })), u$1(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
|
|
7121
7407
|
}
|
|
7122
7408
|
|
|
7123
7409
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|