willba-component-library 0.3.2 → 0.3.3
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/lib/assets/IconsSvg.d.ts +2 -1
- package/lib/components/Button/Button.d.ts +1 -1
- package/lib/components/FilterBar/FilterBar.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +2 -1
- package/lib/components/FilterBar/components/categories/Categories.d.ts +2 -1
- package/lib/components/FilterBar/components/divider/Divider.d.ts +2 -1
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +2 -1
- package/lib/components/FilterCalendar/components/Footer.d.ts +2 -1
- package/lib/core/components/buttons/close-button/CloseButton.d.ts +2 -1
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -2
- package/lib/index.d.ts +3 -4
- package/lib/index.esm.js +180 -98
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +180 -98
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +183 -101
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +3 -1
package/lib/index.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WillbaComponentLibrary = {}, global.
|
|
5
|
-
})(this, (function (exports,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react/jsx-runtime')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react/jsx-runtime'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.WillbaComponentLibrary = {}, global.React, global.jsxRuntime));
|
|
5
|
+
})(this, (function (exports, React, jsxRuntime) { 'use strict';
|
|
6
6
|
|
|
7
7
|
/******************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
var Button$1 = function (_a) {
|
|
204
204
|
var _b = _a.type, type = _b === void 0 ? "primary" : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? "medium" : _c, onClick = _a.onClick, label = _a.label;
|
|
205
205
|
var _d = __read(React.useState(4), 2), theState = _d[0]; _d[1];
|
|
206
|
-
return (
|
|
206
|
+
return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
|
|
207
207
|
};
|
|
208
208
|
|
|
209
209
|
function warn() {
|
|
@@ -3006,7 +3006,9 @@
|
|
|
3006
3006
|
|
|
3007
3007
|
var SubmitButton = function (_a) {
|
|
3008
3008
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3009
|
-
return (
|
|
3009
|
+
return (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
|
|
3010
|
+
isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
|
|
3011
|
+
label || 'Label'));
|
|
3010
3012
|
};
|
|
3011
3013
|
|
|
3012
3014
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -3019,7 +3021,8 @@
|
|
|
3019
3021
|
|
|
3020
3022
|
var CloseButton = function (_a) {
|
|
3021
3023
|
var handleClose = _a.handleClose;
|
|
3022
|
-
return (
|
|
3024
|
+
return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
3025
|
+
React.createElement(IoIosCloseCircleOutline, null)));
|
|
3023
3026
|
};
|
|
3024
3027
|
|
|
3025
3028
|
/**
|
|
@@ -11263,15 +11266,19 @@
|
|
|
11263
11266
|
var fill = _a.fill, size = _a.size, icon = _a.icon;
|
|
11264
11267
|
switch (icon) {
|
|
11265
11268
|
case 'spinner':
|
|
11266
|
-
return (
|
|
11269
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
|
|
11270
|
+
React.createElement("style", null, "\n .spinner_z9k8 {\n transform-origin: center;\n animation: spinner_StKS .75s infinite linear;\n }\n @keyframes spinner_StKS {\n 100% {\n transform: rotate(360deg);\n }\n }\n "),
|
|
11271
|
+
React.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
|
|
11272
|
+
React.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
|
|
11267
11273
|
case 'warning':
|
|
11268
|
-
return (
|
|
11274
|
+
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
|
|
11269
11275
|
verticalAlign: 'middle',
|
|
11270
11276
|
fill: fill,
|
|
11271
11277
|
overflow: 'hidden',
|
|
11272
11278
|
minWidth: '25px',
|
|
11273
11279
|
minHeight: '25px',
|
|
11274
|
-
}, viewBox: "0 0 1024 1024", version: "1.1"
|
|
11280
|
+
}, viewBox: "0 0 1024 1024", version: "1.1" },
|
|
11281
|
+
React.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
|
|
11275
11282
|
default:
|
|
11276
11283
|
return null;
|
|
11277
11284
|
}
|
|
@@ -11853,39 +11860,53 @@
|
|
|
11853
11860
|
: __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
|
|
11854
11861
|
lastPossibleCheckout
|
|
11855
11862
|
], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
|
|
11856
|
-
return (
|
|
11857
|
-
|
|
11858
|
-
|
|
11859
|
-
|
|
11860
|
-
|
|
11861
|
-
|
|
11862
|
-
|
|
11863
|
-
|
|
11864
|
-
|
|
11865
|
-
|
|
11866
|
-
|
|
11867
|
-
|
|
11868
|
-
|
|
11869
|
-
|
|
11870
|
-
|
|
11871
|
-
|
|
11872
|
-
|
|
11873
|
-
|
|
11874
|
-
|
|
11875
|
-
|
|
11876
|
-
|
|
11877
|
-
|
|
11878
|
-
|
|
11879
|
-
|
|
11880
|
-
|
|
11881
|
-
|
|
11882
|
-
|
|
11883
|
-
|
|
11884
|
-
|
|
11885
|
-
|
|
11886
|
-
|
|
11887
|
-
|
|
11888
|
-
|
|
11863
|
+
return (React.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11864
|
+
React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
|
|
11865
|
+
React.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
|
|
11866
|
+
selectedStartDate ||
|
|
11867
|
+
rangeContextStartDate ||
|
|
11868
|
+
(((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
|
|
11869
|
+
? newDisableCalendarDates.disabledDates[0].from
|
|
11870
|
+
: today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
|
|
11871
|
+
requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
|
|
11872
|
+
setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
|
|
11873
|
+
}, classNames: {
|
|
11874
|
+
day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
|
|
11875
|
+
day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
|
|
11876
|
+
}, modifiersClassNames: {
|
|
11877
|
+
today: 'my-today',
|
|
11878
|
+
booked: 'booked',
|
|
11879
|
+
disabledAfterCheckIn: 'disabled-after-check-in',
|
|
11880
|
+
overlappingDate: 'overlapping-date',
|
|
11881
|
+
noActiveSelectionStart: 'no-active-selection-start',
|
|
11882
|
+
noActiveSelectionMid: 'no-active-selection-mid',
|
|
11883
|
+
noActiveSelectionEnd: 'no-active-selection-end',
|
|
11884
|
+
checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
|
|
11885
|
+
checkInOnly: 'check-in-only',
|
|
11886
|
+
checkOutOnly: 'check-out-only',
|
|
11887
|
+
}, modifiers:
|
|
11888
|
+
// This function handles conditions for applying the modifiersClassNames
|
|
11889
|
+
handleCalendarModifiers({
|
|
11890
|
+
calendarRange: calendarRange,
|
|
11891
|
+
disabledDates: disabled,
|
|
11892
|
+
overlappingDate: overlappingDate,
|
|
11893
|
+
rangeContext: rangeContext,
|
|
11894
|
+
findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
|
|
11895
|
+
findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
|
|
11896
|
+
currentSelectionLastCheckoutDate: currentSelectionAvailability,
|
|
11897
|
+
}) }),
|
|
11898
|
+
React.createElement("div", { className: 'will-calendar-tooltip' },
|
|
11899
|
+
React.createElement("div", null, t('noCheckIn'))),
|
|
11900
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
|
|
11901
|
+
React.createElement("div", null, t('noCheckOut'))),
|
|
11902
|
+
React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
|
|
11903
|
+
React.createElement("div", null, t('checkOutOnly'))),
|
|
11904
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
|
|
11905
|
+
React.createElement("div", null, t('checkInOnly'))),
|
|
11906
|
+
React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
|
|
11907
|
+
React.createElement("div", null, t('checkOutOnly'))),
|
|
11908
|
+
React.createElement("div", { className: 'will-calendar-spinner' },
|
|
11909
|
+
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
11889
11910
|
});
|
|
11890
11911
|
|
|
11891
11912
|
var parseGuests = function (_a) {
|
|
@@ -12135,7 +12156,11 @@
|
|
|
12135
12156
|
|
|
12136
12157
|
var SelectButton = React.forwardRef(function (_a, ref) {
|
|
12137
12158
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
12138
|
-
return (
|
|
12159
|
+
return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true" },
|
|
12160
|
+
React.createElement("span", { className: "select-button-wrapper" },
|
|
12161
|
+
React.createElement("div", null,
|
|
12162
|
+
React.createElement("p", { className: "select-button-label" }, label),
|
|
12163
|
+
React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
12139
12164
|
});
|
|
12140
12165
|
SelectButton.displayName = 'SelectButton';
|
|
12141
12166
|
|
|
@@ -12144,7 +12169,7 @@
|
|
|
12144
12169
|
|
|
12145
12170
|
var TabButton = function (_a) {
|
|
12146
12171
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
12147
|
-
return (
|
|
12172
|
+
return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
12148
12173
|
};
|
|
12149
12174
|
|
|
12150
12175
|
var css_248z$7 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n \n border-radius: 50%;\n background-color: transparent;\n border: 1px solid var(--will-grey);\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n color: var(--will-black);\n\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
|
|
@@ -12165,11 +12190,20 @@
|
|
|
12165
12190
|
var handleIncrement = function () {
|
|
12166
12191
|
updateGuestsCount("guests-".concat(id), count + 1);
|
|
12167
12192
|
};
|
|
12168
|
-
return (
|
|
12169
|
-
|
|
12170
|
-
|
|
12171
|
-
|
|
12172
|
-
|
|
12193
|
+
return (React.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
|
|
12194
|
+
React.createElement("p", { className: "will-guests-filter-label" }, label),
|
|
12195
|
+
React.createElement("div", { className: "will-guests-filter-counter" },
|
|
12196
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
|
|
12197
|
+
cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
|
|
12198
|
+
paddingBottom: '4px',
|
|
12199
|
+
opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
|
|
12200
|
+
} },
|
|
12201
|
+
React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
12202
|
+
React.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
|
|
12203
|
+
React.createElement("span", { className: "will-guests-filter-count" }, count),
|
|
12204
|
+
React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
|
|
12205
|
+
React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
12206
|
+
React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
12173
12207
|
};
|
|
12174
12208
|
|
|
12175
12209
|
var css_248z$6 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 22px;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-title {\n font-size: 18px;\n }\n\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}";
|
|
@@ -12179,7 +12213,9 @@
|
|
|
12179
12213
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus;
|
|
12180
12214
|
var t = useTranslation('filterBar').t;
|
|
12181
12215
|
var containerRef = useAutoFocus(autoFocus);
|
|
12182
|
-
return (
|
|
12216
|
+
return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
12217
|
+
React.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
|
|
12218
|
+
React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
|
|
12183
12219
|
});
|
|
12184
12220
|
Guests.displayName = 'Guests';
|
|
12185
12221
|
|
|
@@ -12187,7 +12223,7 @@
|
|
|
12187
12223
|
styleInject(css_248z$5);
|
|
12188
12224
|
|
|
12189
12225
|
var Divider = function () {
|
|
12190
|
-
return
|
|
12226
|
+
return React.createElement("div", { className: "will-filter-bar-divider" });
|
|
12191
12227
|
};
|
|
12192
12228
|
|
|
12193
12229
|
var css_248z$4 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
@@ -12207,7 +12243,11 @@
|
|
|
12207
12243
|
setSelectedCategory(selectedCategory);
|
|
12208
12244
|
setCategories(selectedCategory);
|
|
12209
12245
|
};
|
|
12210
|
-
return (
|
|
12246
|
+
return (React.createElement("div", { className: "will-filter-bar-categories" },
|
|
12247
|
+
React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12248
|
+
React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
|
|
12249
|
+
React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12250
|
+
React.createElement("span", null, itm))); }))));
|
|
12211
12251
|
};
|
|
12212
12252
|
|
|
12213
12253
|
var css_248z$3 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-title {\n font-size: 22px;\n margin: 10px 0;\n}\n\n.will-locations-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color: var(--will-text);\n}\n\n.will-locations-filter-container {\n display: flex;\n gap: 10px;\n flex-direction: column;\n min-width: 400px;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-title {\n font-size: 18px;\n }\n\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
@@ -12219,12 +12259,16 @@
|
|
|
12219
12259
|
var ImageCard = React.forwardRef(function (_a, ref) {
|
|
12220
12260
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
12221
12261
|
var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
|
|
12222
|
-
return (
|
|
12262
|
+
return (React.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
|
|
12223
12263
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
12224
12264
|
e.preventDefault();
|
|
12225
12265
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
12226
12266
|
}
|
|
12227
|
-
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel
|
|
12267
|
+
}, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
|
|
12268
|
+
React.createElement("div", { className: "will-image-card-content" },
|
|
12269
|
+
React.createElement("h3", null, title),
|
|
12270
|
+
description && React.createElement("p", null, description)),
|
|
12271
|
+
React.createElement("div", { className: "will-image-card-image" }, imageUrl && React.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
|
|
12228
12272
|
});
|
|
12229
12273
|
ImageCard.displayName = 'ImageCard';
|
|
12230
12274
|
|
|
@@ -12256,13 +12300,15 @@
|
|
|
12256
12300
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
12257
12301
|
}
|
|
12258
12302
|
};
|
|
12259
|
-
return (
|
|
12260
|
-
|
|
12261
|
-
|
|
12262
|
-
|
|
12263
|
-
|
|
12264
|
-
|
|
12265
|
-
|
|
12303
|
+
return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12304
|
+
React.createElement("h3", { className: "will-locations-filter-title" }, t('locations.title')),
|
|
12305
|
+
React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12306
|
+
locations
|
|
12307
|
+
.filter(function (location) { var _a; return (_a = location === null || location === void 0 ? void 0 : location.label) === null || _a === void 0 ? void 0 : _a[language]; })
|
|
12308
|
+
.map(function (location, index) {
|
|
12309
|
+
var _a;
|
|
12310
|
+
return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label[language], description: (_a = location.description) === null || _a === void 0 ? void 0 : _a[language], imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
|
|
12311
|
+
}))));
|
|
12266
12312
|
});
|
|
12267
12313
|
Locations.displayName = 'Locations';
|
|
12268
12314
|
|
|
@@ -12317,28 +12363,47 @@
|
|
|
12317
12363
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12318
12364
|
locationsSelectedLabel: t('locations.selected'),
|
|
12319
12365
|
});
|
|
12320
|
-
return (
|
|
12321
|
-
|
|
12322
|
-
|
|
12323
|
-
|
|
12324
|
-
|
|
12325
|
-
|
|
12326
|
-
|
|
12327
|
-
|
|
12328
|
-
|
|
12329
|
-
|
|
12330
|
-
|
|
12331
|
-
|
|
12332
|
-
|
|
12333
|
-
|
|
12334
|
-
|
|
12335
|
-
|
|
12336
|
-
|
|
12337
|
-
|
|
12338
|
-
|
|
12339
|
-
|
|
12340
|
-
|
|
12341
|
-
|
|
12366
|
+
return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
|
|
12367
|
+
tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
|
|
12368
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
12369
|
+
.map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
|
|
12370
|
+
? tab.label[language]
|
|
12371
|
+
: t("tabs.".concat(tab.path.substring(1))), onClick: function () {
|
|
12372
|
+
setSelectedPath(tab.path);
|
|
12373
|
+
handleResetFilters();
|
|
12374
|
+
handleSelectedFilter(false);
|
|
12375
|
+
}, active: selectedPath === tab.path, mode: mode })); }))),
|
|
12376
|
+
React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
|
|
12377
|
+
!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
|
|
12378
|
+
React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12379
|
+
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12380
|
+
handleSelectedFilter(FilterSections.LOCATIONS);
|
|
12381
|
+
}, active: !!selectedLocations.length, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12382
|
+
React.createElement(Divider, null))),
|
|
12383
|
+
React.createElement(SelectButton, { ref: calendarButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12384
|
+
? parsedDates
|
|
12385
|
+
: selectedPath === Pages.ROOMS
|
|
12386
|
+
? t('calendar.roomsLabelPlaceholder')
|
|
12387
|
+
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12388
|
+
previouslyFocusedButtonRef.current = calendarButtonRef.current;
|
|
12389
|
+
handleSelectedFilter(FilterSections.CALENDAR);
|
|
12390
|
+
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12391
|
+
selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
|
|
12392
|
+
React.createElement(Divider, null),
|
|
12393
|
+
React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
|
|
12394
|
+
previouslyFocusedButtonRef.current = guestsButtonRef.current;
|
|
12395
|
+
handleSelectedFilter(FilterSections.GUESTS);
|
|
12396
|
+
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12397
|
+
React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12398
|
+
selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12399
|
+
React.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
12400
|
+
selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-calendar-filter" },
|
|
12401
|
+
React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef, autoFocus: true }))),
|
|
12402
|
+
selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
|
|
12403
|
+
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true }))),
|
|
12404
|
+
selectedFilter === FilterSections.CATEGORIES && (React.createElement(Categories, { categories: categories, setCategories: setCategories })),
|
|
12405
|
+
selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
|
|
12406
|
+
React.createElement(Locations, { locations: locations === null || locations === void 0 ? void 0 : locations.data, ref: filtersRef, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } })))))));
|
|
12342
12407
|
}
|
|
12343
12408
|
////////////
|
|
12344
12409
|
var AGE_CATEGORIES_FALLBACK = [
|
|
@@ -12479,26 +12544,36 @@
|
|
|
12479
12544
|
var nights = nightsCount({
|
|
12480
12545
|
calendarRange: calendarRange,
|
|
12481
12546
|
});
|
|
12482
|
-
return (
|
|
12483
|
-
|
|
12484
|
-
|
|
12485
|
-
|
|
12486
|
-
|
|
12487
|
-
|
|
12488
|
-
|
|
12489
|
-
|
|
12490
|
-
|
|
12491
|
-
|
|
12492
|
-
|
|
12493
|
-
|
|
12494
|
-
|
|
12495
|
-
|
|
12496
|
-
|
|
12547
|
+
return (React.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12548
|
+
React.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12549
|
+
calendarHasError ? (React.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12550
|
+
renderCalendarErrorMessage({
|
|
12551
|
+
palette: palette,
|
|
12552
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12553
|
+
}))) : (React.createElement("div", null,
|
|
12554
|
+
React.createElement("span", null, parseDate({
|
|
12555
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12556
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12557
|
+
language: language,
|
|
12558
|
+
}) || t('common:checkIn')),
|
|
12559
|
+
React.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12560
|
+
React.createElement("span", null, parseDate({
|
|
12561
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12562
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12563
|
+
language: language,
|
|
12564
|
+
}) || t('common:checkOut')))),
|
|
12565
|
+
React.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
|
|
12566
|
+
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12567
|
+
: '')),
|
|
12568
|
+
React.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12569
|
+
React.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
|
|
12497
12570
|
};
|
|
12498
12571
|
/////////
|
|
12499
12572
|
var renderCalendarErrorMessage = function (_a) {
|
|
12500
12573
|
var message = _a.message, palette = _a.palette;
|
|
12501
|
-
return (
|
|
12574
|
+
return (React.createElement(React.Fragment, null,
|
|
12575
|
+
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12576
|
+
React.createElement("span", null, message || '')));
|
|
12502
12577
|
};
|
|
12503
12578
|
|
|
12504
12579
|
var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n display: flex;\n max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n display: inline-block;\n margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n margin: 0 -6%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n margin-top: 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error {\n max-width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n text-align: center;\n margin-left: 5px;\n }\n }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
|
|
@@ -12524,7 +12599,14 @@
|
|
|
12524
12599
|
var filtersRef = useCloseFilterSection({
|
|
12525
12600
|
handleSelectedFilter: setToggleCalendar,
|
|
12526
12601
|
}).filtersRef;
|
|
12527
|
-
return (
|
|
12602
|
+
return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
|
|
12603
|
+
React.createElement("div", { className: "will-calendar-header" },
|
|
12604
|
+
React.createElement("h2", null, t('filterBar:calendar.title')),
|
|
12605
|
+
React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
|
|
12606
|
+
React.createElement("div", { className: "will-calendar-main" },
|
|
12607
|
+
React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
|
|
12608
|
+
React.createElement("div", { className: "will-calendar-footer" },
|
|
12609
|
+
React.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12528
12610
|
}
|
|
12529
12611
|
|
|
12530
12612
|
exports.Button = Button$1;
|