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