willba-component-library 0.1.15 → 0.1.17
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 +82 -44
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +82 -44
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +82 -44
- 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/components/calendar/Calendar.tsx +7 -5
- 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
|
@@ -9,5 +9,6 @@ export interface FilterBarProps {
|
|
|
9
9
|
ageCategories?: AgeCategoryType[];
|
|
10
10
|
redirectUrl: string;
|
|
11
11
|
palette?: Palette;
|
|
12
|
+
currentPath?: string;
|
|
12
13
|
}
|
|
13
|
-
export default function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
14
|
+
export default function FilterBar({ language, ageCategories, currentPath, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
@@ -9,6 +9,7 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType): {
|
|
|
9
9
|
ageCategoryCounts: AgeCategoryCount;
|
|
10
10
|
categories: number;
|
|
11
11
|
calendarRange: DateRange | undefined;
|
|
12
|
+
selectedPath: string;
|
|
12
13
|
setCalendarRange: import("react").Dispatch<import("react").SetStateAction<DateRange | undefined>>;
|
|
13
14
|
setSelectedFilter: import("react").Dispatch<import("react").SetStateAction<number | boolean>>;
|
|
14
15
|
setAgeCategoryCounts: import("react").Dispatch<import("react").SetStateAction<AgeCategoryCount>>;
|
|
@@ -17,5 +18,6 @@ export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType): {
|
|
|
17
18
|
handleSubmit: () => void;
|
|
18
19
|
updateGuestsCount: (id: number, newCount: number) => void;
|
|
19
20
|
handleResetFilters: () => void;
|
|
21
|
+
setSelectedPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
20
22
|
};
|
|
21
23
|
export {};
|
package/lib/index.d.ts
CHANGED
|
@@ -46,7 +46,8 @@ interface FilterBarProps {
|
|
|
46
46
|
ageCategories?: AgeCategoryType[];
|
|
47
47
|
redirectUrl: string;
|
|
48
48
|
palette?: Palette;
|
|
49
|
+
currentPath?: string;
|
|
49
50
|
}
|
|
50
|
-
declare function FilterBar({ language, ageCategories, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
51
|
+
declare function FilterBar({ language, ageCategories, currentPath, redirectUrl, palette, }: FilterBarProps): React.JSX.Element;
|
|
51
52
|
|
|
52
53
|
export { Button, FilterBar };
|
package/lib/index.esm.js
CHANGED
|
@@ -96,8 +96,8 @@ function styleInject(css, ref) {
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
var css_248z$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
var css_248z$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}";
|
|
100
|
+
styleInject(css_248z$c);
|
|
101
101
|
|
|
102
102
|
/**
|
|
103
103
|
* Primary UI component for user interaction
|
|
@@ -3807,15 +3807,15 @@ function setYear(dirtyDate, dirtyYear) {
|
|
|
3807
3807
|
return date;
|
|
3808
3808
|
}
|
|
3809
3809
|
|
|
3810
|
-
var css_248z$
|
|
3811
|
-
styleInject(css_248z$
|
|
3810
|
+
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}";
|
|
3811
|
+
styleInject(css_248z$b);
|
|
3812
3812
|
|
|
3813
3813
|
function Divider() {
|
|
3814
3814
|
return React__default__default.createElement("div", { className: "will-filter-bar-divider" });
|
|
3815
3815
|
}
|
|
3816
3816
|
|
|
3817
|
-
var css_248z$
|
|
3818
|
-
styleInject(css_248z$
|
|
3817
|
+
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";
|
|
3818
|
+
styleInject(css_248z$a);
|
|
3819
3819
|
|
|
3820
3820
|
function SelectButton(_a) {
|
|
3821
3821
|
var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
|
|
@@ -3905,10 +3905,10 @@ function FaSearch (props) {
|
|
|
3905
3905
|
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);
|
|
3906
3906
|
}
|
|
3907
3907
|
|
|
3908
|
-
var css_248z$
|
|
3909
|
-
styleInject(css_248z$
|
|
3908
|
+
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";
|
|
3909
|
+
styleInject(css_248z$9);
|
|
3910
3910
|
|
|
3911
|
-
function SubmitButton(_a) {
|
|
3911
|
+
function SubmitButton$1(_a) {
|
|
3912
3912
|
var onClick = _a.onClick;
|
|
3913
3913
|
var t = useTranslation('filterBar').t;
|
|
3914
3914
|
return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
|
|
@@ -7885,32 +7885,34 @@ var reactResponsive = {exports: {}};
|
|
|
7885
7885
|
|
|
7886
7886
|
var reactResponsiveExports = reactResponsive.exports;
|
|
7887
7887
|
|
|
7888
|
-
var css_248z$
|
|
7889
|
-
styleInject(css_248z$
|
|
7888
|
+
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}";
|
|
7889
|
+
styleInject(css_248z$8);
|
|
7890
7890
|
|
|
7891
|
-
var css_248z$
|
|
7892
|
-
styleInject(css_248z$
|
|
7891
|
+
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";
|
|
7892
|
+
styleInject(css_248z$7);
|
|
7893
7893
|
|
|
7894
7894
|
var currentMonth = new Date();
|
|
7895
7895
|
function Calendar(_a) {
|
|
7896
7896
|
var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
|
|
7897
7897
|
//const { t } = useTranslation('filterBar')
|
|
7898
7898
|
var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
|
|
7899
|
-
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7899
|
+
// Add default selection
|
|
7900
|
+
// const defaultCalendarSelected: DateRange = {
|
|
7901
|
+
// from: currentMonth,
|
|
7902
|
+
// to: addDays(currentMonth, 0),
|
|
7903
|
+
// }
|
|
7904
|
+
//--------------//----------------
|
|
7903
7905
|
useEffect(function () {
|
|
7904
7906
|
if (!calendarRange)
|
|
7905
|
-
setCalendarRange(
|
|
7907
|
+
setCalendarRange(undefined);
|
|
7906
7908
|
}, []);
|
|
7907
7909
|
return (React__default__default.createElement("div", { className: "will-filter-bar-calendar" },
|
|
7908
7910
|
React__default__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
7909
7911
|
React__default__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
|
|
7910
7912
|
}
|
|
7911
7913
|
|
|
7912
|
-
var css_248z$
|
|
7913
|
-
styleInject(css_248z$
|
|
7914
|
+
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}";
|
|
7915
|
+
styleInject(css_248z$6);
|
|
7914
7916
|
|
|
7915
7917
|
function GuestCount(_a) {
|
|
7916
7918
|
var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
|
|
@@ -7937,8 +7939,8 @@ function GuestCount(_a) {
|
|
|
7937
7939
|
React__default__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
|
|
7938
7940
|
}
|
|
7939
7941
|
|
|
7940
|
-
var css_248z$
|
|
7941
|
-
styleInject(css_248z$
|
|
7942
|
+
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}";
|
|
7943
|
+
styleInject(css_248z$5);
|
|
7942
7944
|
|
|
7943
7945
|
function Guests(_a) {
|
|
7944
7946
|
var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
|
|
@@ -7950,8 +7952,8 @@ function Guests(_a) {
|
|
|
7950
7952
|
category.minVal })); }))));
|
|
7951
7953
|
}
|
|
7952
7954
|
|
|
7953
|
-
var css_248z$
|
|
7954
|
-
styleInject(css_248z$
|
|
7955
|
+
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";
|
|
7956
|
+
styleInject(css_248z$4);
|
|
7955
7957
|
|
|
7956
7958
|
function Categories(_a) {
|
|
7957
7959
|
_a.categories; var setCategories = _a.setCategories;
|
|
@@ -8018,10 +8020,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
8018
8020
|
|
|
8019
8021
|
function useFilterBar(_a) {
|
|
8020
8022
|
var redirectUrl = _a.redirectUrl;
|
|
8021
|
-
var _b = useState(
|
|
8022
|
-
var _c = useState(),
|
|
8023
|
-
var _d = useState(
|
|
8024
|
-
var _e = useState(
|
|
8023
|
+
var _b = useState('/events'), selectedPath = _b[0], setSelectedPath = _b[1];
|
|
8024
|
+
var _c = useState(false), selectedFilter = _c[0], setSelectedFilter = _c[1];
|
|
8025
|
+
var _d = useState(), calendarRange = _d[0], setCalendarRange = _d[1];
|
|
8026
|
+
var _e = useState(0), categories = _e[0], setCategories = _e[1];
|
|
8027
|
+
var _f = useState({}), ageCategoryCounts = _f[0], setAgeCategoryCounts = _f[1];
|
|
8025
8028
|
var updateGuestsCount = function (id, newCount) {
|
|
8026
8029
|
setAgeCategoryCounts(function (prevCounts) {
|
|
8027
8030
|
var _a;
|
|
@@ -8062,7 +8065,7 @@ function useFilterBar(_a) {
|
|
|
8062
8065
|
queryParams.append(key, value.toString());
|
|
8063
8066
|
}
|
|
8064
8067
|
}
|
|
8065
|
-
window.location.href = "".concat(redirectUrl).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8068
|
+
window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(queryParams ? "?".concat(queryParams.toString()) : '');
|
|
8066
8069
|
handleSelectedFilter(false);
|
|
8067
8070
|
};
|
|
8068
8071
|
useEffect(function () {
|
|
@@ -8071,6 +8074,18 @@ function useFilterBar(_a) {
|
|
|
8071
8074
|
document.body.style.overflow = 'visible';
|
|
8072
8075
|
};
|
|
8073
8076
|
}, [selectedFilter]);
|
|
8077
|
+
useEffect(function () {
|
|
8078
|
+
var currentPath = '/events'; // Default path name
|
|
8079
|
+
if (typeof window !== 'undefined') {
|
|
8080
|
+
// Get current path name
|
|
8081
|
+
currentPath =
|
|
8082
|
+
window.location.pathname.includes('/events') ||
|
|
8083
|
+
window.location.pathname.includes('/rooms')
|
|
8084
|
+
? window.location.pathname
|
|
8085
|
+
: '/events';
|
|
8086
|
+
setSelectedPath(currentPath);
|
|
8087
|
+
}
|
|
8088
|
+
}, []);
|
|
8074
8089
|
var handleResetFilters = function () {
|
|
8075
8090
|
setAgeCategoryCounts({});
|
|
8076
8091
|
handleSubmit();
|
|
@@ -8081,6 +8096,7 @@ function useFilterBar(_a) {
|
|
|
8081
8096
|
ageCategoryCounts: ageCategoryCounts,
|
|
8082
8097
|
categories: categories,
|
|
8083
8098
|
calendarRange: calendarRange,
|
|
8099
|
+
selectedPath: selectedPath,
|
|
8084
8100
|
setCalendarRange: setCalendarRange,
|
|
8085
8101
|
setSelectedFilter: setSelectedFilter,
|
|
8086
8102
|
setAgeCategoryCounts: setAgeCategoryCounts,
|
|
@@ -8089,14 +8105,15 @@ function useFilterBar(_a) {
|
|
|
8089
8105
|
handleSubmit: handleSubmit,
|
|
8090
8106
|
updateGuestsCount: updateGuestsCount,
|
|
8091
8107
|
handleResetFilters: handleResetFilters,
|
|
8108
|
+
setSelectedPath: setSelectedPath,
|
|
8092
8109
|
};
|
|
8093
8110
|
}
|
|
8094
8111
|
|
|
8095
|
-
var css_248z$
|
|
8096
|
-
styleInject(css_248z$
|
|
8112
|
+
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";
|
|
8113
|
+
styleInject(css_248z$3);
|
|
8097
8114
|
|
|
8098
|
-
var css_248z$
|
|
8099
|
-
styleInject(css_248z$
|
|
8115
|
+
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}";
|
|
8116
|
+
styleInject(css_248z$2);
|
|
8100
8117
|
|
|
8101
8118
|
const consoleLogger = {
|
|
8102
8119
|
type: 'logger',
|
|
@@ -10389,11 +10406,16 @@ var categories$1 = {
|
|
|
10389
10406
|
var submit$1 = {
|
|
10390
10407
|
label: "Search"
|
|
10391
10408
|
};
|
|
10409
|
+
var tabs$1 = {
|
|
10410
|
+
events: "Events",
|
|
10411
|
+
rooms: "Rooms"
|
|
10412
|
+
};
|
|
10392
10413
|
var enFilterBar = {
|
|
10393
10414
|
calendar: calendar$1,
|
|
10394
10415
|
guests: guests$1,
|
|
10395
10416
|
categories: categories$1,
|
|
10396
|
-
submit: submit$1
|
|
10417
|
+
submit: submit$1,
|
|
10418
|
+
tabs: tabs$1
|
|
10397
10419
|
};
|
|
10398
10420
|
|
|
10399
10421
|
var calendar = {
|
|
@@ -10415,11 +10437,16 @@ var categories = {
|
|
|
10415
10437
|
var submit = {
|
|
10416
10438
|
label: "Hae"
|
|
10417
10439
|
};
|
|
10440
|
+
var tabs = {
|
|
10441
|
+
events: "Events",
|
|
10442
|
+
rooms: "Rooms"
|
|
10443
|
+
};
|
|
10418
10444
|
var fiFilterBar = {
|
|
10419
10445
|
calendar: calendar,
|
|
10420
10446
|
guests: guests,
|
|
10421
10447
|
categories: categories,
|
|
10422
|
-
submit: submit
|
|
10448
|
+
submit: submit,
|
|
10449
|
+
tabs: tabs
|
|
10423
10450
|
};
|
|
10424
10451
|
|
|
10425
10452
|
var urlParams = typeof window !== 'undefined'
|
|
@@ -10443,8 +10470,8 @@ function IoIosCloseCircleOutline (props) {
|
|
|
10443
10470
|
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);
|
|
10444
10471
|
}
|
|
10445
10472
|
|
|
10446
|
-
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";
|
|
10447
|
-
styleInject(css_248z);
|
|
10473
|
+
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";
|
|
10474
|
+
styleInject(css_248z$1);
|
|
10448
10475
|
|
|
10449
10476
|
function CloseButton(_a) {
|
|
10450
10477
|
var handleClose = _a.handleClose;
|
|
@@ -10452,8 +10479,16 @@ function CloseButton(_a) {
|
|
|
10452
10479
|
React__default__default.createElement(IoIosCloseCircleOutline, null)));
|
|
10453
10480
|
}
|
|
10454
10481
|
|
|
10482
|
+
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 ";
|
|
10483
|
+
styleInject(css_248z);
|
|
10484
|
+
|
|
10485
|
+
function SubmitButton(_a) {
|
|
10486
|
+
var onClick = _a.onClick, label = _a.label, active = _a.active;
|
|
10487
|
+
return (React__default__default.createElement("button", { className: "will-filter-bar-tab-button ".concat(active && 'active'), onClick: onClick }, label));
|
|
10488
|
+
}
|
|
10489
|
+
|
|
10455
10490
|
function FilterBar(_a) {
|
|
10456
|
-
var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b
|
|
10491
|
+
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;
|
|
10457
10492
|
var themePalette = useTheme({ palette: palette });
|
|
10458
10493
|
// Translations
|
|
10459
10494
|
var _d = useState(0); _d[0]; var setRerenderKey = _d[1];
|
|
@@ -10463,7 +10498,7 @@ function FilterBar(_a) {
|
|
|
10463
10498
|
}, [language]);
|
|
10464
10499
|
var t = useTranslation('filterBar').t;
|
|
10465
10500
|
// Filters
|
|
10466
|
-
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;
|
|
10501
|
+
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;
|
|
10467
10502
|
// Scroll in to view
|
|
10468
10503
|
var targetFilterBarRef = useRef(null);
|
|
10469
10504
|
useEffect(function () {
|
|
@@ -10481,13 +10516,16 @@ function FilterBar(_a) {
|
|
|
10481
10516
|
handleSelectedFilter(false);
|
|
10482
10517
|
} })),
|
|
10483
10518
|
React__default__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
|
|
10484
|
-
React__default__default.createElement("div", { className: "will-filter-bar-
|
|
10485
|
-
React__default__default.createElement(
|
|
10519
|
+
React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
|
|
10520
|
+
React__default__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('./events'); }, active: selectedPath === '/events' }),
|
|
10521
|
+
React__default__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('./rooms'); }, active: selectedPath === '/rooms' })),
|
|
10522
|
+
React__default__default.createElement("div", { className: "will-filter-bar-header" },
|
|
10523
|
+
React__default__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)
|
|
10486
10524
|
? format(calendarRange.from, 'dd.MM.yyyy')
|
|
10487
10525
|
: null }),
|
|
10488
10526
|
React__default__default.createElement(Divider, null),
|
|
10489
|
-
React__default__default.createElement(SelectButton, { style:
|
|
10490
|
-
React__default__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
10527
|
+
React__default__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 }),
|
|
10528
|
+
React__default__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
|
|
10491
10529
|
selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container" },
|
|
10492
10530
|
React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
|
|
10493
10531
|
(selectedFilter === 1 || selectedFilter === 2) && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
@@ -10495,7 +10533,7 @@ function FilterBar(_a) {
|
|
|
10495
10533
|
selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
|
|
10496
10534
|
}
|
|
10497
10535
|
////////////
|
|
10498
|
-
var
|
|
10536
|
+
var fontWeightBold = function (input) {
|
|
10499
10537
|
return { fontWeight: input ? 'bold' : 'initial' };
|
|
10500
10538
|
};
|
|
10501
10539
|
var AGE_CATEGORIES_FALLBACK = [
|