willba-component-library 0.3.5 → 0.3.7
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 +21 -5
- 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 +16 -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 +93 -45
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +93 -45
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +93 -45
- 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 +21 -13
- 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 +59 -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
package/lib/index.umd.js
CHANGED
|
@@ -213,8 +213,8 @@
|
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
|
|
216
|
-
var css_248z$
|
|
217
|
-
styleInject(css_248z$
|
|
216
|
+
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}";
|
|
217
|
+
styleInject(css_248z$g);
|
|
218
218
|
|
|
219
219
|
/**
|
|
220
220
|
* Primary UI component for user interaction
|
|
@@ -572,8 +572,8 @@
|
|
|
572
572
|
return themePalette;
|
|
573
573
|
}
|
|
574
574
|
|
|
575
|
-
var css_248z$
|
|
576
|
-
styleInject(css_248z$
|
|
575
|
+
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";
|
|
576
|
+
styleInject(css_248z$f);
|
|
577
577
|
|
|
578
578
|
var useAwaitRender = function () {
|
|
579
579
|
var _a = __read(React.useState(false), 2), initialRenderComplete = _a[0], setInitialRenderComplete = _a[1];
|
|
@@ -2816,7 +2816,7 @@
|
|
|
2816
2816
|
|
|
2817
2817
|
var locations$1 = {
|
|
2818
2818
|
label: "Locations",
|
|
2819
|
-
title: "
|
|
2819
|
+
title: "Select location",
|
|
2820
2820
|
placeholder: "Add location",
|
|
2821
2821
|
selected: "locations"
|
|
2822
2822
|
};
|
|
@@ -2886,9 +2886,9 @@
|
|
|
2886
2886
|
|
|
2887
2887
|
var locations = {
|
|
2888
2888
|
label: "Sijainnit",
|
|
2889
|
-
title: "
|
|
2889
|
+
title: "Valitse sijainti",
|
|
2890
2890
|
placeholder: "Lisää sijainti",
|
|
2891
|
-
selected: "
|
|
2891
|
+
selected: "sijainnit"
|
|
2892
2892
|
};
|
|
2893
2893
|
var calendar = {
|
|
2894
2894
|
label: "Päivät",
|
|
@@ -3020,8 +3020,8 @@
|
|
|
3020
3020
|
return ref;
|
|
3021
3021
|
};
|
|
3022
3022
|
|
|
3023
|
-
var css_248z$
|
|
3024
|
-
styleInject(css_248z$
|
|
3023
|
+
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";
|
|
3024
|
+
styleInject(css_248z$e);
|
|
3025
3025
|
|
|
3026
3026
|
var SubmitButton = function (_a) {
|
|
3027
3027
|
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
@@ -3035,8 +3035,8 @@
|
|
|
3035
3035
|
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);
|
|
3036
3036
|
}
|
|
3037
3037
|
|
|
3038
|
-
var css_248z$
|
|
3039
|
-
styleInject(css_248z$
|
|
3038
|
+
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";
|
|
3039
|
+
styleInject(css_248z$d);
|
|
3040
3040
|
|
|
3041
3041
|
var CloseButton = function (_a) {
|
|
3042
3042
|
var handleClose = _a.handleClose;
|
|
@@ -11498,11 +11498,11 @@
|
|
|
11498
11498
|
return { newDisableCalendarDates: newDisableCalendarDates, overlappingDate: overlappingDate, lastPossibleCheckout: lastPossibleCheckout };
|
|
11499
11499
|
};
|
|
11500
11500
|
|
|
11501
|
-
var css_248z$
|
|
11502
|
-
styleInject(css_248z$
|
|
11501
|
+
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}";
|
|
11502
|
+
styleInject(css_248z$c);
|
|
11503
11503
|
|
|
11504
|
-
var css_248z$
|
|
11505
|
-
styleInject(css_248z$
|
|
11504
|
+
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";
|
|
11505
|
+
styleInject(css_248z$b);
|
|
11506
11506
|
|
|
11507
11507
|
var Calendar = React.forwardRef(function (_a, ref) {
|
|
11508
11508
|
var _b;
|
|
@@ -11667,14 +11667,28 @@
|
|
|
11667
11667
|
};
|
|
11668
11668
|
};
|
|
11669
11669
|
|
|
11670
|
+
var getLocalizedContent = function (_a) {
|
|
11671
|
+
var _b;
|
|
11672
|
+
var contents = _a.contents, locale = _a.locale, _c = _a.fallbackLocale, fallbackLocale = _c === void 0 ? 'en' : _c;
|
|
11673
|
+
var preferred = contents.find(function (content) { return content.locale === locale; });
|
|
11674
|
+
if (preferred)
|
|
11675
|
+
return preferred.content;
|
|
11676
|
+
var fallback = contents.find(function (content) { return content.locale === fallbackLocale; });
|
|
11677
|
+
if (fallback)
|
|
11678
|
+
return fallback.content;
|
|
11679
|
+
return (_b = contents[0]) === null || _b === void 0 ? void 0 : _b.content;
|
|
11680
|
+
};
|
|
11681
|
+
|
|
11670
11682
|
var parseLocations = function (_a) {
|
|
11671
|
-
var _b,
|
|
11672
|
-
var selectedLocations = _a.selectedLocations, language = _a.language, locationsPlaceholder = _a.locationsPlaceholder, _d = _a.locationsSelectedLabel, locationsSelectedLabel = _d === void 0 ? 'locations' : _d;
|
|
11683
|
+
var selectedLocations = _a.selectedLocations, language = _a.language, locationsPlaceholder = _a.locationsPlaceholder, _b = _a.locationsSelectedLabel, locationsSelectedLabel = _b === void 0 ? 'locations' : _b;
|
|
11673
11684
|
if (!selectedLocations.length) {
|
|
11674
11685
|
return locationsPlaceholder;
|
|
11675
11686
|
}
|
|
11676
11687
|
if (selectedLocations.length === 1) {
|
|
11677
|
-
var translation = (
|
|
11688
|
+
var translation = getLocalizedContent({
|
|
11689
|
+
contents: selectedLocations[0].label,
|
|
11690
|
+
locale: language,
|
|
11691
|
+
});
|
|
11678
11692
|
if (!translation) {
|
|
11679
11693
|
return locationsPlaceholder;
|
|
11680
11694
|
}
|
|
@@ -11883,12 +11897,12 @@
|
|
|
11883
11897
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11884
11898
|
};
|
|
11885
11899
|
|
|
11886
|
-
var css_248z$
|
|
11887
|
-
styleInject(css_248z$
|
|
11900
|
+
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";
|
|
11901
|
+
styleInject(css_248z$a);
|
|
11888
11902
|
|
|
11889
11903
|
var SelectButton = React.forwardRef(function (_a, ref) {
|
|
11890
|
-
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11891
|
-
return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true" },
|
|
11904
|
+
var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, disabled = _a.disabled, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
|
|
11905
|
+
return (React.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 },
|
|
11892
11906
|
React.createElement("span", { className: "select-button-wrapper" },
|
|
11893
11907
|
React.createElement("div", null,
|
|
11894
11908
|
React.createElement("p", { className: "select-button-label" }, label),
|
|
@@ -11896,16 +11910,16 @@
|
|
|
11896
11910
|
});
|
|
11897
11911
|
SelectButton.displayName = 'SelectButton';
|
|
11898
11912
|
|
|
11899
|
-
var css_248z$
|
|
11900
|
-
styleInject(css_248z$
|
|
11913
|
+
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";
|
|
11914
|
+
styleInject(css_248z$9);
|
|
11901
11915
|
|
|
11902
11916
|
var TabButton = function (_a) {
|
|
11903
11917
|
var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
|
|
11904
11918
|
return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
|
|
11905
11919
|
};
|
|
11906
11920
|
|
|
11907
|
-
var css_248z$
|
|
11908
|
-
styleInject(css_248z$
|
|
11921
|
+
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";
|
|
11922
|
+
styleInject(css_248z$8);
|
|
11909
11923
|
|
|
11910
11924
|
var GuestCount = function (_a) {
|
|
11911
11925
|
var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -11938,15 +11952,25 @@
|
|
|
11938
11952
|
React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
|
|
11939
11953
|
};
|
|
11940
11954
|
|
|
11941
|
-
var css_248z$
|
|
11955
|
+
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";
|
|
11956
|
+
styleInject(css_248z$7);
|
|
11957
|
+
|
|
11958
|
+
var FilterSectionHeader = function (_a) {
|
|
11959
|
+
var title = _a.title, action = _a.action;
|
|
11960
|
+
return (React.createElement("div", { className: "will-filter-section-header" },
|
|
11961
|
+
React.createElement("h3", { className: "will-filter-section-title" }, title),
|
|
11962
|
+
action && React.createElement("div", { className: "will-filter-section-action" }, action)));
|
|
11963
|
+
};
|
|
11964
|
+
|
|
11965
|
+
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";
|
|
11942
11966
|
styleInject(css_248z$6);
|
|
11943
11967
|
|
|
11944
11968
|
var Guests = React.forwardRef(function (_a, ref) {
|
|
11945
|
-
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus;
|
|
11969
|
+
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus, onClose = _a.onClose;
|
|
11946
11970
|
var t = useTranslation('filterBar').t;
|
|
11947
11971
|
var containerRef = useAutoFocus(autoFocus);
|
|
11948
11972
|
return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
|
|
11949
|
-
React.createElement(
|
|
11973
|
+
React.createElement(FilterSectionHeader, { title: t('guests.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
11950
11974
|
React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.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 })); }))));
|
|
11951
11975
|
});
|
|
11952
11976
|
Guests.displayName = 'Guests';
|
|
@@ -11982,7 +12006,7 @@
|
|
|
11982
12006
|
React.createElement("span", null, itm))); }))));
|
|
11983
12007
|
};
|
|
11984
12008
|
|
|
11985
|
-
var css_248z$3 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-
|
|
12009
|
+
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";
|
|
11986
12010
|
styleInject(css_248z$3);
|
|
11987
12011
|
|
|
11988
12012
|
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";
|
|
@@ -12033,20 +12057,44 @@
|
|
|
12033
12057
|
}
|
|
12034
12058
|
};
|
|
12035
12059
|
return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
|
|
12036
|
-
React.createElement(
|
|
12060
|
+
React.createElement(FilterSectionHeader, { title: t('locations.title'), action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12037
12061
|
React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
|
|
12038
12062
|
locations
|
|
12039
|
-
.filter(function (location) {
|
|
12063
|
+
.filter(function (location) {
|
|
12064
|
+
var label = getLocalizedContent({
|
|
12065
|
+
contents: location.label,
|
|
12066
|
+
locale: language,
|
|
12067
|
+
});
|
|
12068
|
+
return !!label;
|
|
12069
|
+
})
|
|
12040
12070
|
.map(function (location, index) {
|
|
12041
|
-
var
|
|
12042
|
-
|
|
12071
|
+
var label = getLocalizedContent({
|
|
12072
|
+
contents: location.label,
|
|
12073
|
+
locale: language,
|
|
12074
|
+
});
|
|
12075
|
+
var description = location.description
|
|
12076
|
+
? getLocalizedContent({
|
|
12077
|
+
contents: location.description,
|
|
12078
|
+
locale: language,
|
|
12079
|
+
})
|
|
12080
|
+
: null;
|
|
12081
|
+
return (React.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); } }));
|
|
12043
12082
|
}))));
|
|
12044
12083
|
});
|
|
12045
12084
|
Locations.displayName = 'Locations';
|
|
12046
12085
|
|
|
12047
|
-
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:
|
|
12086
|
+
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";
|
|
12048
12087
|
styleInject(css_248z$1);
|
|
12049
12088
|
|
|
12089
|
+
var Dates = React.forwardRef(function (_a, ref) {
|
|
12090
|
+
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;
|
|
12091
|
+
return (React.createElement("div", { className: "will-filter-bar-dates", ref: ref },
|
|
12092
|
+
React.createElement(FilterSectionHeader, { title: '', action: onClose && React.createElement(CloseButton, { handleClose: onClose }) }),
|
|
12093
|
+
React.createElement("div", { className: "will-dates-filter-container" },
|
|
12094
|
+
React.createElement(Calendar, { autoFocus: autoFocus, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef }))));
|
|
12095
|
+
});
|
|
12096
|
+
Dates.displayName = 'Dates';
|
|
12097
|
+
|
|
12050
12098
|
function FilterBar(_a) {
|
|
12051
12099
|
var _b;
|
|
12052
12100
|
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;
|
|
@@ -12056,7 +12104,7 @@
|
|
|
12056
12104
|
var t = useTranslation('filterBar').t;
|
|
12057
12105
|
// Refs for SelectButtons
|
|
12058
12106
|
var locationsButtonRef = React.useRef(null);
|
|
12059
|
-
var
|
|
12107
|
+
var datesButtonRef = React.useRef(null);
|
|
12060
12108
|
var guestsButtonRef = React.useRef(null);
|
|
12061
12109
|
var previouslyFocusedButtonRef = React.useRef(null);
|
|
12062
12110
|
// Filters
|
|
@@ -12110,14 +12158,14 @@
|
|
|
12110
12158
|
React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
|
|
12111
12159
|
previouslyFocusedButtonRef.current = locationsButtonRef.current;
|
|
12112
12160
|
handleSelectedFilter(FilterSections.LOCATIONS);
|
|
12113
|
-
}, active: !!selectedLocations.length, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12161
|
+
}, active: !!selectedLocations.length, disabled: locations === null || locations === void 0 ? void 0 : locations.disabled, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
|
|
12114
12162
|
React.createElement(Divider, null))),
|
|
12115
|
-
React.createElement(SelectButton, { ref:
|
|
12163
|
+
React.createElement(SelectButton, { ref: datesButtonRef, label: t('calendar.label'), description: parsedDates
|
|
12116
12164
|
? parsedDates
|
|
12117
12165
|
: selectedPath === Pages.ROOMS
|
|
12118
12166
|
? t('calendar.roomsLabelPlaceholder')
|
|
12119
12167
|
: t('calendar.eventsLabelPlaceholder'), onClick: function () {
|
|
12120
|
-
previouslyFocusedButtonRef.current =
|
|
12168
|
+
previouslyFocusedButtonRef.current = datesButtonRef.current;
|
|
12121
12169
|
handleSelectedFilter(FilterSections.CALENDAR);
|
|
12122
12170
|
}, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
|
|
12123
12171
|
selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
|
|
@@ -12128,14 +12176,14 @@
|
|
|
12128
12176
|
}, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
|
|
12129
12177
|
React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
|
|
12130
12178
|
selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
|
|
12131
|
-
React.createElement(
|
|
12132
|
-
|
|
12133
|
-
React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef, autoFocus: true }))),
|
|
12179
|
+
selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-dates-filter" },
|
|
12180
|
+
React.createElement(Dates, { autoFocus: true, ref: filtersRef, onClose: function () { return handleSelectedFilter(false); }, calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, filtersRef: filtersRef }))),
|
|
12134
12181
|
selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
|
|
12135
|
-
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true }))),
|
|
12136
|
-
selectedFilter === FilterSections.CATEGORIES && (React.createElement(
|
|
12182
|
+
React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }))),
|
|
12183
|
+
selectedFilter === FilterSections.CATEGORIES && (React.createElement("div", { id: "will-categories-filter" },
|
|
12184
|
+
React.createElement(Categories, { categories: categories, setCategories: setCategories }))),
|
|
12137
12185
|
selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
|
|
12138
|
-
React.createElement(Locations, { locations: locations === null || locations === void 0 ? void 0 : locations.data,
|
|
12186
|
+
React.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); } })))))));
|
|
12139
12187
|
}
|
|
12140
12188
|
////////////
|
|
12141
12189
|
var AGE_CATEGORIES_FALLBACK = [
|