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.js
CHANGED
|
@@ -116,8 +116,8 @@ function styleInject(css, ref) {
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
var css_248z$
|
|
120
|
-
styleInject(css_248z$
|
|
119
|
+
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}";
|
|
120
|
+
styleInject(css_248z$b);
|
|
121
121
|
|
|
122
122
|
/**
|
|
123
123
|
* Primary UI component for user interaction
|
|
@@ -387,15 +387,15 @@ function useTranslation(ns) {
|
|
|
387
387
|
});
|
|
388
388
|
}
|
|
389
389
|
|
|
390
|
-
var css_248z$
|
|
391
|
-
styleInject(css_248z$
|
|
390
|
+
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}";
|
|
391
|
+
styleInject(css_248z$a);
|
|
392
392
|
|
|
393
393
|
function Divider() {
|
|
394
394
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
395
395
|
}
|
|
396
396
|
|
|
397
|
-
var css_248z$
|
|
398
|
-
styleInject(css_248z$
|
|
397
|
+
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";
|
|
398
|
+
styleInject(css_248z$9);
|
|
399
399
|
|
|
400
400
|
function SelectButton(_a) {
|
|
401
401
|
var label = _a.label, onClick = _a.onClick, style = _a.style;
|
|
@@ -478,8 +478,8 @@ function FaSearch (props) {
|
|
|
478
478
|
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);
|
|
479
479
|
}
|
|
480
480
|
|
|
481
|
-
var css_248z$
|
|
482
|
-
styleInject(css_248z$
|
|
481
|
+
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";
|
|
482
|
+
styleInject(css_248z$8);
|
|
483
483
|
|
|
484
484
|
function SubmitButton(_a) {
|
|
485
485
|
var onClick = _a.onClick;
|
|
@@ -7872,11 +7872,11 @@ var reactResponsive = {exports: {}};
|
|
|
7872
7872
|
|
|
7873
7873
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7874
7874
|
|
|
7875
|
-
var css_248z$
|
|
7876
|
-
styleInject(css_248z$
|
|
7875
|
+
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}";
|
|
7876
|
+
styleInject(css_248z$7);
|
|
7877
7877
|
|
|
7878
|
-
var css_248z$
|
|
7879
|
-
styleInject(css_248z$
|
|
7878
|
+
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";
|
|
7879
|
+
styleInject(css_248z$6);
|
|
7880
7880
|
|
|
7881
7881
|
var currentMonth = new Date();
|
|
7882
7882
|
function Calendar(_a) {
|
|
@@ -7898,8 +7898,8 @@ function Calendar(_a) {
|
|
|
7898
7898
|
React__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 }))));
|
|
7899
7899
|
}
|
|
7900
7900
|
|
|
7901
|
-
var css_248z$
|
|
7902
|
-
styleInject(css_248z$
|
|
7901
|
+
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}";
|
|
7902
|
+
styleInject(css_248z$5);
|
|
7903
7903
|
|
|
7904
7904
|
function GuestCount(_a) {
|
|
7905
7905
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7922,8 +7922,8 @@ function GuestCount(_a) {
|
|
|
7922
7922
|
React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7923
7923
|
}
|
|
7924
7924
|
|
|
7925
|
-
var css_248z$
|
|
7926
|
-
styleInject(css_248z$
|
|
7925
|
+
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}";
|
|
7926
|
+
styleInject(css_248z$4);
|
|
7927
7927
|
|
|
7928
7928
|
function Guests(_a) {
|
|
7929
7929
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7935,8 +7935,8 @@ function Guests(_a) {
|
|
|
7935
7935
|
category.minVal })); }))));
|
|
7936
7936
|
}
|
|
7937
7937
|
|
|
7938
|
-
var css_248z$
|
|
7939
|
-
styleInject(css_248z$
|
|
7938
|
+
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";
|
|
7939
|
+
styleInject(css_248z$3);
|
|
7940
7940
|
|
|
7941
7941
|
function Categories(_a) {
|
|
7942
7942
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -8006,7 +8006,6 @@ function useFilterBar(ageCategories) {
|
|
|
8006
8006
|
var _a = React__default.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
|
|
8007
8007
|
var _b = React__default.useState(), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
8008
8008
|
var _c = React__default.useState(0), categories = _c[0], setCategories = _c[1];
|
|
8009
|
-
//
|
|
8010
8009
|
var _d = React__default.useState({}), ageCategoryCounts = _d[0], setAgeCategoryCounts = _d[1];
|
|
8011
8010
|
var updateGuestsCount = function (id, newCount) {
|
|
8012
8011
|
setAgeCategoryCounts(function (prevCounts) {
|
|
@@ -8014,7 +8013,6 @@ function useFilterBar(ageCategories) {
|
|
|
8014
8013
|
return (__assign(__assign({}, prevCounts), (_a = {}, _a[id] = newCount, _a)));
|
|
8015
8014
|
});
|
|
8016
8015
|
};
|
|
8017
|
-
//
|
|
8018
8016
|
React__default.useEffect(function () {
|
|
8019
8017
|
var urlSearchParams = new URLSearchParams(window.location.search);
|
|
8020
8018
|
var startDateParam = urlSearchParams.get('startDate');
|
|
@@ -8059,6 +8057,11 @@ function useFilterBar(ageCategories) {
|
|
|
8059
8057
|
document.body.style.overflow = 'visible';
|
|
8060
8058
|
};
|
|
8061
8059
|
}, [selectedFilter]);
|
|
8060
|
+
var handleResetFilters = function () {
|
|
8061
|
+
setAgeCategoryCounts({});
|
|
8062
|
+
handleSubmit();
|
|
8063
|
+
setSelectedFilter(false);
|
|
8064
|
+
};
|
|
8062
8065
|
return {
|
|
8063
8066
|
selectedFilter: selectedFilter,
|
|
8064
8067
|
ageCategoryCounts: ageCategoryCounts,
|
|
@@ -8071,14 +8074,15 @@ function useFilterBar(ageCategories) {
|
|
|
8071
8074
|
handleSelectedFilter: handleSelectedFilter,
|
|
8072
8075
|
handleSubmit: handleSubmit,
|
|
8073
8076
|
updateGuestsCount: updateGuestsCount,
|
|
8077
|
+
handleResetFilters: handleResetFilters,
|
|
8074
8078
|
};
|
|
8075
8079
|
}
|
|
8076
8080
|
|
|
8077
|
-
var css_248z$
|
|
8078
|
-
styleInject(css_248z$
|
|
8081
|
+
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";
|
|
8082
|
+
styleInject(css_248z$2);
|
|
8079
8083
|
|
|
8080
|
-
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}";
|
|
8081
|
-
styleInject(css_248z);
|
|
8084
|
+
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}";
|
|
8085
|
+
styleInject(css_248z$1);
|
|
8082
8086
|
|
|
8083
8087
|
const consoleLogger = {
|
|
8084
8088
|
type: 'logger',
|
|
@@ -10418,29 +10422,43 @@ instance.use(initReactI18next).init({
|
|
|
10418
10422
|
},
|
|
10419
10423
|
});
|
|
10420
10424
|
|
|
10425
|
+
// THIS FILE IS AUTO GENERATED
|
|
10426
|
+
function IoIosCloseCircleOutline (props) {
|
|
10427
|
+
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);
|
|
10428
|
+
}
|
|
10429
|
+
|
|
10430
|
+
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";
|
|
10431
|
+
styleInject(css_248z);
|
|
10432
|
+
|
|
10433
|
+
function CloseButton(_a) {
|
|
10434
|
+
var handleClose = _a.handleClose;
|
|
10435
|
+
return (React__default.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
|
|
10436
|
+
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10437
|
+
}
|
|
10438
|
+
|
|
10421
10439
|
function FilterBar(_a) {
|
|
10422
10440
|
var vendor = _a.vendor, language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? ageCategoriesFallback : _b;
|
|
10423
10441
|
var themeClass = useTheme({ vendor: vendor });
|
|
10424
10442
|
var _c = React__default.useState(0); _c[0]; var setRerenderKey = _c[1];
|
|
10425
10443
|
React__default.useEffect(function () {
|
|
10426
10444
|
instance.changeLanguage(language);
|
|
10427
|
-
// Trigger a re-render by updating the rerenderKey
|
|
10428
10445
|
setRerenderKey(function (prevKey) { return prevKey + 1; });
|
|
10429
10446
|
}, [language]);
|
|
10430
10447
|
var t = useTranslation('filterBar').t;
|
|
10431
|
-
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;
|
|
10448
|
+
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;
|
|
10432
10449
|
return (React__default.createElement(React__default.Fragment, null,
|
|
10433
10450
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
|
|
10434
10451
|
handleSelectedFilter(false);
|
|
10435
10452
|
} })),
|
|
10436
|
-
React__default.createElement("div", { className: "will-root ".concat(themeClass) },
|
|
10453
|
+
React__default.createElement("div", { className: "will-root ".concat(themeClass), style: { position: selectedFilter ? 'absolute' : 'initial' } },
|
|
10437
10454
|
React__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10438
10455
|
React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); } }),
|
|
10439
10456
|
React__default.createElement(Divider, null),
|
|
10440
10457
|
React__default.createElement(SelectButton, { style: fontWigthBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); } }),
|
|
10441
10458
|
React__default.createElement(Divider, null),
|
|
10442
10459
|
React__default.createElement(SelectButton, { label: t('guests.label'), onClick: function () { return handleSelectedFilter(3); }, style: fontWigthBold(selectedFilter === 3) }),
|
|
10443
|
-
React__default.createElement(SubmitButton, { onClick: handleSubmit })
|
|
10460
|
+
React__default.createElement(SubmitButton, { onClick: handleSubmit }),
|
|
10461
|
+
React__default.createElement(CloseButton, { handleClose: handleResetFilters })),
|
|
10444
10462
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10445
10463
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
10446
10464
|
selectedFilter === 3 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
|