willba-component-library 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,9 @@
1
+ import React from 'react';
1
2
  type Icon = 'spinner' | 'warning';
2
3
  type Props = {
3
4
  fill?: string;
4
5
  size?: number;
5
6
  icon: Icon;
6
7
  };
7
- export declare const IconsSvg: ({ fill, size, icon }: Props) => import("react/jsx-runtime").JSX.Element | null;
8
+ export declare const IconsSvg: ({ fill, size, icon }: Props) => React.JSX.Element | null;
8
9
  export {};
@@ -25,5 +25,5 @@ export interface ButtonProps {
25
25
  /**
26
26
  * Primary UI component for user interaction
27
27
  */
28
- declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
28
+ declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
29
29
  export default Button;
@@ -1,4 +1,5 @@
1
+ import React from 'react';
1
2
  import '../../themes/Default.css';
2
3
  import { FilterBarTypes } from './FilterBarTypes';
3
4
  import './FilterBar.css';
4
- export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): import("react/jsx-runtime").JSX.Element;
5
+ export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import './TabButton.css';
2
3
  type Props = {
3
4
  onClick?: () => void;
@@ -5,5 +6,5 @@ type Props = {
5
6
  active?: boolean;
6
7
  mode?: string;
7
8
  };
8
- export declare const TabButton: ({ onClick, label, active, mode }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const TabButton: ({ onClick, label, active, mode }: Props) => React.JSX.Element;
9
10
  export {};
@@ -1,7 +1,8 @@
1
+ import React from 'react';
1
2
  import './Categories.css';
2
3
  type Props = {
3
4
  categories: any;
4
5
  setCategories: any;
5
6
  };
6
- export declare const Categories: ({ categories, setCategories }: Props) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const Categories: ({ categories, setCategories }: Props) => React.JSX.Element;
7
8
  export {};
@@ -1,2 +1,3 @@
1
+ import React from 'react';
1
2
  import './Divider.css';
2
- export declare const Divider: () => import("react/jsx-runtime").JSX.Element;
3
+ export declare const Divider: () => React.JSX.Element;
@@ -1,4 +1,5 @@
1
+ import React from 'react';
1
2
  import '../../themes/Default.css';
2
3
  import { FilterCalendarTypes } from './FilterCalendarTypes';
3
4
  import './FilterCalendar.css';
4
- export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): import("react/jsx-runtime").JSX.Element;
5
+ export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { DateRange } from 'react-day-picker';
2
3
  import { Palette } from '../../../themes/useTheme';
3
4
  export declare const Footer: ({ calendarHasError, calendarRange, handleClearDates, language, palette, }: {
@@ -6,4 +7,4 @@ export declare const Footer: ({ calendarHasError, calendarRange, handleClearDate
6
7
  handleClearDates: () => void;
7
8
  language?: string;
8
9
  palette: Palette;
9
- }) => import("react/jsx-runtime").JSX.Element;
10
+ }) => React.JSX.Element;
@@ -1,6 +1,7 @@
1
+ import React from 'react';
1
2
  import './CloseButton.css';
2
3
  interface CloseButtonPropsType {
3
4
  handleClose: () => void;
4
5
  }
5
- export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => React.JSX.Element;
6
7
  export {};
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import './SubmitButton.css';
3
3
  type SubmitButtonVariant = 'text' | 'full';
4
4
  type Props = {
@@ -9,5 +9,5 @@ type Props = {
9
9
  isLoading?: boolean;
10
10
  variant?: SubmitButtonVariant;
11
11
  };
12
- export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
12
+ export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, variant, }: Props) => React.JSX.Element;
13
13
  export {};
package/lib/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import React from 'react';
3
2
  import { DateRange, Matcher } from 'react-day-picker';
4
3
 
@@ -27,7 +26,7 @@ interface ButtonProps {
27
26
  /**
28
27
  * Primary UI component for user interaction
29
28
  */
30
- declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => react_jsx_runtime.JSX.Element;
29
+ declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
31
30
 
32
31
  type Palette = {
33
32
  primary: string;
@@ -124,7 +123,7 @@ type Location = {
124
123
  imageUrl?: string;
125
124
  };
126
125
 
127
- declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): react_jsx_runtime.JSX.Element;
126
+ declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes): React.JSX.Element;
128
127
 
129
128
  interface FilterCalendarTypes extends Partial<CalendarTypes> {
130
129
  palette: Palette;
@@ -133,6 +132,6 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
133
132
  setToggleCalendar: (val: boolean) => void;
134
133
  }
135
134
 
136
- declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): react_jsx_runtime.JSX.Element;
135
+ declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
137
136
 
138
137
  export { Button, FilterBar, FilterBarTypes, FilterCalendar, FilterCalendarTypes };
package/lib/index.esm.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
1
  import React, { useState, createContext, useContext, useRef, useEffect, forwardRef, useLayoutEffect, useMemo } from 'react';
2
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
 
4
4
  /******************************************************************************
5
5
  Copyright (c) Microsoft Corporation.
@@ -200,7 +200,7 @@ styleInject(css_248z$f);
200
200
  var Button$1 = function (_a) {
201
201
  var _b = _a.type, type = _b === void 0 ? "primary" : _b, textColor = _a.textColor, _c = _a.size, size = _c === void 0 ? "medium" : _c, onClick = _a.onClick, label = _a.label;
202
202
  var _d = __read(useState(4), 2), theState = _d[0]; _d[1];
203
- return (jsx("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick, children: "".concat(label, " ").concat(theState) }));
203
+ return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
204
204
  };
205
205
 
206
206
  function warn() {
@@ -3003,7 +3003,9 @@ styleInject(css_248z$d);
3003
3003
 
3004
3004
  var SubmitButton = function (_a) {
3005
3005
  var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
3006
- return (jsxs("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading, children: [isLoading ? (jsx("span", { children: jsx(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }) })) : (startIcon && jsx("span", { children: startIcon })), label || 'Label'] }));
3006
+ return (React.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
3007
+ isLoading ? (React.createElement("span", null, React.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React.createElement("span", null, startIcon)),
3008
+ label || 'Label'));
3007
3009
  };
3008
3010
 
3009
3011
  // THIS FILE IS AUTO GENERATED
@@ -3016,7 +3018,8 @@ styleInject(css_248z$c);
3016
3018
 
3017
3019
  var CloseButton = function (_a) {
3018
3020
  var handleClose = _a.handleClose;
3019
- return (jsx("button", { className: "will-filter-bar-close-button", onClick: handleClose, children: jsx(IoIosCloseCircleOutline, {}) }));
3021
+ return (React.createElement("button", { className: "will-filter-bar-close-button", onClick: handleClose },
3022
+ React.createElement(IoIosCloseCircleOutline, null)));
3020
3023
  };
3021
3024
 
3022
3025
  /**
@@ -11260,15 +11263,19 @@ var IconsSvg = function (_a) {
11260
11263
  var fill = _a.fill, size = _a.size, icon = _a.icon;
11261
11264
  switch (icon) {
11262
11265
  case 'spinner':
11263
- return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24", children: [jsx("style", { children: "\n .spinner_z9k8 {\n transform-origin: center;\n animation: spinner_StKS .75s infinite linear;\n }\n @keyframes spinner_StKS {\n 100% {\n transform: rotate(360deg);\n }\n }\n " }), jsx("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }), jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })] }));
11266
+ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), viewBox: "0 0 24 24" },
11267
+ React.createElement("style", null, "\n .spinner_z9k8 {\n transform-origin: center;\n animation: spinner_StKS .75s infinite linear;\n }\n @keyframes spinner_StKS {\n 100% {\n transform: rotate(360deg);\n }\n }\n "),
11268
+ React.createElement("path", { d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z", opacity: ".25", fill: fill }),
11269
+ React.createElement("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z", className: "spinner_z9k8", fill: fill })));
11264
11270
  case 'warning':
11265
- return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
11271
+ return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "".concat(size || 25), height: "".concat(size || 25), className: "svg-icon", style: {
11266
11272
  verticalAlign: 'middle',
11267
11273
  fill: fill,
11268
11274
  overflow: 'hidden',
11269
11275
  minWidth: '25px',
11270
11276
  minHeight: '25px',
11271
- }, viewBox: "0 0 1024 1024", version: "1.1", children: jsx("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" }) }));
11277
+ }, viewBox: "0 0 1024 1024", version: "1.1" },
11278
+ React.createElement("path", { d: "M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" })));
11272
11279
  default:
11273
11280
  return null;
11274
11281
  }
@@ -11850,39 +11857,53 @@ var Calendar = forwardRef(function (_a, ref) {
11850
11857
  : __spreadArray$1(__spreadArray$1(__spreadArray$1(__spreadArray$1([
11851
11858
  lastPossibleCheckout
11852
11859
  ], __read(base), false), __read(firstPossibleRangeContextCheckIn), false), __read(lastPossibleRangeContextCheckOut), false), __read(disabledInsideSelectableRange()), false);
11853
- return (jsx("div", { className: "will-filter-bar-calendar", ref: ref, children: jsxs("div", { className: "will-calendar-filter-container", ref: calendarContainerRef, children: [jsx(DayPicker, { id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
11854
- selectedStartDate ||
11855
- rangeContextStartDate ||
11856
- (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
11857
- ? newDisableCalendarDates.disabledDates[0].from
11858
- : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
11859
- requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
11860
- setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
11861
- }, classNames: {
11862
- day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
11863
- day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
11864
- }, modifiersClassNames: {
11865
- today: 'my-today',
11866
- booked: 'booked',
11867
- disabledAfterCheckIn: 'disabled-after-check-in',
11868
- overlappingDate: 'overlapping-date',
11869
- noActiveSelectionStart: 'no-active-selection-start',
11870
- noActiveSelectionMid: 'no-active-selection-mid',
11871
- noActiveSelectionEnd: 'no-active-selection-end',
11872
- checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
11873
- checkInOnly: 'check-in-only',
11874
- checkOutOnly: 'check-out-only',
11875
- }, modifiers:
11876
- // This function handles conditions for applying the modifiersClassNames
11877
- handleCalendarModifiers({
11878
- calendarRange: calendarRange,
11879
- disabledDates: disabled,
11880
- overlappingDate: overlappingDate,
11881
- rangeContext: rangeContext,
11882
- findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
11883
- findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
11884
- currentSelectionLastCheckoutDate: currentSelectionAvailability,
11885
- }) }, updateCalendarDefaultMonth), jsx("div", { className: 'will-calendar-tooltip', children: jsx("div", { children: t('noCheckIn') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out', children: jsx("div", { children: t('noCheckOut') }) }), jsx("div", { className: 'will-calendar-tooltip-overlapping-date', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-in-only', children: jsx("div", { children: t('checkInOnly') }) }), jsx("div", { className: 'will-calendar-tooltip-check-out-only', children: jsx("div", { children: t('checkOutOnly') }) }), jsx("div", { className: 'will-calendar-spinner', children: jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" }) })] }) }));
11860
+ return (React.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
11861
+ React.createElement("div", { className: "will-calendar-filter-container", ref: calendarContainerRef },
11862
+ React.createElement(DayPicker, { key: updateCalendarDefaultMonth, id: "will-calendar", mode: "range", locale: language === 'en' ? enUS : fi, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: function (range) { return handleOnSelect(range); }, captionLayout: "dropdown-buttons", defaultMonth: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ||
11863
+ selectedStartDate ||
11864
+ rangeContextStartDate ||
11865
+ (((_b = newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates) === null || _b === void 0 ? void 0 : _b.length)
11866
+ ? newDisableCalendarDates.disabledDates[0].from
11867
+ : today), disabled: disabled, fromMonth: today, onMonthChange: function (val) {
11868
+ requestDates === null || requestDates === void 0 ? void 0 : requestDates(val);
11869
+ setUpdateCalendarMonthNavigation === null || setUpdateCalendarMonthNavigation === void 0 ? void 0 : setUpdateCalendarMonthNavigation(function (prev) { return !prev; });
11870
+ }, classNames: {
11871
+ day_range_start: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) ? 'rdp-day_range_start' : '',
11872
+ day_range_end: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? 'rdp-day_range_end' : '',
11873
+ }, modifiersClassNames: {
11874
+ today: 'my-today',
11875
+ booked: 'booked',
11876
+ disabledAfterCheckIn: 'disabled-after-check-in',
11877
+ overlappingDate: 'overlapping-date',
11878
+ noActiveSelectionStart: 'no-active-selection-start',
11879
+ noActiveSelectionMid: 'no-active-selection-mid',
11880
+ noActiveSelectionEnd: 'no-active-selection-end',
11881
+ checkoutOptionsMid: 'rdp-day_selected rdp-day_range_middle checkout-option',
11882
+ checkInOnly: 'check-in-only',
11883
+ checkOutOnly: 'check-out-only',
11884
+ }, modifiers:
11885
+ // This function handles conditions for applying the modifiersClassNames
11886
+ handleCalendarModifiers({
11887
+ calendarRange: calendarRange,
11888
+ disabledDates: disabled,
11889
+ overlappingDate: overlappingDate,
11890
+ rangeContext: rangeContext,
11891
+ findFirstPossibleRangeContextCheckIn: findFirstPossibleRangeContextCheckIn,
11892
+ findLastPossibleRangeContextCheckOut: findLastPossibleRangeContextCheckOut,
11893
+ currentSelectionLastCheckoutDate: currentSelectionAvailability,
11894
+ }) }),
11895
+ React.createElement("div", { className: 'will-calendar-tooltip' },
11896
+ React.createElement("div", null, t('noCheckIn'))),
11897
+ React.createElement("div", { className: 'will-calendar-tooltip-check-out' },
11898
+ React.createElement("div", null, t('noCheckOut'))),
11899
+ React.createElement("div", { className: 'will-calendar-tooltip-overlapping-date' },
11900
+ React.createElement("div", null, t('checkOutOnly'))),
11901
+ React.createElement("div", { className: 'will-calendar-tooltip-check-in-only' },
11902
+ React.createElement("div", null, t('checkInOnly'))),
11903
+ React.createElement("div", { className: 'will-calendar-tooltip-check-out-only' },
11904
+ React.createElement("div", null, t('checkOutOnly'))),
11905
+ React.createElement("div", { className: 'will-calendar-spinner' },
11906
+ React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.primary) || 'inherit', size: 50, icon: "spinner" })))));
11886
11907
  });
11887
11908
 
11888
11909
  var parseGuests = function (_a) {
@@ -12132,7 +12153,11 @@ styleInject(css_248z$9);
12132
12153
 
12133
12154
  var SelectButton = forwardRef(function (_a, ref) {
12134
12155
  var active = _a.active, label = _a.label, onClick = _a.onClick, description = _a.description, ariaExpanded = _a.ariaExpanded, ariaControls = _a.ariaControls;
12135
- return (jsx("button", { ref: ref, className: "will-filter-bar-select-button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true", children: jsx("span", { className: "select-button-wrapper", children: jsxs("div", { children: [jsx("p", { className: "select-button-label", children: label }), jsx("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })] }) }) }));
12156
+ return (React.createElement("button", { ref: ref, className: "will-filter-bar-select-button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": "true" },
12157
+ React.createElement("span", { className: "select-button-wrapper" },
12158
+ React.createElement("div", null,
12159
+ React.createElement("p", { className: "select-button-label" }, label),
12160
+ React.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
12136
12161
  });
12137
12162
  SelectButton.displayName = 'SelectButton';
12138
12163
 
@@ -12141,7 +12166,7 @@ styleInject(css_248z$8);
12141
12166
 
12142
12167
  var TabButton = function (_a) {
12143
12168
  var onClick = _a.onClick, label = _a.label, active = _a.active, mode = _a.mode;
12144
- return (jsx("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick, children: label }));
12169
+ return (React.createElement("button", { className: "will-filter-bar-tab-button ".concat(mode || 'light', " ").concat(active && 'active', " "), onClick: onClick }, label));
12145
12170
  };
12146
12171
 
12147
12172
  var css_248z$7 = ".will-guests-filter-label, .will-guests-filter-count {\n font-size: 18px;\n color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 30px;\n}\n\n.will-guests-filter-label {\n display: block;\n font-weight: 600;\n margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n display: flex;\n align-items: center;\n}\n\n.will-guests-filter-count {\n margin: 0 10px;\n min-width: 30px;\n text-align: center;\n}\n\n.will-guests-filter-counter-button {\n \n border-radius: 50%;\n background-color: transparent;\n border: 1px solid var(--will-grey);\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n cursor: pointer;\n color: var(--will-black);\n\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.will-guests-filter-counter-button:hover {\n background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n\n .will-guests-filter-inner {\n width: 100%;\n margin: 15px 0;\n justify-content: space-between;\n }\n}";
@@ -12162,11 +12187,20 @@ var GuestCount = function (_a) {
12162
12187
  var handleIncrement = function () {
12163
12188
  updateGuestsCount("guests-".concat(id), count + 1);
12164
12189
  };
12165
- return (jsxs("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) }, children: [jsx("p", { className: "will-guests-filter-label", children: label }), jsxs("div", { className: "will-guests-filter-counter", children: [jsx("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
12166
- cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
12167
- paddingBottom: '4px',
12168
- opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
12169
- }, children: jsx("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), jsx("span", { className: "will-guests-filter-count", children: count }), jsx("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement, children: jsx("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] })] }));
12190
+ return (React.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
12191
+ React.createElement("p", { className: "will-guests-filter-label" }, label),
12192
+ React.createElement("div", { className: "will-guests-filter-counter" },
12193
+ React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: (minVal && count <= minVal) || !count, style: {
12194
+ cursor: (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
12195
+ paddingBottom: '4px',
12196
+ opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
12197
+ } },
12198
+ React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
12199
+ React.createElement("path", { d: "M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))),
12200
+ React.createElement("span", { className: "will-guests-filter-count" }, count),
12201
+ React.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement },
12202
+ React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
12203
+ React.createElement("path", { d: "M10 4V16M4 10H16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }))))));
12170
12204
  };
12171
12205
 
12172
12206
  var css_248z$6 = ".will-filter-bar-guests {\n text-align: initial;\n}\n\n.will-guests-filter-title {\n font-size: 22px;\n margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n display: flex;\n flex-direction: column;\n min-width: 400px;\n}\n\n\n@media (max-width: 960px) {\n .will-guests-filter-title {\n font-size: 18px;\n }\n\n .will-guests-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}";
@@ -12176,7 +12210,9 @@ var Guests = forwardRef(function (_a, ref) {
12176
12210
  var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts, autoFocus = _a.autoFocus;
12177
12211
  var t = useTranslation('filterBar').t;
12178
12212
  var containerRef = useAutoFocus(autoFocus);
12179
- return (jsxs("div", { className: "will-filter-bar-guests", ref: ref, children: [jsx("h3", { className: "will-guests-filter-title", children: t('guests.title') }), jsx("div", { className: "will-guests-filter-container", ref: containerRef, children: ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (jsx(GuestCount, { id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 }, category.id)); }) })] }));
12213
+ return (React.createElement("div", { className: "will-filter-bar-guests", ref: ref },
12214
+ React.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
12215
+ React.createElement("div", { className: "will-guests-filter-container", ref: containerRef }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React.createElement(GuestCount, { key: category.id, id: category.id, label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts["guests-".concat(category.id)] || 0 })); }))));
12180
12216
  });
12181
12217
  Guests.displayName = 'Guests';
12182
12218
 
@@ -12184,7 +12220,7 @@ var css_248z$5 = ".will-filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n
12184
12220
  styleInject(css_248z$5);
12185
12221
 
12186
12222
  var Divider = function () {
12187
- return jsx("div", { className: "will-filter-bar-divider" });
12223
+ return React.createElement("div", { className: "will-filter-bar-divider" });
12188
12224
  };
12189
12225
 
12190
12226
  var css_248z$4 = ".will-filter-bar-categories {\n text-align: center;\n}\n\n.will-categories-filter-title {\n font-size: 16px;\n text-transform: uppercase;\n margin: 10px 0 30px 0;\n}\n\n.will-categories-filter-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 20px;\n}\n\n.will-categories-filter-inner input {\n cursor: pointer;\n margin-right: 10px;\n}\n";
@@ -12204,7 +12240,11 @@ var Categories = function (_a) {
12204
12240
  setSelectedCategory(selectedCategory);
12205
12241
  setCategories(selectedCategory);
12206
12242
  };
12207
- return (jsxs("div", { className: "will-filter-bar-categories", children: [jsx("h3", { className: "will-categories-filter-title", children: t('categories.label') }), jsx("div", { className: "will-categories-filter-inner", children: categoriesPlaceholder.map(function (itm, idx) { return (jsxs("div", { children: [jsx("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }), jsx("span", { children: itm })] }, idx)); }) })] }));
12243
+ return (React.createElement("div", { className: "will-filter-bar-categories" },
12244
+ React.createElement("h3", { className: "will-categories-filter-title" }, t('categories.label')),
12245
+ React.createElement("div", { className: "will-categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
12246
+ React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
12247
+ React.createElement("span", null, itm))); }))));
12208
12248
  };
12209
12249
 
12210
12250
  var css_248z$3 = ".will-filter-bar-locations {\n text-align: initial;\n}\n\n.will-locations-filter-title {\n font-size: 22px;\n margin: 10px 0;\n}\n\n.will-locations-filter-subtitle {\n font-size: 15px;\n font-weight: 500;\n color: var(--will-text);\n}\n\n.will-locations-filter-container {\n display: flex;\n gap: 10px;\n flex-direction: column;\n min-width: 400px;\n}\n\n@media (max-width: 960px) {\n .will-locations-filter-title {\n font-size: 18px;\n }\n\n .will-locations-filter-container {\n margin-top: 15px;\n min-width: 100%;\n }\n}\n";
@@ -12216,12 +12256,16 @@ styleInject(css_248z$2);
12216
12256
  var ImageCard = forwardRef(function (_a, ref) {
12217
12257
  var title = _a.title, description = _a.description, imageUrl = _a.imageUrl, isSelected = _a.isSelected, onClick = _a.onClick;
12218
12258
  var ariaLabel = "".concat(title).concat(description ? ", ".concat(description) : '');
12219
- return (jsxs("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
12259
+ return (React.createElement("div", { ref: ref, className: "will-image-card ".concat(isSelected ? 'is-selected' : ''), onClick: onClick, onKeyDown: function (e) {
12220
12260
  if (e.key === 'Enter' || e.key === ' ') {
12221
12261
  e.preventDefault();
12222
12262
  onClick === null || onClick === void 0 ? void 0 : onClick();
12223
12263
  }
12224
- }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel, children: [jsxs("div", { className: "will-image-card-content", children: [jsx("h3", { children: title }), description && jsx("p", { children: description })] }), jsx("div", { className: "will-image-card-image", children: imageUrl && jsx("img", { src: imageUrl, alt: title || 'Location image' }) })] }));
12264
+ }, role: "button", tabIndex: 0, "aria-pressed": isSelected, "aria-label": ariaLabel },
12265
+ React.createElement("div", { className: "will-image-card-content" },
12266
+ React.createElement("h3", null, title),
12267
+ description && React.createElement("p", null, description)),
12268
+ React.createElement("div", { className: "will-image-card-image" }, imageUrl && React.createElement("img", { src: imageUrl, alt: title || 'Location image' }))));
12225
12269
  });
12226
12270
  ImageCard.displayName = 'ImageCard';
12227
12271
 
@@ -12253,13 +12297,15 @@ var Locations = forwardRef(function (_a, ref) {
12253
12297
  onClose === null || onClose === void 0 ? void 0 : onClose();
12254
12298
  }
12255
12299
  };
12256
- return (jsxs("div", { className: "will-filter-bar-locations", ref: ref, children: [jsx("h3", { className: "will-locations-filter-title", children: t('locations.title') }), jsx("div", { className: "will-locations-filter-container", children: !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
12257
- locations
12258
- .filter(function (location) { var _a; return (_a = location === null || location === void 0 ? void 0 : location.label) === null || _a === void 0 ? void 0 : _a[language]; })
12259
- .map(function (location, index) {
12260
- var _a;
12261
- return (jsx(ImageCard, { ref: index === 0 ? firstCardRef : null, title: location.label[language], description: (_a = location.description) === null || _a === void 0 ? void 0 : _a[language], imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }, location.id));
12262
- }) })] }));
12300
+ return (React.createElement("div", { className: "will-filter-bar-locations", ref: ref },
12301
+ React.createElement("h3", { className: "will-locations-filter-title" }, t('locations.title')),
12302
+ React.createElement("div", { className: "will-locations-filter-container" }, !!((locations === null || locations === void 0 ? void 0 : locations.length) && language) &&
12303
+ locations
12304
+ .filter(function (location) { var _a; return (_a = location === null || location === void 0 ? void 0 : location.label) === null || _a === void 0 ? void 0 : _a[language]; })
12305
+ .map(function (location, index) {
12306
+ var _a;
12307
+ return (React.createElement(ImageCard, { key: location.id, ref: index === 0 ? firstCardRef : null, title: location.label[language], description: (_a = location.description) === null || _a === void 0 ? void 0 : _a[language], imageUrl: location.imageUrl, isSelected: selectedLocations.some(function (loc) { return loc.id === location.id; }), onClick: function () { return handleLocationClick(location); } }));
12308
+ }))));
12263
12309
  });
12264
12310
  Locations.displayName = 'Locations';
12265
12311
 
@@ -12314,28 +12360,47 @@ function FilterBar(_a) {
12314
12360
  locationsPlaceholder: t('locations.placeholder'),
12315
12361
  locationsSelectedLabel: t('locations.selected'),
12316
12362
  });
12317
- return (jsxs("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette, children: [tabs && tabs.length > 1 && (jsx("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef, children: tabs
12318
- .sort(function (a, b) { return a.order - b.order; })
12319
- .map(function (tab, idx) { return (jsx(TabButton, { label: tab.label && language
12320
- ? tab.label[language]
12321
- : t("tabs.".concat(tab.path.substring(1))), onClick: function () {
12322
- setSelectedPath(tab.path);
12323
- handleResetFilters();
12324
- handleSelectedFilter(false);
12325
- }, active: selectedPath === tab.path, mode: mode }, "tab-".concat(idx))); }) })), jsxs("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null, children: [!!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (jsxs(Fragment, { children: [jsx(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
12326
- previouslyFocusedButtonRef.current = locationsButtonRef.current;
12327
- handleSelectedFilter(FilterSections.LOCATIONS);
12328
- }, active: !!selectedLocations.length, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }), jsx(Divider, {})] })), jsx(SelectButton, { ref: calendarButtonRef, label: t('calendar.label'), description: parsedDates
12329
- ? parsedDates
12330
- : selectedPath === Pages.ROOMS
12331
- ? t('calendar.roomsLabelPlaceholder')
12332
- : t('calendar.eventsLabelPlaceholder'), onClick: function () {
12333
- previouslyFocusedButtonRef.current = calendarButtonRef.current;
12334
- handleSelectedFilter(FilterSections.CALENDAR);
12335
- }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }), selectedPath !== Pages.EVENTS && (jsxs(Fragment, { children: [jsx(Divider, {}), jsx(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
12336
- previouslyFocusedButtonRef.current = guestsButtonRef.current;
12337
- handleSelectedFilter(FilterSections.GUESTS);
12338
- }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" })] })), jsx(SubmitButton, { onClick: handleSubmit, startIcon: jsx(FaSearch, {}), label: t('common:search'), isLoading: innerLoading || outerLoading })] }), selectedFilter && (jsxs("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}, children: [jsx(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }), selectedFilter === FilterSections.CALENDAR && (jsx("div", { id: "will-calendar-filter", children: jsx(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef, autoFocus: true }) })), selectedFilter === FilterSections.GUESTS && (jsx("div", { id: "will-guests-filter", children: jsx(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true }) })), selectedFilter === FilterSections.CATEGORIES && (jsx(Categories, { categories: categories, setCategories: setCategories })), selectedFilter === FilterSections.LOCATIONS && (jsx("div", { id: "will-locations-filter", children: jsx(Locations, { locations: locations === null || locations === void 0 ? void 0 : locations.data, ref: filtersRef, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } }) }))] }))] }));
12363
+ return (React.createElement("div", { className: "will-root ".concat(fullWidth ? 'is-full-width' : ''), style: themePalette },
12364
+ tabs && tabs.length > 1 && (React.createElement("div", { className: "will-filter-bar-tabs", ref: targetFilterBarRef }, tabs
12365
+ .sort(function (a, b) { return a.order - b.order; })
12366
+ .map(function (tab, idx) { return (React.createElement(TabButton, { key: "tab-".concat(idx), label: tab.label && language
12367
+ ? tab.label[language]
12368
+ : t("tabs.".concat(tab.path.substring(1))), onClick: function () {
12369
+ setSelectedPath(tab.path);
12370
+ handleResetFilters();
12371
+ handleSelectedFilter(false);
12372
+ }, active: selectedPath === tab.path, mode: mode })); }))),
12373
+ React.createElement("div", { className: "will-filter-bar-header ".concat(mode || 'light'), ref: (tabs === null || tabs === void 0 ? void 0 : tabs.length) === 1 ? targetFilterBarRef : null },
12374
+ !!((_b = locations === null || locations === void 0 ? void 0 : locations.data) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(React.Fragment, null,
12375
+ React.createElement(SelectButton, { ref: locationsButtonRef, label: t('locations.label'), description: parsedLocations, onClick: function () {
12376
+ previouslyFocusedButtonRef.current = locationsButtonRef.current;
12377
+ handleSelectedFilter(FilterSections.LOCATIONS);
12378
+ }, active: !!selectedLocations.length, ariaExpanded: selectedFilter === FilterSections.LOCATIONS, ariaControls: "will-locations-filter" }),
12379
+ React.createElement(Divider, null))),
12380
+ React.createElement(SelectButton, { ref: calendarButtonRef, label: t('calendar.label'), description: parsedDates
12381
+ ? parsedDates
12382
+ : selectedPath === Pages.ROOMS
12383
+ ? t('calendar.roomsLabelPlaceholder')
12384
+ : t('calendar.eventsLabelPlaceholder'), onClick: function () {
12385
+ previouslyFocusedButtonRef.current = calendarButtonRef.current;
12386
+ handleSelectedFilter(FilterSections.CALENDAR);
12387
+ }, active: !!parsedDates, ariaExpanded: selectedFilter === FilterSections.CALENDAR, ariaControls: "will-calendar-filter" }),
12388
+ selectedPath !== Pages.EVENTS && (React.createElement(React.Fragment, null,
12389
+ React.createElement(Divider, null),
12390
+ React.createElement(SelectButton, { ref: guestsButtonRef, label: t('guests.label'), description: parsedGuests.content, onClick: function () {
12391
+ previouslyFocusedButtonRef.current = guestsButtonRef.current;
12392
+ handleSelectedFilter(FilterSections.GUESTS);
12393
+ }, active: !!parsedGuests.data.total, ariaExpanded: selectedFilter === FilterSections.GUESTS, ariaControls: "will-guests-filter" }))),
12394
+ React.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React.createElement(FaSearch, null), label: t('common:search'), isLoading: innerLoading || outerLoading })),
12395
+ selectedFilter && (React.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
12396
+ React.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
12397
+ selectedFilter === FilterSections.CALENDAR && (React.createElement("div", { id: "will-calendar-filter" },
12398
+ React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language, ref: filtersRef, autoFocus: true }))),
12399
+ selectedFilter === FilterSections.GUESTS && (React.createElement("div", { id: "will-guests-filter" },
12400
+ React.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts, ref: filtersRef, autoFocus: true }))),
12401
+ selectedFilter === FilterSections.CATEGORIES && (React.createElement(Categories, { categories: categories, setCategories: setCategories })),
12402
+ selectedFilter === FilterSections.LOCATIONS && (React.createElement("div", { id: "will-locations-filter" },
12403
+ React.createElement(Locations, { locations: locations === null || locations === void 0 ? void 0 : locations.data, ref: filtersRef, language: language, selectedLocations: selectedLocations, setSelectedLocations: setSelectedLocations, multiSelect: locations === null || locations === void 0 ? void 0 : locations.multiSelect, autoFocus: true, onClose: function () { return handleSelectedFilter(false); } })))))));
12339
12404
  }
12340
12405
  ////////////
12341
12406
  var AGE_CATEGORIES_FALLBACK = [
@@ -12476,26 +12541,36 @@ var Footer = function (_a) {
12476
12541
  var nights = nightsCount({
12477
12542
  calendarRange: calendarRange,
12478
12543
  });
12479
- return (jsxs("div", { className: "will-calendar-footer-actions-wrapper", children: [jsxs("div", { className: "will-calendar-footer-dates", children: [calendarHasError ? (jsx("div", { className: "will-calendar-footer-error", children: calendarHasError &&
12480
- renderCalendarErrorMessage({
12481
- palette: palette,
12482
- message: t("common:errors.calendarErrors.checkInAvailabilityError"),
12483
- }) })) : (jsxs("div", { children: [jsx("span", { children: parseDate({
12484
- date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
12485
- dateFormat: 'EEEEEE d.M.yyyy',
12486
- language: language,
12487
- }) || t('common:checkIn') }), jsx("span", { className: "will-calendar-footer-dates-separator", children: "-" }), jsx("span", { children: parseDate({
12488
- date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
12489
- dateFormat: 'EEEEEE d.M.yyyy',
12490
- language: language,
12491
- }) || t('common:checkOut') })] })), jsx("span", { className: "will-calendar-footer-booked", children: !calendarHasError && nights
12492
- ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
12493
- : '' })] }), jsx("div", { className: "will-calendar-footer-actions", children: jsx(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }) })] }));
12544
+ return (React.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
12545
+ React.createElement("div", { className: "will-calendar-footer-dates" },
12546
+ calendarHasError ? (React.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
12547
+ renderCalendarErrorMessage({
12548
+ palette: palette,
12549
+ message: t("common:errors.calendarErrors.checkInAvailabilityError"),
12550
+ }))) : (React.createElement("div", null,
12551
+ React.createElement("span", null, parseDate({
12552
+ date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
12553
+ dateFormat: 'EEEEEE d.M.yyyy',
12554
+ language: language,
12555
+ }) || t('common:checkIn')),
12556
+ React.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
12557
+ React.createElement("span", null, parseDate({
12558
+ date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
12559
+ dateFormat: 'EEEEEE d.M.yyyy',
12560
+ language: language,
12561
+ }) || t('common:checkOut')))),
12562
+ React.createElement("span", { className: "will-calendar-footer-booked" }, !calendarHasError && nights
12563
+ ? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
12564
+ : '')),
12565
+ React.createElement("div", { className: "will-calendar-footer-actions" },
12566
+ React.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))));
12494
12567
  };
12495
12568
  /////////
12496
12569
  var renderCalendarErrorMessage = function (_a) {
12497
12570
  var message = _a.message, palette = _a.palette;
12498
- return (jsxs(Fragment, { children: [jsx(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }), jsx("span", { children: message || '' })] }));
12571
+ return (React.createElement(React.Fragment, null,
12572
+ React.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
12573
+ React.createElement("span", null, message || '')));
12499
12574
  };
12500
12575
 
12501
12576
  var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n \n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n border-top: 1px solid var(--will-grey);\n}\n\n/* Footer actions */\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n display: flex;\n justify-content: space-between;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n margin-top: 10px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error {\n display: flex;\n max-width: 80%;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-error span {\n display: inline-block;\n margin-left: 10px;\n}\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n margin: 0 -6%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n margin-top: 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error {\n max-width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-error span {\n text-align: center;\n margin-left: 5px;\n }\n }\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
@@ -12521,7 +12596,14 @@ function FilterCalendar(_a) {
12521
12596
  var filtersRef = useCloseFilterSection({
12522
12597
  handleSelectedFilter: setToggleCalendar,
12523
12598
  }).filtersRef;
12524
- return (jsx("div", { className: "will-root", style: themePalette, children: toggleCalendar && (jsxs("div", { className: "will-calendar-wrapper", ref: filtersRef, children: [jsxs("div", { className: "will-calendar-header", children: [jsx("h2", { children: t('filterBar:calendar.title') }), jsx(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })] }), jsx("div", { className: "will-calendar-main", children: jsx(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError }) }), jsx("div", { className: "will-calendar-footer", children: jsx(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }) })] })) }));
12599
+ return (React.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
12600
+ React.createElement("div", { className: "will-calendar-header" },
12601
+ React.createElement("h2", null, t('filterBar:calendar.title')),
12602
+ React.createElement(CloseButton, { handleClose: function () { return setToggleCalendar(false); } })),
12603
+ React.createElement("div", { className: "will-calendar-main" },
12604
+ React.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
12605
+ React.createElement("div", { className: "will-calendar-footer" },
12606
+ React.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
12525
12607
  }
12526
12608
 
12527
12609
  export { Button$1 as Button, FilterBar, FilterCalendar };