willba-component-library 0.3.5 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/FilterBar/FilterBarTypes.d.ts +13 -7
- package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts +1 -0
- package/lib/components/FilterBar/components/cards/image-card/ImageCard.d.ts +2 -2
- package/lib/components/FilterBar/components/common/FilterSectionHeader.d.ts +8 -0
- package/lib/components/FilterBar/components/dates/Dates.d.ts +15 -0
- package/lib/components/FilterBar/components/dates/index.d.ts +1 -0
- package/lib/components/FilterBar/components/guests/Guests.d.ts +1 -0
- package/lib/components/FilterBar/utils/getLocalizedContent.d.ts +8 -0
- package/lib/components/FilterBar/utils/index.d.ts +1 -0
- package/lib/index.d.ts +13 -7
- package/lib/index.esm.js +97 -49
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +366 -318
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +366 -318
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +1 -1
- package/src/components/FilterBar/FilterBar.stories.tsx +43 -34
- package/src/components/FilterBar/FilterBar.tsx +19 -11
- package/src/components/FilterBar/FilterBarTypes.ts +15 -7
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.css +13 -13
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +6 -3
- package/src/components/FilterBar/components/cards/image-card/ImageCard.tsx +2 -2
- package/src/components/FilterBar/components/categories/Categories.tsx +1 -0
- package/src/components/FilterBar/components/common/FilterSectionHeader.css +29 -0
- package/src/components/FilterBar/components/common/FilterSectionHeader.tsx +16 -0
- package/src/components/FilterBar/components/dates/Dates.tsx +57 -0
- package/src/components/FilterBar/components/dates/index.ts +1 -0
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +4 -7
- package/src/components/FilterBar/components/guests/Guests.css +5 -20
- package/src/components/FilterBar/components/guests/Guests.tsx +8 -2
- package/src/components/FilterBar/components/locations/Locations.css +1 -15
- package/src/components/FilterBar/components/locations/Locations.tsx +43 -14
- package/src/components/FilterBar/utils/getLocalizedContent.tsx +21 -0
- package/src/components/FilterBar/utils/index.tsx +1 -0
- package/src/components/FilterBar/utils/parseLocations.tsx +5 -1
- package/src/core/components/calendar/Calendar.css +100 -50
- package/src/locales/en/filterBar.json +1 -1
- package/src/locales/fi/filterBar.json +2 -2
|
@@ -11,10 +11,7 @@ export type FilterBarTypes = {
|
|
|
11
11
|
mode?: string;
|
|
12
12
|
tabs?: Tab[];
|
|
13
13
|
outerLoading?: boolean;
|
|
14
|
-
locations?:
|
|
15
|
-
multiSelect: boolean;
|
|
16
|
-
data: Location[];
|
|
17
|
-
};
|
|
14
|
+
locations?: Locations;
|
|
18
15
|
};
|
|
19
16
|
export type AgeCategoryCount = {
|
|
20
17
|
[categoryId: string]: number;
|
|
@@ -52,16 +49,25 @@ type Translations = {
|
|
|
52
49
|
fi: string;
|
|
53
50
|
[key: string]: string;
|
|
54
51
|
};
|
|
52
|
+
export type LocaleTranslation = Array<{
|
|
53
|
+
content: string;
|
|
54
|
+
locale: string;
|
|
55
|
+
}>;
|
|
55
56
|
export type Tab = {
|
|
56
57
|
path: string;
|
|
57
58
|
default?: boolean;
|
|
58
59
|
order: number;
|
|
59
60
|
label?: Translations;
|
|
60
61
|
};
|
|
62
|
+
export type Locations = {
|
|
63
|
+
multiSelect: boolean;
|
|
64
|
+
disabled?: boolean;
|
|
65
|
+
data: Location[];
|
|
66
|
+
};
|
|
61
67
|
export type Location = {
|
|
62
68
|
id: number;
|
|
63
|
-
label:
|
|
64
|
-
description?:
|
|
65
|
-
imageUrl?: string;
|
|
69
|
+
label: LocaleTranslation;
|
|
70
|
+
description?: LocaleTranslation | null;
|
|
71
|
+
imageUrl?: string | null;
|
|
66
72
|
};
|
|
67
73
|
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DateRange } from 'react-day-picker';
|
|
2
|
+
import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes';
|
|
3
|
+
type Props = {
|
|
4
|
+
ref: React.RefObject<HTMLDivElement>;
|
|
5
|
+
onClose?: () => void;
|
|
6
|
+
autoFocus?: boolean;
|
|
7
|
+
calendarRange: DateRange | undefined;
|
|
8
|
+
setCalendarRange: (range: DateRange | undefined) => void;
|
|
9
|
+
disableCalendarDates?: DisableCalendarDates;
|
|
10
|
+
selectedPath?: string;
|
|
11
|
+
language?: string;
|
|
12
|
+
filtersRef?: React.RefObject<HTMLDivElement>;
|
|
13
|
+
};
|
|
14
|
+
export declare const Dates: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Dates } from './Dates';
|
|
@@ -6,6 +6,7 @@ type Props = {
|
|
|
6
6
|
updateGuestsCount: (arg1: string, arg2: number) => void;
|
|
7
7
|
ageCategoryCounts: AgeCategoryCount;
|
|
8
8
|
autoFocus?: boolean;
|
|
9
|
+
onClose?: () => void;
|
|
9
10
|
};
|
|
10
11
|
export declare const Guests: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
11
12
|
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { LocaleTranslation } from '../FilterBarTypes';
|
|
2
|
+
type Props = {
|
|
3
|
+
contents: LocaleTranslation;
|
|
4
|
+
locale: string;
|
|
5
|
+
fallbackLocale?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare const getLocalizedContent: ({ contents, locale, fallbackLocale, }: Props) => string | undefined;
|
|
8
|
+
export {};
|
package/lib/index.d.ts
CHANGED
|
@@ -91,10 +91,7 @@ type FilterBarTypes = {
|
|
|
91
91
|
mode?: string;
|
|
92
92
|
tabs?: Tab[];
|
|
93
93
|
outerLoading?: boolean;
|
|
94
|
-
locations?:
|
|
95
|
-
multiSelect: boolean;
|
|
96
|
-
data: Location[];
|
|
97
|
-
};
|
|
94
|
+
locations?: Locations;
|
|
98
95
|
};
|
|
99
96
|
type AgeCategoryType = {
|
|
100
97
|
id: string;
|
|
@@ -110,17 +107,26 @@ type Translations = {
|
|
|
110
107
|
fi: string;
|
|
111
108
|
[key: string]: string;
|
|
112
109
|
};
|
|
110
|
+
type LocaleTranslation = Array<{
|
|
111
|
+
content: string;
|
|
112
|
+
locale: string;
|
|
113
|
+
}>;
|
|
113
114
|
type Tab = {
|
|
114
115
|
path: string;
|
|
115
116
|
default?: boolean;
|
|
116
117
|
order: number;
|
|
117
118
|
label?: Translations;
|
|
118
119
|
};
|
|
120
|
+
type Locations = {
|
|
121
|
+
multiSelect: boolean;
|
|
122
|
+
disabled?: boolean;
|
|
123
|
+
data: Location[];
|
|
124
|
+
};
|
|
119
125
|
type Location = {
|
|
120
126
|
id: number;
|
|
121
|
-
label:
|
|
122
|
-
description?:
|
|
123
|
-
imageUrl?: string;
|
|
127
|
+
label: LocaleTranslation;
|
|
128
|
+
description?: LocaleTranslation | null;
|
|
129
|
+
imageUrl?: string | null;
|
|
124
130
|
};
|
|
125
131
|
|
|
126
132
|
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
|
package/lib/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
import React__default, { useState, createContext, useContext, useRef, useEffect, forwardRef, useMemo } from 'react';
|
|
3
3
|
|
|
4
4
|
/******************************************************************************
|
|
@@ -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$g = ".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$g);
|
|
196
196
|
|
|
197
197
|
/**
|
|
198
198
|
* Primary UI component for user interaction
|
|
@@ -550,8 +550,8 @@ function useTheme(_a) {
|
|
|
550
550
|
return themePalette;
|
|
551
551
|
}
|
|
552
552
|
|
|
553
|
-
var css_248z$
|
|
554
|
-
styleInject(css_248z$
|
|
553
|
+
var css_248z$f = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-light-grey: #C8C8C8;\n --will-white: #fff;\n --will-white-transparent: #ffffffcf;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-error: #d32f2f;\n\n /* Transparent */\n --will-transparent-black: rgba(0, 0, 0, 0.5);\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n /* Color mix */\n --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n /* Shadows */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
|
|
554
|
+
styleInject(css_248z$f);
|
|
555
555
|
|
|
556
556
|
var useAwaitRender = function () {
|
|
557
557
|
var _a = __read(useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
@@ -2794,7 +2794,7 @@ instance.loadLanguages;
|
|
|
2794
2794
|
|
|
2795
2795
|
var locations$1 = {
|
|
2796
2796
|
label: "Locations",
|
|
2797
|
-
title: "
|
|
2797
|
+
title: "Select location",
|
|
2798
2798
|
placeholder: "Add location",
|
|
2799
2799
|
selected: "locations"
|
|
2800
2800
|
};
|
|
@@ -2864,9 +2864,9 @@ var enCommon = {
|
|
|
2864
2864
|
|
|
2865
2865
|
var locations = {
|
|
2866
2866
|
label: "Sijainnit",
|
|
2867
|
-
title: "
|
|
2867
|
+
title: "Valitse sijainti",
|
|
2868
2868
|
placeholder: "Lisää sijainti",
|
|
2869
|
-
selected: "
|
|
2869
|
+
selected: "sijainnit"
|
|
2870
2870
|
};
|
|
2871
2871
|
var calendar = {
|
|
2872
2872
|
label: "Päivät",
|
|
@@ -2998,8 +2998,8 @@ var useAutoFocus = function (autoFocus) {
|
|
|
2998
2998
|
return ref;
|
|
2999
2999
|
};
|
|
3000
3000
|
|
|
3001
|
-
var css_248z$
|
|
3002
|
-
styleInject(css_248z$
|
|
3001
|
+
var css_248z$e = ".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";
|
|
3002
|
+
styleInject(css_248z$e);
|
|
3003
3003
|
|
|
3004
3004
|
var SubmitButton = function (_a) {
|
|
3005
3005
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -3013,8 +3013,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
3013
3013
|
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);
|
|
3014
3014
|
}
|
|
3015
3015
|
|
|
3016
|
-
var css_248z$
|
|
3017
|
-
styleInject(css_248z$
|
|
3016
|
+
var css_248z$d = ".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";
|
|
3017
|
+
styleInject(css_248z$d);
|
|
3018
3018
|
|
|
3019
3019
|
var CloseButton = function (_a) {
|
|
3020
3020
|
var handleClose = _a.handleClose;
|
|
@@ -8916,8 +8916,8 @@ function canUseDOM() {
|
|
|
8916
8916
|
* @param deps
|
|
8917
8917
|
*/
|
|
8918
8918
|
var useIsomorphicLayoutEffect = canUseDOM()
|
|
8919
|
-
? React.useLayoutEffect
|
|
8920
|
-
: React.useEffect;
|
|
8919
|
+
? React$1.useLayoutEffect
|
|
8920
|
+
: React$1.useEffect;
|
|
8921
8921
|
var serverHandoffComplete = false;
|
|
8922
8922
|
var id = 0;
|
|
8923
8923
|
function genId() {
|
|
@@ -8930,7 +8930,7 @@ function useId(providedId) {
|
|
|
8930
8930
|
// If this instance isn't part of the initial render, we don't have to do the
|
|
8931
8931
|
// double render/patch-up dance. We can just generate the ID and return it.
|
|
8932
8932
|
var initialId = providedId !== null && providedId !== void 0 ? providedId : (serverHandoffComplete ? genId() : null);
|
|
8933
|
-
var _b = React.useState(initialId), id = _b[0], setId = _b[1];
|
|
8933
|
+
var _b = React$1.useState(initialId), id = _b[0], setId = _b[1];
|
|
8934
8934
|
useIsomorphicLayoutEffect(function () {
|
|
8935
8935
|
if (id === null) {
|
|
8936
8936
|
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
|
|
@@ -8941,7 +8941,7 @@ function useId(providedId) {
|
|
|
8941
8941
|
}
|
|
8942
8942
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
8943
8943
|
}, []);
|
|
8944
|
-
React.useEffect(function () {
|
|
8944
|
+
React$1.useEffect(function () {
|
|
8945
8945
|
if (serverHandoffComplete === false) {
|
|
8946
8946
|
// Flag all future uses of `useId` to skip the update dance. This is in
|
|
8947
8947
|
// `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
|
|
@@ -11476,11 +11476,11 @@ var useUpdateDisabledDates = function (_a) {
|
|
|
11476
11476
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11477
11477
|
};
|
|
11478
11478
|
|
|
11479
|
-
var css_248z$
|
|
11480
|
-
styleInject(css_248z$
|
|
11479
|
+
var css_248z$c = ".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}";
|
|
11480
|
+
styleInject(css_248z$c);
|
|
11481
11481
|
|
|
11482
|
-
var css_248z$
|
|
11483
|
-
styleInject(css_248z$
|
|
11482
|
+
var css_248z$b = ".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";
|
|
11483
|
+
styleInject(css_248z$b);
|
|
11484
11484
|
|
|
11485
11485
|
var Calendar = forwardRef(function (_a, ref) {
|
|
11486
11486
|
var _b;
|
|
@@ -11645,14 +11645,28 @@ var parseGuests = function (_a) {
|
|
|
11645
11645
|
};
|
|
11646
11646
|
};
|
|
11647
11647
|
|
|
11648
|
+
var getLocalizedContent = function (_a) {
|
|
11649
|
+
var _b;
|
|
11650
|
+
var contents = _a.contents, locale = _a.locale, _c = _a.fallbackLocale, fallbackLocale = _c === void 0 ? 'en' : _c;
|
|
11651
|
+
var preferred = contents.find(function (content) { return content.locale === locale; });
|
|
11652
|
+
if (preferred)
|
|
11653
|
+
return preferred.content;
|
|
11654
|
+
var fallback = contents.find(function (content) { return content.locale === fallbackLocale; });
|
|
11655
|
+
if (fallback)
|
|
11656
|
+
return fallback.content;
|
|
11657
|
+
return (_b = contents[0]) === null || _b === void 0 ? void 0 : _b.content;
|
|
11658
|
+
};
|
|
11659
|
+
|
|
11648
11660
|
var parseLocations = function (_a) {
|
|
11649
|
-
var _b,
|
|
11650
|
-
var selectedLocations = _a.selectedLocations, language = _a.language, locationsPlaceholder = _a.locationsPlaceholder, _d = _a.locationsSelectedLabel, locationsSelectedLabel = _d === void 0 ? 'locations' : _d;
|
|
11661
|
+
var selectedLocations = _a.selectedLocations, language = _a.language, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
|
|
11651
11662
|
if (!selectedLocations.length) {
|
|
11652
11663
|
return locationsPlaceholder;
|
|
11653
11664
|
}
|
|
11654
11665
|
if (selectedLocations.length === 1) {
|
|
11655
|
-
var translation = (
|
|
11666
|
+
var translation = getLocalizedContent({
|
|
11667
|
+
contents: selectedLocations[0].label,
|
|
11668
|
+
locale: language,
|
|
11669
|
+
});
|
|
11656
11670
|
if (!translation) {
|
|
11657
11671
|
return locationsPlaceholder;
|
|
11658
11672
|
}
|
|
@@ -11861,12 +11875,12 @@ var useScrollInToView = function (_a) {
|
|
|
11861
11875
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11862
11876
|
};
|
|
11863
11877
|
|
|
11864
|
-
var css_248z$
|
|
11865
|
-
styleInject(css_248z$
|
|
11878
|
+
var css_248z$a = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button.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";
|
|
11879
|
+
styleInject(css_248z$a);
|
|
11866
11880
|
|
|
11867
11881
|
var SelectButton = forwardRef(function (_a, ref) {
|
|
11868
|
-
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11869
|
-
return (React__default.createElement("button", { ref: ref, className: "will-filter-bar-select-button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true" },
|
|
11882
|
+
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11883
|
+
return (React__default.createElement("button", { ref: ref, className: "will-filter-bar-select-button ".concat(disabled ? 'disabled' : ''), onClick: disabled ? undefined : onClick, disabled: disabled, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", "aria-disabled": disabled },
|
|
11870
11884
|
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
11871
11885
|
React__default.createElement("div", null,
|
|
11872
11886
|
React__default.createElement("p", { className: "select-button-label" }, label),
|
|
@@ -11874,16 +11888,16 @@ var SelectButton = forwardRef(function (_a, ref) {
|
|
|
11874
11888
|
});
|
|
11875
11889
|
SelectButton.displayName = 'SelectButton';
|
|
11876
11890
|
|
|
11877
|
-
var css_248z$
|
|
11878
|
-
styleInject(css_248z$
|
|
11891
|
+
var css_248z$9 = ".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";
|
|
11892
|
+
styleInject(css_248z$9);
|
|
11879
11893
|
|
|
11880
11894
|
var TabButton = function (_a) {
|
|
11881
11895
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11882
11896
|
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11883
11897
|
};
|
|
11884
11898
|
|
|
11885
|
-
var css_248z$
|
|
11886
|
-
styleInject(css_248z$
|
|
11899
|
+
var css_248z$8 = ".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 margin: 15px 0;\n justify-content: space-between;\n }\n}\n";
|
|
11900
|
+
styleInject(css_248z$8);
|
|
11887
11901
|
|
|
11888
11902
|
var GuestCount = function (_a) {
|
|
11889
11903
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -11916,15 +11930,25 @@ var GuestCount = function (_a) {
|
|
|
11916
11930
|
React__default.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11917
11931
|
};
|
|
11918
11932
|
|
|
11919
|
-
var css_248z$
|
|
11933
|
+
var css_248z$7 = ".will-filter-section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\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-title {\n font-size: 18px;\n }\n}\n";
|
|
11934
|
+
styleInject(css_248z$7);
|
|
11935
|
+
|
|
11936
|
+
var FilterSectionHeader = function (_a) {
|
|
11937
|
+
var title = _a.title, action = _a.action;
|
|
11938
|
+
return (React__default.createElement("div", { className: "will-filter-section-header" },
|
|
11939
|
+
React__default.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
11940
|
+
action && React__default.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11941
|
+
};
|
|
11942
|
+
|
|
11943
|
+
var css_248z$6 = ".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 margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
11920
11944
|
styleInject(css_248z$6);
|
|
11921
11945
|
|
|
11922
11946
|
var Guests = forwardRef(function (_a, ref) {
|
|
11923
|
-
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus;
|
|
11947
|
+
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
11924
11948
|
var t = useTranslation('filterBar').t;
|
|
11925
11949
|
var containerRef = useAutoFocus(autoFocus);
|
|
11926
11950
|
return (React__default.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
11927
|
-
React__default.createElement(
|
|
11951
|
+
React__default.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
11928
11952
|
React__default.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
|
|
11929
11953
|
});
|
|
11930
11954
|
Guests.displayName = 'Guests';
|
|
@@ -11960,7 +11984,7 @@ var Categories = function (_a) {
|
|
|
11960
11984
|
React__default.createElement("span", null, itm))); }))));
|
|
11961
11985
|
};
|
|
11962
11986
|
|
|
11963
|
-
var css_248z$3 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-
|
|
11987
|
+
var css_248z$3 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-container {\n display: flex;\n gap: 10px;\n flex-direction: column;\n min-width: 400px;\n margin-top: 20px;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
|
|
11964
11988
|
styleInject(css_248z$3);
|
|
11965
11989
|
|
|
11966
11990
|
var css_248z$2 = ".will-image-card {\n display: flex;\n gap: 20px;\n justify-content: space-between;\n align-items: center;\n padding: 8px 16px;\n cursor: pointer;\n user-select: none;\n border-radius: 8px;\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";
|
|
@@ -12011,20 +12035,44 @@ var Locations = forwardRef(function (_a, ref) {
|
|
|
12011
12035
|
}
|
|
12012
12036
|
};
|
|
12013
12037
|
return (React__default.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12014
|
-
React__default.createElement(
|
|
12038
|
+
React__default.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React__default.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12015
12039
|
React__default.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12016
12040
|
locations
|
|
12017
|
-
.filter(function (location) {
|
|
12041
|
+
.filter(function (location) {
|
|
12042
|
+
var label = getLocalizedContent({
|
|
12043
|
+
contents: location.label,
|
|
12044
|
+
locale: language,
|
|
12045
|
+
});
|
|
12046
|
+
return !!label;
|
|
12047
|
+
})
|
|
12018
12048
|
.map(function (location, index) {
|
|
12019
|
-
var
|
|
12020
|
-
|
|
12049
|
+
var label = getLocalizedContent({
|
|
12050
|
+
contents: location.label,
|
|
12051
|
+
locale: language,
|
|
12052
|
+
});
|
|
12053
|
+
var description = location.description
|
|
12054
|
+
? getLocalizedContent({
|
|
12055
|
+
contents: location.description,
|
|
12056
|
+
locale: language,
|
|
12057
|
+
})
|
|
12058
|
+
: null;
|
|
12059
|
+
return (React__default.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: label, description: description, imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
|
|
12021
12060
|
}))));
|
|
12022
12061
|
});
|
|
12023
12062
|
Locations.displayName = 'Locations';
|
|
12024
12063
|
|
|
12025
|
-
var css_248z$1 = ".will-root {\n z-index: 999;\n width: fit-content;\n min-width: 796px;\n max-height: 100vh;\n position: relative;\n}\n\n.will-root.is-full-width {\n width: 100%;\n min-width: auto;\n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 222;\n background: transparent;\n padding: 10px;\n gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n position: relative;\n z-index: 222;\n border-radius: 40px;\n background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n border-radius: 25px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n padding:
|
|
12064
|
+
var css_248z$1 = ".will-root {\n z-index: 999;\n width: fit-content;\n min-width: 796px;\n max-height: 100vh;\n position: relative;\n}\n\n.will-root.is-full-width {\n width: 100%;\n min-width: auto;\n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 222;\n background: transparent;\n padding: 10px;\n gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n position: relative;\n z-index: 222;\n border-radius: 40px;\n background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n border-radius: 25px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n padding: 20px;\n position: absolute;\n top: 125px;\n z-index: 111;\n border-radius: 25px;\n box-shadow: var(--will-box-shadow);\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-container {\n margin-top: 10px;\n top: 0;\n padding: 45px 20px;\n position: relative;\n }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n box-shadow: var(--will-box-shadow-light);\n}\n\n.will-guest-count {\n display: inline-block;\n min-width: 10px;\n}\n";
|
|
12026
12065
|
styleInject(css_248z$1);
|
|
12027
12066
|
|
|
12067
|
+
var Dates = forwardRef(function (_a, ref) {
|
|
12068
|
+
var onClose = _a.onClose, autoFocus = _a.autoFocus, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, disableCalendarDates = _a.disableCalendarDates, selectedPath = _a.selectedPath, language = _a.language, filtersRef = _a.filtersRef;
|
|
12069
|
+
return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12070
|
+
React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12071
|
+
React.createElement("div", { className: "will-dates-filter-container" },
|
|
12072
|
+
React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12073
|
+
});
|
|
12074
|
+
Dates.displayName = 'Dates';
|
|
12075
|
+
|
|
12028
12076
|
function FilterBar(_a) {
|
|
12029
12077
|
var _b;
|
|
12030
12078
|
var _c = _a.language, language = _c === void 0 ? LANGUAGE_FALLBACK : _c, _d = _a.ageCategories, ageCategories = _d === void 0 ? AGE_CATEGORIES_FALLBACK : _d, _e = _a.redirectUrl, redirectUrl = _e === void 0 ? REDIRECT_URL_FALLBACK : _e, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, outerLoading = _a.outerLoading, locations = _a.locations;
|
|
@@ -12034,7 +12082,7 @@ function FilterBar(_a) {
|
|
|
12034
12082
|
var t = useTranslation('filterBar').t;
|
|
12035
12083
|
// Refs for SelectButtons
|
|
12036
12084
|
var locationsButtonRef = useRef(null);
|
|
12037
|
-
var
|
|
12085
|
+
var datesButtonRef = useRef(null);
|
|
12038
12086
|
var guestsButtonRef = useRef(null);
|
|
12039
12087
|
var previouslyFocusedButtonRef = useRef(null);
|
|
12040
12088
|
// Filters
|
|
@@ -12088,14 +12136,14 @@ function FilterBar(_a) {
|
|
|
12088
12136
|
React__default.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12089
12137
|
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12090
12138
|
handleSelectedFilter(FilterSections.LOCATIONS);
|
|
12091
|
-
}, active: !!selectedLocations.length, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12139
|
+
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12092
12140
|
React__default.createElement(Divider, null))),
|
|
12093
|
-
React__default.createElement(SelectButton, { ref:
|
|
12141
|
+
React__default.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12094
12142
|
? parsedDates
|
|
12095
12143
|
: selectedPath === Pages.ROOMS
|
|
12096
12144
|
? t('calendar.roomsLabelPlaceholder')
|
|
12097
12145
|
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12098
|
-
previouslyFocusedButtonRef.current =
|
|
12146
|
+
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12099
12147
|
handleSelectedFilter(FilterSections.CALENDAR);
|
|
12100
12148
|
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12101
12149
|
selectedPath !== Pages.EVENTS && (React__default.createElement(React__default.Fragment, null,
|
|
@@ -12106,14 +12154,14 @@ function FilterBar(_a) {
|
|
|
12106
12154
|
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12107
12155
|
React__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12108
12156
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12109
|
-
React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
12110
12157
|
selectedFilter === FilterSections.CALENDAR && (React__default.createElement("div", { id: "will-calendar-filter" },
|
|
12111
|
-
React__default.createElement(
|
|
12158
|
+
React__default.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12112
12159
|
selectedFilter === FilterSections.GUESTS && (React__default.createElement("div", { id: "will-guests-filter" },
|
|
12113
|
-
React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true }))),
|
|
12114
|
-
selectedFilter === FilterSections.CATEGORIES && (React__default.createElement(
|
|
12160
|
+
React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12161
|
+
selectedFilter === FilterSections.CATEGORIES && (React__default.createElement("div", { id: "will-categories-filter" },
|
|
12162
|
+
React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12115
12163
|
selectedFilter === FilterSections.LOCATIONS && (React__default.createElement("div", { id: "will-locations-filter" },
|
|
12116
|
-
React__default.createElement(Locations, { locations: locations === null || locations === void 0 ? void 0 : locations.data,
|
|
12164
|
+
React__default.createElement(Locations, { autoFocus: true, ref: filtersRef, locations: locations === null || locations === void 0 ? void 0 : locations.data, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, onClose: function () { return handleSelectedFilter(false); } })))))));
|
|
12117
12165
|
}
|
|
12118
12166
|
////////////
|
|
12119
12167
|
var AGE_CATEGORIES_FALLBACK = [
|