willba-component-library 0.1.46 → 0.1.48

package/lib/index.umd.js

@@ -451,6 +451,18 @@
       });
     }
 
+    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";
 
@@ -3891,18 +3903,6 @@
       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)
@@ -3922,8 +3922,19 @@
         }, '');
     };
 
+    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];
@@ -4024,6 +4035,14 @@
                 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 {
@@ -4044,7 +4063,9 @@
                     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 () {
@@ -4093,7 +4114,7 @@
         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;
             }
@@ -6577,16 +6598,16 @@
             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
@@ -10688,16 +10709,21 @@
     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');
             }
         }, []);
@@ -10705,6 +10731,7 @@
         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 },
@@ -10716,21 +10743,18 @@
                         ? 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',