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