willba-component-library 0.1.55 → 0.1.56

package/lib/components/FilterBar/FilterBar.d.ts

@@ -11,5 +11,6 @@ export type FilterBarProps = {
     palette?: Palette;
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
+    fullWidth: boolean;
 };
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, }: FilterBarProps): React.JSX.Element;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, }: FilterBarProps): React.JSX.Element | undefined;

package/lib/index.d.ts

@@ -50,7 +50,8 @@ type FilterBarProps = {
     palette?: Palette;
     currentViewApply?: string;
     onSubmit?: ((val: Filters) => void) | null;
+    fullWidth: boolean;
 };
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, currentViewApply, onSubmit, fullWidth, }: FilterBarProps): React.JSX.Element | undefined;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -3894,7 +3894,7 @@ var parseGuests = function (_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 && value) {
-            acc += "".concat(acc ? ' -' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
+            acc += "".concat(acc ? ' |' : '', " ").concat(ageCategory.name, ": <span style=\"display: inline-block; width: 21px\">").concat(value, "</span>");
         }
         return acc;
     }, '');
@@ -6576,7 +6576,7 @@ var CloseButton = function (_a) {
         React__default__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.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";
+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 \n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\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) {
@@ -10683,11 +10683,11 @@ var Categories = function (_a) {
             React__default__default.createElement("span", null, itm))); }))));
 };
 
-var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root { \n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;  \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n";
+var css_248z = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  box-shadow: 0px 3px 10px 0px lightgrey; \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root { \n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;  \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n}\n\n";
 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, onSubmit = _a.onSubmit;
+    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, fullWidth = _a.fullWidth;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -10709,10 +10709,18 @@ function FilterBar(_a) {
     var _e = useScrollInToView({ selectedFilter: selectedFilter }), isMobile = _e.isMobile, targetFilterBarRef = _e.targetFilterBarRef;
     // Handle close filter section
     var filtersRef = useCloseFilterSection({ handleSelectedFilter: handleSelectedFilter }).filtersRef;
+    // Display component after fully loaded
+    var _f = __read(useState(false), 2), initialRenderComplete = _f[0], setInitialRenderComplete = _f[1];
+    useEffect(function () {
+        setInitialRenderComplete(true);
+    }, []);
+    if (!initialRenderComplete)
+        return;
+    //----/----
     // Parsed data for filter section description
     var parsedDates = parseDates({ calendarRange: calendarRange });
     var parsedGuests = parseGuests({ ageCategoryCounts: ageCategoryCounts, ageCategories: ageCategories });
-    return (React__default__default.createElement("div", { className: "will-root", style: themePalette },
+    return (React__default__default.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
         !currentViewApply && (React__default__default.createElement("div", { className: "will-filter-bar-tabs", ref: !currentViewApply ? targetFilterBarRef : null },
             React__default__default.createElement(TabButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
             React__default__default.createElement(TabButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' }))),