@bigz-app/booking-widget 0.1.13 → 0.1.14
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 +374 -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 +374 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +374 -99
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/booking-widget.js
CHANGED
|
@@ -6499,6 +6499,280 @@
|
|
|
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
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
6636
|
+
zIndex: 10000,
|
|
6637
|
+
display: "flex",
|
|
6638
|
+
alignItems: "center",
|
|
6639
|
+
justifyContent: "center",
|
|
6640
|
+
padding: "var(--bw-spacing)",
|
|
6641
|
+
}, onClick: onClose, children: u$1("div", { style: {
|
|
6642
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6643
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6644
|
+
maxWidth: "700px",
|
|
6645
|
+
width: "100%",
|
|
6646
|
+
maxHeight: "90vh",
|
|
6647
|
+
overflow: "auto",
|
|
6648
|
+
position: "relative",
|
|
6649
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6650
|
+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
6651
|
+
fontFamily: "var(--bw-font-family)",
|
|
6652
|
+
}, onClick: (e) => e.stopPropagation(), children: [u$1("button", { onClick: onClose, style: {
|
|
6653
|
+
position: "absolute",
|
|
6654
|
+
top: "var(--bw-spacing)",
|
|
6655
|
+
right: "var(--bw-spacing)",
|
|
6656
|
+
background: "none",
|
|
6657
|
+
border: "none",
|
|
6658
|
+
fontSize: "24px",
|
|
6659
|
+
cursor: "pointer",
|
|
6660
|
+
color: "var(--bw-text-muted)",
|
|
6661
|
+
width: "32px",
|
|
6662
|
+
height: "32px",
|
|
6663
|
+
display: "flex",
|
|
6664
|
+
alignItems: "center",
|
|
6665
|
+
justifyContent: "center",
|
|
6666
|
+
borderRadius: "var(--bw-border-radius-small)",
|
|
6667
|
+
zIndex: 10,
|
|
6668
|
+
}, onMouseEnter: (e) => {
|
|
6669
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
6670
|
+
}, onMouseLeave: (e) => {
|
|
6671
|
+
e.currentTarget.style.backgroundColor = "transparent";
|
|
6672
|
+
}, children: "\u00D7" }), u$1("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
|
|
6673
|
+
marginBottom: "24px",
|
|
6674
|
+
padding: "16px",
|
|
6675
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6676
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6677
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6678
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
6679
|
+
fontSize: "14px",
|
|
6680
|
+
fontWeight: "600",
|
|
6681
|
+
color: "var(--bw-highlight-color)",
|
|
6682
|
+
marginBottom: "8px",
|
|
6683
|
+
fontFamily: "var(--bw-font-family)",
|
|
6684
|
+
}, children: eventType.category.name }), u$1("h2", { style: {
|
|
6685
|
+
fontSize: "28px",
|
|
6686
|
+
fontWeight: "700",
|
|
6687
|
+
color: "var(--bw-text-color)",
|
|
6688
|
+
marginBottom: "16px",
|
|
6689
|
+
lineHeight: "1.3",
|
|
6690
|
+
fontFamily: "var(--bw-font-family)",
|
|
6691
|
+
margin: "0 0 16px 0",
|
|
6692
|
+
}, 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: {
|
|
6693
|
+
listStyle: "none",
|
|
6694
|
+
padding: "0",
|
|
6695
|
+
margin: "0",
|
|
6696
|
+
display: "flex",
|
|
6697
|
+
flexDirection: "column",
|
|
6698
|
+
gap: "3px",
|
|
6699
|
+
}, children: eventType.highlights
|
|
6700
|
+
.filter((highlight) => highlight.trim())
|
|
6701
|
+
.map((highlight, index) => (u$1("li", { style: {
|
|
6702
|
+
display: "flex",
|
|
6703
|
+
alignItems: "flex-start",
|
|
6704
|
+
gap: "10px",
|
|
6705
|
+
fontFamily: "var(--bw-font-family)",
|
|
6706
|
+
fontSize: "16px",
|
|
6707
|
+
lineHeight: "1.6",
|
|
6708
|
+
color: "var(--bw-text-color)",
|
|
6709
|
+
}, 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: {
|
|
6710
|
+
marginBottom: "24px",
|
|
6711
|
+
color: "var(--bw-text-muted)",
|
|
6712
|
+
fontSize: "16px",
|
|
6713
|
+
lineHeight: "1.6",
|
|
6714
|
+
fontFamily: "var(--bw-font-family)",
|
|
6715
|
+
padding: "0px 20px",
|
|
6716
|
+
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
|
|
6717
|
+
display: "flex",
|
|
6718
|
+
justifyContent: "space-between",
|
|
6719
|
+
alignItems: "center",
|
|
6720
|
+
marginTop: "32px",
|
|
6721
|
+
padding: "20px",
|
|
6722
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6723
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6724
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6725
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
6726
|
+
fontSize: "14px",
|
|
6727
|
+
color: "var(--bw-text-muted)",
|
|
6728
|
+
fontFamily: "var(--bw-font-family)",
|
|
6729
|
+
marginBottom: "4px",
|
|
6730
|
+
}, children: "Preis ab" }), u$1("div", { style: {
|
|
6731
|
+
fontSize: "32px",
|
|
6732
|
+
fontWeight: "700",
|
|
6733
|
+
color: "var(--bw-text-color)",
|
|
6734
|
+
fontFamily: "var(--bw-font-family)",
|
|
6735
|
+
}, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (u$1("button", { onClick: handleBookingClick, style: {
|
|
6736
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
6737
|
+
color: "white",
|
|
6738
|
+
padding: "14px 28px",
|
|
6739
|
+
border: "none",
|
|
6740
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6741
|
+
fontSize: "16px",
|
|
6742
|
+
fontWeight: "600",
|
|
6743
|
+
fontFamily: "var(--bw-font-family)",
|
|
6744
|
+
display: "flex",
|
|
6745
|
+
alignItems: "center",
|
|
6746
|
+
gap: "8px",
|
|
6747
|
+
cursor: "pointer",
|
|
6748
|
+
transition: "all 0.2s ease",
|
|
6749
|
+
}, onMouseEnter: (e) => {
|
|
6750
|
+
e.currentTarget.style.opacity = "0.9";
|
|
6751
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
6752
|
+
}, onMouseLeave: (e) => {
|
|
6753
|
+
e.currentTarget.style.opacity = "1";
|
|
6754
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
6755
|
+
}, children: [u$1(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
|
|
6756
|
+
position: "absolute",
|
|
6757
|
+
inset: 0,
|
|
6758
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
6759
|
+
backdropFilter: "blur(2px)",
|
|
6760
|
+
display: "flex",
|
|
6761
|
+
alignItems: "center",
|
|
6762
|
+
justifyContent: "center",
|
|
6763
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6764
|
+
}, children: u$1("div", { style: {
|
|
6765
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
6766
|
+
padding: "16px 32px",
|
|
6767
|
+
borderRadius: "var(--bw-border-radius)",
|
|
6768
|
+
color: "var(--bw-text-color)",
|
|
6769
|
+
fontWeight: "600",
|
|
6770
|
+
fontSize: "18px",
|
|
6771
|
+
fontFamily: "var(--bw-font-family)",
|
|
6772
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
6773
|
+
}, children: "Ausgebucht" }) }))] }) }));
|
|
6774
|
+
}
|
|
6775
|
+
|
|
6502
6776
|
// Carousel navigation icons
|
|
6503
6777
|
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
6778
|
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 +6951,7 @@
|
|
|
6677
6951
|
// Custom minimal SVG icons (Lucide-style)
|
|
6678
6952
|
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
6953
|
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" })] }));
|
|
6954
|
+
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
6955
|
// Wave icon for booking action
|
|
6681
6956
|
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
6957
|
// Loading skeleton component that matches the actual design
|
|
@@ -6798,13 +7073,23 @@
|
|
|
6798
7073
|
height: "14px",
|
|
6799
7074
|
backgroundColor: "var(--bw-border-color)",
|
|
6800
7075
|
borderRadius: "4px",
|
|
6801
|
-
} })] })] }), u$1("div", { className: "bw-skeleton-desc bw-event-type-
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
borderRadius: "4px",
|
|
7076
|
+
} })] })] }), 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: {
|
|
7077
|
+
display: "flex",
|
|
7078
|
+
alignItems: "center",
|
|
7079
|
+
gap: "8px",
|
|
6806
7080
|
marginBottom: "8px",
|
|
6807
|
-
}
|
|
7081
|
+
}, children: [u$1("div", { style: {
|
|
7082
|
+
width: "14px",
|
|
7083
|
+
height: "14px",
|
|
7084
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7085
|
+
borderRadius: "50%",
|
|
7086
|
+
flexShrink: 0,
|
|
7087
|
+
} }), u$1("div", { style: {
|
|
7088
|
+
width: lineIdx === 3 ? "60%" : "85%",
|
|
7089
|
+
height: "16px",
|
|
7090
|
+
backgroundColor: "var(--bw-border-color)",
|
|
7091
|
+
borderRadius: "4px",
|
|
7092
|
+
} })] }, lineIdx))) }), u$1("div", { style: {
|
|
6808
7093
|
display: "flex",
|
|
6809
7094
|
justifyContent: "space-between",
|
|
6810
7095
|
alignItems: "center",
|
|
@@ -6825,59 +7110,18 @@
|
|
|
6825
7110
|
justifyContent: "center",
|
|
6826
7111
|
} })] })] })] }, idx))) }) })] }));
|
|
6827
7112
|
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);
|
|
7113
|
+
// State for details dialog
|
|
7114
|
+
const [detailsDialogOpen, setDetailsDialogOpen] = d(false);
|
|
7115
|
+
const [selectedEventTypeForDetails, setSelectedEventTypeForDetails] = d(null);
|
|
7116
|
+
// Handle opening details dialog
|
|
7117
|
+
const handleShowDetails = (eventType) => {
|
|
7118
|
+
setSelectedEventTypeForDetails(eventType);
|
|
7119
|
+
setDetailsDialogOpen(true);
|
|
6858
7120
|
};
|
|
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
|
-
}
|
|
7121
|
+
// Handle closing details dialog
|
|
7122
|
+
const handleCloseDetails = () => {
|
|
7123
|
+
setDetailsDialogOpen(false);
|
|
7124
|
+
setSelectedEventTypeForDetails(null);
|
|
6881
7125
|
};
|
|
6882
7126
|
// Show loading skeleton
|
|
6883
7127
|
if (isLoading) {
|
|
@@ -7027,56 +7271,87 @@
|
|
|
7027
7271
|
lineHeight: "1.3",
|
|
7028
7272
|
fontFamily: "var(--bw-font-family)",
|
|
7029
7273
|
margin: "0 0 12px 0",
|
|
7030
|
-
}, children: eventType.name }), u$1("div", { style: {
|
|
7031
|
-
|
|
7032
|
-
|
|
7033
|
-
|
|
7034
|
-
|
|
7274
|
+
}, children: eventType.name }), u$1("div", { style: {
|
|
7275
|
+
display: "flex",
|
|
7276
|
+
alignItems: "center",
|
|
7277
|
+
gap: "6px",
|
|
7278
|
+
marginLeft: "10px",
|
|
7279
|
+
}, children: [u$1(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$1("span", { style: {
|
|
7035
7280
|
fontFamily: "var(--bw-font-family)",
|
|
7036
7281
|
fontSize: "14px",
|
|
7037
7282
|
color: "var(--bw-text-muted)",
|
|
7038
7283
|
}, children: eventType.nextAvailableDate
|
|
7039
7284
|
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
7040
|
-
: "Keine Termine frei" })] }), u$1("div", {
|
|
7285
|
+
: "Keine Termine frei" })] }), u$1("div", { style: { marginLeft: "10px", cursor: "pointer" }, onClick: (e) => {
|
|
7286
|
+
e.stopPropagation();
|
|
7287
|
+
handleShowDetails(eventType);
|
|
7288
|
+
}, children: eventType.highlights && eventType.highlights.length > 0 ? (
|
|
7289
|
+
// Show highlights as list
|
|
7290
|
+
u$1("div", { className: "bw-event-type-highlights", style: {
|
|
7291
|
+
margin: "10px 0px 10px 0px",
|
|
7292
|
+
minHeight: "128px",
|
|
7293
|
+
display: "-webkit-box",
|
|
7294
|
+
WebkitLineClamp: 5,
|
|
7295
|
+
WebkitBoxOrient: "vertical",
|
|
7296
|
+
overflow: "hidden",
|
|
7297
|
+
textOverflow: "ellipsis",
|
|
7298
|
+
}, children: u$1("ul", { style: {
|
|
7299
|
+
listStyle: "none",
|
|
7300
|
+
padding: "0",
|
|
7301
|
+
margin: "0",
|
|
7302
|
+
display: "flex",
|
|
7303
|
+
flexDirection: "column",
|
|
7304
|
+
gap: "3px",
|
|
7305
|
+
}, children: eventType.highlights
|
|
7306
|
+
.filter((highlight) => highlight.trim())
|
|
7307
|
+
.map((highlight, index) => (u$1("li", { style: {
|
|
7308
|
+
display: "flex",
|
|
7309
|
+
alignItems: "flex-start",
|
|
7310
|
+
gap: "8px",
|
|
7311
|
+
fontFamily: "var(--bw-font-family)",
|
|
7312
|
+
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7313
|
+
lineHeight: "1.6",
|
|
7314
|
+
color: "var(--bw-text-muted)",
|
|
7315
|
+
}, 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))) }) })) : (
|
|
7316
|
+
// Fallback to description
|
|
7317
|
+
u$1(k$2, { children: u$1("p", { className: "bw-event-type-desc", style: {
|
|
7041
7318
|
color: "var(--bw-text-muted)",
|
|
7042
7319
|
fontSize: "clamp(0.95rem, 2vw, 16px)",
|
|
7043
7320
|
lineHeight: "1.6",
|
|
7044
7321
|
fontFamily: "var(--bw-font-family)",
|
|
7045
7322
|
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
|
-
? "Weniger anzeigen"
|
|
7079
|
-
: "Mehr lesen" }))] }), u$1("div", { style: {
|
|
7323
|
+
display: "-webkit-box",
|
|
7324
|
+
WebkitLineClamp: 5,
|
|
7325
|
+
WebkitBoxOrient: "vertical",
|
|
7326
|
+
overflow: "hidden",
|
|
7327
|
+
textOverflow: "ellipsis",
|
|
7328
|
+
minHeight: "128px",
|
|
7329
|
+
maxHeight: "128px",
|
|
7330
|
+
}, children: eventType.description || " " }) })) }), (eventType.description || eventType.highlights?.length) && (u$1("button", { onClick: (e) => {
|
|
7331
|
+
e.stopPropagation();
|
|
7332
|
+
handleShowDetails(eventType);
|
|
7333
|
+
}, style: {
|
|
7334
|
+
color: "var(--bw-highlight-color)",
|
|
7335
|
+
background: "var(--bw-surface-color)",
|
|
7336
|
+
padding: "12px 24px",
|
|
7337
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7338
|
+
fontSize: "14px",
|
|
7339
|
+
fontWeight: "600",
|
|
7340
|
+
fontFamily: "var(--bw-font-family)",
|
|
7341
|
+
display: "flex",
|
|
7342
|
+
alignItems: "center",
|
|
7343
|
+
gap: "8px",
|
|
7344
|
+
border: "2px solid var(--bw-highlight-color)",
|
|
7345
|
+
cursor: "pointer",
|
|
7346
|
+
marginLeft: "auto",
|
|
7347
|
+
position: "absolute",
|
|
7348
|
+
right: "24px",
|
|
7349
|
+
bottom: "79px",
|
|
7350
|
+
}, onMouseEnter: (e) => {
|
|
7351
|
+
e.currentTarget.style.opacity = "0.8";
|
|
7352
|
+
}, onMouseLeave: (e) => {
|
|
7353
|
+
e.currentTarget.style.opacity = "1";
|
|
7354
|
+
}, children: "Mehr anzeigen" })), u$1("div", { style: {
|
|
7080
7355
|
display: "flex",
|
|
7081
7356
|
justifyContent: "space-between",
|
|
7082
7357
|
alignItems: "center",
|
|
@@ -7117,7 +7392,7 @@
|
|
|
7117
7392
|
fontFamily: "var(--bw-font-family)",
|
|
7118
7393
|
boxShadow: "var(--bw-shadow-md)",
|
|
7119
7394
|
}, children: "Ausgebucht" }) }))] }, eventType.id));
|
|
7120
|
-
}) }) }))] }));
|
|
7395
|
+
}) }) })), u$1(EventTypeDetailsDialog, { isOpen: detailsDialogOpen, onClose: handleCloseDetails, eventType: selectedEventTypeForDetails, onEventTypeSelect: onEventTypeSelect })] }));
|
|
7121
7396
|
}
|
|
7122
7397
|
|
|
7123
7398
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|