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