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.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$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}";
|
|
122
|
+
styleInject(css_248z$c);
|
|
123
123
|
|
|
124
124
|
/**
|
|
125
125
|
* Primary UI component for user interaction
|
|
@@ -3829,15 +3829,15 @@
|
|
|
3829
3829
|
return date;
|
|
3830
3830
|
}
|
|
3831
3831
|
|
|
3832
|
-
var css_248z$
|
|
3833
|
-
styleInject(css_248z$
|
|
3832
|
+
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}";
|
|
3833
|
+
styleInject(css_248z$b);
|
|
3834
3834
|
|
|
3835
3835
|
function Divider() {
|
|
3836
3836
|
return React__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
3837
3837
|
}
|
|
3838
3838
|
|
|
3839
|
-
var css_248z$
|
|
3840
|
-
styleInject(css_248z$
|
|
3839
|
+
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";
|
|
3840
|
+
styleInject(css_248z$a);
|
|
3841
3841
|
|
|
3842
3842
|
function SelectButton(_a) {
|
|
3843
3843
|
var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
|
|
@@ -3927,10 +3927,10 @@
|
|
|
3927
3927
|
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);
|
|
3928
3928
|
}
|
|
3929
3929
|
|
|
3930
|
-
var css_248z$
|
|
3931
|
-
styleInject(css_248z$
|
|
3930
|
+
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";
|
|
3931
|
+
styleInject(css_248z$9);
|
|
3932
3932
|
|
|
3933
|
-
function SubmitButton(_a) {
|
|
3933
|
+
function SubmitButton$1(_a) {
|
|
3934
3934
|
var onClick = _a.onClick;
|
|
3935
3935
|
var t = useTranslation('filterBar').t;
|
|
3936
3936
|
return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
|
|
@@ -7907,11 +7907,11 @@
|
|
|
7907
7907
|
|
|
7908
7908
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7909
7909
|
|
|
7910
|
-
var css_248z$
|
|
7911
|
-
styleInject(css_248z$
|
|
7910
|
+
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}";
|
|
7911
|
+
styleInject(css_248z$8);
|
|
7912
7912
|
|
|
7913
|
-
var css_248z$
|
|
7914
|
-
styleInject(css_248z$
|
|
7913
|
+
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";
|
|
7914
|
+
styleInject(css_248z$7);
|
|
7915
7915
|
|
|
7916
7916
|
var currentMonth = new Date();
|
|
7917
7917
|
function Calendar(_a) {
|
|
@@ -7933,8 +7933,8 @@
|
|
|
7933
7933
|
React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7934
7934
|
}
|
|
7935
7935
|
|
|
7936
|
-
var css_248z$
|
|
7937
|
-
styleInject(css_248z$
|
|
7936
|
+
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}";
|
|
7937
|
+
styleInject(css_248z$6);
|
|
7938
7938
|
|
|
7939
7939
|
function GuestCount(_a) {
|
|
7940
7940
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7961,8 +7961,8 @@
|
|
|
7961
7961
|
React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7962
7962
|
}
|
|
7963
7963
|
|
|
7964
|
-
var css_248z$
|
|
7965
|
-
styleInject(css_248z$
|
|
7964
|
+
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}";
|
|
7965
|
+
styleInject(css_248z$5);
|
|
7966
7966
|
|
|
7967
7967
|
function Guests(_a) {
|
|
7968
7968
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7974,8 +7974,8 @@
|
|
|
7974
7974
|
category.minVal })); }))));
|
|
7975
7975
|
}
|
|
7976
7976
|
|
|
7977
|
-
var css_248z$
|
|
7978
|
-
styleInject(css_248z$
|
|
7977
|
+
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";
|
|
7978
|
+
styleInject(css_248z$4);
|
|
7979
7979
|
|
|
7980
7980
|
function Categories(_a) {
|
|
7981
7981
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -8042,10 +8042,11 @@
|
|
|
8042
8042
|
|
|
8043
8043
|
function useFilterBar(_a) {
|
|
8044
8044
|
var redirectUrl = _a.redirectUrl;
|
|
8045
|
-
var _b = React__default.useState(
|
|
8046
|
-
var _c = React__default.useState(),
|
|
8047
|
-
var _d = React__default.useState(
|
|
8048
|
-
var _e = React__default.useState(
|
|
8045
|
+
var _b = React__default.useState('/events'), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
8046
|
+
var _c = React__default.useState(false), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
8047
|
+
var _d = React__default.useState(), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
8048
|
+
var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
|
|
8049
|
+
var _f = React__default.useState({}), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
8049
8050
|
var updateGuestsCount = function (id, newCount) {
|
|
8050
8051
|
setAgeCategoryCounts(function (prevCounts) {
|
|
8051
8052
|
var _a;
|
|
@@ -8086,7 +8087,7 @@
|
|
|
8086
8087
|
queryParams.append(key, value.toString());
|
|
8087
8088
|
}
|
|
8088
8089
|
}
|
|
8089
|
-
window.location.href = "".concat(redirectUrl).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8090
|
+
window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8090
8091
|
handleSelectedFilter(false);
|
|
8091
8092
|
};
|
|
8092
8093
|
React__default.useEffect(function () {
|
|
@@ -8095,6 +8096,18 @@
|
|
|
8095
8096
|
document.body.style.overflow = 'visible';
|
|
8096
8097
|
};
|
|
8097
8098
|
}, [selectedFilter]);
|
|
8099
|
+
React__default.useEffect(function () {
|
|
8100
|
+
var currentPath = '/events'; // Default path name
|
|
8101
|
+
if (typeof window !== 'undefined') {
|
|
8102
|
+
// Get current path name
|
|
8103
|
+
currentPath =
|
|
8104
|
+
window.location.pathname.includes('/events') ||
|
|
8105
|
+
window.location.pathname.includes('/rooms')
|
|
8106
|
+
? window.location.pathname
|
|
8107
|
+
: '/events';
|
|
8108
|
+
setSelectedPath(currentPath);
|
|
8109
|
+
}
|
|
8110
|
+
}, []);
|
|
8098
8111
|
var handleResetFilters = function () {
|
|
8099
8112
|
setAgeCategoryCounts({});
|
|
8100
8113
|
handleSubmit();
|
|
@@ -8105,6 +8118,7 @@
|
|
|
8105
8118
|
ageCategoryCounts: ageCategoryCounts,
|
|
8106
8119
|
categories: categories,
|
|
8107
8120
|
calendarRange: calendarRange,
|
|
8121
|
+
selectedPath: selectedPath,
|
|
8108
8122
|
setCalendarRange: setCalendarRange,
|
|
8109
8123
|
setSelectedFilter: setSelectedFilter,
|
|
8110
8124
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
@@ -8113,14 +8127,15 @@
|
|
|
8113
8127
|
handleSubmit: handleSubmit,
|
|
8114
8128
|
updateGuestsCount: updateGuestsCount,
|
|
8115
8129
|
handleResetFilters: handleResetFilters,
|
|
8130
|
+
setSelectedPath: setSelectedPath,
|
|
8116
8131
|
};
|
|
8117
8132
|
}
|
|
8118
8133
|
|
|
8119
|
-
var css_248z$
|
|
8120
|
-
styleInject(css_248z$
|
|
8134
|
+
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";
|
|
8135
|
+
styleInject(css_248z$3);
|
|
8121
8136
|
|
|
8122
|
-
var css_248z$
|
|
8123
|
-
styleInject(css_248z$
|
|
8137
|
+
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}";
|
|
8138
|
+
styleInject(css_248z$2);
|
|
8124
8139
|
|
|
8125
8140
|
const consoleLogger = {
|
|
8126
8141
|
type: 'logger',
|
|
@@ -10413,11 +10428,16 @@
|
|
|
10413
10428
|
var submit$1 = {
|
|
10414
10429
|
label: "Search"
|
|
10415
10430
|
};
|
|
10431
|
+
var tabs$1 = {
|
|
10432
|
+
events: "Events",
|
|
10433
|
+
rooms: "Rooms"
|
|
10434
|
+
};
|
|
10416
10435
|
var enFilterBar = {
|
|
10417
10436
|
calendar: calendar$1,
|
|
10418
10437
|
guests: guests$1,
|
|
10419
10438
|
categories: categories$1,
|
|
10420
|
-
submit: submit$1
|
|
10439
|
+
submit: submit$1,
|
|
10440
|
+
tabs: tabs$1
|
|
10421
10441
|
};
|
|
10422
10442
|
|
|
10423
10443
|
var calendar = {
|
|
@@ -10439,11 +10459,16 @@
|
|
|
10439
10459
|
var submit = {
|
|
10440
10460
|
label: "Hae"
|
|
10441
10461
|
};
|
|
10462
|
+
var tabs = {
|
|
10463
|
+
events: "Events",
|
|
10464
|
+
rooms: "Rooms"
|
|
10465
|
+
};
|
|
10442
10466
|
var fiFilterBar = {
|
|
10443
10467
|
calendar: calendar,
|
|
10444
10468
|
guests: guests,
|
|
10445
10469
|
categories: categories,
|
|
10446
|
-
submit: submit
|
|
10470
|
+
submit: submit,
|
|
10471
|
+
tabs: tabs
|
|
10447
10472
|
};
|
|
10448
10473
|
|
|
10449
10474
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -10467,8 +10492,8 @@
|
|
|
10467
10492
|
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);
|
|
10468
10493
|
}
|
|
10469
10494
|
|
|
10470
|
-
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";
|
|
10471
|
-
styleInject(css_248z);
|
|
10495
|
+
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";
|
|
10496
|
+
styleInject(css_248z$1);
|
|
10472
10497
|
|
|
10473
10498
|
function CloseButton(_a) {
|
|
10474
10499
|
var handleClose = _a.handleClose;
|
|
@@ -10476,8 +10501,16 @@
|
|
|
10476
10501
|
React__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10477
10502
|
}
|
|
10478
10503
|
|
|
10504
|
+
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 ";
|
|
10505
|
+
styleInject(css_248z);
|
|
10506
|
+
|
|
10507
|
+
function SubmitButton(_a) {
|
|
10508
|
+
var onClick = _a.onClick, label = _a.label, active = _a.active;
|
|
10509
|
+
return (React__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
|
|
10510
|
+
}
|
|
10511
|
+
|
|
10479
10512
|
function FilterBar(_a) {
|
|
10480
|
-
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b
|
|
10513
|
+
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;
|
|
10481
10514
|
var themePalette = useTheme({ palette: palette });
|
|
10482
10515
|
// Translations
|
|
10483
10516
|
var _d = React__default.useState(0); _d[0]; var setRerenderKey = _d[1];
|
|
@@ -10487,7 +10520,7 @@
|
|
|
10487
10520
|
}, [language]);
|
|
10488
10521
|
var t = useTranslation('filterBar').t;
|
|
10489
10522
|
// Filters
|
|
10490
|
-
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;
|
|
10523
|
+
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;
|
|
10491
10524
|
// Scroll in to view
|
|
10492
10525
|
var targetFilterBarRef = React__default.useRef(null);
|
|
10493
10526
|
React__default.useEffect(function () {
|
|
@@ -10505,13 +10538,16 @@
|
|
|
10505
10538
|
handleSelectedFilter(false);
|
|
10506
10539
|
} })),
|
|
10507
10540
|
React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
|
|
10508
|
-
React__default.createElement("div", { className: "will-filter-bar-
|
|
10509
|
-
React__default.createElement(
|
|
10541
|
+
React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
|
|
10542
|
+
React__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
|
|
10543
|
+
React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' })),
|
|
10544
|
+
React__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10545
|
+
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)
|
|
10510
10546
|
? format(calendarRange.from, 'dd.MM.yyyy')
|
|
10511
10547
|
: null }),
|
|
10512
10548
|
React__default.createElement(Divider, null),
|
|
10513
|
-
React__default.createElement(SelectButton, { style:
|
|
10514
|
-
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
10549
|
+
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 }),
|
|
10550
|
+
React__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
|
|
10515
10551
|
selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10516
10552
|
React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
10517
10553
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
@@ -10519,7 +10555,7 @@
|
|
|
10519
10555
|
selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
|
|
10520
10556
|
}
|
|
10521
10557
|
////////////
|
|
10522
|
-
var
|
|
10558
|
+
var fontWeightBold = function (input) {
|
|
10523
10559
|
return { fontWeight: input ? 'bold' : 'initial' };
|
|
10524
10560
|
};
|
|
10525
10561
|
var AGE_CATEGORIES_FALLBACK = [
|