@prijsvrijtechsupport/ui 0.0.48 → 0.0.49
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/components/priceBox/styles.css +3 -0
- package/dist/components/priceCheck/styles.css +6 -1
- package/dist/components/slider/styles.css +3 -0
- package/dist/dist/index.css +24 -1
- package/dist/dist/index.css.map +1 -1
- package/dist/index.cjs +186 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +186 -111
- package/dist/index.js.map +1 -1
- package/dist/src/components/hero/Hero.stories.d.ts +2 -0
- package/dist/src/components/hero/index.d.ts +3 -1
- package/dist/src/components/priceBox/index.d.ts +4 -1
- package/dist/src/components/slider/Slider.stories.d.ts +42 -18
- package/dist/src/components/slider/index.d.ts +5 -2
- package/dist/src/components/toggle/Toggle.stories.d.ts +5 -0
- package/dist/src/components/weather/Weather.stories.d.ts +3 -8
- package/dist/src/icons/IconImage.d.ts +2 -0
- package/dist/src/icons/index.d.ts +1 -0
- package/dist/styles/utilities.css +2 -0
- package/dist/styles/variables.css +11 -1
- package/package.json +3 -1
package/dist/index.js
CHANGED
|
@@ -9,6 +9,7 @@ import { twMerge } from "tailwind-merge";
|
|
|
9
9
|
import { useInView } from "react-intersection-observer";
|
|
10
10
|
import moment from "moment";
|
|
11
11
|
import useEmblaCarousel from "embla-carousel-react";
|
|
12
|
+
import AutoHeight from "embla-carousel-auto-height";
|
|
12
13
|
import { differenceInMinutes, format, parse } from "date-fns";
|
|
13
14
|
import { nl } from "date-fns/locale";
|
|
14
15
|
|
|
@@ -27,118 +28,126 @@ var variables_default = {};
|
|
|
27
28
|
|
|
28
29
|
//#endregion
|
|
29
30
|
//#region src/components/topMenu/styles.css
|
|
30
|
-
var styles_default$
|
|
31
|
+
var styles_default$30 = {};
|
|
31
32
|
|
|
32
33
|
//#endregion
|
|
33
34
|
//#region src/components/button/styles.css
|
|
34
|
-
var styles_default$
|
|
35
|
+
var styles_default$29 = {};
|
|
35
36
|
|
|
36
37
|
//#endregion
|
|
37
38
|
//#region src/components/priceCheck/styles.css
|
|
38
|
-
var styles_default$
|
|
39
|
+
var styles_default$28 = {};
|
|
39
40
|
|
|
40
41
|
//#endregion
|
|
41
42
|
//#region src/components/toggle/styles.css
|
|
42
|
-
var styles_default$
|
|
43
|
+
var styles_default$27 = {};
|
|
43
44
|
|
|
44
45
|
//#endregion
|
|
45
46
|
//#region src/components/topHeaderMenu/styles.css
|
|
46
|
-
var styles_default$
|
|
47
|
+
var styles_default$26 = {};
|
|
47
48
|
|
|
48
49
|
//#endregion
|
|
49
50
|
//#region src/components/filterButton/styles.css
|
|
50
|
-
var styles_default$
|
|
51
|
+
var styles_default$25 = {};
|
|
51
52
|
|
|
52
53
|
//#endregion
|
|
53
54
|
//#region src/components/searchBox/styles.css
|
|
54
|
-
var styles_default$
|
|
55
|
+
var styles_default$24 = {};
|
|
55
56
|
|
|
56
57
|
//#endregion
|
|
57
58
|
//#region src/components/dropdown/styles.css
|
|
58
|
-
var styles_default$
|
|
59
|
+
var styles_default$23 = {};
|
|
59
60
|
|
|
60
61
|
//#endregion
|
|
61
62
|
//#region src/components/counterIcon/styles.css
|
|
62
|
-
var styles_default$
|
|
63
|
+
var styles_default$22 = {};
|
|
63
64
|
|
|
64
65
|
//#endregion
|
|
65
66
|
//#region src/components/usp/styles.css
|
|
66
|
-
var styles_default$
|
|
67
|
+
var styles_default$21 = {};
|
|
67
68
|
|
|
68
69
|
//#endregion
|
|
69
70
|
//#region src/components/middleNavigation/styles.css
|
|
70
|
-
var styles_default$
|
|
71
|
+
var styles_default$20 = {};
|
|
71
72
|
|
|
72
73
|
//#endregion
|
|
73
74
|
//#region src/components/menu/styles.css
|
|
74
|
-
var styles_default$
|
|
75
|
+
var styles_default$19 = {};
|
|
75
76
|
|
|
76
77
|
//#endregion
|
|
77
78
|
//#region src/components/footer/styles.css
|
|
78
|
-
var styles_default$
|
|
79
|
+
var styles_default$18 = {};
|
|
79
80
|
|
|
80
81
|
//#endregion
|
|
81
82
|
//#region src/components/blogWidget/styles.css
|
|
82
|
-
var styles_default$
|
|
83
|
+
var styles_default$17 = {};
|
|
83
84
|
|
|
84
85
|
//#endregion
|
|
85
86
|
//#region src/components/searchBlock/styles.css
|
|
86
|
-
var styles_default$
|
|
87
|
+
var styles_default$16 = {};
|
|
87
88
|
|
|
88
89
|
//#endregion
|
|
89
90
|
//#region src/components/categoryFilter/styles.css
|
|
90
|
-
var styles_default$
|
|
91
|
+
var styles_default$15 = {};
|
|
91
92
|
|
|
92
93
|
//#endregion
|
|
93
94
|
//#region src/components/collection/styles.css
|
|
94
|
-
var styles_default$
|
|
95
|
+
var styles_default$14 = {};
|
|
95
96
|
|
|
96
97
|
//#endregion
|
|
97
98
|
//#region src/components/review/styles.css
|
|
98
|
-
var styles_default$
|
|
99
|
+
var styles_default$13 = {};
|
|
99
100
|
|
|
100
101
|
//#endregion
|
|
101
102
|
//#region src/components/hotelAccomodationResults/styles.css
|
|
102
|
-
var styles_default$
|
|
103
|
+
var styles_default$12 = {};
|
|
103
104
|
|
|
104
105
|
//#endregion
|
|
105
106
|
//#region src/components/coupon/styles.css
|
|
106
|
-
var styles_default$
|
|
107
|
+
var styles_default$11 = {};
|
|
107
108
|
|
|
108
109
|
//#endregion
|
|
109
110
|
//#region src/components/giftCard/styles.css
|
|
110
|
-
var styles_default$
|
|
111
|
+
var styles_default$10 = {};
|
|
111
112
|
|
|
112
113
|
//#endregion
|
|
113
114
|
//#region src/components/pvPopup/styles.css
|
|
114
|
-
var styles_default$
|
|
115
|
+
var styles_default$9 = {};
|
|
115
116
|
|
|
116
117
|
//#endregion
|
|
117
118
|
//#region src/components/photoCardsRotated/styles.css
|
|
118
|
-
var styles_default$
|
|
119
|
+
var styles_default$8 = {};
|
|
119
120
|
|
|
120
121
|
//#endregion
|
|
121
122
|
//#region src/components/spotlights/styles.css
|
|
122
|
-
var styles_default$
|
|
123
|
+
var styles_default$7 = {};
|
|
123
124
|
|
|
124
125
|
//#endregion
|
|
125
126
|
//#region src/components/viewedAccomodations/styles.css
|
|
126
|
-
var styles_default$
|
|
127
|
+
var styles_default$6 = {};
|
|
127
128
|
|
|
128
129
|
//#endregion
|
|
129
130
|
//#region src/components/quantityButtons/styles.css
|
|
130
|
-
var styles_default$
|
|
131
|
+
var styles_default$5 = {};
|
|
131
132
|
|
|
132
133
|
//#endregion
|
|
133
134
|
//#region src/components/matrixTable/styles.css
|
|
134
|
-
var styles_default$
|
|
135
|
+
var styles_default$4 = {};
|
|
135
136
|
|
|
136
137
|
//#endregion
|
|
137
138
|
//#region src/components/pageNavigation/styles.css
|
|
138
|
-
var styles_default$
|
|
139
|
+
var styles_default$3 = {};
|
|
139
140
|
|
|
140
141
|
//#endregion
|
|
141
142
|
//#region src/components/calendar/styles.css
|
|
143
|
+
var styles_default$2 = {};
|
|
144
|
+
|
|
145
|
+
//#endregion
|
|
146
|
+
//#region src/components/slider/styles.css
|
|
147
|
+
var styles_default$1 = {};
|
|
148
|
+
|
|
149
|
+
//#endregion
|
|
150
|
+
//#region src/components/priceBox/styles.css
|
|
142
151
|
var styles_default = {};
|
|
143
152
|
|
|
144
153
|
//#endregion
|
|
@@ -1751,6 +1760,27 @@ const IconCocktail = ({ className,...props }) => /* @__PURE__ */ jsx("svg", {
|
|
|
1751
1760
|
})
|
|
1752
1761
|
});
|
|
1753
1762
|
|
|
1763
|
+
//#endregion
|
|
1764
|
+
//#region src/icons/IconImage.tsx
|
|
1765
|
+
const IconImage = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
|
|
1766
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1767
|
+
className,
|
|
1768
|
+
width: "24",
|
|
1769
|
+
height: "24",
|
|
1770
|
+
viewBox: "0 0 24 24",
|
|
1771
|
+
fill: "none",
|
|
1772
|
+
...props,
|
|
1773
|
+
children: [/* @__PURE__ */ jsx("path", {
|
|
1774
|
+
d: "M18 10C19.1046 10 20 9.10457 20 8C20 6.89543 19.1046 6 18 6C16.8954 6 16 6.89543 16 8C16 9.10457 16.8954 10 18 10Z",
|
|
1775
|
+
fill: "currentColor"
|
|
1776
|
+
}), /* @__PURE__ */ jsx("path", {
|
|
1777
|
+
"fill-rule": "evenodd",
|
|
1778
|
+
"clip-rule": "evenodd",
|
|
1779
|
+
d: "M3 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H3C1.34315 21 0 19.6569 0 18V6C0 4.34315 1.34314 3 3 3ZM3 5C2.44772 5 2 5.44772 2 6V14.1922L7.48523 8.70694C7.87585 8.31644 8.50891 8.31644 8.89954 8.70694L15.1924 14.9999L17.4852 12.7069C17.8759 12.3164 18.5089 12.3164 18.8995 12.7069L22 15.8075V6C22 5.44772 21.5523 5 21 5H3Z",
|
|
1780
|
+
fill: "currentColor"
|
|
1781
|
+
})]
|
|
1782
|
+
});
|
|
1783
|
+
|
|
1754
1784
|
//#endregion
|
|
1755
1785
|
//#region src/theme/variables.ts
|
|
1756
1786
|
const CSS_VARIABLE_KEYS = [
|
|
@@ -4195,7 +4225,7 @@ const PriceCheck = ({ className, price, text, disabled = false, "data-testid": t
|
|
|
4195
4225
|
children: text
|
|
4196
4226
|
}),
|
|
4197
4227
|
/* @__PURE__ */ jsxs("span", {
|
|
4198
|
-
className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold
|
|
4228
|
+
className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold price-check-font-size-price whitespace-nowrap price-check-price-margin-top`,
|
|
4199
4229
|
children: [
|
|
4200
4230
|
price,
|
|
4201
4231
|
",",
|
|
@@ -5135,11 +5165,12 @@ const QuantityButtons = ({ className, value, setValue, minValue = 0, maxValue =
|
|
|
5135
5165
|
//#endregion
|
|
5136
5166
|
//#region src/components/slider/index.tsx
|
|
5137
5167
|
const LAZY_LOAD_PLACEHOLDER_SRC = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D";
|
|
5138
|
-
function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true, showDots = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName,...props }) {
|
|
5168
|
+
function Slider({ slides = [], options, plugins, lazyLoad = false, showArrows = true, showDots = true, roundedFull = false, showLike = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName, square = true,...props }) {
|
|
5139
5169
|
const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
|
|
5140
5170
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
5141
5171
|
const [scrollSnaps, setScrollSnaps] = useState([]);
|
|
5142
5172
|
const [slidesInView, setSlidesInView] = useState([]);
|
|
5173
|
+
const [loadedImages, setLoadedImages] = useState(new Set());
|
|
5143
5174
|
const canScrollPrev = useMemo(() => emblaApi?.canScrollPrev() ?? false, [emblaApi, selectedIndex]);
|
|
5144
5175
|
const canScrollNext = useMemo(() => emblaApi?.canScrollNext() ?? false, [emblaApi, selectedIndex]);
|
|
5145
5176
|
const scrollPrev = useCallback(() => {
|
|
@@ -5194,6 +5225,17 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
|
|
|
5194
5225
|
lazyLoad,
|
|
5195
5226
|
updateSlidesInView
|
|
5196
5227
|
]);
|
|
5228
|
+
useEffect(() => {
|
|
5229
|
+
if (!emblaApi) return;
|
|
5230
|
+
const imageSlides = slides.filter((slide) => isValidElement(slide) && slide.type === "img");
|
|
5231
|
+
if (imageSlides.length > 0 && loadedImages.size === imageSlides.length) {
|
|
5232
|
+
emblaApi.reInit();
|
|
5233
|
+
}
|
|
5234
|
+
}, [
|
|
5235
|
+
emblaApi,
|
|
5236
|
+
loadedImages,
|
|
5237
|
+
slides
|
|
5238
|
+
]);
|
|
5197
5239
|
return /* @__PURE__ */ jsxs("div", {
|
|
5198
5240
|
"data-component": "slider",
|
|
5199
5241
|
className: cn("relative", className),
|
|
@@ -5203,9 +5245,9 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
|
|
|
5203
5245
|
ref: emblaRef,
|
|
5204
5246
|
className: cn("overflow-hidden", viewportClassName),
|
|
5205
5247
|
children: [/* @__PURE__ */ jsx("div", {
|
|
5206
|
-
className: cn("flex touch-pan-y", containerClassName),
|
|
5248
|
+
className: cn("flex touch-pan-y items-start", containerClassName),
|
|
5207
5249
|
children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
|
|
5208
|
-
className: cn("min-w-0 shrink-0 grow-0 basis-full", slideClassName),
|
|
5250
|
+
className: cn("min-w-0 shrink-0 grow-0 basis-full h-auto", square && "aspect-square", slideClassName),
|
|
5209
5251
|
children: lazyLoad && isValidElement(slide) && slide.type === "img" ? (() => {
|
|
5210
5252
|
const hasBeenInView = slidesInView.includes(index);
|
|
5211
5253
|
const originalSrc = slide.props.src;
|
|
@@ -5213,16 +5255,20 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
|
|
|
5213
5255
|
return cloneElement(slide, {
|
|
5214
5256
|
src,
|
|
5215
5257
|
"data-src": originalSrc,
|
|
5216
|
-
className: cn(slide.props.className, "h-auto")
|
|
5258
|
+
className: cn(slide.props.className, "h-auto"),
|
|
5259
|
+
onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
|
|
5217
5260
|
});
|
|
5218
|
-
})() : isValidElement(slide)
|
|
5261
|
+
})() : isValidElement(slide) && slide.type === "img" ? cloneElement(slide, {
|
|
5262
|
+
className: cn(slide.props.className, "h-auto"),
|
|
5263
|
+
onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
|
|
5264
|
+
}) : isValidElement(slide) ? cloneElement(slide, { className: cn(slide.props.className, "h-auto") }) : slide
|
|
5219
5265
|
}, index))
|
|
5220
5266
|
}), showDots && dotsPlacement === "inside" && scrollSnaps.length > 1 && /* @__PURE__ */ jsx("div", {
|
|
5221
5267
|
className: "pointer-events-none absolute inset-x-0 bottom-3 z-20 flex items-center justify-center gap-2 rounded-2xl bg-black/40 w-fit mx-auto p-1.5",
|
|
5222
5268
|
children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx("button", {
|
|
5223
5269
|
type: "button",
|
|
5224
5270
|
"aria-label": `Go to slide ${index + 1}`,
|
|
5225
|
-
className: cn("pointer-events-auto cursor-pointer h-2 w-2 rounded-full
|
|
5271
|
+
className: cn("pointer-events-auto cursor-pointer h-2 w-2 bg-transparent rounded-full border-2 border-white", index === selectedIndex && "selectedIndexBg"),
|
|
5226
5272
|
onClick: () => scrollTo(index)
|
|
5227
5273
|
}, index))
|
|
5228
5274
|
})]
|
|
@@ -5234,12 +5280,25 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
|
|
|
5234
5280
|
children: overlay
|
|
5235
5281
|
})
|
|
5236
5282
|
}),
|
|
5283
|
+
showLike && /* @__PURE__ */ jsx("div", {
|
|
5284
|
+
className: "pointer-events-none absolute top-4 right-4 z-20",
|
|
5285
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
5286
|
+
type: "button",
|
|
5287
|
+
"aria-label": "Like",
|
|
5288
|
+
onClick: () => console.log("Like clicked"),
|
|
5289
|
+
className: cn("pointer-events-auto cursor-pointer inline-flex size-5 items-center justify-center"),
|
|
5290
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
5291
|
+
"aria-hidden": "true",
|
|
5292
|
+
children: /* @__PURE__ */ jsx(IconHeart, { className: "size-6 text-white hover:text-red-500" })
|
|
5293
|
+
})
|
|
5294
|
+
})
|
|
5295
|
+
}),
|
|
5237
5296
|
showArrows && /* @__PURE__ */ jsxs("div", {
|
|
5238
5297
|
className: "pointer-events-none absolute inset-y-0 left-0 right-0 z-20 flex items-center justify-between",
|
|
5239
5298
|
children: [/* @__PURE__ */ jsx("button", {
|
|
5240
5299
|
type: "button",
|
|
5241
5300
|
"aria-label": "Previous slide",
|
|
5242
|
-
className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center
|
|
5301
|
+
className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollPrev && "opacity-50"),
|
|
5243
5302
|
onClick: scrollPrev,
|
|
5244
5303
|
disabled: !canScrollPrev,
|
|
5245
5304
|
children: /* @__PURE__ */ jsx("span", {
|
|
@@ -5249,7 +5308,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
|
|
|
5249
5308
|
}), /* @__PURE__ */ jsx("button", {
|
|
5250
5309
|
type: "button",
|
|
5251
5310
|
"aria-label": "Next slide",
|
|
5252
|
-
className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center
|
|
5311
|
+
className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollNext && "opacity-50"),
|
|
5253
5312
|
onClick: scrollNext,
|
|
5254
5313
|
disabled: !canScrollNext,
|
|
5255
5314
|
children: /* @__PURE__ */ jsx("span", {
|
|
@@ -6956,7 +7015,7 @@ const Chatbot = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
|
|
|
6956
7015
|
|
|
6957
7016
|
//#endregion
|
|
6958
7017
|
//#region src/components/priceBox/index.tsx
|
|
6959
|
-
const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, onClick, "data-testid": dataTestId }) => {
|
|
7018
|
+
const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, warnText, buttonText = "Bekijk vakantie", showButtonIcon, onClick, "data-testid": dataTestId }) => {
|
|
6960
7019
|
return /* @__PURE__ */ jsxs("div", {
|
|
6961
7020
|
"data-testid": dataTestId,
|
|
6962
7021
|
"data-component": "price-box",
|
|
@@ -6970,6 +7029,10 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
|
|
|
6970
7029
|
text: hotel.PriceInfo
|
|
6971
7030
|
})
|
|
6972
7031
|
}),
|
|
7032
|
+
warnText && /* @__PURE__ */ jsx("span", {
|
|
7033
|
+
className: "text-[9px] mb-2 order-4 md:order-2 priceBox-warnText",
|
|
7034
|
+
children: warnText
|
|
7035
|
+
}),
|
|
6973
7036
|
/* @__PURE__ */ jsxs("div", {
|
|
6974
7037
|
className: "text-sm flex flex-col gap-3 order-2",
|
|
6975
7038
|
children: [
|
|
@@ -6983,7 +7046,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
|
|
|
6983
7046
|
/* @__PURE__ */ jsx("span", { children: hotel.DepartureDate.split(",")[0] }),
|
|
6984
7047
|
/* @__PURE__ */ jsxs("span", {
|
|
6985
7048
|
className: "text-gray-400 ml-2",
|
|
6986
|
-
children: [
|
|
7049
|
+
children: [
|
|
7050
|
+
"(",
|
|
7051
|
+
hotel.Duration,
|
|
7052
|
+
" dagen)"
|
|
7053
|
+
]
|
|
6987
7054
|
})
|
|
6988
7055
|
]
|
|
6989
7056
|
}),
|
|
@@ -7013,10 +7080,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
|
|
|
7013
7080
|
className: "w-4/12 md:w-full order-3",
|
|
7014
7081
|
children: /* @__PURE__ */ jsx(Button, {
|
|
7015
7082
|
variant: brand === "prijsvrij" ? "primaryGlow" : "secondary",
|
|
7016
|
-
className: "whitespace-nowrap w-full
|
|
7083
|
+
className: "whitespace-nowrap w-full",
|
|
7017
7084
|
iconRight: true,
|
|
7018
|
-
|
|
7019
|
-
|
|
7085
|
+
onClick,
|
|
7086
|
+
icon: showButtonIcon ? /* @__PURE__ */ jsx(IconArrowRight, { className: "w-4 h-4" }) : undefined,
|
|
7087
|
+
children: buttonText
|
|
7020
7088
|
})
|
|
7021
7089
|
})
|
|
7022
7090
|
]
|
|
@@ -8844,7 +8912,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
|
|
|
8844
8912
|
let cloud3Height = 45;
|
|
8845
8913
|
let cloud3Position = "bottom-32";
|
|
8846
8914
|
if (size === "small") {
|
|
8847
|
-
dollarSize = "size-[30px]";
|
|
8915
|
+
dollarSize = "size-[30px] p-1";
|
|
8848
8916
|
planeSize = "w-16 h-16";
|
|
8849
8917
|
cloud1Width = 60;
|
|
8850
8918
|
cloud1Height = 27;
|
|
@@ -8856,7 +8924,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
|
|
|
8856
8924
|
cloud3Height = 16;
|
|
8857
8925
|
cloud3Position = "bottom-4";
|
|
8858
8926
|
} else if (size === "medium") {
|
|
8859
|
-
dollarSize = "size-[45px]";
|
|
8927
|
+
dollarSize = "size-[45px] p-2";
|
|
8860
8928
|
planeSize = "w-24 h-24";
|
|
8861
8929
|
cloud1Width = 140;
|
|
8862
8930
|
cloud1Height = 63;
|
|
@@ -8868,7 +8936,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
|
|
|
8868
8936
|
cloud3Height = 32;
|
|
8869
8937
|
cloud3Position = "bottom-10";
|
|
8870
8938
|
} else if (size === "large") {
|
|
8871
|
-
dollarSize = "size-[75px]";
|
|
8939
|
+
dollarSize = "size-[75px] p-2";
|
|
8872
8940
|
}
|
|
8873
8941
|
const brand = useBrand();
|
|
8874
8942
|
return /* @__PURE__ */ jsx("div", {
|
|
@@ -8899,7 +8967,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
|
|
|
8899
8967
|
className: "relative overflow-hidden w-full h-full",
|
|
8900
8968
|
children: /* @__PURE__ */ jsx("div", {
|
|
8901
8969
|
className: `${brand === "prijsvrij" ? "bg-primary" : "bg-secondary"} rounded-full ${dollarSize} flex items-center justify-center`,
|
|
8902
|
-
children: brand === "prijsvrij" ? /* @__PURE__ */ jsx(Dollar, { className: "animate-spin-slow w-full h-full
|
|
8970
|
+
children: brand === "prijsvrij" ? /* @__PURE__ */ jsx(Dollar, { className: "animate-spin-slow w-full h-full" }) : /* @__PURE__ */ jsx(DReizenSign, { className: " w-full h-full animate-spin-slow" })
|
|
8903
8971
|
})
|
|
8904
8972
|
})
|
|
8905
8973
|
});
|
|
@@ -8966,74 +9034,81 @@ const ReviewSmall = ({ className, rating, showArrow = true, "data-testid": dataT
|
|
|
8966
9034
|
|
|
8967
9035
|
//#endregion
|
|
8968
9036
|
//#region src/components/hero/index.tsx
|
|
8969
|
-
const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, hotel, priceBoxPosition = "end",...props }) =>
|
|
8970
|
-
|
|
8971
|
-
|
|
8972
|
-
|
|
8973
|
-
|
|
8974
|
-
|
|
8975
|
-
children:
|
|
8976
|
-
className:
|
|
8977
|
-
children: [
|
|
8978
|
-
|
|
8979
|
-
|
|
8980
|
-
|
|
8981
|
-
className: "
|
|
8982
|
-
|
|
8983
|
-
|
|
8984
|
-
|
|
8985
|
-
|
|
8986
|
-
|
|
8987
|
-
|
|
8988
|
-
|
|
8989
|
-
|
|
8990
|
-
|
|
8991
|
-
|
|
8992
|
-
|
|
8993
|
-
|
|
8994
|
-
|
|
8995
|
-
|
|
8996
|
-
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
className: "
|
|
9002
|
-
})
|
|
9003
|
-
}),
|
|
9004
|
-
/* @__PURE__ */ jsxs("div", {
|
|
9005
|
-
className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
|
|
9006
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
9007
|
-
className: "overflow-hidden",
|
|
9037
|
+
const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, warnText, hotel, buttonText = "Bekijk vakantie", priceBoxPosition = "end",...props }) => {
|
|
9038
|
+
const brand = useBrand("prijsvrij");
|
|
9039
|
+
return /* @__PURE__ */ jsx("div", {
|
|
9040
|
+
"data-component": "hero",
|
|
9041
|
+
className: clsx(className, "bg-white p-1 rounded-sm hero-shadow"),
|
|
9042
|
+
...props,
|
|
9043
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
9044
|
+
className: "flex flex-col md:flex-row",
|
|
9045
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
9046
|
+
className: clsx("grid gap-1 md:aspect-[16/6] md:grid-cols-3 md:grid-rows-[2fr_1fr]", priceBoxPosition === "start" ? "order-2 md:order-2" : "order-1 md:order-1"),
|
|
9047
|
+
children: [
|
|
9048
|
+
/* @__PURE__ */ jsxs("div", {
|
|
9049
|
+
className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-sm relative",
|
|
9050
|
+
children: [/* @__PURE__ */ jsx(ReviewSmall, {
|
|
9051
|
+
className: "absolute right-4 top-4 z-50",
|
|
9052
|
+
rating: 9.3
|
|
9053
|
+
}), /* @__PURE__ */ jsx(Slider, {
|
|
9054
|
+
className: "rounded-l-sm",
|
|
9055
|
+
slides: sliderImages.map((src, index) => /* @__PURE__ */ jsx("img", {
|
|
9056
|
+
src,
|
|
9057
|
+
alt: `Hero slide ${index + 1}`,
|
|
9058
|
+
className: "h-full w-full object-cover rounded-l-sm"
|
|
9059
|
+
}, index)),
|
|
9060
|
+
showArrows: false,
|
|
9061
|
+
dotsPlacement: "inside",
|
|
9062
|
+
showDots: false,
|
|
9063
|
+
options: { loop: true },
|
|
9064
|
+
plugins: [AutoHeight()],
|
|
9065
|
+
lazyLoad: true
|
|
9066
|
+
})]
|
|
9067
|
+
}),
|
|
9068
|
+
/* @__PURE__ */ jsx("div", {
|
|
9069
|
+
className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
|
|
9008
9070
|
children: /* @__PURE__ */ jsx("img", {
|
|
9009
|
-
src:
|
|
9010
|
-
alt: "Hero image
|
|
9011
|
-
className: "h-full w-full object-cover"
|
|
9071
|
+
src: topRightImage,
|
|
9072
|
+
alt: "Hero image 1",
|
|
9073
|
+
className: "h-full w-full object-cover rounded-tr-sm"
|
|
9012
9074
|
})
|
|
9013
|
-
}),
|
|
9014
|
-
|
|
9015
|
-
|
|
9016
|
-
|
|
9017
|
-
|
|
9018
|
-
|
|
9019
|
-
|
|
9020
|
-
|
|
9021
|
-
|
|
9075
|
+
}),
|
|
9076
|
+
/* @__PURE__ */ jsxs("div", {
|
|
9077
|
+
className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
|
|
9078
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
9079
|
+
className: "overflow-hidden",
|
|
9080
|
+
children: /* @__PURE__ */ jsx("img", {
|
|
9081
|
+
src: bottomLeftImage,
|
|
9082
|
+
alt: "Hero image 2",
|
|
9083
|
+
className: "h-full w-full object-cover"
|
|
9084
|
+
})
|
|
9085
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
9086
|
+
className: "relative overflow-hidden ",
|
|
9087
|
+
children: [/* @__PURE__ */ jsx("img", {
|
|
9088
|
+
src: bottomRightImage,
|
|
9089
|
+
alt: "Hero image 3",
|
|
9090
|
+
className: "h-full w-full object-cover"
|
|
9091
|
+
}), bottomRightOverlay && /* @__PURE__ */ jsx("div", {
|
|
9092
|
+
className: "absolute inset-0",
|
|
9093
|
+
children: bottomRightOverlay
|
|
9094
|
+
})]
|
|
9022
9095
|
})]
|
|
9023
|
-
})
|
|
9096
|
+
})
|
|
9097
|
+
]
|
|
9098
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
9099
|
+
className: clsx(priceBoxPosition === "start" ? "order-1 md:order-1" : "order-2 md:order-2"),
|
|
9100
|
+
children: /* @__PURE__ */ jsx(PriceBox, {
|
|
9101
|
+
noHover: true,
|
|
9102
|
+
noBorder: true,
|
|
9103
|
+
hotel,
|
|
9104
|
+
brand,
|
|
9105
|
+
warnText: warnText || "",
|
|
9106
|
+
buttonText
|
|
9024
9107
|
})
|
|
9025
|
-
]
|
|
9026
|
-
})
|
|
9027
|
-
|
|
9028
|
-
|
|
9029
|
-
noHover: true,
|
|
9030
|
-
noBorder: true,
|
|
9031
|
-
hotel,
|
|
9032
|
-
brand: "prijsvrij"
|
|
9033
|
-
})
|
|
9034
|
-
})]
|
|
9035
|
-
})
|
|
9036
|
-
});
|
|
9108
|
+
})]
|
|
9109
|
+
})
|
|
9110
|
+
});
|
|
9111
|
+
};
|
|
9037
9112
|
|
|
9038
9113
|
//#endregion
|
|
9039
9114
|
//#region src/components/review/index.tsx
|
|
@@ -10503,5 +10578,5 @@ const RangeSlider = forwardRef(function RangeSlider$1({ className, min = 0, max
|
|
|
10503
10578
|
RangeSlider.displayName = "RangeSlider";
|
|
10504
10579
|
|
|
10505
10580
|
//#endregion
|
|
10506
|
-
export { Accordion, BlogWidget, BrandProvider, BrandTopMenu, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, Divider, Dropdown, FilterButton, Filters, FlightSwitch, Footer, GiftCard, HamburgerMenuButton, Header, Hero, HotelAccomodationResults, HotelWidget, IconAlert, IconArrival, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconBeach, IconBed, IconBlog, IconBus, IconCalendar, IconCancel, IconCar, IconCarSun, IconCheck, IconChevronRight, IconCity, IconClock, IconCocktail, IconDelete, IconDeparture, IconDollar, IconEdit, IconExpand, IconFacebook, IconFavorite, IconFilter, IconFood, IconHeart, IconHeartFilled, IconHot, IconHotel, IconHouse, IconIce, IconInfo, IconInstagram, IconLuggage, IconMail, IconMap, IconMinus, IconParty, IconPhone, IconPhoto, IconPinterest, IconPlane, IconPlus, IconPresent, IconQuestion, IconRating, IconSearch, IconSeat, IconShare, IconSplash, IconStar, IconSuccess, IconSun, IconSupport, IconTemperature, IconTiktok, IconTransfer, IconTree, IconTwitter, IconUser, IconView, IconWarning, IconWatched, IconWhatsapp, IconWinterSport, IconWinterSun, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Nominations, NumberField, PageNavigation, PageRating, PhoneNumberInput, PhotoCardsRotated, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Skeleton, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
|
|
10581
|
+
export { Accordion, BlogWidget, BrandProvider, BrandTopMenu, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, Divider, Dropdown, FilterButton, Filters, FlightSwitch, Footer, GiftCard, HamburgerMenuButton, Header, Hero, HotelAccomodationResults, HotelWidget, IconAlert, IconArrival, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconBeach, IconBed, IconBlog, IconBus, IconCalendar, IconCancel, IconCar, IconCarSun, IconCheck, IconChevronRight, IconCity, IconClock, IconCocktail, IconDelete, IconDeparture, IconDollar, IconEdit, IconExpand, IconFacebook, IconFavorite, IconFilter, IconFood, IconHeart, IconHeartFilled, IconHot, IconHotel, IconHouse, IconIce, IconImage, IconInfo, IconInstagram, IconLuggage, IconMail, IconMap, IconMinus, IconParty, IconPhone, IconPhoto, IconPinterest, IconPlane, IconPlus, IconPresent, IconQuestion, IconRating, IconSearch, IconSeat, IconShare, IconSplash, IconStar, IconSuccess, IconSun, IconSupport, IconTemperature, IconTiktok, IconTransfer, IconTree, IconTwitter, IconUser, IconView, IconWarning, IconWatched, IconWhatsapp, IconWinterSport, IconWinterSun, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Nominations, NumberField, PageNavigation, PageRating, PhoneNumberInput, PhotoCardsRotated, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Skeleton, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
|
|
10507
10582
|
//# sourceMappingURL=index.js.map
|