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