willba-component-library 0.1.46 → 0.1.48

package/lib/index.js

@@ -449,6 +449,18 @@ function useTranslation(ns) {
   });
 }
 
+function useTheme(_a) {
+    var palette = _a.palette;
+    var themePalette = {
+        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
+        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
+    };
+    return themePalette;
+}
+
+var css_248z$b = "@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.30);\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}";
+styleInject(css_248z$b);
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -3889,18 +3901,6 @@ function setYear(dirtyDate, dirtyYear) {
   return date;
 }
 
-function useTheme(_a) {
-    var palette = _a.palette;
-    var themePalette = {
-        '--will-primary': palette === null || palette === void 0 ? void 0 : palette.primary,
-        '--will-secondary': palette === null || palette === void 0 ? void 0 : palette.secondary,
-    };
-    return themePalette;
-}
-
-var css_248z$b = "@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.30);\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}";
-styleInject(css_248z$b);
-
 var parseDates = function (_a) {
     var calendarRange = _a.calendarRange;
     return (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
@@ -3920,8 +3920,19 @@ var parseGuests = function (_a) {
     }, '');
 };
 
+var FilterSections;
+(function (FilterSections) {
+    FilterSections["CALENDAR"] = "calendar";
+    FilterSections["GUESTS"] = "guests";
+    FilterSections["CATEGORIES"] = "categories";
+})(FilterSections || (FilterSections = {}));
+var ViewApply;
+(function (ViewApply) {
+    ViewApply["ROOMS"] = "roomFilters";
+})(ViewApply || (ViewApply = {}));
+
 var useFilterBar = function (_a) {
-    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories;
+    var redirectUrl = _a.redirectUrl, currentViewApply = _a.currentViewApply, ageCategories = _a.ageCategories, onSubmit = _a.onSubmit;
     var _b = __read(React__default.useState('/events'), 2), selectedPath = _b[0], setSelectedPath = _b[1];
     var _c = __read(React__default.useState(false), 2), selectedFilter = _c[0], setSelectedFilter = _c[1];
     var _d = __read(React__default.useState(), 2), calendarRange = _d[0], setCalendarRange = _d[1];
@@ -4022,6 +4033,14 @@ var useFilterBar = function (_a) {
             var baseUrl = window.location.origin + window.location.pathname;
             var updatedUrl = "".concat(baseUrl, "?").concat(updatedParams.toString());
             handleSelectedFilter(false);
+            if (onSubmit) {
+                var updatedParamsObject_1 = {};
+                updatedParams.forEach(function (value, key) {
+                    updatedParamsObject_1[key] = value;
+                });
+                console.log('sdasdasdsad', updatedParamsObject_1);
+                return onSubmit(updatedParamsObject_1);
+            }
             return (window.location.href = updatedUrl);
         }
         else {
@@ -4042,7 +4061,9 @@ var useFilterBar = function (_a) {
                 finally { if (e_3) throw e_3.error; }
             }
             handleSelectedFilter(false);
-            return (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
+            return onSubmit
+                ? onSubmit(newParams)
+                : (window.location.href = "".concat(redirectUrl, "/").concat(selectedPath).concat(querySearchParams ? "?".concat(querySearchParams.toString()) : ''));
         }
     };
     var handleResetFilters = function () {
@@ -4091,7 +4112,7 @@ var useScrollInToView = function (_a) {
     var _b = __read(React__default.useState(true), 2), isMobile = _b[0], setIsMobile = _b[1];
     var targetFilterBarRef = React__default.useRef(null);
     React__default.useEffect(function () {
-        if (window !== undefined && window.innerWidth > 960) {
+        if (typeof window !== 'undefined' && window.innerWidth > 960) {
             setIsMobile(false);
             return;
         }
@@ -6575,16 +6596,16 @@ var CloseButton = function (_a) {
         React__default.createElement(IoIosCloseCircleOutline, null)));
 };
 
-var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\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.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-description {\n  font-weight: 400;\n  opacity: 0.4;\n \n \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 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-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+var css_248z$9 = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\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.will-filter-bar-select-button .select-button-wrapper > div {\n  display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n  font-weight: 500;\n}\n\n.will-filter-bar-select-button .select-button-description {\n  font-weight: 400;\n  opacity: 0.8;\n  \n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n  font-weight: 600;\n }\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    padding: 15px 0;\n   }\n\n  .will-filter-bar-select-button:first-child {\n    padding: 0 0 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-description {\n    white-space: wrap;\n   }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
 styleInject(css_248z$9);
 
 var SelectButton = function (_a) {
-    var label = _a.label, onClick = _a.onClick, style = _a.style, description = _a.description;
-    return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
+    var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description;
+    return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick },
         React__default.createElement("span", { className: "select-button-wrapper" },
             React__default.createElement("div", null,
-                React__default.createElement("p", { className: "select-button-label" }, label),
-                React__default.createElement("p", { className: "select-button-description" }, description)))));
+                React__default.createElement("p", { className: "select-button-label ".concat(active ? 'active' : '') }, label),
+                React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : '') }, description)))));
 };
 
 // THIS FILE IS AUTO GENERATED
@@ -10686,16 +10707,21 @@ var css_248z = ".will-root {\n  z-index: 999;\n  width: 100%;\n  max-height: 100
 styleInject(css_248z);
 
 function FilterBar(_a) {
-    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply;
+    var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, currentViewApply = _a.currentViewApply, onSubmit = _a.onSubmit;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
     var t = useTranslation('filterBar').t;
     // Filters
-    var _d = useFilterBar({ redirectUrl: redirectUrl, currentViewApply: currentViewApply, ageCategories: ageCategories }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath;
-    // Default selected tab
+    var _d = useFilterBar({
+        redirectUrl: redirectUrl,
+        currentViewApply: currentViewApply,
+        ageCategories: ageCategories,
+        onSubmit: onSubmit,
+    }), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, selectedPath = _d.selectedPath, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, setSelectedPath = _d.setSelectedPath;
+    // Default selected tab when tabs are hidden
     React__default.useEffect(function () {
-        if (currentViewApply === 'roomFilters') {
+        if (currentViewApply === ViewApply.ROOMS) {
             setSelectedPath('/rooms');
         }
     }, []);
@@ -10703,6 +10729,7 @@ function FilterBar(_a) {
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
     // Handle close filter section
     var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
+    // Parsed data for filter section description
     var parsedDates = parseDates({ calendarRange: calendarRange });
     var parsedGuests = parseGuests({ ageCategoryCounts: ageCategoryCounts, ageCategories: ageCategories });
     return (React__default.createElement("div", { className: "will-root", style: themePalette },
@@ -10714,21 +10741,18 @@ function FilterBar(_a) {
                     ? parsedDates
                     : selectedPath === '/rooms'
                         ? t('calendar.roomsLabelPlaceholder')
-                        : t('calendar.eventsLabelPlaceholder'), onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1), date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
+                        : t('calendar.eventsLabelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.CALENDAR); }, active: selectedFilter === FilterSections.CALENDAR }),
             selectedPath === '/rooms' && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(Divider, null),
-                React__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests ? parsedGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
+                React__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests ? parsedGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: selectedFilter === FilterSections.GUESTS }))),
             React__default.createElement(SubmitButton, { onClick: handleSubmit })),
         selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
             React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
-            selectedFilter === 1 && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef })),
-            selectedFilter === 2 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
-            selectedFilter === 3 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
+            selectedFilter === FilterSections.CALENDAR && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef })),
+            selectedFilter === FilterSections.GUESTS && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef })),
+            selectedFilter === FilterSections.CATEGORIES && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
 }
 ////////////
-var fontWeightBold = function (input) {
-    return { fontWeight: input ? 'bold' : 'initial' };
-};
 var AGE_CATEGORIES_FALLBACK = [
     {
         id: '1',