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.esm.js
CHANGED
|
@@ -191,8 +191,8 @@ function styleInject(css, ref) {
|
|
|
191
191
|
}
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
var css_248z$
|
|
195
|
-
styleInject(css_248z$
|
|
194
|
+
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}";
|
|
195
|
+
styleInject(css_248z$j);
|
|
196
196
|
|
|
197
197
|
/**
|
|
198
198
|
* Primary UI component for user interaction
|
|
@@ -506,28 +506,24 @@ var useUpdateTranslations = function (_a) {
|
|
|
506
506
|
}, [language, i18n]);
|
|
507
507
|
};
|
|
508
508
|
|
|
509
|
-
|
|
510
|
-
var
|
|
511
|
-
var
|
|
512
|
-
|
|
509
|
+
var useClickOutside = function (onOutside) {
|
|
510
|
+
var ref = useRef(null);
|
|
511
|
+
var callbackRef = useRef(onOutside);
|
|
512
|
+
useEffect(function () {
|
|
513
|
+
callbackRef.current = onOutside;
|
|
514
|
+
}, [onOutside]);
|
|
513
515
|
useEffect(function () {
|
|
514
|
-
var
|
|
515
|
-
if (!
|
|
516
|
+
var handleMouseDown = function (event) {
|
|
517
|
+
if (!ref.current)
|
|
516
518
|
return;
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
// report clicks inside the panel as "outside".
|
|
520
|
-
var path = event.composedPath();
|
|
521
|
-
if (!path.includes(filterSectionRef.current)) {
|
|
522
|
-
handleSelectedFilter(false);
|
|
519
|
+
if (!event.composedPath().includes(ref.current)) {
|
|
520
|
+
callbackRef.current();
|
|
523
521
|
}
|
|
524
522
|
};
|
|
525
|
-
document.addEventListener('mousedown',
|
|
526
|
-
return function () {
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
}, [filterSectionRef]);
|
|
530
|
-
return { filterSectionRef: filterSectionRef };
|
|
523
|
+
document.addEventListener('mousedown', handleMouseDown);
|
|
524
|
+
return function () { return document.removeEventListener('mousedown', handleMouseDown); };
|
|
525
|
+
}, []);
|
|
526
|
+
return ref;
|
|
531
527
|
};
|
|
532
528
|
|
|
533
529
|
var useAutoFocus = function (autoFocus) {
|
|
@@ -2956,10 +2952,6 @@ var guests$1 = {
|
|
|
2956
2952
|
guestsLabel: "guests",
|
|
2957
2953
|
guestLabel: "guest"
|
|
2958
2954
|
};
|
|
2959
|
-
var categories$1 = {
|
|
2960
|
-
label: "Categories",
|
|
2961
|
-
title: "Category"
|
|
2962
|
-
};
|
|
2963
2955
|
var tabs$1 = {
|
|
2964
2956
|
events: "Events",
|
|
2965
2957
|
rooms: "Rooms"
|
|
@@ -2968,7 +2960,6 @@ var enFilterBar = {
|
|
|
2968
2960
|
locations: locations$1,
|
|
2969
2961
|
calendar: calendar$1,
|
|
2970
2962
|
guests: guests$1,
|
|
2971
|
-
categories: categories$1,
|
|
2972
2963
|
tabs: tabs$1
|
|
2973
2964
|
};
|
|
2974
2965
|
|
|
@@ -3026,10 +3017,6 @@ var guests = {
|
|
|
3026
3017
|
guestsLabel: "osallistujaa",
|
|
3027
3018
|
guestLabel: "osallistuja"
|
|
3028
3019
|
};
|
|
3029
|
-
var categories = {
|
|
3030
|
-
label: "Kategoriat",
|
|
3031
|
-
title: "Kategoria"
|
|
3032
|
-
};
|
|
3033
3020
|
var tabs = {
|
|
3034
3021
|
events: "Tapahtumat",
|
|
3035
3022
|
rooms: "Huoneet"
|
|
@@ -3038,7 +3025,6 @@ var fiFilterBar = {
|
|
|
3038
3025
|
locations: locations,
|
|
3039
3026
|
calendar: calendar,
|
|
3040
3027
|
guests: guests,
|
|
3041
|
-
categories: categories,
|
|
3042
3028
|
tabs: tabs
|
|
3043
3029
|
};
|
|
3044
3030
|
|
|
@@ -3095,8 +3081,8 @@ var I18nProvider = function (_a) {
|
|
|
3095
3081
|
return React__default.createElement(I18nextProvider, { i18n: i18n }, children);
|
|
3096
3082
|
};
|
|
3097
3083
|
|
|
3098
|
-
var css_248z$
|
|
3099
|
-
styleInject(css_248z$
|
|
3084
|
+
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";
|
|
3085
|
+
styleInject(css_248z$i);
|
|
3100
3086
|
|
|
3101
3087
|
var SelectButton = forwardRef(function (_a, ref) {
|
|
3102
3088
|
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
@@ -3108,16 +3094,16 @@ var SelectButton = forwardRef(function (_a, ref) {
|
|
|
3108
3094
|
});
|
|
3109
3095
|
SelectButton.displayName = 'SelectButton';
|
|
3110
3096
|
|
|
3111
|
-
var css_248z$
|
|
3112
|
-
styleInject(css_248z$
|
|
3097
|
+
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";
|
|
3098
|
+
styleInject(css_248z$h);
|
|
3113
3099
|
|
|
3114
3100
|
var TabButton = function (_a) {
|
|
3115
3101
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
3116
3102
|
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
3117
3103
|
};
|
|
3118
3104
|
|
|
3119
|
-
var css_248z$
|
|
3120
|
-
styleInject(css_248z$
|
|
3105
|
+
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}";
|
|
3106
|
+
styleInject(css_248z$g);
|
|
3121
3107
|
|
|
3122
3108
|
var Divider = function () {
|
|
3123
3109
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
@@ -3127,7 +3113,6 @@ var FilterSections;
|
|
|
3127
3113
|
(function (FilterSections) {
|
|
3128
3114
|
FilterSections["CALENDAR"] = "calendar";
|
|
3129
3115
|
FilterSections["GUESTS"] = "guests";
|
|
3130
|
-
FilterSections["CATEGORIES"] = "categories";
|
|
3131
3116
|
FilterSections["LOCATIONS"] = "locations";
|
|
3132
3117
|
})(FilterSections || (FilterSections = {}));
|
|
3133
3118
|
var Pages;
|
|
@@ -3143,9 +3128,8 @@ var useFilterState = function (_a) {
|
|
|
3143
3128
|
var _c = __read(useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
3144
3129
|
var _d = __read(useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
3145
3130
|
var _e = __read(useState(false), 2), innerLoading = _e[0], setInnerLoading = _e[1];
|
|
3146
|
-
var _f = __read(useState(
|
|
3147
|
-
var _g = __read(useState(
|
|
3148
|
-
var _h = __read(useState([]), 2), selectedLocations = _h[0], setSelectedLocations = _h[1];
|
|
3131
|
+
var _f = __read(useState({}), 2), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
3132
|
+
var _g = __read(useState([]), 2), selectedLocations = _g[0], setSelectedLocations = _g[1];
|
|
3149
3133
|
useEffect(function () {
|
|
3150
3134
|
var _a;
|
|
3151
3135
|
if (typeof window === 'undefined')
|
|
@@ -3165,12 +3149,6 @@ var useFilterState = function (_a) {
|
|
|
3165
3149
|
ageCategoryCountsParam = {};
|
|
3166
3150
|
}
|
|
3167
3151
|
}
|
|
3168
|
-
var categoriesParam = urlSearchParams.get('categories');
|
|
3169
|
-
var parsedCategories = 0;
|
|
3170
|
-
if (categoriesParam) {
|
|
3171
|
-
var parsed = parseInt(categoriesParam, 10);
|
|
3172
|
-
parsedCategories = Number.isNaN(parsed) ? 0 : parsed;
|
|
3173
|
-
}
|
|
3174
3152
|
if (startDateParam && endDateParam) {
|
|
3175
3153
|
setCalendarRange({
|
|
3176
3154
|
from: new Date(startDateParam),
|
|
@@ -3178,7 +3156,6 @@ var useFilterState = function (_a) {
|
|
|
3178
3156
|
});
|
|
3179
3157
|
}
|
|
3180
3158
|
setAgeCategoryCounts(ageCategoryCountsParam);
|
|
3181
|
-
setCategories(parsedCategories);
|
|
3182
3159
|
if (((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locationIdParams.length) {
|
|
3183
3160
|
var matchedLocations = locations.data.filter(function (location) {
|
|
3184
3161
|
return locationIdParams.includes(location.id.toString());
|
|
@@ -3191,13 +3168,11 @@ var useFilterState = function (_a) {
|
|
|
3191
3168
|
selectedFilter: selectedFilter,
|
|
3192
3169
|
calendarRange: calendarRange,
|
|
3193
3170
|
innerLoading: innerLoading,
|
|
3194
|
-
categories: categories,
|
|
3195
3171
|
ageCategoryCounts: ageCategoryCounts,
|
|
3196
3172
|
selectedLocations: selectedLocations,
|
|
3197
3173
|
setSelectedLocations: setSelectedLocations,
|
|
3198
3174
|
setCalendarRange: setCalendarRange,
|
|
3199
3175
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
3200
|
-
setCategories: setCategories,
|
|
3201
3176
|
setSelectedPath: setSelectedPath,
|
|
3202
3177
|
setSelectedFilter: setSelectedFilter,
|
|
3203
3178
|
setInnerLoading: setInnerLoading,
|
|
@@ -6897,6 +6872,18 @@ var useFilterActions = function (_a) {
|
|
|
6897
6872
|
Pages.EVENTS;
|
|
6898
6873
|
setSelectedPath(currentPath);
|
|
6899
6874
|
}, [tabs]);
|
|
6875
|
+
// Clear loading state when page is restored from bfcache — react state
|
|
6876
|
+
// is preserved on back/forward navigation, otherwise SEARCH stays disabled
|
|
6877
|
+
useEffect(function () {
|
|
6878
|
+
if (typeof window === 'undefined')
|
|
6879
|
+
return;
|
|
6880
|
+
var handlePageShow = function (event) {
|
|
6881
|
+
if (event.persisted)
|
|
6882
|
+
setInnerLoading(false);
|
|
6883
|
+
};
|
|
6884
|
+
window.addEventListener('pageshow', handlePageShow);
|
|
6885
|
+
return function () { return window.removeEventListener('pageshow', handlePageShow); };
|
|
6886
|
+
}, [setInnerLoading]);
|
|
6900
6887
|
var updateGuestsCount = function (id, newCount) {
|
|
6901
6888
|
setAgeCategoryCounts(function (prev) {
|
|
6902
6889
|
var _a;
|
|
@@ -6981,10 +6968,6 @@ var useFilterRefs = function () {
|
|
|
6981
6968
|
};
|
|
6982
6969
|
};
|
|
6983
6970
|
|
|
6984
|
-
// Writes panel-position candidates as CSS custom properties on the panel
|
|
6985
|
-
// element. CSS picks which one to use based on its own media query — see
|
|
6986
|
-
// FilterPanels.css. This keeps the breakpoint as a single source of truth
|
|
6987
|
-
// in CSS and avoids any JS-side mobile detection.
|
|
6988
6971
|
var usePanelPosition = function (_a) {
|
|
6989
6972
|
var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs;
|
|
6990
6973
|
useLayoutEffect(function () {
|
|
@@ -7014,7 +6997,7 @@ var usePanelPosition = function (_a) {
|
|
|
7014
6997
|
var FilterBarContext = createContext(undefined);
|
|
7015
6998
|
var FilterBarProvider = function (_a) {
|
|
7016
6999
|
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;
|
|
7017
|
-
var _b = useFilterState({ locations: locations }), selectedPath = _b.selectedPath, selectedFilter = _b.selectedFilter, calendarRange = _b.calendarRange, innerLoading = _b.innerLoading,
|
|
7000
|
+
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;
|
|
7018
7001
|
var filterActions = useFilterActions({
|
|
7019
7002
|
tabs: tabs,
|
|
7020
7003
|
ageCategoryCounts: ageCategoryCounts,
|
|
@@ -7031,10 +7014,9 @@ var FilterBarProvider = function (_a) {
|
|
|
7031
7014
|
setInnerLoading: setInnerLoading,
|
|
7032
7015
|
});
|
|
7033
7016
|
var filterRefs = useFilterRefs();
|
|
7034
|
-
var contextValue = useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts,
|
|
7017
|
+
var contextValue = 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)); }, [
|
|
7035
7018
|
selectedFilter,
|
|
7036
7019
|
ageCategoryCounts,
|
|
7037
|
-
categories,
|
|
7038
7020
|
calendarRange,
|
|
7039
7021
|
selectedPath,
|
|
7040
7022
|
innerLoading,
|
|
@@ -7140,8 +7122,8 @@ function FaSearch (props) {
|
|
|
7140
7122
|
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);
|
|
7141
7123
|
}
|
|
7142
7124
|
|
|
7143
|
-
var css_248z$
|
|
7144
|
-
styleInject(css_248z$
|
|
7125
|
+
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";
|
|
7126
|
+
styleInject(css_248z$f);
|
|
7145
7127
|
|
|
7146
7128
|
var SubmitButton = function (_a) {
|
|
7147
7129
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -7155,8 +7137,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
7155
7137
|
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);
|
|
7156
7138
|
}
|
|
7157
7139
|
|
|
7158
|
-
var css_248z$
|
|
7159
|
-
styleInject(css_248z$
|
|
7140
|
+
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";
|
|
7141
|
+
styleInject(css_248z$e);
|
|
7160
7142
|
|
|
7161
7143
|
var CloseButton = function (_a) {
|
|
7162
7144
|
var handleClose = _a.handleClose;
|
|
@@ -11872,8 +11854,6 @@ var useCalendarTooltips = function (_a) {
|
|
|
11872
11854
|
return useEffect(function () {
|
|
11873
11855
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11874
11856
|
return;
|
|
11875
|
-
// Use the calendar's own DOM root (ShadowRoot or Document) so queries
|
|
11876
|
-
// resolve correctly when the component is mounted inside Shadow DOM.
|
|
11877
11857
|
var root = getQueryRoot(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
|
|
11878
11858
|
// Children
|
|
11879
11859
|
var calendarTooltip = root.querySelector('.will-calendar-tooltip');
|
|
@@ -12020,12 +12000,12 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
12020
12000
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
12021
12001
|
};
|
|
12022
12002
|
|
|
12023
|
-
var css_248z$
|
|
12024
|
-
styleInject(css_248z$e);
|
|
12025
|
-
|
|
12026
|
-
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";
|
|
12003
|
+
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}";
|
|
12027
12004
|
styleInject(css_248z$d);
|
|
12028
12005
|
|
|
12006
|
+
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";
|
|
12007
|
+
styleInject(css_248z$c);
|
|
12008
|
+
|
|
12029
12009
|
var Calendar = forwardRef(function (_a, ref) {
|
|
12030
12010
|
var _b;
|
|
12031
12011
|
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;
|
|
@@ -12165,8 +12145,8 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
12165
12145
|
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
12166
12146
|
});
|
|
12167
12147
|
|
|
12168
|
-
var css_248z$
|
|
12169
|
-
styleInject(css_248z$
|
|
12148
|
+
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";
|
|
12149
|
+
styleInject(css_248z$b);
|
|
12170
12150
|
|
|
12171
12151
|
var SectionHeader = function (_a) {
|
|
12172
12152
|
var title = _a.title, action = _a.action;
|
|
@@ -12175,8 +12155,8 @@ var SectionHeader = function (_a) {
|
|
|
12175
12155
|
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
12176
12156
|
};
|
|
12177
12157
|
|
|
12178
|
-
var css_248z$
|
|
12179
|
-
styleInject(css_248z$
|
|
12158
|
+
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";
|
|
12159
|
+
styleInject(css_248z$a);
|
|
12180
12160
|
|
|
12181
12161
|
var Dates = forwardRef(function (_a, ref) {
|
|
12182
12162
|
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language;
|
|
@@ -12187,8 +12167,8 @@ var Dates = forwardRef(function (_a, ref) {
|
|
|
12187
12167
|
});
|
|
12188
12168
|
Dates.displayName = 'Dates';
|
|
12189
12169
|
|
|
12190
|
-
var css_248z$
|
|
12191
|
-
styleInject(css_248z$
|
|
12170
|
+
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";
|
|
12171
|
+
styleInject(css_248z$9);
|
|
12192
12172
|
|
|
12193
12173
|
var GuestCount = function (_a) {
|
|
12194
12174
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -12221,8 +12201,8 @@ var GuestCount = function (_a) {
|
|
|
12221
12201
|
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
12222
12202
|
};
|
|
12223
12203
|
|
|
12224
|
-
var css_248z$
|
|
12225
|
-
styleInject(css_248z$
|
|
12204
|
+
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";
|
|
12205
|
+
styleInject(css_248z$8);
|
|
12226
12206
|
|
|
12227
12207
|
var Guests = forwardRef(function (_a, ref) {
|
|
12228
12208
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
@@ -12234,8 +12214,8 @@ var Guests = forwardRef(function (_a, ref) {
|
|
|
12234
12214
|
});
|
|
12235
12215
|
Guests.displayName = 'Guests';
|
|
12236
12216
|
|
|
12237
|
-
var css_248z$
|
|
12238
|
-
styleInject(css_248z$
|
|
12217
|
+
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";
|
|
12218
|
+
styleInject(css_248z$7);
|
|
12239
12219
|
|
|
12240
12220
|
var ImageCard = forwardRef(function (_a, ref) {
|
|
12241
12221
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
@@ -12253,8 +12233,8 @@ var ImageCard = forwardRef(function (_a, ref) {
|
|
|
12253
12233
|
});
|
|
12254
12234
|
ImageCard.displayName = 'ImageCard';
|
|
12255
12235
|
|
|
12256
|
-
var css_248z$
|
|
12257
|
-
styleInject(css_248z$
|
|
12236
|
+
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";
|
|
12237
|
+
styleInject(css_248z$6);
|
|
12258
12238
|
|
|
12259
12239
|
var Locations = forwardRef(function (_a, ref) {
|
|
12260
12240
|
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;
|
|
@@ -12293,38 +12273,14 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12293
12273
|
});
|
|
12294
12274
|
Locations.displayName = 'Locations';
|
|
12295
12275
|
|
|
12296
|
-
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";
|
|
12297
|
-
styleInject(css_248z$6);
|
|
12298
|
-
|
|
12299
|
-
var Categories = function (_a) {
|
|
12300
|
-
var setCategories = _a.setCategories;
|
|
12301
|
-
var t = useTranslation('filterBar').t;
|
|
12302
|
-
var categoriesPlaceholder = [
|
|
12303
|
-
'Weekend',
|
|
12304
|
-
'Week',
|
|
12305
|
-
'Summer camp',
|
|
12306
|
-
'Winter camp',
|
|
12307
|
-
];
|
|
12308
|
-
var _b = __read(useState(''), 2), selectedCategory = _b[0], setSelectedCategory = _b[1];
|
|
12309
|
-
var handleCategoryChange = function (selectedCategory) {
|
|
12310
|
-
setSelectedCategory(selectedCategory);
|
|
12311
|
-
setCategories(selectedCategory);
|
|
12312
|
-
};
|
|
12313
|
-
return (React__default.createElement("div", { id: "will-filter-bar-categories" },
|
|
12314
|
-
React__default.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
|
|
12315
|
-
React__default.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React__default.createElement("div", { key: idx },
|
|
12316
|
-
React__default.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
|
|
12317
|
-
React__default.createElement("span", null, itm))); }))));
|
|
12318
|
-
};
|
|
12319
|
-
Categories.displayName = 'Categories';
|
|
12320
|
-
|
|
12321
12276
|
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";
|
|
12322
12277
|
styleInject(css_248z$5);
|
|
12323
12278
|
|
|
12324
12279
|
var FilterPanels = function () {
|
|
12325
|
-
var _a = useFilterBar(),
|
|
12326
|
-
|
|
12327
|
-
|
|
12280
|
+
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;
|
|
12281
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12282
|
+
return handleSelectedFilter(false);
|
|
12283
|
+
});
|
|
12328
12284
|
usePanelPosition({
|
|
12329
12285
|
selectedFilter: selectedFilter,
|
|
12330
12286
|
panelRef: panelRef,
|
|
@@ -12337,8 +12293,6 @@ var FilterPanels = function () {
|
|
|
12337
12293
|
return (React__default.createElement(Dates, { autoFocus: true, ref: filterSectionRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language }));
|
|
12338
12294
|
case FilterSections.GUESTS:
|
|
12339
12295
|
return (React__default.createElement(Guests, { autoFocus: true, ref: filterSectionRef, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, updateGuestsCount: updateGuestsCount, onClose: function () { return handleSelectedFilter(false); } }));
|
|
12340
|
-
case FilterSections.CATEGORIES:
|
|
12341
|
-
return (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }));
|
|
12342
12296
|
case FilterSections.LOCATIONS:
|
|
12343
12297
|
return (React__default.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); } }));
|
|
12344
12298
|
default:
|
|
@@ -12376,9 +12330,7 @@ var FilterControls = function () {
|
|
|
12376
12330
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12377
12331
|
locationsSelectedLabel: t('locations.selected'),
|
|
12378
12332
|
});
|
|
12379
|
-
return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) {
|
|
12380
|
-
filtersRef.current = el;
|
|
12381
|
-
} },
|
|
12333
|
+
return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) { return (filtersRef.current = el); } },
|
|
12382
12334
|
!!((_a = locations === null || locations === void 0 ? void 0 : locations.data) === null || _a === void 0 ? void 0 : _a.length) && locations.data.length > 1 && (React__default.createElement(React__default.Fragment, null,
|
|
12383
12335
|
React__default.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
|
|
12384
12336
|
previouslyFocusedButtonRef.current = e.currentTarget;
|
|
@@ -12614,10 +12566,9 @@ var FilterCalendarInner = function (_a) {
|
|
|
12614
12566
|
}), 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;
|
|
12615
12567
|
// Display component after fully loaded
|
|
12616
12568
|
useAwaitRender();
|
|
12617
|
-
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
}).filterSectionRef;
|
|
12569
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12570
|
+
return setToggleCalendar(false);
|
|
12571
|
+
});
|
|
12621
12572
|
return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filterSectionRef },
|
|
12622
12573
|
React__default.createElement("div", { className: "will-calendar-header" },
|
|
12623
12574
|
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|