@bigz-app/booking-widget 0.1.16 → 0.1.17
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 +510 -161
- package/dist/booking-widget.js.map +1 -1
- package/dist/components/BookingForm.d.ts.map +1 -1
- package/dist/components/EventTypeDetailsDialog.d.ts.map +1 -1
- package/dist/components/EventTypeSelection.d.ts.map +1 -1
- package/dist/components/ImageCarousel.d.ts.map +1 -1
- package/dist/index.cjs +510 -161
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +510 -161
- package/dist/index.esm.js.map +1 -1
- package/dist/styles/StyleProvider.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/booking-widget.js
CHANGED
|
@@ -421,6 +421,232 @@
|
|
|
421
421
|
y(() => {
|
|
422
422
|
setIsHydrated(true);
|
|
423
423
|
}, []);
|
|
424
|
+
// CSS Reset styles to isolate the widget from external styles
|
|
425
|
+
const cssReset = `
|
|
426
|
+
/* CSS Reset for Booking Widget - Prevents external styles from affecting the widget */
|
|
427
|
+
.booking-widget-container,
|
|
428
|
+
.booking-widget-container *,
|
|
429
|
+
.booking-widget-container *::before,
|
|
430
|
+
.booking-widget-container *::after {
|
|
431
|
+
/* Box model reset */
|
|
432
|
+
box-sizing: border-box;
|
|
433
|
+
margin: 0;
|
|
434
|
+
padding: 0;
|
|
435
|
+
border: 0;
|
|
436
|
+
|
|
437
|
+
/* Typography reset */
|
|
438
|
+
font-size: 100%;
|
|
439
|
+
font-family: inherit;
|
|
440
|
+
font-weight: inherit;
|
|
441
|
+
font-style: inherit;
|
|
442
|
+
line-height: inherit;
|
|
443
|
+
color: inherit;
|
|
444
|
+
text-decoration: none;
|
|
445
|
+
text-transform: none;
|
|
446
|
+
letter-spacing: normal;
|
|
447
|
+
word-spacing: normal;
|
|
448
|
+
|
|
449
|
+
/* Layout reset */
|
|
450
|
+
vertical-align: baseline;
|
|
451
|
+
background: transparent;
|
|
452
|
+
outline: none;
|
|
453
|
+
|
|
454
|
+
/* Appearance reset */
|
|
455
|
+
border-radius: 0;
|
|
456
|
+
box-shadow: none;
|
|
457
|
+
text-shadow: none;
|
|
458
|
+
opacity: 1;
|
|
459
|
+
visibility: visible;
|
|
460
|
+
|
|
461
|
+
/* Interactive elements reset */
|
|
462
|
+
cursor: inherit;
|
|
463
|
+
user-select: inherit;
|
|
464
|
+
|
|
465
|
+
/* Animation reset */
|
|
466
|
+
transition: none;
|
|
467
|
+
transform: none;
|
|
468
|
+
animation: none;
|
|
469
|
+
|
|
470
|
+
/* Flexbox/Grid reset */
|
|
471
|
+
flex: none;
|
|
472
|
+
align-self: auto;
|
|
473
|
+
justify-self: auto;
|
|
474
|
+
|
|
475
|
+
/* Position reset */
|
|
476
|
+
position: static;
|
|
477
|
+
top: auto;
|
|
478
|
+
right: auto;
|
|
479
|
+
bottom: auto;
|
|
480
|
+
left: auto;
|
|
481
|
+
z-index: auto;
|
|
482
|
+
|
|
483
|
+
/* Display reset */
|
|
484
|
+
float: none;
|
|
485
|
+
clear: none;
|
|
486
|
+
|
|
487
|
+
/* Overflow reset */
|
|
488
|
+
overflow: visible;
|
|
489
|
+
|
|
490
|
+
/* Table reset */
|
|
491
|
+
border-collapse: separate;
|
|
492
|
+
border-spacing: 0;
|
|
493
|
+
caption-side: top;
|
|
494
|
+
empty-cells: show;
|
|
495
|
+
table-layout: auto;
|
|
496
|
+
|
|
497
|
+
/* List reset */
|
|
498
|
+
list-style: none;
|
|
499
|
+
|
|
500
|
+
/* Form reset */
|
|
501
|
+
resize: none;
|
|
502
|
+
|
|
503
|
+
/* Misc reset */
|
|
504
|
+
quotes: none;
|
|
505
|
+
content: normal;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
/* Specific element resets */
|
|
509
|
+
.booking-widget-container input,
|
|
510
|
+
.booking-widget-container textarea,
|
|
511
|
+
.booking-widget-container select,
|
|
512
|
+
.booking-widget-container button {
|
|
513
|
+
background: transparent;
|
|
514
|
+
border: none;
|
|
515
|
+
outline: none;
|
|
516
|
+
appearance: none;
|
|
517
|
+
-webkit-appearance: none;
|
|
518
|
+
-moz-appearance: none;
|
|
519
|
+
font-family: inherit;
|
|
520
|
+
font-size: inherit;
|
|
521
|
+
line-height: inherit;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
.booking-widget-container button {
|
|
525
|
+
cursor: pointer;
|
|
526
|
+
background: transparent;
|
|
527
|
+
border: none;
|
|
528
|
+
padding: 0;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.booking-widget-container a {
|
|
532
|
+
color: inherit;
|
|
533
|
+
text-decoration: none;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.booking-widget-container img {
|
|
537
|
+
border-style: none;
|
|
538
|
+
vertical-align: middle;
|
|
539
|
+
max-width: 100%;
|
|
540
|
+
height: auto;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.booking-widget-container table {
|
|
544
|
+
border-collapse: collapse;
|
|
545
|
+
border-spacing: 0;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.booking-widget-container ol,
|
|
549
|
+
.booking-widget-container ul {
|
|
550
|
+
list-style: none;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.booking-widget-container blockquote,
|
|
554
|
+
.booking-widget-container q {
|
|
555
|
+
quotes: none;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.booking-widget-container blockquote::before,
|
|
559
|
+
.booking-widget-container blockquote::after,
|
|
560
|
+
.booking-widget-container q::before,
|
|
561
|
+
.booking-widget-container q::after {
|
|
562
|
+
content: '';
|
|
563
|
+
content: none;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Ensure the container itself has proper defaults */
|
|
567
|
+
.booking-widget-container {
|
|
568
|
+
/* Set container defaults that should not be inherited */
|
|
569
|
+
display: block;
|
|
570
|
+
position: relative;
|
|
571
|
+
width: auto;
|
|
572
|
+
height: auto;
|
|
573
|
+
max-width: none;
|
|
574
|
+
max-height: none;
|
|
575
|
+
min-width: 0;
|
|
576
|
+
min-height: 0;
|
|
577
|
+
|
|
578
|
+
/* Typography defaults */
|
|
579
|
+
font-family: var(--bw-font-family, system-ui, -apple-system, sans-serif);
|
|
580
|
+
font-size: var(--bw-font-size, 14px);
|
|
581
|
+
line-height: 1.5;
|
|
582
|
+
color: var(--bw-text-color, #1e293b);
|
|
583
|
+
|
|
584
|
+
/* Layout defaults */
|
|
585
|
+
text-align: left;
|
|
586
|
+
direction: ltr;
|
|
587
|
+
|
|
588
|
+
/* Ensure isolation */
|
|
589
|
+
isolation: isolate;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
/* Prevent external CSS from affecting portals */
|
|
593
|
+
#booking-widget-portal,
|
|
594
|
+
#booking-widget-portal *,
|
|
595
|
+
#booking-widget-portal *::before,
|
|
596
|
+
#booking-widget-portal *::after {
|
|
597
|
+
box-sizing: border-box;
|
|
598
|
+
margin: 0;
|
|
599
|
+
padding: 0;
|
|
600
|
+
border: 0;
|
|
601
|
+
font-size: 100%;
|
|
602
|
+
font-family: inherit;
|
|
603
|
+
font-weight: inherit;
|
|
604
|
+
font-style: inherit;
|
|
605
|
+
line-height: inherit;
|
|
606
|
+
color: inherit;
|
|
607
|
+
text-decoration: none;
|
|
608
|
+
vertical-align: baseline;
|
|
609
|
+
background: transparent;
|
|
610
|
+
outline: none;
|
|
611
|
+
border-radius: 0;
|
|
612
|
+
box-shadow: none;
|
|
613
|
+
text-shadow: none;
|
|
614
|
+
opacity: 1;
|
|
615
|
+
visibility: visible;
|
|
616
|
+
cursor: inherit;
|
|
617
|
+
user-select: inherit;
|
|
618
|
+
transition: none;
|
|
619
|
+
transform: none;
|
|
620
|
+
animation: none;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
#booking-widget-portal {
|
|
624
|
+
font-family: var(--bw-font-family, system-ui, -apple-system, sans-serif);
|
|
625
|
+
font-size: var(--bw-font-size, 14px);
|
|
626
|
+
line-height: 1.5;
|
|
627
|
+
color: var(--bw-text-color, #1e293b);
|
|
628
|
+
text-align: left;
|
|
629
|
+
direction: ltr;
|
|
630
|
+
isolation: isolate;
|
|
631
|
+
}
|
|
632
|
+
`;
|
|
633
|
+
// Inject CSS reset styles
|
|
634
|
+
y(() => {
|
|
635
|
+
const existingStyle = document.getElementById("booking-widget-reset");
|
|
636
|
+
if (!existingStyle) {
|
|
637
|
+
const style = document.createElement("style");
|
|
638
|
+
style.id = "booking-widget-reset";
|
|
639
|
+
style.textContent = cssReset;
|
|
640
|
+
document.head.appendChild(style);
|
|
641
|
+
}
|
|
642
|
+
// Cleanup function to remove styles when component unmounts
|
|
643
|
+
return () => {
|
|
644
|
+
const styleElement = document.getElementById("booking-widget-reset");
|
|
645
|
+
if (styleElement) {
|
|
646
|
+
styleElement.remove();
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
}, [cssReset]);
|
|
424
650
|
// PERFORMANCE OPTIMIZATION: Memoize style calculations
|
|
425
651
|
const themedStyles = T$1(() => {
|
|
426
652
|
const themeName = config.theme || "light-fresh";
|
|
@@ -6579,10 +6805,123 @@
|
|
|
6579
6805
|
}
|
|
6580
6806
|
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
6807
|
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" })] }));
|
|
6808
|
+
// Portal component that renders dialog at document body level
|
|
6809
|
+
function DialogPortal({ children, isOpen }) {
|
|
6810
|
+
const [portalRoot, setPortalRoot] = Rn.useState(null);
|
|
6811
|
+
Rn.useEffect(() => {
|
|
6812
|
+
if (!isOpen)
|
|
6813
|
+
return;
|
|
6814
|
+
// Find the booking widget container to copy CSS custom properties
|
|
6815
|
+
const widgetContainer = document.querySelector(".booking-widget-container");
|
|
6816
|
+
let cssProperties = "";
|
|
6817
|
+
if (widgetContainer) {
|
|
6818
|
+
const computedStyles = getComputedStyle(widgetContainer);
|
|
6819
|
+
// List of all CSS custom properties used in the booking widget
|
|
6820
|
+
const bwProperties = [
|
|
6821
|
+
"--bw-highlight-color",
|
|
6822
|
+
"--bw-highlight-color-rgb",
|
|
6823
|
+
"--bw-background-color",
|
|
6824
|
+
"--bw-surface-color",
|
|
6825
|
+
"--bw-text-color",
|
|
6826
|
+
"--bw-text-muted",
|
|
6827
|
+
"--bw-border-color",
|
|
6828
|
+
"--bw-success-color",
|
|
6829
|
+
"--bw-warning-color",
|
|
6830
|
+
"--bw-error-color",
|
|
6831
|
+
"--bw-border-radius",
|
|
6832
|
+
"--bw-border-radius-small",
|
|
6833
|
+
"--bw-spacing",
|
|
6834
|
+
"--bw-spacing-large",
|
|
6835
|
+
"--bw-font-family",
|
|
6836
|
+
"--bw-font-size",
|
|
6837
|
+
"--bw-font-size-large",
|
|
6838
|
+
"--bw-shadow-lg",
|
|
6839
|
+
"--bw-shadow-md",
|
|
6840
|
+
"--bw-highlight-muted",
|
|
6841
|
+
"--bw-highlight-subtle",
|
|
6842
|
+
"--bw-text-subtle",
|
|
6843
|
+
];
|
|
6844
|
+
// Copy each property directly
|
|
6845
|
+
for (const property of bwProperties) {
|
|
6846
|
+
const value = computedStyles.getPropertyValue(property).trim();
|
|
6847
|
+
if (value) {
|
|
6848
|
+
cssProperties += `${property}: ${value}; `;
|
|
6849
|
+
}
|
|
6850
|
+
}
|
|
6851
|
+
}
|
|
6852
|
+
// Create portal root
|
|
6853
|
+
const portal = document.createElement("div");
|
|
6854
|
+
portal.id = "booking-widget-portal";
|
|
6855
|
+
portal.style.cssText = `
|
|
6856
|
+
position: fixed;
|
|
6857
|
+
top: 0;
|
|
6858
|
+
left: 0;
|
|
6859
|
+
width: 100%;
|
|
6860
|
+
height: 100%;
|
|
6861
|
+
z-index: 999999;
|
|
6862
|
+
pointer-events: none;
|
|
6863
|
+
${cssProperties}
|
|
6864
|
+
`;
|
|
6865
|
+
// Insert at the beginning of body
|
|
6866
|
+
document.body.insertBefore(portal, document.body.firstChild);
|
|
6867
|
+
setPortalRoot(portal);
|
|
6868
|
+
// Prevent body scroll
|
|
6869
|
+
document.body.style.overflow = "hidden";
|
|
6870
|
+
return () => {
|
|
6871
|
+
// Cleanup
|
|
6872
|
+
if (portal.parentNode) {
|
|
6873
|
+
portal.parentNode.removeChild(portal);
|
|
6874
|
+
}
|
|
6875
|
+
document.body.style.overflow = "";
|
|
6876
|
+
setPortalRoot(null);
|
|
6877
|
+
};
|
|
6878
|
+
}, [isOpen]);
|
|
6879
|
+
if (!isOpen || !portalRoot)
|
|
6880
|
+
return null;
|
|
6881
|
+
// Render children into portal using a ref callback
|
|
6882
|
+
const renderIntoPortal = Rn.useCallback((element) => {
|
|
6883
|
+
if (element && portalRoot) {
|
|
6884
|
+
portalRoot.appendChild(element);
|
|
6885
|
+
}
|
|
6886
|
+
}, [portalRoot]);
|
|
6887
|
+
return (u$1("div", { ref: renderIntoPortal, style: {
|
|
6888
|
+
pointerEvents: "auto",
|
|
6889
|
+
width: "100%",
|
|
6890
|
+
height: "100%",
|
|
6891
|
+
}, children: children }));
|
|
6892
|
+
}
|
|
6582
6893
|
function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
|
|
6583
6894
|
if (!isOpen || !eventType)
|
|
6584
6895
|
return null;
|
|
6585
6896
|
const isAvailable = eventType.hasAvailableInstances;
|
|
6897
|
+
// Get fallback styles from the widget container for cases where CSS variables aren't available
|
|
6898
|
+
const [fallbackStyles, setFallbackStyles] = Rn.useState({});
|
|
6899
|
+
Rn.useEffect(() => {
|
|
6900
|
+
if (!isOpen)
|
|
6901
|
+
return;
|
|
6902
|
+
const widgetContainer = document.querySelector(".booking-widget-container");
|
|
6903
|
+
if (widgetContainer) {
|
|
6904
|
+
const computedStyles = getComputedStyle(widgetContainer);
|
|
6905
|
+
// Extract fallback values
|
|
6906
|
+
const fallbacks = {
|
|
6907
|
+
"--bw-highlight-color": computedStyles.getPropertyValue("--bw-highlight-color").trim() || "#3b82f6",
|
|
6908
|
+
"--bw-background-color": computedStyles.getPropertyValue("--bw-background-color").trim() || "#f8fafc",
|
|
6909
|
+
"--bw-surface-color": computedStyles.getPropertyValue("--bw-surface-color").trim() || "#ffffff",
|
|
6910
|
+
"--bw-text-color": computedStyles.getPropertyValue("--bw-text-color").trim() || "#1e293b",
|
|
6911
|
+
"--bw-text-muted": computedStyles.getPropertyValue("--bw-text-muted").trim() || "#64748b",
|
|
6912
|
+
"--bw-border-color": computedStyles.getPropertyValue("--bw-border-color").trim() || "#e2e8f0",
|
|
6913
|
+
"--bw-success-color": computedStyles.getPropertyValue("--bw-success-color").trim() || "#10b981",
|
|
6914
|
+
"--bw-error-color": computedStyles.getPropertyValue("--bw-error-color").trim() || "#ef4444",
|
|
6915
|
+
"--bw-border-radius": computedStyles.getPropertyValue("--bw-border-radius").trim() || "8px",
|
|
6916
|
+
"--bw-spacing": computedStyles.getPropertyValue("--bw-spacing").trim() || "16px",
|
|
6917
|
+
"--bw-spacing-large": computedStyles.getPropertyValue("--bw-spacing-large").trim() || "24px",
|
|
6918
|
+
"--bw-font-family": computedStyles.getPropertyValue("--bw-font-family").trim() || "system-ui, sans-serif",
|
|
6919
|
+
"--bw-shadow-md": computedStyles.getPropertyValue("--bw-shadow-md").trim() ||
|
|
6920
|
+
"0 4px 6px -1px rgba(0, 0, 0, 0.1)",
|
|
6921
|
+
};
|
|
6922
|
+
setFallbackStyles(fallbacks);
|
|
6923
|
+
}
|
|
6924
|
+
}, [isOpen]);
|
|
6586
6925
|
// Memoize the complete HTML including styles to prevent DOM updates
|
|
6587
6926
|
const descriptionHtml = Rn.useMemo(() => {
|
|
6588
6927
|
if (!eventType.description)
|
|
@@ -6626,150 +6965,153 @@
|
|
|
6626
6965
|
onEventTypeSelect(eventType);
|
|
6627
6966
|
onClose();
|
|
6628
6967
|
};
|
|
6629
|
-
return (u$1("div", { style: {
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
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)",
|
|
6968
|
+
return (u$1(DialogPortal, { isOpen: isOpen, children: u$1("div", { style: fallbackStyles, children: u$1("div", { style: {
|
|
6969
|
+
position: "fixed",
|
|
6970
|
+
top: 0,
|
|
6971
|
+
left: 0,
|
|
6972
|
+
right: 0,
|
|
6973
|
+
bottom: 0,
|
|
6974
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
6975
|
+
backdropFilter: "blur(8px)",
|
|
6976
|
+
WebkitBackdropFilter: "blur(8px)",
|
|
6977
|
+
display: "flex",
|
|
6978
|
+
alignItems: "center",
|
|
6979
|
+
justifyContent: "center",
|
|
6980
|
+
padding: "var(--bw-spacing)",
|
|
6981
|
+
zIndex: 999999,
|
|
6982
|
+
}, onClick: onClose, children: u$1("div", { style: {
|
|
6655
6983
|
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
6984
|
borderRadius: "var(--bw-border-radius)",
|
|
6666
|
-
|
|
6667
|
-
|
|
6668
|
-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
|
|
6675
|
-
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6680
|
-
|
|
6681
|
-
|
|
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",
|
|
6985
|
+
maxWidth: "700px",
|
|
6986
|
+
width: "100%",
|
|
6987
|
+
maxHeight: "90vh",
|
|
6988
|
+
overflow: "auto",
|
|
6989
|
+
position: "relative",
|
|
6990
|
+
border: `1px solid var(--bw-border-color)`,
|
|
6991
|
+
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
6992
|
+
fontFamily: "var(--bw-font-family)",
|
|
6993
|
+
}, onClick: (e) => e.stopPropagation(), children: [u$1("button", { onClick: onClose, style: {
|
|
6994
|
+
position: "absolute",
|
|
6995
|
+
top: "var(--bw-spacing)",
|
|
6996
|
+
right: "var(--bw-spacing)",
|
|
6997
|
+
backgroundColor: "var(--bw-surface-color)",
|
|
6998
|
+
border: "1px solid var(--bw-border-color)",
|
|
6999
|
+
fontSize: "24px",
|
|
7000
|
+
cursor: "pointer",
|
|
6710
7001
|
color: "var(--bw-text-muted)",
|
|
6711
|
-
|
|
6712
|
-
|
|
6713
|
-
fontFamily: "var(--bw-font-family)",
|
|
6714
|
-
padding: "0px 20px",
|
|
6715
|
-
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
|
|
7002
|
+
width: "32px",
|
|
7003
|
+
height: "32px",
|
|
6716
7004
|
display: "flex",
|
|
6717
|
-
justifyContent: "space-between",
|
|
6718
7005
|
alignItems: "center",
|
|
6719
|
-
|
|
6720
|
-
padding: "20px",
|
|
6721
|
-
backgroundColor: "var(--bw-background-color)",
|
|
7006
|
+
justifyContent: "center",
|
|
6722
7007
|
borderRadius: "var(--bw-border-radius)",
|
|
6723
|
-
|
|
6724
|
-
},
|
|
6725
|
-
|
|
6726
|
-
|
|
6727
|
-
|
|
6728
|
-
|
|
6729
|
-
|
|
6730
|
-
|
|
6731
|
-
|
|
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",
|
|
7008
|
+
zIndex: 10,
|
|
7009
|
+
}, onMouseEnter: (e) => {
|
|
7010
|
+
e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
|
|
7011
|
+
}, onMouseLeave: (e) => {
|
|
7012
|
+
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
7013
|
+
}, children: "\u00D7" }), u$1("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
|
|
7014
|
+
marginBottom: "24px",
|
|
7015
|
+
padding: "16px",
|
|
7016
|
+
backgroundColor: "var(--bw-background-color)",
|
|
6739
7017
|
borderRadius: "var(--bw-border-radius)",
|
|
7018
|
+
border: `1px solid var(--bw-border-color)`,
|
|
7019
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
7020
|
+
fontSize: "14px",
|
|
7021
|
+
fontWeight: "600",
|
|
7022
|
+
color: "var(--bw-highlight-color)",
|
|
7023
|
+
marginBottom: "8px",
|
|
7024
|
+
fontFamily: "var(--bw-font-family)",
|
|
7025
|
+
}, children: eventType.category.name }), u$1("h2", { style: {
|
|
7026
|
+
fontSize: "28px",
|
|
7027
|
+
fontWeight: "700",
|
|
7028
|
+
color: "var(--bw-text-color)",
|
|
7029
|
+
marginBottom: "16px",
|
|
7030
|
+
lineHeight: "1.3",
|
|
7031
|
+
fontFamily: "var(--bw-font-family)",
|
|
7032
|
+
margin: "0 0 16px 0",
|
|
7033
|
+
}, 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: {
|
|
7034
|
+
listStyle: "none",
|
|
7035
|
+
padding: "0",
|
|
7036
|
+
margin: "0",
|
|
7037
|
+
display: "flex",
|
|
7038
|
+
flexDirection: "column",
|
|
7039
|
+
gap: "3px",
|
|
7040
|
+
}, children: eventType.highlights
|
|
7041
|
+
.filter((highlight) => highlight.trim())
|
|
7042
|
+
.map((highlight, index) => (u$1("li", { style: {
|
|
7043
|
+
display: "flex",
|
|
7044
|
+
alignItems: "flex-start",
|
|
7045
|
+
gap: "10px",
|
|
7046
|
+
fontFamily: "var(--bw-font-family)",
|
|
7047
|
+
fontSize: "16px",
|
|
7048
|
+
lineHeight: "1.6",
|
|
7049
|
+
color: "var(--bw-text-color)",
|
|
7050
|
+
}, 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: {
|
|
7051
|
+
marginBottom: "24px",
|
|
7052
|
+
color: "var(--bw-text-muted)",
|
|
6740
7053
|
fontSize: "16px",
|
|
6741
|
-
|
|
7054
|
+
lineHeight: "1.6",
|
|
6742
7055
|
fontFamily: "var(--bw-font-family)",
|
|
7056
|
+
padding: "0px 20px",
|
|
7057
|
+
}, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
|
|
6743
7058
|
display: "flex",
|
|
7059
|
+
justifyContent: "space-between",
|
|
6744
7060
|
alignItems: "center",
|
|
6745
|
-
|
|
6746
|
-
|
|
6747
|
-
|
|
6748
|
-
|
|
6749
|
-
|
|
6750
|
-
|
|
6751
|
-
|
|
6752
|
-
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6760
|
-
|
|
6761
|
-
|
|
6762
|
-
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
|
|
6767
|
-
|
|
6768
|
-
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
7061
|
+
marginTop: "32px",
|
|
7062
|
+
padding: "20px",
|
|
7063
|
+
backgroundColor: "var(--bw-background-color)",
|
|
7064
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7065
|
+
border: `1px solid var(--bw-border-color)`,
|
|
7066
|
+
}, children: [u$1("div", { children: [u$1("div", { style: {
|
|
7067
|
+
fontSize: "14px",
|
|
7068
|
+
color: "var(--bw-text-muted)",
|
|
7069
|
+
fontFamily: "var(--bw-font-family)",
|
|
7070
|
+
marginBottom: "4px",
|
|
7071
|
+
}, children: "Preis ab" }), u$1("div", { style: {
|
|
7072
|
+
fontSize: "32px",
|
|
7073
|
+
fontWeight: "700",
|
|
7074
|
+
color: "var(--bw-text-color)",
|
|
7075
|
+
fontFamily: "var(--bw-font-family)",
|
|
7076
|
+
}, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (u$1("button", { onClick: handleBookingClick, style: {
|
|
7077
|
+
backgroundColor: "var(--bw-highlight-color)",
|
|
7078
|
+
color: "white",
|
|
7079
|
+
padding: "14px 28px",
|
|
7080
|
+
border: "none",
|
|
7081
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7082
|
+
fontSize: "16px",
|
|
7083
|
+
fontWeight: "600",
|
|
7084
|
+
fontFamily: "var(--bw-font-family)",
|
|
7085
|
+
display: "flex",
|
|
7086
|
+
alignItems: "center",
|
|
7087
|
+
gap: "8px",
|
|
7088
|
+
cursor: "pointer",
|
|
7089
|
+
transition: "all 0.2s ease",
|
|
7090
|
+
}, onMouseEnter: (e) => {
|
|
7091
|
+
e.currentTarget.style.opacity = "0.9";
|
|
7092
|
+
e.currentTarget.style.transform = "translateY(-1px)";
|
|
7093
|
+
}, onMouseLeave: (e) => {
|
|
7094
|
+
e.currentTarget.style.opacity = "1";
|
|
7095
|
+
e.currentTarget.style.transform = "translateY(0)";
|
|
7096
|
+
}, children: [u$1(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
|
|
7097
|
+
position: "absolute",
|
|
7098
|
+
inset: 0,
|
|
7099
|
+
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
7100
|
+
backdropFilter: "blur(2px)",
|
|
7101
|
+
display: "flex",
|
|
7102
|
+
alignItems: "center",
|
|
7103
|
+
justifyContent: "center",
|
|
7104
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7105
|
+
}, children: u$1("div", { style: {
|
|
7106
|
+
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
7107
|
+
padding: "16px 32px",
|
|
7108
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7109
|
+
color: "var(--bw-text-color)",
|
|
7110
|
+
fontWeight: "600",
|
|
7111
|
+
fontSize: "18px",
|
|
7112
|
+
fontFamily: "var(--bw-font-family)",
|
|
7113
|
+
boxShadow: "var(--bw-shadow-md)",
|
|
7114
|
+
}, children: "Ausgebucht" }) }))] }) }) }) }));
|
|
6773
7115
|
}
|
|
6774
7116
|
|
|
6775
7117
|
// Carousel navigation icons
|
|
@@ -6821,13 +7163,6 @@
|
|
|
6821
7163
|
if (images.length === 0) {
|
|
6822
7164
|
return u$1(EventImagePlaceholder, {});
|
|
6823
7165
|
}
|
|
6824
|
-
if (images.length === 1) {
|
|
6825
|
-
return (u$1("img", { src: images[0], alt: eventName, style: {
|
|
6826
|
-
width: "100%",
|
|
6827
|
-
height: "100%",
|
|
6828
|
-
objectFit: "cover",
|
|
6829
|
-
} }));
|
|
6830
|
-
}
|
|
6831
7166
|
return (u$1("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [u$1("div", { style: {
|
|
6832
7167
|
display: "flex",
|
|
6833
7168
|
width: `${images.length * 100}%`,
|
|
@@ -6838,11 +7173,16 @@
|
|
|
6838
7173
|
width: `${100 / images.length}%`,
|
|
6839
7174
|
height: "100%",
|
|
6840
7175
|
flexShrink: 0,
|
|
7176
|
+
overflow: "hidden",
|
|
7177
|
+
position: "relative",
|
|
6841
7178
|
}, children: u$1("img", { src: image, alt: `${eventName} - Bild ${index + 1}`, style: {
|
|
6842
7179
|
width: "100%",
|
|
6843
7180
|
height: "100%",
|
|
6844
7181
|
objectFit: "cover",
|
|
6845
7182
|
display: "block",
|
|
7183
|
+
position: "absolute",
|
|
7184
|
+
top: 0,
|
|
7185
|
+
left: 0,
|
|
6846
7186
|
} }) }, index))) }), images.length > 1 && (u$1(k$2, { children: [u$1("button", { onClick: prevImage, disabled: isTransitioning, style: {
|
|
6847
7187
|
position: "absolute",
|
|
6848
7188
|
left: "12px",
|
|
@@ -6990,11 +7330,11 @@
|
|
|
6990
7330
|
height: 28px !important;
|
|
6991
7331
|
}
|
|
6992
7332
|
}
|
|
6993
|
-
` }), u$1("div", { className: "bw-skeleton-list bw-event-type-list", style: { padding: "
|
|
7333
|
+
` }), u$1("div", { className: "bw-skeleton-list bw-event-type-list", style: { padding: "0px" }, children: u$1("div", { style: {
|
|
6994
7334
|
display: "flex",
|
|
6995
7335
|
flexWrap: "wrap",
|
|
6996
7336
|
justifyContent: "center",
|
|
6997
|
-
gap: "
|
|
7337
|
+
gap: "24px",
|
|
6998
7338
|
}, children: Array.from({ length: count }).map((_, idx) => (u$1("div", { className: "bw-skeleton-card bw-skeleton-shimmer bw-event-type-card", style: {
|
|
6999
7339
|
position: "relative",
|
|
7000
7340
|
backgroundColor: "var(--bw-surface-color)",
|
|
@@ -7017,7 +7357,7 @@
|
|
|
7017
7357
|
width: "100%",
|
|
7018
7358
|
height: "300px",
|
|
7019
7359
|
backgroundColor: "var(--bw-border-color)",
|
|
7020
|
-
} }), u$1("div", { className: "bw-skeleton-content bw-event-type-content", style: { padding: "24px", flex: 1 }, children: [u$1("div", { style: {
|
|
7360
|
+
} }), u$1("div", { className: "bw-skeleton-content bw-event-type-content", style: { padding: "16px 24px", flex: 1 }, children: [u$1("div", { style: {
|
|
7021
7361
|
width: "60%",
|
|
7022
7362
|
height: "14px",
|
|
7023
7363
|
backgroundColor: "var(--bw-border-color)",
|
|
@@ -7081,16 +7421,19 @@
|
|
|
7081
7421
|
borderRadius: "4px",
|
|
7082
7422
|
} })] }, lineIdx))) }), u$1("div", { style: {
|
|
7083
7423
|
display: "flex",
|
|
7084
|
-
justifyContent: "
|
|
7424
|
+
justifyContent: "flex-end",
|
|
7085
7425
|
alignItems: "center",
|
|
7086
|
-
|
|
7426
|
+
gap: "12px",
|
|
7427
|
+
marginTop: "32px",
|
|
7087
7428
|
}, children: [u$1("div", { children: u$1("div", { className: "bw-skeleton-price bw-event-type-price", style: {
|
|
7088
|
-
width: "
|
|
7089
|
-
height: "
|
|
7090
|
-
|
|
7091
|
-
borderRadius: "
|
|
7429
|
+
width: "120px",
|
|
7430
|
+
height: "48px",
|
|
7431
|
+
border: "1px solid var(--bw-border-color)",
|
|
7432
|
+
borderRadius: "var(--bw-border-radius)",
|
|
7433
|
+
alignItems: "center",
|
|
7434
|
+
justifyContent: "center",
|
|
7092
7435
|
} }) }), u$1("div", { style: {
|
|
7093
|
-
width: "
|
|
7436
|
+
width: "170px",
|
|
7094
7437
|
height: "48px",
|
|
7095
7438
|
backgroundColor: "var(--bw-highlight-color)",
|
|
7096
7439
|
borderRadius: "var(--bw-border-radius)",
|
|
@@ -7140,7 +7483,7 @@
|
|
|
7140
7483
|
max-height: 100px !important;
|
|
7141
7484
|
}
|
|
7142
7485
|
.bw-event-type-content {
|
|
7143
|
-
padding:
|
|
7486
|
+
padding: 16px 24px !important;
|
|
7144
7487
|
}
|
|
7145
7488
|
}
|
|
7146
7489
|
` }), eventTypes.length === 0 ? (u$1("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$1("div", { style: {
|
|
@@ -7202,11 +7545,11 @@
|
|
|
7202
7545
|
e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
|
|
7203
7546
|
e.currentTarget.style.color = "var(--bw-highlight-color)";
|
|
7204
7547
|
e.currentTarget.style.transform = "translateY(0)";
|
|
7205
|
-
}, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "
|
|
7548
|
+
}, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "0px 0px" }, children: u$1("div", { style: {
|
|
7206
7549
|
display: "flex",
|
|
7207
7550
|
flexWrap: "wrap",
|
|
7208
7551
|
justifyContent: "center",
|
|
7209
|
-
gap: "
|
|
7552
|
+
gap: "24px",
|
|
7210
7553
|
}, children: eventTypes.map((eventType) => {
|
|
7211
7554
|
const isAvailable = eventType.hasAvailableInstances;
|
|
7212
7555
|
return (u$1("div", { className: "bw-event-type-card", style: {
|
|
@@ -7250,7 +7593,7 @@
|
|
|
7250
7593
|
padding: "3px 8px",
|
|
7251
7594
|
borderRadius: "var(--bw-border-radius)",
|
|
7252
7595
|
fontFamily: "var(--bw-font-family)",
|
|
7253
|
-
}, children: eventType.category.name }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$1(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$1("div", { className: "bw-event-type-content", style: { padding: "12px
|
|
7596
|
+
}, children: eventType.category.name }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$1(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$1("div", { className: "bw-event-type-content", style: { padding: "12px 18px" }, children: [u$1("h2", { className: "bw-event-type-title", style: {
|
|
7254
7597
|
fontSize: "clamp(1.1rem, 2.5vw, 24px)",
|
|
7255
7598
|
fontWeight: "700",
|
|
7256
7599
|
color: "var(--bw-text-color)",
|
|
@@ -7261,14 +7604,13 @@
|
|
|
7261
7604
|
display: "flex",
|
|
7262
7605
|
alignItems: "center",
|
|
7263
7606
|
gap: "6px",
|
|
7264
|
-
marginLeft: "10px",
|
|
7265
7607
|
}, children: [u$1(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$1("span", { style: {
|
|
7266
7608
|
fontFamily: "var(--bw-font-family)",
|
|
7267
7609
|
fontSize: "14px",
|
|
7268
7610
|
color: "var(--bw-text-muted)",
|
|
7269
7611
|
}, children: eventType.nextAvailableDate
|
|
7270
7612
|
? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
|
|
7271
|
-
: "Keine Termine frei" })] }), u$1("div", { style: {
|
|
7613
|
+
: "Keine Termine frei" })] }), u$1("div", { style: { cursor: "pointer" }, onClick: (e) => {
|
|
7272
7614
|
e.stopPropagation();
|
|
7273
7615
|
handleShowDetails(eventType);
|
|
7274
7616
|
}, children: eventType.highlights && eventType.highlights.length > 0 ? (
|
|
@@ -7282,13 +7624,12 @@
|
|
|
7282
7624
|
display: "-webkit-box",
|
|
7283
7625
|
WebkitLineClamp: 5,
|
|
7284
7626
|
WebkitBoxOrient: "vertical",
|
|
7285
|
-
overflow: "hidden",
|
|
7286
7627
|
maxHeight: "128px",
|
|
7287
|
-
textOverflow: "ellipsis",
|
|
7288
7628
|
padding: "0",
|
|
7289
7629
|
margin: "0",
|
|
7290
7630
|
flexDirection: "column",
|
|
7291
7631
|
gap: "3px",
|
|
7632
|
+
position: "relative",
|
|
7292
7633
|
}, children: eventType.highlights
|
|
7293
7634
|
.filter((highlight) => highlight.trim())
|
|
7294
7635
|
.map((highlight, index) => (u$1("li", { style: {
|
|
@@ -7296,9 +7637,16 @@
|
|
|
7296
7637
|
alignItems: "flex-start",
|
|
7297
7638
|
gap: "8px",
|
|
7298
7639
|
fontFamily: "var(--bw-font-family)",
|
|
7299
|
-
lineHeight: "1.
|
|
7640
|
+
lineHeight: "1.55",
|
|
7300
7641
|
color: "var(--bw-text-muted)",
|
|
7301
|
-
|
|
7642
|
+
position: "relative",
|
|
7643
|
+
maxWidth: "100%",
|
|
7644
|
+
}, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { style: {
|
|
7645
|
+
textOverflow: "ellipsis",
|
|
7646
|
+
overflow: "hidden",
|
|
7647
|
+
whiteSpace: "nowrap",
|
|
7648
|
+
flex: "1",
|
|
7649
|
+
}, children: highlight.trim() })] }, index))) }) })) : (
|
|
7302
7650
|
// Fallback to description
|
|
7303
7651
|
u$1(k$2, { children: u$1("p", { className: "bw-event-type-desc", style: {
|
|
7304
7652
|
color: "var(--bw-text-muted)",
|
|
@@ -7313,6 +7661,7 @@
|
|
|
7313
7661
|
textOverflow: "ellipsis",
|
|
7314
7662
|
minHeight: "128px",
|
|
7315
7663
|
maxHeight: "128px",
|
|
7664
|
+
textAlign: "left",
|
|
7316
7665
|
}, children: eventType.description || " " }) })) }), u$1("div", { children: [u$1("div", { className: "bw-event-type-price", style: {
|
|
7317
7666
|
fontSize: "clamp(1.72rem, 4vw, 32px)",
|
|
7318
7667
|
fontWeight: "700",
|
|
@@ -7323,7 +7672,7 @@
|
|
|
7323
7672
|
display: "flex",
|
|
7324
7673
|
justifyContent: "flex-end",
|
|
7325
7674
|
alignItems: "center",
|
|
7326
|
-
marginTop: "
|
|
7675
|
+
marginTop: "10px",
|
|
7327
7676
|
gap: "12px",
|
|
7328
7677
|
}, children: [(eventType.description || eventType.highlights?.length) && (u$1("button", { onClick: (e) => {
|
|
7329
7678
|
e.stopPropagation();
|