willba-component-library 0.2.46 → 0.2.47

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

@@ -2,4 +2,4 @@ import React from 'react';
 import '../../themes/Default.css';
 import { FilterBarProps } from './FilterBarTypes';
 import './FilterBar.css';
-export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
+export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, isLoading, }: FilterBarProps): React.JSX.Element;

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

@@ -11,6 +11,7 @@ export type FilterBarProps = {
     mode?: string;
     defaultTab?: string;
     tabs?: Tab[];
+    isLoading?: boolean;
 };
 export type AgeCategoryCount = {
     [categoryId: string]: number;

package/lib/core/components/buttons/submit-button/SubmitButton.d.ts

@@ -5,6 +5,7 @@ type Props = {
     startIcon?: ReactNode;
     label?: string;
     disabled?: boolean;
+    isLoading?: boolean;
 };
-export declare const SubmitButton: ({ onClick, startIcon, label, disabled, }: Props) => React.JSX.Element;
+export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, }: Props) => React.JSX.Element;
 export {};

package/lib/index.d.ts

@@ -82,6 +82,7 @@ type FilterBarProps = {
     mode?: string;
     defaultTab?: string;
     tabs?: Tab[];
+    isLoading?: boolean;
 };
 type AgeCategoryType = {
     id: string;
@@ -104,7 +105,7 @@ type Tab = {
     label?: Translations;
 };
 
-declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, isLoading, }: FilterBarProps): React.JSX.Element;
 
 interface FilterCalendarTypes extends Partial<CalendarTypes> {
     palette: Palette;

package/lib/index.esm.js

@@ -513,6 +513,8 @@ function IconBase(props) {
 // 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);
+}function FaSpinner (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
 }
 
 function useTheme(_a) {
@@ -2968,13 +2970,13 @@ var useCloseFilterSection = function (_a) {
     return { filtersRef: filtersRef };
 };
 
-var css_248z$b = ".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\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n";
+var css_248z$b = ".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\nbutton.will-filter-bar-submit-button:disabled  {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n   \n  }\n}\n\n/* --- */\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n";
 styleInject(css_248z$b);
 
 var SubmitButton = function (_a) {
-    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled;
-    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled },
-        startIcon && React__default__default.createElement("span", null, startIcon),
+    var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
+    return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
+        isLoading ? (React__default__default.createElement("span", null, React__default__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default__default.createElement("span", null, startIcon)),
         label || 'Label'));
 };
 
@@ -11392,7 +11394,7 @@ var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-wi
 styleInject(css_248z$1);
 
 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, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs;
+    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, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, isLoading = _a.isLoading;
     var themePalette = useTheme({ palette: palette });
     // Translations
     useUpdateTranslations({ language: language });
@@ -11436,7 +11438,7 @@ function FilterBar(_a) {
             selectedPath === Pages.ROOMS && (React__default__default.createElement(React__default__default.Fragment, null,
                 React__default__default.createElement(Divider, null),
                 React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
-            React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search') })),
+            React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search'), isLoading: isLoading })),
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
             React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
             selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language })),