willba-component-library 0.1.31 → 0.1.33

package/lib/index.umd.js

@@ -451,118 +451,6 @@
       });
     }
 
-    var css_248z$b = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: #384265;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
-    styleInject(css_248z$b);
-
-    function Divider() {
-        return React__default.createElement("div", { className: "will-filter-bar-divider" });
-    }
-
-    var css_248z$a = ".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-description {\n font-weight: 400;\n opacity: 0.4;\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: 5px 0;\n    padding: 10px 20px;\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";
-    styleInject(css_248z$a);
-
-    function SelectButton(_a) {
-        var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date, description = _a.description;
-        return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
-            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)),
-                !!date && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: "select-button-divider" }, "|"),
-                    React__default.createElement("span", { className: "select-button-date" },
-                        " ",
-                        date))))));
-    }
-
-    var DefaultContext = {
-      color: undefined,
-      size: undefined,
-      className: undefined,
-      style: undefined,
-      attr: undefined
-    };
-    var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-
-    var __assign$1 = undefined && undefined.__assign || function () {
-      __assign$1 = Object.assign || function (t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-      return __assign$1.apply(this, arguments);
-    };
-    var __rest$1 = undefined && undefined.__rest || function (s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-      }
-      return t;
-    };
-    function Tree2Element(tree) {
-      return tree && tree.map(function (node, i) {
-        return React__default.createElement(node.tag, __assign$1({
-          key: i
-        }, node.attr), Tree2Element(node.child));
-      });
-    }
-    function GenIcon(data) {
-      // eslint-disable-next-line react/display-name
-      return function (props) {
-        return React__default.createElement(IconBase, __assign$1({
-          attr: __assign$1({}, data.attr)
-        }, props), Tree2Element(data.child));
-      };
-    }
-    function IconBase(props) {
-      var elem = function (conf) {
-        var attr = props.attr,
-          size = props.size,
-          title = props.title,
-          svgProps = __rest$1(props, ["attr", "size", "title"]);
-        var computedSize = size || conf.size || "1em";
-        var className;
-        if (conf.className) className = conf.className;
-        if (props.className) className = (className ? className + " " : "") + props.className;
-        return React__default.createElement("svg", __assign$1({
-          stroke: "currentColor",
-          fill: "currentColor",
-          strokeWidth: "0"
-        }, conf.attr, attr, svgProps, {
-          className: className,
-          style: __assign$1(__assign$1({
-            color: props.color || conf.color
-          }, conf.style), props.style),
-          height: computedSize,
-          width: computedSize,
-          xmlns: "http://www.w3.org/2000/svg"
-        }), title && React__default.createElement("title", null, title), props.children);
-      };
-      return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
-        return elem(conf);
-      }) : elem(DefaultContext);
-    }
-
-    // THIS FILE IS AUTO GENERATED
-    function FaSearch (props) {
-      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);
-    }
-
-    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: 5px;\n  }\n}\n";
-    styleInject(css_248z$9);
-
-    function SubmitButton$1(_a) {
-        var onClick = _a.onClick;
-        var t = useTranslation('filterBar').t;
-        return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
-            React__default.createElement("span", null,
-                React__default.createElement(FaSearch, null)),
-            t('submit.label')));
-    }
-
     function _typeof(o) {
       "@babel/helpers - typeof";
 
@@ -4003,6 +3891,113 @@
       return date;
     }
 
+    var css_248z$b = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: #384265;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
+    styleInject(css_248z$b);
+
+    function Divider() {
+        return React__default.createElement("div", { className: "will-filter-bar-divider" });
+    }
+
+    var css_248z$a = ".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-description {\n font-weight: 400;\n opacity: 0.4;\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    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-divider {\n    display: none\n  }\n}\n\n\n";
+    styleInject(css_248z$a);
+
+    function SelectButton(_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 },
+            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)))));
+    }
+
+    var DefaultContext = {
+      color: undefined,
+      size: undefined,
+      className: undefined,
+      style: undefined,
+      attr: undefined
+    };
+    var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
+
+    var __assign$1 = undefined && undefined.__assign || function () {
+      __assign$1 = Object.assign || function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+      return __assign$1.apply(this, arguments);
+    };
+    var __rest$1 = undefined && undefined.__rest || function (s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+      }
+      return t;
+    };
+    function Tree2Element(tree) {
+      return tree && tree.map(function (node, i) {
+        return React__default.createElement(node.tag, __assign$1({
+          key: i
+        }, node.attr), Tree2Element(node.child));
+      });
+    }
+    function GenIcon(data) {
+      // eslint-disable-next-line react/display-name
+      return function (props) {
+        return React__default.createElement(IconBase, __assign$1({
+          attr: __assign$1({}, data.attr)
+        }, props), Tree2Element(data.child));
+      };
+    }
+    function IconBase(props) {
+      var elem = function (conf) {
+        var attr = props.attr,
+          size = props.size,
+          title = props.title,
+          svgProps = __rest$1(props, ["attr", "size", "title"]);
+        var computedSize = size || conf.size || "1em";
+        var className;
+        if (conf.className) className = conf.className;
+        if (props.className) className = (className ? className + " " : "") + props.className;
+        return React__default.createElement("svg", __assign$1({
+          stroke: "currentColor",
+          fill: "currentColor",
+          strokeWidth: "0"
+        }, conf.attr, attr, svgProps, {
+          className: className,
+          style: __assign$1(__assign$1({
+            color: props.color || conf.color
+          }, conf.style), props.style),
+          height: computedSize,
+          width: computedSize,
+          xmlns: "http://www.w3.org/2000/svg"
+        }), title && React__default.createElement("title", null, title), props.children);
+      };
+      return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
+        return elem(conf);
+      }) : elem(DefaultContext);
+    }
+
+    // THIS FILE IS AUTO GENERATED
+    function FaSearch (props) {
+      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);
+    }
+
+    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   \n  }\n}\n";
+    styleInject(css_248z$9);
+
+    function SubmitButton$1(_a) {
+        var onClick = _a.onClick;
+        var t = useTranslation('filterBar').t;
+        return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
+            React__default.createElement("span", null,
+                React__default.createElement(FaSearch, null)),
+            t('submit.label')));
+    }
+
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -8037,8 +8032,9 @@
 
     function Guests(_a) {
         var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
+        var t = useTranslation('filterBar').t;
         return (React__default.createElement("div", { className: "will-filter-bar-guests" },
-            React__default.createElement("h3", { className: "will-guests-filter-title" }, "Who's coming?"),
+            React__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
             React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || category.minVal })); }))));
     }
 
@@ -10508,14 +10504,17 @@
     instance.loadLanguages;
 
     var calendar$1 = {
+    	label: "When",
+    	roomsLabelPlaceholder: "Add check-in and check-out",
+    	eventsLabelPlaceholder: "Add search dates",
     	startDate: "Start date",
     	endDate: "End date",
     	title: "Calendar"
     };
     var guests$1 = {
-    	label: "Guests",
-    	title: "Guests",
-    	subtitle: "Who's coming?",
+    	label: "Who",
+    	labelPlaceholder: "Add guests",
+    	title: "Who's coming?",
     	adultsLabel: "Adults",
     	kidsLabel: "kids"
     };
@@ -10539,14 +10538,17 @@
     };
 
     var calendar = {
+    	label: "Milloin",
+    	roomsLabelPlaceholder: "Lisää check-in ja check-out",
+    	eventsLabelPlaceholder: "Lisää aikaväli",
     	startDate: "Alku",
     	endDate: "Loppu",
     	title: "Kalenteri"
     };
     var guests = {
-    	label: "Vieraat",
-    	title: "Vieraat",
-    	subtitle: "Kuka saapuu?",
+    	label: "Kuka",
+    	labelPlaceholder: "Lisää vieraat",
+    	title: "Ketkä ovat tulossa?",
     	adultsLabel: "Aikuiset",
     	kidsLabel: "lapset"
     };
@@ -10639,19 +10641,34 @@
                 });
             }
         }, [selectedFilter]);
+        var renderDates = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
+            ? "".concat(format(calendarRange.from, 'dd.MM.yyyy'), " -\n    ").concat(format(calendarRange.to, 'dd.MM.yyyy'))
+            : null;
+        var renderGuests = Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            var ageCategory = ageCategories.find(function (c) { return c.id === key[key.length - 1]; });
+            if (ageCategory) {
+                acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": ").concat(value);
+            }
+            return acc;
+        }, '');
         return (React__default.createElement(React__default.Fragment, null,
             selectedFilter && (React__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
                     handleSelectedFilter(false);
                 } })),
             React__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
-                !currentViewApply && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
+                !currentViewApply && (React__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
                     React__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
                     React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' }))),
-                React__default.createElement("div", { className: "will-filter-bar-header" },
-                    React__default.createElement(SelectButton, { label: 'When', description: 'Add Check-in and -out', onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1) }),
+                React__default.createElement("div", { className: "will-filter-bar-header", ref: currentViewApply ? targetFilterBarRef : null },
+                    React__default.createElement(SelectButton, { label: t('calendar.label'), description: renderDates
+                            ? renderDates
+                            : 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 }),
                     selectedPath === '/rooms' && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(Divider, null),
-                        React__default.createElement(SelectButton, { label: 'Who', description: 'Add Guests', onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
+                        React__default.createElement(SelectButton, { label: t('guests.label'), description: renderGuests ? renderGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
                     React__default.createElement(SubmitButton$1, { 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); } }),