willba-component-library 0.4.9 → 0.4.11
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/README.md +1 -1
- package/lib/components/FilterBar/FilterBarTypes.d.ts +0 -1
- package/lib/components/FilterBar/hooks/useFilterState.d.ts +0 -2
- package/lib/components/FilterBar/providers/FilterBarProvider.d.ts +0 -2
- package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -2
- package/lib/components/FilterCalendar/index.d.ts +1 -1
- package/lib/core/hooks/index.d.ts +1 -1
- package/lib/core/hooks/useClickOutside.d.ts +2 -0
- package/lib/embed.esm.js +2 -2
- package/lib/embed.esm.js.map +1 -1
- package/lib/embed.umd.js +2 -2
- package/lib/embed.umd.js.map +1 -1
- package/lib/index.esm.js +66 -115
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +66 -115
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -211,8 +211,8 @@ function styleInject(css, ref) {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
|
|
214
|
-
var css_248z$
|
|
215
|
-
styleInject(css_248z$
|
|
214
|
+
var css_248z$j = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
|
|
215
|
+
styleInject(css_248z$j);
|
|
216
216
|
|
|
217
217
|
/**
|
|
218
218
|
* Primary UI component for user interaction
|
|
@@ -526,28 +526,24 @@ var useUpdateTranslations = function (_a) {
|
|
|
526
526
|
}, [language, i18n]);
|
|
527
527
|
};
|
|
528
528
|
|
|
529
|
-
|
|
530
|
-
var
|
|
531
|
-
var
|
|
532
|
-
|
|
529
|
+
var useClickOutside = function (onOutside) {
|
|
530
|
+
var ref = React.useRef(null);
|
|
531
|
+
var callbackRef = React.useRef(onOutside);
|
|
532
|
+
React.useEffect(function () {
|
|
533
|
+
callbackRef.current = onOutside;
|
|
534
|
+
}, [onOutside]);
|
|
533
535
|
React.useEffect(function () {
|
|
534
|
-
var
|
|
535
|
-
if (!
|
|
536
|
+
var handleMouseDown = function (event) {
|
|
537
|
+
if (!ref.current)
|
|
536
538
|
return;
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
// report clicks inside the panel as "outside".
|
|
540
|
-
var path = event.composedPath();
|
|
541
|
-
if (!path.includes(filterSectionRef.current)) {
|
|
542
|
-
handleSelectedFilter(false);
|
|
539
|
+
if (!event.composedPath().includes(ref.current)) {
|
|
540
|
+
callbackRef.current();
|
|
543
541
|
}
|
|
544
542
|
};
|
|
545
|
-
document.addEventListener('mousedown',
|
|
546
|
-
return function () {
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
}, [filterSectionRef]);
|
|
550
|
-
return { filterSectionRef: filterSectionRef };
|
|
543
|
+
document.addEventListener('mousedown', handleMouseDown);
|
|
544
|
+
return function () { return document.removeEventListener('mousedown', handleMouseDown); };
|
|
545
|
+
}, []);
|
|
546
|
+
return ref;
|
|
551
547
|
};
|
|
552
548
|
|
|
553
549
|
var useAutoFocus = function (autoFocus) {
|
|
@@ -2976,10 +2972,6 @@ var guests$1 = {
|
|
|
2976
2972
|
guestsLabel: "guests",
|
|
2977
2973
|
guestLabel: "guest"
|
|
2978
2974
|
};
|
|
2979
|
-
var categories$1 = {
|
|
2980
|
-
label: "Categories",
|
|
2981
|
-
title: "Category"
|
|
2982
|
-
};
|
|
2983
2975
|
var tabs$1 = {
|
|
2984
2976
|
events: "Events",
|
|
2985
2977
|
rooms: "Rooms"
|
|
@@ -2988,7 +2980,6 @@ var enFilterBar = {
|
|
|
2988
2980
|
locations: locations$1,
|
|
2989
2981
|
calendar: calendar$1,
|
|
2990
2982
|
guests: guests$1,
|
|
2991
|
-
categories: categories$1,
|
|
2992
2983
|
tabs: tabs$1
|
|
2993
2984
|
};
|
|
2994
2985
|
|
|
@@ -3046,10 +3037,6 @@ var guests = {
|
|
|
3046
3037
|
guestsLabel: "osallistujaa",
|
|
3047
3038
|
guestLabel: "osallistuja"
|
|
3048
3039
|
};
|
|
3049
|
-
var categories = {
|
|
3050
|
-
label: "Kategoriat",
|
|
3051
|
-
title: "Kategoria"
|
|
3052
|
-
};
|
|
3053
3040
|
var tabs = {
|
|
3054
3041
|
events: "Tapahtumat",
|
|
3055
3042
|
rooms: "Huoneet"
|
|
@@ -3058,7 +3045,6 @@ var fiFilterBar = {
|
|
|
3058
3045
|
locations: locations,
|
|
3059
3046
|
calendar: calendar,
|
|
3060
3047
|
guests: guests,
|
|
3061
|
-
categories: categories,
|
|
3062
3048
|
tabs: tabs
|
|
3063
3049
|
};
|
|
3064
3050
|
|
|
@@ -3115,8 +3101,8 @@ var I18nProvider = function (_a) {
|
|
|
3115
3101
|
return React.createElement(I18nextProvider, { i18n: i18n }, children);
|
|
3116
3102
|
};
|
|
3117
3103
|
|
|
3118
|
-
var css_248z$
|
|
3119
|
-
styleInject(css_248z$
|
|
3104
|
+
var css_248z$i = ".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 user-select: none;\n}\n\n.will-filter-bar-select-button.disabled {\n cursor: not-allowed;\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.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@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";
|
|
3105
|
+
styleInject(css_248z$i);
|
|
3120
3106
|
|
|
3121
3107
|
var SelectButton = React.forwardRef(function (_a, ref) {
|
|
3122
3108
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
@@ -3128,16 +3114,16 @@ var SelectButton = React.forwardRef(function (_a, ref) {
|
|
|
3128
3114
|
});
|
|
3129
3115
|
SelectButton.displayName = 'SelectButton';
|
|
3130
3116
|
|
|
3131
|
-
var css_248z$
|
|
3132
|
-
styleInject(css_248z$
|
|
3117
|
+
var css_248z$h = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n }\n\n .will-filter-bar-tab-button.light {\n color: var(--will-white)\n }\n\n .will-filter-bar-tab-button.dark {\n color: var(--will-black)\n }\n\n .will-filter-bar-tab-button.light.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.dark.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-lavender);\n }\n\n \n\n";
|
|
3118
|
+
styleInject(css_248z$h);
|
|
3133
3119
|
|
|
3134
3120
|
var TabButton = function (_a) {
|
|
3135
3121
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
3136
3122
|
return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
3137
3123
|
};
|
|
3138
3124
|
|
|
3139
|
-
var css_248z$
|
|
3140
|
-
styleInject(css_248z$
|
|
3125
|
+
var css_248z$g = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n background-color: var(--will-charcoal-blue);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: auto;\n margin: 0 10px;\n height: 1px;\n background-color: var(--will-charcoal-blue);\n }\n}";
|
|
3126
|
+
styleInject(css_248z$g);
|
|
3141
3127
|
|
|
3142
3128
|
var Divider = function () {
|
|
3143
3129
|
return React.createElement("div", { className: "will-filter-bar-divider" });
|
|
@@ -3147,7 +3133,6 @@ var FilterSections;
|
|
|
3147
3133
|
(function (FilterSections) {
|
|
3148
3134
|
FilterSections["CALENDAR"] = "calendar";
|
|
3149
3135
|
FilterSections["GUESTS"] = "guests";
|
|
3150
|
-
FilterSections["CATEGORIES"] = "categories";
|
|
3151
3136
|
FilterSections["LOCATIONS"] = "locations";
|
|
3152
3137
|
})(FilterSections || (FilterSections = {}));
|
|
3153
3138
|
var Pages;
|
|
@@ -3163,9 +3148,8 @@ var useFilterState = function (_a) {
|
|
|
3163
3148
|
var _c = __read(React.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
3164
3149
|
var _d = __read(React.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
3165
3150
|
var _e = __read(React.useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
|
|
3166
|
-
var _f = __read(React.useState(
|
|
3167
|
-
var _g = __read(React.useState(
|
|
3168
|
-
var _h = __read(React.useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
|
|
3151
|
+
var _f = __read(React.useState({}), 2), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
3152
|
+
var _g = __read(React.useState([]), 2), selectedLocations = _g[0], setSelectedLocations = _g[1];
|
|
3169
3153
|
React.useEffect(function () {
|
|
3170
3154
|
var _a;
|
|
3171
3155
|
if (typeof window === 'undefined')
|
|
@@ -3185,12 +3169,6 @@ var useFilterState = function (_a) {
|
|
|
3185
3169
|
ageCategoryCountsParam = {};
|
|
3186
3170
|
}
|
|
3187
3171
|
}
|
|
3188
|
-
var categoriesParam = urlSearchParams.get('categories');
|
|
3189
|
-
var parsedCategories = 0;
|
|
3190
|
-
if (categoriesParam) {
|
|
3191
|
-
var parsed = parseInt(categoriesParam, 10);
|
|
3192
|
-
parsedCategories = Number.isNaN(parsed) ? 0 : parsed;
|
|
3193
|
-
}
|
|
3194
3172
|
if (startDateParam && endDateParam) {
|
|
3195
3173
|
setCalendarRange({
|
|
3196
3174
|
from: new Date(startDateParam),
|
|
@@ -3198,7 +3176,6 @@ var useFilterState = function (_a) {
|
|
|
3198
3176
|
});
|
|
3199
3177
|
}
|
|
3200
3178
|
setAgeCategoryCounts(ageCategoryCountsParam);
|
|
3201
|
-
setCategories(parsedCategories);
|
|
3202
3179
|
if (((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locationIdParams.length) {
|
|
3203
3180
|
var matchedLocations = locations.data.filter(function (location) {
|
|
3204
3181
|
return locationIdParams.includes(location.id.toString());
|
|
@@ -3211,13 +3188,11 @@ var useFilterState = function (_a) {
|
|
|
3211
3188
|
selectedFilter: selectedFilter,
|
|
3212
3189
|
calendarRange: calendarRange,
|
|
3213
3190
|
innerLoading: innerLoading,
|
|
3214
|
-
categories: categories,
|
|
3215
3191
|
ageCategoryCounts: ageCategoryCounts,
|
|
3216
3192
|
selectedLocations: selectedLocations,
|
|
3217
3193
|
setSelectedLocations: setSelectedLocations,
|
|
3218
3194
|
setCalendarRange: setCalendarRange,
|
|
3219
3195
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
3220
|
-
setCategories: setCategories,
|
|
3221
3196
|
setSelectedPath: setSelectedPath,
|
|
3222
3197
|
setSelectedFilter: setSelectedFilter,
|
|
3223
3198
|
setInnerLoading: setInnerLoading,
|
|
@@ -6917,6 +6892,18 @@ var useFilterActions = function (_a) {
|
|
|
6917
6892
|
Pages.EVENTS;
|
|
6918
6893
|
setSelectedPath(currentPath);
|
|
6919
6894
|
}, [tabs]);
|
|
6895
|
+
// Clear loading state when page is restored from bfcache — react state
|
|
6896
|
+
// is preserved on back/forward navigation, otherwise SEARCH stays disabled
|
|
6897
|
+
React.useEffect(function () {
|
|
6898
|
+
if (typeof window === 'undefined')
|
|
6899
|
+
return;
|
|
6900
|
+
var handlePageShow = function (event) {
|
|
6901
|
+
if (event.persisted)
|
|
6902
|
+
setInnerLoading(false);
|
|
6903
|
+
};
|
|
6904
|
+
window.addEventListener('pageshow', handlePageShow);
|
|
6905
|
+
return function () { return window.removeEventListener('pageshow', handlePageShow); };
|
|
6906
|
+
}, [setInnerLoading]);
|
|
6920
6907
|
var updateGuestsCount = function (id, newCount) {
|
|
6921
6908
|
setAgeCategoryCounts(function (prev) {
|
|
6922
6909
|
var _a;
|
|
@@ -7001,10 +6988,6 @@ var useFilterRefs = function () {
|
|
|
7001
6988
|
};
|
|
7002
6989
|
};
|
|
7003
6990
|
|
|
7004
|
-
// Writes panel-position candidates as CSS custom properties on the panel
|
|
7005
|
-
// element. CSS picks which one to use based on its own media query — see
|
|
7006
|
-
// FilterPanels.css. This keeps the breakpoint as a single source of truth
|
|
7007
|
-
// in CSS and avoids any JS-side mobile detection.
|
|
7008
6991
|
var usePanelPosition = function (_a) {
|
|
7009
6992
|
var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs;
|
|
7010
6993
|
React.useLayoutEffect(function () {
|
|
@@ -7034,7 +7017,7 @@ var usePanelPosition = function (_a) {
|
|
|
7034
7017
|
var FilterBarContext = React.createContext(undefined);
|
|
7035
7018
|
var FilterBarProvider = function (_a) {
|
|
7036
7019
|
var children = _a.children, language = _a.language, ageCategories = _a.ageCategories, redirectUrl = _a.redirectUrl, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
|
|
7037
|
-
var _b = useFilterState({ locations: locations }), selectedPath = _b.selectedPath, selectedFilter = _b.selectedFilter, calendarRange = _b.calendarRange, innerLoading = _b.innerLoading,
|
|
7020
|
+
var _b = useFilterState({ locations: locations }), selectedPath = _b.selectedPath, selectedFilter = _b.selectedFilter, calendarRange = _b.calendarRange, innerLoading = _b.innerLoading, ageCategoryCounts = _b.ageCategoryCounts, selectedLocations = _b.selectedLocations, setSelectedLocations = _b.setSelectedLocations, setCalendarRange = _b.setCalendarRange, setAgeCategoryCounts = _b.setAgeCategoryCounts, setSelectedPath = _b.setSelectedPath, setSelectedFilter = _b.setSelectedFilter, setInnerLoading = _b.setInnerLoading;
|
|
7038
7021
|
var filterActions = useFilterActions({
|
|
7039
7022
|
tabs: tabs,
|
|
7040
7023
|
ageCategoryCounts: ageCategoryCounts,
|
|
@@ -7051,10 +7034,9 @@ var FilterBarProvider = function (_a) {
|
|
|
7051
7034
|
setInnerLoading: setInnerLoading,
|
|
7052
7035
|
});
|
|
7053
7036
|
var filterRefs = useFilterRefs();
|
|
7054
|
-
var contextValue = React.useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts,
|
|
7037
|
+
var contextValue = React.useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts, calendarRange: calendarRange, selectedPath: selectedPath, innerLoading: innerLoading, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, setCalendarRange: setCalendarRange, setSelectedFilter: setSelectedFilter, setAgeCategoryCounts: setAgeCategoryCounts, setSelectedPath: setSelectedPath }, filterActions), { language: language, ageCategories: ageCategories, redirectUrl: redirectUrl, palette: palette, onSubmit: onSubmit, fullWidth: fullWidth, disableCalendarDates: disableCalendarDates, mode: mode, tabs: tabs, outerLoading: outerLoading, locations: locations }), filterRefs)); }, [
|
|
7055
7038
|
selectedFilter,
|
|
7056
7039
|
ageCategoryCounts,
|
|
7057
|
-
categories,
|
|
7058
7040
|
calendarRange,
|
|
7059
7041
|
selectedPath,
|
|
7060
7042
|
innerLoading,
|
|
@@ -7160,8 +7142,8 @@ function FaSearch (props) {
|
|
|
7160
7142
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
|
|
7161
7143
|
}
|
|
7162
7144
|
|
|
7163
|
-
var css_248z$
|
|
7164
|
-
styleInject(css_248z$
|
|
7145
|
+
var css_248z$f = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n background-color: var(--will-primary);\n color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n background-color: transparent;\n color: var(--will-black);\n text-decoration: underline;\n font-weight: 500;\n font-size: 15px;\n padding: 0 10px;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n \n }\n}\n\n/* --- */\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n";
|
|
7146
|
+
styleInject(css_248z$f);
|
|
7165
7147
|
|
|
7166
7148
|
var SubmitButton = function (_a) {
|
|
7167
7149
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -7175,8 +7157,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
7175
7157
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
|
|
7176
7158
|
}
|
|
7177
7159
|
|
|
7178
|
-
var css_248z$
|
|
7179
|
-
styleInject(css_248z$
|
|
7160
|
+
var css_248z$e = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n /* background-color: var(--will-grey); */\n color: var(--will-grey);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 23px;\n /* display: none; */\n\n position: absolute;\n top: 10px;\n right: 10px;\n\n min-height: 35px;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n top: 10px;\n right: 10px;\n\n border-radius: 25px;\n margin-left:0;\n \n display: flex;\n justify-content: center;\n }\n}\n";
|
|
7161
|
+
styleInject(css_248z$e);
|
|
7180
7162
|
|
|
7181
7163
|
var CloseButton = function (_a) {
|
|
7182
7164
|
var handleClose = _a.handleClose;
|
|
@@ -11892,8 +11874,6 @@ var useCalendarTooltips = function (_a) {
|
|
|
11892
11874
|
return React.useEffect(function () {
|
|
11893
11875
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11894
11876
|
return;
|
|
11895
|
-
// Use the calendar's own DOM root (ShadowRoot or Document) so queries
|
|
11896
|
-
// resolve correctly when the component is mounted inside Shadow DOM.
|
|
11897
11877
|
var root = getQueryRoot(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
|
|
11898
11878
|
// Children
|
|
11899
11879
|
var calendarTooltip = root.querySelector('.will-calendar-tooltip');
|
|
@@ -12040,12 +12020,12 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
12040
12020
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
12041
12021
|
};
|
|
12042
12022
|
|
|
12043
|
-
var css_248z$
|
|
12044
|
-
styleInject(css_248z$e);
|
|
12045
|
-
|
|
12046
|
-
var css_248z$d = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n border-collapse: separate;\n border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n color: var(--will-transparent-black);\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only\n > div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only::before {\n content: '';\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left: calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-in-only {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid var(--will-light-grey);\n box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n border-right: none;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n border-right: none;\n border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n border-left: none;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-day_selected.rdp-day_range_middle.checkout-option {\n background-color: var(--will-primary-lightest);\n color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n user-select: none;\n pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n .will-root .will-calendar-filter-container .will-calendar-tooltip,\n .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n top: -70px;\n white-space: wrap;\n max-width: 120px;\n }\n}\n";
|
|
12023
|
+
var css_248z$d = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
12047
12024
|
styleInject(css_248z$d);
|
|
12048
12025
|
|
|
12026
|
+
var css_248z$c = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n.will-calendar-filter-container .rdp {\n margin: 0;\n}\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: 0.6;\n}\n\n.will-calendar-filter-container .rdp-table {\n border-collapse: separate;\n border-spacing: 0px 2px;\n}\n\n.will-calendar-filter-container\n .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n color: var(--will-white);\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) {\n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n color: var(--will-transparent-black);\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only\n > div,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only\n > div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only::before,\n.will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only::before {\n content: '';\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left: calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-overlapping-date,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-out-only,\n.will-root\n .will-calendar-filter-container\n .rdp-cell:hover\n .will-calendar-tooltip-check-in-only {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end {\n position: initial;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid var(--will-light-grey);\n box-sizing: border-box;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n border-right: none;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n border-right: none;\n border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n border-left: none;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.will-root\n .will-calendar-filter-container\n .rdp-day_selected.rdp-day_range_middle.checkout-option {\n background-color: var(--will-primary-lightest);\n color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n user-select: none;\n pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n .will-root .will-calendar-filter-container .will-calendar-tooltip,\n .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-overlapping-date,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-out-only,\n .will-root\n .will-calendar-filter-container\n .will-calendar-tooltip-check-in-only {\n top: -70px;\n white-space: wrap;\n max-width: 120px;\n }\n}\n";
|
|
12027
|
+
styleInject(css_248z$c);
|
|
12028
|
+
|
|
12049
12029
|
var Calendar = React.forwardRef(function (_a, ref) {
|
|
12050
12030
|
var _b;
|
|
12051
12031
|
var selectedPath = _a.selectedPath, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, language = _a.language, disableCalendarDates = _a.disableCalendarDates, requestDates = _a.requestDates, disabledDates = _a.disabledDates, updateCalendarMonthNavigation = _a.updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation = _a.setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth = _a.updateCalendarDefaultMonth, loadingData = _a.loadingData, showFeedback = _a.showFeedback, palette = _a.palette, setCalendarHasError = _a.setCalendarHasError, setUpdatedForSubmit = _a.setUpdatedForSubmit, rangeContext = _a.rangeContext, calendarHasError = _a.calendarHasError, autoFocus = _a.autoFocus;
|
|
@@ -12185,8 +12165,8 @@ var Calendar = React.forwardRef(function (_a, ref) {
|
|
|
12185
12165
|
React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
12186
12166
|
});
|
|
12187
12167
|
|
|
12188
|
-
var css_248z$
|
|
12189
|
-
styleInject(css_248z$
|
|
12168
|
+
var css_248z$b = ".will-filter-section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 30px;\n}\n\n.will-filter-section-title {\n font-size: 22px;\n margin: 0;\n}\n\n.will-filter-section-action {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.will-filter-section-action .will-filter-bar-close-button {\n position: relative;\n top: auto;\n right: auto;\n margin: 0;\n}\n\n@media (max-width: 960px) {\n .will-filter-section-header {\n padding: 16px 20px;\n }\n\n .will-filter-section-title {\n font-size: 18px;\n }\n}\n";
|
|
12169
|
+
styleInject(css_248z$b);
|
|
12190
12170
|
|
|
12191
12171
|
var SectionHeader = function (_a) {
|
|
12192
12172
|
var title = _a.title, action = _a.action;
|
|
@@ -12195,8 +12175,8 @@ var SectionHeader = function (_a) {
|
|
|
12195
12175
|
action && React.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
12196
12176
|
};
|
|
12197
12177
|
|
|
12198
|
-
var css_248z$
|
|
12199
|
-
styleInject(css_248z$
|
|
12178
|
+
var css_248z$a = ".will-dates-filter-container {\n padding: 0 30px 16px 30px;\n}\n\n@media (max-width: 960px) {\n .will-dates-filter-container {\n padding: 0 20px 16px 20px;\n }\n}\n";
|
|
12179
|
+
styleInject(css_248z$a);
|
|
12200
12180
|
|
|
12201
12181
|
var Dates = React.forwardRef(function (_a, ref) {
|
|
12202
12182
|
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language;
|
|
@@ -12207,8 +12187,8 @@ var Dates = React.forwardRef(function (_a, ref) {
|
|
|
12207
12187
|
});
|
|
12208
12188
|
Dates.displayName = 'Dates';
|
|
12209
12189
|
|
|
12210
|
-
var css_248z$
|
|
12211
|
-
styleInject(css_248z$
|
|
12190
|
+
var css_248z$9 = ".will-guests-filter-label,\n.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}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\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 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 .will-guests-filter-inner {\n width: 100%;\n justify-content: space-between;\n }\n}\n";
|
|
12191
|
+
styleInject(css_248z$9);
|
|
12212
12192
|
|
|
12213
12193
|
var GuestCount = function (_a) {
|
|
12214
12194
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -12241,8 +12221,8 @@ var GuestCount = function (_a) {
|
|
|
12241
12221
|
React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
12242
12222
|
};
|
|
12243
12223
|
|
|
12244
|
-
var css_248z$
|
|
12245
|
-
styleInject(css_248z$
|
|
12224
|
+
var css_248z$8 = "#will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n gap: 20px;\n padding: 0 30px 16px 30px;\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n min-width: auto;\n padding: 0 20px 16px 20px;\n }\n}\n\n/**/\n.will-guest-count {\n display: inline-block;\n min-width: 10px;\n}\n";
|
|
12225
|
+
styleInject(css_248z$8);
|
|
12246
12226
|
|
|
12247
12227
|
var Guests = React.forwardRef(function (_a, ref) {
|
|
12248
12228
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
@@ -12254,8 +12234,8 @@ var Guests = React.forwardRef(function (_a, ref) {
|
|
|
12254
12234
|
});
|
|
12255
12235
|
Guests.displayName = 'Guests';
|
|
12256
12236
|
|
|
12257
|
-
var css_248z$
|
|
12258
|
-
styleInject(css_248z$
|
|
12237
|
+
var css_248z$7 = ".will-image-card {\n display: flex;\n gap: 20px;\n justify-content: space-between;\n align-items: center;\n padding: 8px 30px;\n cursor: pointer;\n user-select: none;\n min-height: 40px;\n}\n\n.will-image-card.is-selected {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card:hover {\n background-color: var(--will-transparent-lavender);\n}\n\n.will-image-card-image img {\n width: 120px;\n height: 68px;\n object-fit: cover;\n}\n\n@media (max-width: 960px) {\n .will-image-card {\n padding: 8px 20px;\n }\n}\n";
|
|
12238
|
+
styleInject(css_248z$7);
|
|
12259
12239
|
|
|
12260
12240
|
var ImageCard = React.forwardRef(function (_a, ref) {
|
|
12261
12241
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
@@ -12273,8 +12253,8 @@ var ImageCard = React.forwardRef(function (_a, ref) {
|
|
|
12273
12253
|
});
|
|
12274
12254
|
ImageCard.displayName = 'ImageCard';
|
|
12275
12255
|
|
|
12276
|
-
var css_248z$
|
|
12277
|
-
styleInject(css_248z$
|
|
12256
|
+
var css_248z$6 = "#will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n padding-bottom: 16px;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-container {\n min-width: 100%;\n }\n}\n";
|
|
12257
|
+
styleInject(css_248z$6);
|
|
12278
12258
|
|
|
12279
12259
|
var Locations = React.forwardRef(function (_a, ref) {
|
|
12280
12260
|
var locations = _a.locations, selectedLocations = _a.selectedLocations, setSelectedLocations = _a.setSelectedLocations, autoFocus = _a.autoFocus, _b = _a.multiSelect, multiSelect = _b === void 0 ? false : _b, onClose = _a.onClose;
|
|
@@ -12313,38 +12293,14 @@ var Locations = React.forwardRef(function (_a, ref) {
|
|
|
12313
12293
|
});
|
|
12314
12294
|
Locations.displayName = 'Locations';
|
|
12315
12295
|
|
|
12316
|
-
var css_248z$6 = "#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";
|
|
12317
|
-
styleInject(css_248z$6);
|
|
12318
|
-
|
|
12319
|
-
var Categories = function (_a) {
|
|
12320
|
-
var setCategories = _a.setCategories;
|
|
12321
|
-
var t = useTranslation('filterBar').t;
|
|
12322
|
-
var categoriesPlaceholder = [
|
|
12323
|
-
'Weekend',
|
|
12324
|
-
'Week',
|
|
12325
|
-
'Summer camp',
|
|
12326
|
-
'Winter camp',
|
|
12327
|
-
];
|
|
12328
|
-
var _b = __read(React.useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
|
|
12329
|
-
var handleCategoryChange = function (selectedCategory) {
|
|
12330
|
-
setSelectedCategory(selectedCategory);
|
|
12331
|
-
setCategories(selectedCategory);
|
|
12332
|
-
};
|
|
12333
|
-
return (React.createElement("div", { id: "will-filter-bar-categories" },
|
|
12334
|
-
React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12335
|
-
React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
|
|
12336
|
-
React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12337
|
-
React.createElement("span", null, itm))); }))));
|
|
12338
|
-
};
|
|
12339
|
-
Categories.displayName = 'Categories';
|
|
12340
|
-
|
|
12341
12296
|
var css_248z$5 = ".will-filter-bar-panels {\n background-color: var(--will-white);\n min-height: 100px;\n position: absolute;\n z-index: 111;\n border-radius: 25px;\n box-shadow: var(--will-box-shadow);\n\n top: calc(var(--panel-top-below, 0px) + 10px);\n left: var(--panel-left, 0px);\n}\n\n@media (max-width: 960px) {\n .will-root {\n width: 100%;\n min-width: auto;\n max-height: 100vh;\n z-index: 3;\n }\n\n .will-filter-bar-panels {\n top: var(--panel-top-overlay, 0px);\n left: 0;\n width: 100%;\n z-index: 999;\n }\n}\n";
|
|
12342
12297
|
styleInject(css_248z$5);
|
|
12343
12298
|
|
|
12344
12299
|
var FilterPanels = function () {
|
|
12345
|
-
var _a = useFilterBar(),
|
|
12346
|
-
|
|
12347
|
-
|
|
12300
|
+
var _a = useFilterBar(), calendarRange = _a.calendarRange, selectedFilter = _a.selectedFilter, selectedPath = _a.selectedPath, ageCategoryCounts = _a.ageCategoryCounts, selectedLocations = _a.selectedLocations, mode = _a.mode, disableCalendarDates = _a.disableCalendarDates, ageCategories = _a.ageCategories, locations = _a.locations, language = _a.language, panelRef = _a.panelRef, buttonRefs = _a.buttonRefs, filtersRef = _a.filtersRef, setSelectedLocations = _a.setSelectedLocations, setCalendarRange = _a.setCalendarRange, handleSelectedFilter = _a.handleSelectedFilter, updateGuestsCount = _a.updateGuestsCount;
|
|
12301
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12302
|
+
return handleSelectedFilter(false);
|
|
12303
|
+
});
|
|
12348
12304
|
usePanelPosition({
|
|
12349
12305
|
selectedFilter: selectedFilter,
|
|
12350
12306
|
panelRef: panelRef,
|
|
@@ -12357,8 +12313,6 @@ var FilterPanels = function () {
|
|
|
12357
12313
|
return (React.createElement(Dates, { autoFocus: true, ref: filterSectionRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
|
|
12358
12314
|
case FilterSections.GUESTS:
|
|
12359
12315
|
return (React.createElement(Guests, { autoFocus: true, ref: filterSectionRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
|
|
12360
|
-
case FilterSections.CATEGORIES:
|
|
12361
|
-
return (React.createElement(Categories, { categories: categories, setCategories: setCategories }));
|
|
12362
12316
|
case FilterSections.LOCATIONS:
|
|
12363
12317
|
return (React.createElement(Locations, { autoFocus: true, ref: filterSectionRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } }));
|
|
12364
12318
|
default:
|
|
@@ -12396,9 +12350,7 @@ var FilterControls = function () {
|
|
|
12396
12350
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12397
12351
|
locationsSelectedLabel: t('locations.selected'),
|
|
12398
12352
|
});
|
|
12399
|
-
return (React.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) {
|
|
12400
|
-
filtersRef.current = el;
|
|
12401
|
-
} },
|
|
12353
|
+
return (React.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) { return (filtersRef.current = el); } },
|
|
12402
12354
|
!!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React.createElement(React.Fragment, null,
|
|
12403
12355
|
React.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
|
|
12404
12356
|
previouslyFocusedButtonRef.current = e.currentTarget;
|
|
@@ -12634,10 +12586,9 @@ var FilterCalendarInner = function (_a) {
|
|
|
12634
12586
|
}), setCalendarRange = _b.setCalendarRange, handleClearDates = _b.handleClearDates, calendarRange = _b.calendarRange, disabledDates = _b.disabledDates, updateCalendarMonthNavigation = _b.updateCalendarMonthNavigation, updateCalendarDefaultMonth = _b.updateCalendarDefaultMonth, setUpdateCalendarMonthNavigation = _b.setUpdateCalendarMonthNavigation, calendarHasError = _b.calendarHasError, setCalendarHasError = _b.setCalendarHasError, setUpdatedForSubmit = _b.setUpdatedForSubmit, rangeContext = _b.rangeContext, disableCalendarDates = _b.disableCalendarDates;
|
|
12635
12587
|
// Display component after fully loaded
|
|
12636
12588
|
useAwaitRender();
|
|
12637
|
-
|
|
12638
|
-
|
|
12639
|
-
|
|
12640
|
-
}).filterSectionRef;
|
|
12589
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12590
|
+
return setToggleCalendar(false);
|
|
12591
|
+
});
|
|
12641
12592
|
return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filterSectionRef },
|
|
12642
12593
|
React.createElement("div", { className: "will-calendar-header" },
|
|
12643
12594
|
React.createElement("h2", null, t('filterBar:calendar.title')),
|