willba-component-library 0.4.8 → 0.4.10
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 +54 -115
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +54 -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,
|
|
@@ -6981,10 +6956,6 @@ var useFilterRefs = function () {
|
|
|
6981
6956
|
};
|
|
6982
6957
|
};
|
|
6983
6958
|
|
|
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
6959
|
var usePanelPosition = function (_a) {
|
|
6989
6960
|
var selectedFilter = _a.selectedFilter, panelRef = _a.panelRef, filtersRef = _a.filtersRef, buttonRefs = _a.buttonRefs;
|
|
6990
6961
|
useLayoutEffect(function () {
|
|
@@ -7014,7 +6985,7 @@ var usePanelPosition = function (_a) {
|
|
|
7014
6985
|
var FilterBarContext = createContext(undefined);
|
|
7015
6986
|
var FilterBarProvider = function (_a) {
|
|
7016
6987
|
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,
|
|
6988
|
+
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
6989
|
var filterActions = useFilterActions({
|
|
7019
6990
|
tabs: tabs,
|
|
7020
6991
|
ageCategoryCounts: ageCategoryCounts,
|
|
@@ -7031,10 +7002,9 @@ var FilterBarProvider = function (_a) {
|
|
|
7031
7002
|
setInnerLoading: setInnerLoading,
|
|
7032
7003
|
});
|
|
7033
7004
|
var filterRefs = useFilterRefs();
|
|
7034
|
-
var contextValue = useMemo(function () { return (__assign$2(__assign$2(__assign$2({ selectedFilter: selectedFilter, ageCategoryCounts: ageCategoryCounts,
|
|
7005
|
+
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
7006
|
selectedFilter,
|
|
7036
7007
|
ageCategoryCounts,
|
|
7037
|
-
categories,
|
|
7038
7008
|
calendarRange,
|
|
7039
7009
|
selectedPath,
|
|
7040
7010
|
innerLoading,
|
|
@@ -7140,8 +7110,8 @@ function FaSearch (props) {
|
|
|
7140
7110
|
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
7111
|
}
|
|
7142
7112
|
|
|
7143
|
-
var css_248z$
|
|
7144
|
-
styleInject(css_248z$
|
|
7113
|
+
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";
|
|
7114
|
+
styleInject(css_248z$f);
|
|
7145
7115
|
|
|
7146
7116
|
var SubmitButton = function (_a) {
|
|
7147
7117
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -7155,8 +7125,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
7155
7125
|
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
7126
|
}
|
|
7157
7127
|
|
|
7158
|
-
var css_248z$
|
|
7159
|
-
styleInject(css_248z$
|
|
7128
|
+
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";
|
|
7129
|
+
styleInject(css_248z$e);
|
|
7160
7130
|
|
|
7161
7131
|
var CloseButton = function (_a) {
|
|
7162
7132
|
var handleClose = _a.handleClose;
|
|
@@ -11872,8 +11842,6 @@ var useCalendarTooltips = function (_a) {
|
|
|
11872
11842
|
return useEffect(function () {
|
|
11873
11843
|
if (typeof document === 'undefined' || !showFeedback)
|
|
11874
11844
|
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
11845
|
var root = getQueryRoot(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current);
|
|
11878
11846
|
// Children
|
|
11879
11847
|
var calendarTooltip = root.querySelector('.will-calendar-tooltip');
|
|
@@ -12020,12 +11988,12 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
12020
11988
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
12021
11989
|
};
|
|
12022
11990
|
|
|
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";
|
|
11991
|
+
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
11992
|
styleInject(css_248z$d);
|
|
12028
11993
|
|
|
11994
|
+
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";
|
|
11995
|
+
styleInject(css_248z$c);
|
|
11996
|
+
|
|
12029
11997
|
var Calendar = forwardRef(function (_a, ref) {
|
|
12030
11998
|
var _b;
|
|
12031
11999
|
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 +12133,8 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
12165
12133
|
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
|
|
12166
12134
|
});
|
|
12167
12135
|
|
|
12168
|
-
var css_248z$
|
|
12169
|
-
styleInject(css_248z$
|
|
12136
|
+
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";
|
|
12137
|
+
styleInject(css_248z$b);
|
|
12170
12138
|
|
|
12171
12139
|
var SectionHeader = function (_a) {
|
|
12172
12140
|
var title = _a.title, action = _a.action;
|
|
@@ -12175,8 +12143,8 @@ var SectionHeader = function (_a) {
|
|
|
12175
12143
|
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
12176
12144
|
};
|
|
12177
12145
|
|
|
12178
|
-
var css_248z$
|
|
12179
|
-
styleInject(css_248z$
|
|
12146
|
+
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";
|
|
12147
|
+
styleInject(css_248z$a);
|
|
12180
12148
|
|
|
12181
12149
|
var Dates = forwardRef(function (_a, ref) {
|
|
12182
12150
|
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language;
|
|
@@ -12187,8 +12155,8 @@ var Dates = forwardRef(function (_a, ref) {
|
|
|
12187
12155
|
});
|
|
12188
12156
|
Dates.displayName = 'Dates';
|
|
12189
12157
|
|
|
12190
|
-
var css_248z$
|
|
12191
|
-
styleInject(css_248z$
|
|
12158
|
+
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";
|
|
12159
|
+
styleInject(css_248z$9);
|
|
12192
12160
|
|
|
12193
12161
|
var GuestCount = function (_a) {
|
|
12194
12162
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -12221,8 +12189,8 @@ var GuestCount = function (_a) {
|
|
|
12221
12189
|
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
12222
12190
|
};
|
|
12223
12191
|
|
|
12224
|
-
var css_248z$
|
|
12225
|
-
styleInject(css_248z$
|
|
12192
|
+
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";
|
|
12193
|
+
styleInject(css_248z$8);
|
|
12226
12194
|
|
|
12227
12195
|
var Guests = forwardRef(function (_a, ref) {
|
|
12228
12196
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
@@ -12234,8 +12202,8 @@ var Guests = forwardRef(function (_a, ref) {
|
|
|
12234
12202
|
});
|
|
12235
12203
|
Guests.displayName = 'Guests';
|
|
12236
12204
|
|
|
12237
|
-
var css_248z$
|
|
12238
|
-
styleInject(css_248z$
|
|
12205
|
+
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";
|
|
12206
|
+
styleInject(css_248z$7);
|
|
12239
12207
|
|
|
12240
12208
|
var ImageCard = forwardRef(function (_a, ref) {
|
|
12241
12209
|
var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
|
|
@@ -12253,8 +12221,8 @@ var ImageCard = forwardRef(function (_a, ref) {
|
|
|
12253
12221
|
});
|
|
12254
12222
|
ImageCard.displayName = 'ImageCard';
|
|
12255
12223
|
|
|
12256
|
-
var css_248z$
|
|
12257
|
-
styleInject(css_248z$
|
|
12224
|
+
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";
|
|
12225
|
+
styleInject(css_248z$6);
|
|
12258
12226
|
|
|
12259
12227
|
var Locations = forwardRef(function (_a, ref) {
|
|
12260
12228
|
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 +12261,14 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12293
12261
|
});
|
|
12294
12262
|
Locations.displayName = 'Locations';
|
|
12295
12263
|
|
|
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
12264
|
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
12265
|
styleInject(css_248z$5);
|
|
12323
12266
|
|
|
12324
12267
|
var FilterPanels = function () {
|
|
12325
|
-
var _a = useFilterBar(),
|
|
12326
|
-
|
|
12327
|
-
|
|
12268
|
+
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;
|
|
12269
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12270
|
+
return handleSelectedFilter(false);
|
|
12271
|
+
});
|
|
12328
12272
|
usePanelPosition({
|
|
12329
12273
|
selectedFilter: selectedFilter,
|
|
12330
12274
|
panelRef: panelRef,
|
|
@@ -12337,8 +12281,6 @@ var FilterPanels = function () {
|
|
|
12337
12281
|
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
12282
|
case FilterSections.GUESTS:
|
|
12339
12283
|
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
12284
|
case FilterSections.LOCATIONS:
|
|
12343
12285
|
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
12286
|
default:
|
|
@@ -12376,9 +12318,7 @@ var FilterControls = function () {
|
|
|
12376
12318
|
locationsPlaceholder: t('locations.placeholder'),
|
|
12377
12319
|
locationsSelectedLabel: t('locations.selected'),
|
|
12378
12320
|
});
|
|
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
|
-
} },
|
|
12321
|
+
return (React__default.createElement("div", { className: "will-filter-bar-controls ".concat(mode || 'light', " ").concat(selectedFilter ? 'disabled' : ''), ref: function (el) { return (filtersRef.current = el); } },
|
|
12382
12322
|
!!((_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
12323
|
React__default.createElement(SelectButton, { ref: function (el) { return (buttonRefs.current[FilterSections.LOCATIONS] = el); }, label: t('locations.label'), description: parsedLocations, onClick: function (e) {
|
|
12384
12324
|
previouslyFocusedButtonRef.current = e.currentTarget;
|
|
@@ -12614,10 +12554,9 @@ var FilterCalendarInner = function (_a) {
|
|
|
12614
12554
|
}), 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
12555
|
// Display component after fully loaded
|
|
12616
12556
|
useAwaitRender();
|
|
12617
|
-
|
|
12618
|
-
|
|
12619
|
-
|
|
12620
|
-
}).filterSectionRef;
|
|
12557
|
+
var filterSectionRef = useClickOutside(function () {
|
|
12558
|
+
return setToggleCalendar(false);
|
|
12559
|
+
});
|
|
12621
12560
|
return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filterSectionRef },
|
|
12622
12561
|
React__default.createElement("div", { className: "will-calendar-header" },
|
|
12623
12562
|
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|