willba-component-library 0.1.16 → 0.1.18
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/FilterBar.d.ts +2 -1
- package/lib/components/FilterBar/components/buttons/tab-button/TabButton.d.ts +9 -0
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +2 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.esm.js +75 -39
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +75 -39
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +75 -39
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.css +13 -2
- package/src/components/FilterBar/FilterBar.tsx +27 -6
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.css +43 -0
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx +20 -0
- package/src/components/FilterBar/hooks/useFilterBar.tsx +20 -1
- package/src/locales/en/filterBar.json +4 -0
- package/src/locales/fi/filterBar.json +4 -0
- package/src/themes/Default.css +3 -1
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$c = ".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}";
|
|
120
|
+
styleInject(css_248z$c);
|
|
121
121
|
|
|
122
122
|
/**
|
|
123
123
|
* Primary UI component for user interaction
|
|
@@ -3827,15 +3827,15 @@ function setYear(dirtyDate, dirtyYear) {
|
|
|
3827
3827
|
return date;
|
|
3828
3828
|
}
|
|
3829
3829
|
|
|
3830
|
-
var css_248z$
|
|
3831
|
-
styleInject(css_248z$
|
|
3830
|
+
var css_248z$b = ".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}";
|
|
3831
|
+
styleInject(css_248z$b);
|
|
3832
3832
|
|
|
3833
3833
|
function Divider() {
|
|
3834
3834
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
3835
3835
|
}
|
|
3836
3836
|
|
|
3837
|
-
var css_248z$
|
|
3838
|
-
styleInject(css_248z$
|
|
3837
|
+
var css_248z$a = ".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.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\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n margin: 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-divider {\n display: none\n }\n}\n\n\n";
|
|
3838
|
+
styleInject(css_248z$a);
|
|
3839
3839
|
|
|
3840
3840
|
function SelectButton(_a) {
|
|
3841
3841
|
var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
|
|
@@ -3925,10 +3925,10 @@ function FaSearch (props) {
|
|
|
3925
3925
|
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);
|
|
3926
3926
|
}
|
|
3927
3927
|
|
|
3928
|
-
var css_248z$
|
|
3929
|
-
styleInject(css_248z$
|
|
3928
|
+
var css_248z$9 = ".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: 15px;\n }\n}\n";
|
|
3929
|
+
styleInject(css_248z$9);
|
|
3930
3930
|
|
|
3931
|
-
function SubmitButton(_a) {
|
|
3931
|
+
function SubmitButton$1(_a) {
|
|
3932
3932
|
var onClick = _a.onClick;
|
|
3933
3933
|
var t = useTranslation('filterBar').t;
|
|
3934
3934
|
return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
|
|
@@ -7905,11 +7905,11 @@ var reactResponsive = {exports: {}};
|
|
|
7905
7905
|
|
|
7906
7906
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7907
7907
|
|
|
7908
|
-
var css_248z$
|
|
7909
|
-
styleInject(css_248z$
|
|
7908
|
+
var css_248z$8 = ".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}";
|
|
7909
|
+
styleInject(css_248z$8);
|
|
7910
7910
|
|
|
7911
|
-
var css_248z$
|
|
7912
|
-
styleInject(css_248z$
|
|
7911
|
+
var css_248z$7 = "/* .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";
|
|
7912
|
+
styleInject(css_248z$7);
|
|
7913
7913
|
|
|
7914
7914
|
var currentMonth = new Date();
|
|
7915
7915
|
function Calendar(_a) {
|
|
@@ -7931,8 +7931,8 @@ function Calendar(_a) {
|
|
|
7931
7931
|
React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7932
7932
|
}
|
|
7933
7933
|
|
|
7934
|
-
var css_248z$
|
|
7935
|
-
styleInject(css_248z$
|
|
7934
|
+
var css_248z$6 = ".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}";
|
|
7935
|
+
styleInject(css_248z$6);
|
|
7936
7936
|
|
|
7937
7937
|
function GuestCount(_a) {
|
|
7938
7938
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7959,8 +7959,8 @@ function GuestCount(_a) {
|
|
|
7959
7959
|
React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7960
7960
|
}
|
|
7961
7961
|
|
|
7962
|
-
var css_248z$
|
|
7963
|
-
styleInject(css_248z$
|
|
7962
|
+
var css_248z$5 = ".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}";
|
|
7963
|
+
styleInject(css_248z$5);
|
|
7964
7964
|
|
|
7965
7965
|
function Guests(_a) {
|
|
7966
7966
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7972,8 +7972,8 @@ function Guests(_a) {
|
|
|
7972
7972
|
category.minVal })); }))));
|
|
7973
7973
|
}
|
|
7974
7974
|
|
|
7975
|
-
var css_248z$
|
|
7976
|
-
styleInject(css_248z$
|
|
7975
|
+
var css_248z$4 = ".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";
|
|
7976
|
+
styleInject(css_248z$4);
|
|
7977
7977
|
|
|
7978
7978
|
function Categories(_a) {
|
|
7979
7979
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -8040,10 +8040,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
8040
8040
|
|
|
8041
8041
|
function useFilterBar(_a) {
|
|
8042
8042
|
var redirectUrl = _a.redirectUrl;
|
|
8043
|
-
var _b = React__default.useState(
|
|
8044
|
-
var _c = React__default.useState(),
|
|
8045
|
-
var _d = React__default.useState(
|
|
8046
|
-
var _e = React__default.useState(
|
|
8043
|
+
var _b = React__default.useState('/events'), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
8044
|
+
var _c = React__default.useState(false), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
8045
|
+
var _d = React__default.useState(), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
8046
|
+
var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
|
|
8047
|
+
var _f = React__default.useState({}), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
8047
8048
|
var updateGuestsCount = function (id, newCount) {
|
|
8048
8049
|
setAgeCategoryCounts(function (prevCounts) {
|
|
8049
8050
|
var _a;
|
|
@@ -8084,7 +8085,7 @@ function useFilterBar(_a) {
|
|
|
8084
8085
|
queryParams.append(key, value.toString());
|
|
8085
8086
|
}
|
|
8086
8087
|
}
|
|
8087
|
-
window.location.href = "".concat(redirectUrl).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8088
|
+
window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8088
8089
|
handleSelectedFilter(false);
|
|
8089
8090
|
};
|
|
8090
8091
|
React__default.useEffect(function () {
|
|
@@ -8093,6 +8094,18 @@ function useFilterBar(_a) {
|
|
|
8093
8094
|
document.body.style.overflow = 'visible';
|
|
8094
8095
|
};
|
|
8095
8096
|
}, [selectedFilter]);
|
|
8097
|
+
React__default.useEffect(function () {
|
|
8098
|
+
var currentPath = '/events'; // Default path name
|
|
8099
|
+
if (typeof window !== 'undefined') {
|
|
8100
|
+
// Get current path name
|
|
8101
|
+
currentPath =
|
|
8102
|
+
window.location.pathname.includes('/events') ||
|
|
8103
|
+
window.location.pathname.includes('/rooms')
|
|
8104
|
+
? window.location.pathname
|
|
8105
|
+
: '/events';
|
|
8106
|
+
setSelectedPath(currentPath);
|
|
8107
|
+
}
|
|
8108
|
+
}, []);
|
|
8096
8109
|
var handleResetFilters = function () {
|
|
8097
8110
|
setAgeCategoryCounts({});
|
|
8098
8111
|
handleSubmit();
|
|
@@ -8103,6 +8116,7 @@ function useFilterBar(_a) {
|
|
|
8103
8116
|
ageCategoryCounts: ageCategoryCounts,
|
|
8104
8117
|
categories: categories,
|
|
8105
8118
|
calendarRange: calendarRange,
|
|
8119
|
+
selectedPath: selectedPath,
|
|
8106
8120
|
setCalendarRange: setCalendarRange,
|
|
8107
8121
|
setSelectedFilter: setSelectedFilter,
|
|
8108
8122
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
@@ -8111,14 +8125,15 @@ function useFilterBar(_a) {
|
|
|
8111
8125
|
handleSubmit: handleSubmit,
|
|
8112
8126
|
updateGuestsCount: updateGuestsCount,
|
|
8113
8127
|
handleResetFilters: handleResetFilters,
|
|
8128
|
+
setSelectedPath: setSelectedPath,
|
|
8114
8129
|
};
|
|
8115
8130
|
}
|
|
8116
8131
|
|
|
8117
|
-
var css_248z$
|
|
8118
|
-
styleInject(css_248z$
|
|
8132
|
+
var css_248z$3 = ".will-root {\n z-index: 99999;\n width: 100%;\n max-height: 100vh;\n position: relative;\n \n}\n\n.will-filter-bar {\n box-sizing: border-box;\n position: relative;\n}\n\n.will-filter-bar-underlay {\n background-color: rgba(0,0,0,.8);\n position: absolute;\n /* top:0; */\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n min-height: 500vh;\n z-index: 88888;\n\n transform: translateY(-50%);\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n display: flex;\n align-items: center;\n width: fit-content;\n position: relative;\n z-index: 222;\n}\n\n/* Header */\n.will-filter-bar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px 20px;\n position: relative;\n z-index: 222;\n \n \n border-radius: 40px;\n border-top-left-radius: 0;\n background-color: var(--will-white);\n \n}\n\n@media (max-width: 960px) {\n .will-filter-bar-header {\n flex-direction: column;\n padding: 20px;\n }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n background-color: var(--will-white);\n min-height: 100px;\n \n padding: 90px 40px 30px 40px;\n position: absolute;\n top: 45px;\n z-index: 111;\n border-radius: 25px;\n width: -webkit-fill-available;\n box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n .will-root { \n overflow-y: auto;\n padding: 40px 10px;\n top: 15px;\n z-index: 0;\n }\n\n .will-filter-bar-container {\n margin-top: 20px;\n padding: 30px 40px;\n position: relative;\n }\n\n .will-root.isMobileAbsolute {\n position: relative;\n z-index: 99999;\n }\n}\n\n";
|
|
8133
|
+
styleInject(css_248z$3);
|
|
8119
8134
|
|
|
8120
|
-
var css_248z$
|
|
8121
|
-
styleInject(css_248z$
|
|
8135
|
+
var css_248z$2 = "@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-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.8);\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}";
|
|
8136
|
+
styleInject(css_248z$2);
|
|
8122
8137
|
|
|
8123
8138
|
const consoleLogger = {
|
|
8124
8139
|
type: 'logger',
|
|
@@ -10411,11 +10426,16 @@ var categories$1 = {
|
|
|
10411
10426
|
var submit$1 = {
|
|
10412
10427
|
label: "Search"
|
|
10413
10428
|
};
|
|
10429
|
+
var tabs$1 = {
|
|
10430
|
+
events: "Events",
|
|
10431
|
+
rooms: "Rooms"
|
|
10432
|
+
};
|
|
10414
10433
|
var enFilterBar = {
|
|
10415
10434
|
calendar: calendar$1,
|
|
10416
10435
|
guests: guests$1,
|
|
10417
10436
|
categories: categories$1,
|
|
10418
|
-
submit: submit$1
|
|
10437
|
+
submit: submit$1,
|
|
10438
|
+
tabs: tabs$1
|
|
10419
10439
|
};
|
|
10420
10440
|
|
|
10421
10441
|
var calendar = {
|
|
@@ -10437,11 +10457,16 @@ var categories = {
|
|
|
10437
10457
|
var submit = {
|
|
10438
10458
|
label: "Hae"
|
|
10439
10459
|
};
|
|
10460
|
+
var tabs = {
|
|
10461
|
+
events: "Events",
|
|
10462
|
+
rooms: "Rooms"
|
|
10463
|
+
};
|
|
10440
10464
|
var fiFilterBar = {
|
|
10441
10465
|
calendar: calendar,
|
|
10442
10466
|
guests: guests,
|
|
10443
10467
|
categories: categories,
|
|
10444
|
-
submit: submit
|
|
10468
|
+
submit: submit,
|
|
10469
|
+
tabs: tabs
|
|
10445
10470
|
};
|
|
10446
10471
|
|
|
10447
10472
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -10465,8 +10490,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
10465
10490
|
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);
|
|
10466
10491
|
}
|
|
10467
10492
|
|
|
10468
|
-
var css_248z = ".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: 80px;\n right: 20px;\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";
|
|
10469
|
-
styleInject(css_248z);
|
|
10493
|
+
var css_248z$1 = ".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: 80px;\n right: 20px;\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";
|
|
10494
|
+
styleInject(css_248z$1);
|
|
10470
10495
|
|
|
10471
10496
|
function CloseButton(_a) {
|
|
10472
10497
|
var handleClose = _a.handleClose;
|
|
@@ -10474,8 +10499,16 @@ function CloseButton(_a) {
|
|
|
10474
10499
|
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10475
10500
|
}
|
|
10476
10501
|
|
|
10502
|
+
var css_248z = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 50px;\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 border: 1px solid var(--will-black);\n border-top: none;\n background-color: var(--will-transparent-white);\n user-select: none;\n font-weight: 600;\n }\n\n /* .will-filter-bar-tab-button:not(:first-child) {\n border-left: none;\n } */\n\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-white);\n }\n\n .will-filter-bar-tab-button.active {\n background-color: var(--will-white);\n border-color: var(--will-white);\n }\n\n\n\n\n \n\n /* @media (max-width: 960px) {\n .will-filter-bar-tab-button {\n justify-content: center;\n margin-bottom: 15px;\n }\n } */\n ";
|
|
10503
|
+
styleInject(css_248z);
|
|
10504
|
+
|
|
10505
|
+
function SubmitButton(_a) {
|
|
10506
|
+
var onClick = _a.onClick, label = _a.label, active = _a.active;
|
|
10507
|
+
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
|
|
10508
|
+
}
|
|
10509
|
+
|
|
10477
10510
|
function FilterBar(_a) {
|
|
10478
|
-
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b
|
|
10511
|
+
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b; _a.currentPath; var _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette;
|
|
10479
10512
|
var themePalette = useTheme({ palette: palette });
|
|
10480
10513
|
// Translations
|
|
10481
10514
|
var _d = React__default.useState(0); _d[0]; var setRerenderKey = _d[1];
|
|
@@ -10485,7 +10518,7 @@ function FilterBar(_a) {
|
|
|
10485
10518
|
}, [language]);
|
|
10486
10519
|
var t = useTranslation('filterBar').t;
|
|
10487
10520
|
// Filters
|
|
10488
|
-
var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount;
|
|
10521
|
+
var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, selectedPath = _e.selectedPath, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount, setSelectedPath = _e.setSelectedPath;
|
|
10489
10522
|
// Scroll in to view
|
|
10490
10523
|
var targetFilterBarRef = React__default.useRef(null);
|
|
10491
10524
|
React__default.useEffect(function () {
|
|
@@ -10503,13 +10536,16 @@ function FilterBar(_a) {
|
|
|
10503
10536
|
handleSelectedFilter(false);
|
|
10504
10537
|
} })),
|
|
10505
10538
|
React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
|
|
10506
|
-
React__default.createElement("div", { className: "will-filter-bar-
|
|
10507
|
-
React__default.createElement(
|
|
10539
|
+
React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
|
|
10540
|
+
React__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
|
|
10541
|
+
React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' })),
|
|
10542
|
+
React__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10543
|
+
React__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
10508
10544
|
? format(calendarRange.from, 'dd.MM.yyyy')
|
|
10509
10545
|
: null }),
|
|
10510
10546
|
React__default.createElement(Divider, null),
|
|
10511
|
-
React__default.createElement(SelectButton, { style:
|
|
10512
|
-
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
10547
|
+
React__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
|
|
10548
|
+
React__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
|
|
10513
10549
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10514
10550
|
React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
10515
10551
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
@@ -10517,7 +10553,7 @@ function FilterBar(_a) {
|
|
|
10517
10553
|
selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
|
|
10518
10554
|
}
|
|
10519
10555
|
////////////
|
|
10520
|
-
var
|
|
10556
|
+
var fontWeightBold = function (input) {
|
|
10521
10557
|
return { fontWeight: input ? 'bold' : 'initial' };
|
|
10522
10558
|
};
|
|
10523
10559
|
var AGE_CATEGORIES_FALLBACK = [
|