willba-component-library 0.0.82 → 0.0.84
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/components/close-button/CloseButton.d.ts +7 -0
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +1 -0
- package/lib/index.esm.js +46 -28
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +46 -28
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +46 -28
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +16 -4
- package/src/components/FilterBar/FilterBar.tsx +8 -2
- package/src/components/FilterBar/components/calendar/Calendar.css +1 -1
- package/src/components/FilterBar/components/close-button/CloseButton.css +27 -0
- package/src/components/FilterBar/components/close-button/CloseButton.tsx +16 -0
- package/src/components/FilterBar/components/divider/Divider.css +1 -1
- package/src/components/FilterBar/components/guests/GuestCount/GuestCount.css +1 -1
- package/src/components/FilterBar/components/guests/Guests.css +1 -1
- package/src/components/FilterBar/components/select-button/SelectButton.css +1 -1
- package/src/components/FilterBar/components/submit-button/SubmitButton.css +1 -1
- package/src/components/FilterBar/hooks/useFilterBar.tsx +7 -5
- package/src/themes/Default.css +1 -0
package/lib/index.esm.js
CHANGED
|
@@ -96,8 +96,8 @@ function styleInject(css, ref) {
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
var css_248z$b = ".storybook-button {\r\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n font-weight: 700;\r\n border: 0;\r\n border-radius: 3em;\r\n cursor: pointer;\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n color: white;\r\n background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n color: #333;\r\n background-color: transparent;\r\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n font-size: 12px;\r\n padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n font-size: 14px;\r\n padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n font-size: 16px;\r\n padding: 12px 24px;\r\n}";
|
|
100
|
+
styleInject(css_248z$b);
|
|
101
101
|
|
|
102
102
|
/**
|
|
103
103
|
* Primary UI component for user interaction
|
|
@@ -367,15 +367,15 @@ function useTranslation(ns) {
|
|
|
367
367
|
});
|
|
368
368
|
}
|
|
369
369
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$a = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-divider {\n width: 100%;\n margin: 0 10px;\n height: 1px;\n background-color: #384265;\n }\n}";
|
|
371
|
+
styleInject(css_248z$a);
|
|
372
372
|
|
|
373
373
|
function Divider() {
|
|
374
374
|
return React__default__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
375
375
|
}
|
|
376
376
|
|
|
377
|
-
var css_248z$
|
|
378
|
-
styleInject(css_248z$
|
|
377
|
+
var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 15px;\n text-align: initial;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n margin: 15px 0;\n text-align: center;\n }\n}\n\n\n";
|
|
378
|
+
styleInject(css_248z$9);
|
|
379
379
|
|
|
380
380
|
function SelectButton(_a) {
|
|
381
381
|
var label = _a.label, onClick = _a.onClick, style = _a.style;
|
|
@@ -458,8 +458,8 @@ function FaSearch (props) {
|
|
|
458
458
|
return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
var css_248z$
|
|
462
|
-
styleInject(css_248z$
|
|
461
|
+
var css_248z$8 = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\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}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n margin-bottom: 25px;\n }\n}\n";
|
|
462
|
+
styleInject(css_248z$8);
|
|
463
463
|
|
|
464
464
|
function SubmitButton(_a) {
|
|
465
465
|
var onClick = _a.onClick;
|
|
@@ -7852,11 +7852,11 @@ var reactResponsive = {exports: {}};
|
|
|
7852
7852
|
|
|
7853
7853
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7854
7854
|
|
|
7855
|
-
var css_248z$
|
|
7856
|
-
styleInject(css_248z$
|
|
7855
|
+
var css_248z$7 = ".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}";
|
|
7856
|
+
styleInject(css_248z$7);
|
|
7857
7857
|
|
|
7858
|
-
var css_248z$
|
|
7859
|
-
styleInject(css_248z$
|
|
7858
|
+
var css_248z$6 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n padding: 15px 0;\n border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n text-align: left;\n}\n\n.will-calendar-filter-container {\n display: flex;\n justify-content: center;\n padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px; /* Adjust this value to make the DayPicker bigger */\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 left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\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: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\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}\n\n\n";
|
|
7859
|
+
styleInject(css_248z$6);
|
|
7860
7860
|
|
|
7861
7861
|
var currentMonth = new Date();
|
|
7862
7862
|
function Calendar(_a) {
|
|
@@ -7878,8 +7878,8 @@ function Calendar(_a) {
|
|
|
7878
7878
|
React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, fixedWeeks: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, max: 31, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7879
7879
|
}
|
|
7880
7880
|
|
|
7881
|
-
var css_248z$
|
|
7882
|
-
styleInject(css_248z$
|
|
7881
|
+
var css_248z$5 = ".will-guests-filter-label, .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}\n\n.will-guests-filter-inner {\n margin-top: 30px;\n margin-right: 50px;\n}\n\n.will-guests-filter-label {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\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-button {\n border-radius: 50%;\n border: none;\n background-color: var(--will-onahau);\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
|
|
7882
|
+
styleInject(css_248z$5);
|
|
7883
7883
|
|
|
7884
7884
|
function GuestCount(_a) {
|
|
7885
7885
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7902,8 +7902,8 @@ function GuestCount(_a) {
|
|
|
7902
7902
|
React__default__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7903
7903
|
}
|
|
7904
7904
|
|
|
7905
|
-
var css_248z$
|
|
7906
|
-
styleInject(css_248z$
|
|
7905
|
+
var css_248z$4 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-container {\n margin-top: 15px;\n }\n}";
|
|
7906
|
+
styleInject(css_248z$4);
|
|
7907
7907
|
|
|
7908
7908
|
function Guests(_a) {
|
|
7909
7909
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7915,8 +7915,8 @@ function Guests(_a) {
|
|
|
7915
7915
|
category.minVal })); }))));
|
|
7916
7916
|
}
|
|
7917
7917
|
|
|
7918
|
-
var css_248z$
|
|
7919
|
-
styleInject(css_248z$
|
|
7918
|
+
var css_248z$3 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
|
|
7919
|
+
styleInject(css_248z$3);
|
|
7920
7920
|
|
|
7921
7921
|
function Categories(_a) {
|
|
7922
7922
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -7986,7 +7986,6 @@ function useFilterBar(ageCategories) {
|
|
|
7986
7986
|
var _a = useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
|
|
7987
7987
|
var _b = useState(), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
7988
7988
|
var _c = useState(0), categories = _c[0], setCategories = _c[1];
|
|
7989
|
-
//
|
|
7990
7989
|
var _d = useState({}), ageCategoryCounts = _d[0], setAgeCategoryCounts = _d[1];
|
|
7991
7990
|
var updateGuestsCount = function (id, newCount) {
|
|
7992
7991
|
setAgeCategoryCounts(function (prevCounts) {
|
|
@@ -7994,7 +7993,6 @@ function useFilterBar(ageCategories) {
|
|
|
7994
7993
|
return (__assign(__assign({}, prevCounts), (_a = {}, _a[id] = newCount, _a)));
|
|
7995
7994
|
});
|
|
7996
7995
|
};
|
|
7997
|
-
//
|
|
7998
7996
|
useEffect(function () {
|
|
7999
7997
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
8000
7998
|
var startDateParam = urlSearchParams.get('startDate');
|
|
@@ -8039,6 +8037,11 @@ function useFilterBar(ageCategories) {
|
|
|
8039
8037
|
document.body.style.overflow = 'visible';
|
|
8040
8038
|
};
|
|
8041
8039
|
}, [selectedFilter]);
|
|
8040
|
+
var handleResetFilters = function () {
|
|
8041
|
+
setAgeCategoryCounts({});
|
|
8042
|
+
handleSubmit();
|
|
8043
|
+
setSelectedFilter(false);
|
|
8044
|
+
};
|
|
8042
8045
|
return {
|
|
8043
8046
|
selectedFilter: selectedFilter,
|
|
8044
8047
|
ageCategoryCounts: ageCategoryCounts,
|
|
@@ -8051,14 +8054,15 @@ function useFilterBar(ageCategories) {
|
|
|
8051
8054
|
handleSelectedFilter: handleSelectedFilter,
|
|
8052
8055
|
handleSubmit: handleSubmit,
|
|
8053
8056
|
updateGuestsCount: updateGuestsCount,
|
|
8057
|
+
handleResetFilters: handleResetFilters,
|
|
8054
8058
|
};
|
|
8055
8059
|
}
|
|
8056
8060
|
|
|
8057
|
-
var css_248z$
|
|
8058
|
-
styleInject(css_248z$
|
|
8061
|
+
var css_248z$2 = ".will-root {\r\n z-index: 99999;\r\n width: 100%;\r\n max-height: 100vh;\r\n position: relative;\r\n \r\n}\r\n\r\n.will-filter-bar {\r\n box-sizing: border-box;\r\n position: relative;\r\n}\r\n\r\n.will-filter-bar-underlay {\r\n background-color: var(--will-underlay);\r\n position: absolute;\r\n top:0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n cursor: pointer;\r\n min-height: 200vh;\r\n z-index: 88888;\r\n}\r\n\r\n/* Header */\r\n.will-filter-bar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n \r\n border-radius: 40px;\r\n background-color: var(--will-white);\r\n box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n .will-filter-bar-header {\r\n flex-direction: column;\r\n padding: 20px;\r\n }\r\n}\r\n\r\n/* Container */\r\n\r\n.will-filter-bar-container {\r\n background-color: var(--will-white);\r\n min-height: 100px;\r\n \r\n padding: 90px 40px 30px 40px;\r\n position: absolute;\r\n top: 0;\r\n z-index: 111;\r\n border-radius: 25px;\r\n width: -webkit-fill-available;\r\n box-shadow: var(--will-box-shadow);\r\n}\r\n\r\n@media (max-width: 960px) {\r\n .will-root { \r\n overflow-y: scroll;\r\n \r\n padding: 40px 10px;\r\n top: 15px;\r\n }\r\n\r\n .will-filter-bar-container {\r\n margin-top: 20px;\r\n padding: 30px 40px;\r\n position: initial;\r\n }\r\n\r\n\r\n\r\n \r\n}\r\n\r\n";
|
|
8062
|
+
styleInject(css_248z$2);
|
|
8059
8063
|
|
|
8060
|
-
var css_248z = "@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 /* Pallete */\n --will-primary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n \n\n /* Confines */\n --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n /* Breakpoints */\n\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/* Overrides as themes */\n\n.will-root-kis {\n --will-primary: #374269;\n}\n\n.will-root-paj {\n --will-primary: #1897D8;\n}";
|
|
8061
|
-
styleInject(css_248z);
|
|
8064
|
+
var css_248z$1 = "@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 /* Pallete */\n --will-primary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-underlay: rgba(0,0,0,.8)\n \n\n /* Confines */\n --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n /* Breakpoints */\n\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/* Overrides as themes */\n\n.will-root-kis {\n --will-primary: #374269;\n}\n\n.will-root-paj {\n --will-primary: #1897D8;\n}";
|
|
8065
|
+
styleInject(css_248z$1);
|
|
8062
8066
|
|
|
8063
8067
|
const consoleLogger = {
|
|
8064
8068
|
type: 'logger',
|
|
@@ -10398,29 +10402,43 @@ instance.use(initReactI18next).init({
|
|
|
10398
10402
|
},
|
|
10399
10403
|
});
|
|
10400
10404
|
|
|
10405
|
+
// THIS FILE IS AUTO GENERATED
|
|
10406
|
+
function IoIosCloseCircleOutline (props) {
|
|
10407
|
+
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);
|
|
10408
|
+
}
|
|
10409
|
+
|
|
10410
|
+
var css_248z = ".will-filter-bar-close-button {\n width: auto;\n height: auto;\n background-color: var(--will-grey);\n color: var(--will-white);\n padding: 2px 7px;\n border-radius: 50%;\n cursor: pointer;\n border: none;\n display: flex;\n align-items: center;\n font-size: 25px;\n margin-left: 15px;\n display: none;\n}\n\n@media (max-width: 960px) {\n .will-filter-bar-close-button {\n min-height: 35px;\n border-radius: 25px;\n margin-left:0;\n margin-bottom: 25px;\n display: flex;\n justify-content: center;\n \n }\n}\n";
|
|
10411
|
+
styleInject(css_248z);
|
|
10412
|
+
|
|
10413
|
+
function CloseButton(_a) {
|
|
10414
|
+
var handleClose = _a.handleClose;
|
|
10415
|
+
return (React__default__default.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
10416
|
+
React__default__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10417
|
+
}
|
|
10418
|
+
|
|
10401
10419
|
function FilterBar(_a) {
|
|
10402
10420
|
var vendor = _a.vendor, language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? ageCategoriesFallback : _b;
|
|
10403
10421
|
var themeClass = useTheme({ vendor: vendor });
|
|
10404
10422
|
var _c = useState(0); _c[0]; var setRerenderKey = _c[1];
|
|
10405
10423
|
useEffect(function () {
|
|
10406
10424
|
instance.changeLanguage(language);
|
|
10407
|
-
// Trigger a re-render by updating the rerenderKey
|
|
10408
10425
|
setRerenderKey(function (prevKey) { return prevKey + 1; });
|
|
10409
10426
|
}, [language]);
|
|
10410
10427
|
var t = useTranslation('filterBar').t;
|
|
10411
|
-
var _d = useFilterBar(), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount;
|
|
10428
|
+
var _d = useFilterBar(), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, handleResetFilters = _d.handleResetFilters;
|
|
10412
10429
|
return (React__default__default.createElement(React__default__default.Fragment, null,
|
|
10413
10430
|
selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
|
|
10414
10431
|
handleSelectedFilter(false);
|
|
10415
10432
|
} })),
|
|
10416
|
-
React__default__default.createElement("div", { className: "will-root ".concat(themeClass) },
|
|
10433
|
+
React__default__default.createElement("div", { className: "will-root ".concat(themeClass), style: { position: selectedFilter ? 'absolute' : 'initial' } },
|
|
10417
10434
|
React__default__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10418
10435
|
React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
|
|
10419
10436
|
React__default__default.createElement(Divider, null),
|
|
10420
10437
|
React__default__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),
|
|
10421
10438
|
React__default__default.createElement(Divider, null),
|
|
10422
10439
|
React__default__default.createElement(SelectButton, { label: t('guests.label'), onClick: function () { return handleSelectedFilter(3); }, style: fontWigthBold(selectedFilter === 3) }),
|
|
10423
|
-
React__default__default.createElement(SubmitButton, { onClick: handleSubmit })
|
|
10440
|
+
React__default__default.createElement(SubmitButton, { onClick: handleSubmit }),
|
|
10441
|
+
React__default__default.createElement(CloseButton, { handleClose: handleResetFilters })),
|
|
10424
10442
|
selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10425
10443
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
10426
10444
|
selectedFilter === 3 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
|