willba-component-library 0.1.31 → 0.1.33

package/lib/components/FilterBar/components/buttons/select-button/SelectButton.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import './SelectButton.css';
-export default function SelectButton({ label, onClick, style, date, description, }: any): React.JSX.Element;
+export default function SelectButton({ label, onClick, style, description, }: any): React.JSX.Element;

package/lib/index.esm.js

@@ -429,118 +429,6 @@ function useTranslation(ns) {
   });
 }
 
-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__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__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
-        React__default__default.createElement("span", { className: "select-button-wrapper" },
-            React__default__default.createElement("div", null,
-                React__default__default.createElement("p", { className: "select-button-label" }, label),
-                React__default__default.createElement("p", { className: "select-button-description" }, description)),
-            !!date && (React__default__default.createElement(React__default__default.Fragment, null,
-                React__default__default.createElement("span", { className: "select-button-divider" }, "|"),
-                React__default__default.createElement("span", { className: "select-button-date" },
-                    " ",
-                    date))))));
-}
-
-var DefaultContext = {
-  color: undefined,
-  size: undefined,
-  className: undefined,
-  style: undefined,
-  attr: undefined
-};
-var IconContext = React__default__default.createContext && React__default__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__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__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__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__default.createElement("title", null, title), props.children);
-  };
-  return IconContext !== undefined ? React__default__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__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
-        React__default__default.createElement("span", null,
-            React__default__default.createElement(FaSearch, null)),
-        t('submit.label')));
-}
-
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -3981,6 +3869,113 @@ function setYear(dirtyDate, dirtyYear) {
   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__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__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
+        React__default__default.createElement("span", { className: "select-button-wrapper" },
+            React__default__default.createElement("div", null,
+                React__default__default.createElement("p", { className: "select-button-label" }, label),
+                React__default__default.createElement("p", { className: "select-button-description" }, description)))));
+}
+
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default__default.createContext && React__default__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__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__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__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__default.createElement("title", null, title), props.children);
+  };
+  return IconContext !== undefined ? React__default__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__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
+        React__default__default.createElement("span", null,
+            React__default__default.createElement(FaSearch, null)),
+        t('submit.label')));
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -8015,8 +8010,9 @@ styleInject(css_248z$5);
 
 function Guests(_a) {
     var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
+    var t = useTranslation('filterBar').t;
     return (React__default__default.createElement("div", { className: "will-filter-bar-guests" },
-        React__default__default.createElement("h3", { className: "will-guests-filter-title" }, "Who's coming?"),
+        React__default__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
         React__default__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default__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 })); }))));
 }
 
@@ -10486,14 +10482,17 @@ instance.loadNamespaces;
 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"
 };
@@ -10517,14 +10516,17 @@ var enFilterBar = {
 };
 
 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"
 };
@@ -10617,19 +10619,34 @@ function FilterBar(_a) {
             });
         }
     }, [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__default.createElement(React__default__default.Fragment, null,
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
                 handleSelectedFilter(false);
             } })),
         React__default__default.createElement("div", { className: "will-root ".concat(selectedFilter ? 'isMobileAbsolute' : ''), style: themePalette },
-            !currentViewApply && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef },
+            !currentViewApply && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
                 React__default__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
                 React__default__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' }))),
-            React__default__default.createElement("div", { className: "will-filter-bar-header" },
-                React__default__default.createElement(SelectButton, { label: 'When', description: 'Add Check-in and -out', onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1) }),
+            React__default__default.createElement("div", { className: "will-filter-bar-header", ref: currentViewApply ? targetFilterBarRef : null },
+                React__default__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__default.createElement(React__default__default.Fragment, null,
                     React__default__default.createElement(Divider, null),
-                    React__default__default.createElement(SelectButton, { label: 'Who', description: 'Add Guests', onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
+                    React__default__default.createElement(SelectButton, { label: t('guests.label'), description: renderGuests ? renderGuests : t('guests.labelPlaceholder'), onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }))),
                 React__default__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
             selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container", style: currentViewApply && !isMobile ? { top: 66 } : {} },
                 React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),