willba-component-library 0.2.70 → 0.2.72
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.
- package/lib/components/FilterCalendar/components/Footer.d.ts +10 -0
- package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +3 -1
- package/lib/core/components/calendar/utils/checkForContinuousSelection.d.ts +3 -2
- package/lib/index.esm.js +166 -64
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +166 -64
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +166 -64
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/IconsSvg.tsx +2 -0
- package/src/components/FilterBar/components/buttons/tab-button/TabButton.css +1 -1
- package/src/components/FilterCalendar/FilterCalendar.css +14 -10
- package/src/components/FilterCalendar/FilterCalendar.stories.tsx +177 -426
- package/src/components/FilterCalendar/FilterCalendar.tsx +10 -90
- package/src/components/FilterCalendar/components/Footer.tsx +114 -0
- package/src/core/components/buttons/submit-button/SubmitButton.css +16 -2
- package/src/core/components/buttons/submit-button/SubmitButton.tsx +5 -1
- package/src/core/components/calendar/Calendar.css +19 -14
- package/src/core/components/calendar/Calendar.tsx +2 -1
- package/src/core/components/calendar/hooks/useCalendarTooltips.tsx +2 -0
- package/src/core/components/calendar/utils/checkForContinuousSelection.tsx +45 -12
- package/src/themes/Default.css +7 -5
package/lib/index.umd.js
CHANGED
|
@@ -549,7 +549,7 @@
|
|
|
549
549
|
return themePalette;
|
|
550
550
|
}
|
|
551
551
|
|
|
552
|
-
var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-white-transparent: #ffffffcf;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-
|
|
552
|
+
var css_248z$c = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n \n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-white-transparent: #ffffffcf;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-charcoal-blue: #384265;\n --will-error: #d32f2f;\n\n /* Transparent */\n --will-transparent-black: rgba(0, 0, 0, 0.5);\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-lavender: rgba(171, 167, 175, 0.30);\n\n /* Color mix */\n --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);\n --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);\n\n\n /* Shadows */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
|
|
553
553
|
styleInject(css_248z$c);
|
|
554
554
|
|
|
555
555
|
var useAwaitRender = function () {
|
|
@@ -3013,12 +3013,12 @@
|
|
|
3013
3013
|
return { filtersRef: filtersRef };
|
|
3014
3014
|
};
|
|
3015
3015
|
|
|
3016
|
-
var css_248z$b = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n
|
|
3016
|
+
var css_248z$b = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\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 user-select: none;\n}\n\n/* Submit button variants */\n.will-filter-bar-submit-button.default {\n background-color: var(--will-primary);\n color: var(--will-white);\n}\n\n.will-filter-bar-submit-button.text {\n background-color: transparent;\n color: var(--will-black);\n text-decoration: underline;\n font-weight: 500;\n font-size: 15px;\n padding: 0 10px;\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";
|
|
3017
3017
|
styleInject(css_248z$b);
|
|
3018
3018
|
|
|
3019
3019
|
var SubmitButton = function (_a) {
|
|
3020
|
-
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
|
|
3021
|
-
return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
|
|
3020
|
+
var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading, variant = _a.variant;
|
|
3021
|
+
return (React__default.createElement("button", { className: "will-filter-bar-submit-button ".concat(variant || 'default'), onClick: onClick, disabled: disabled || isLoading },
|
|
3022
3022
|
isLoading ? (React__default.createElement("span", null, React__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default.createElement("span", null, startIcon)),
|
|
3023
3023
|
label || 'Label'));
|
|
3024
3024
|
};
|
|
@@ -3517,6 +3517,78 @@
|
|
|
3517
3517
|
return addMonths(dirtyDate, amount * 12);
|
|
3518
3518
|
}
|
|
3519
3519
|
|
|
3520
|
+
/**
|
|
3521
|
+
* @name areIntervalsOverlapping
|
|
3522
|
+
* @category Interval Helpers
|
|
3523
|
+
* @summary Is the given time interval overlapping with another time interval?
|
|
3524
|
+
*
|
|
3525
|
+
* @description
|
|
3526
|
+
* Is the given time interval overlapping with another time interval? Adjacent intervals do not count as overlapping.
|
|
3527
|
+
*
|
|
3528
|
+
* @param {Interval} intervalLeft - the first interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
|
|
3529
|
+
* @param {Interval} intervalRight - the second interval to compare. See [Interval]{@link https://date-fns.org/docs/Interval}
|
|
3530
|
+
* @param {Object} [options] - the object with options
|
|
3531
|
+
* @param {Boolean} [options.inclusive=false] - whether the comparison is inclusive or not
|
|
3532
|
+
* @returns {Boolean} whether the time intervals are overlapping
|
|
3533
|
+
* @throws {TypeError} 2 arguments required
|
|
3534
|
+
* @throws {RangeError} The start of an interval cannot be after its end
|
|
3535
|
+
* @throws {RangeError} Date in interval cannot be `Invalid Date`
|
|
3536
|
+
*
|
|
3537
|
+
* @example
|
|
3538
|
+
* // For overlapping time intervals:
|
|
3539
|
+
* areIntervalsOverlapping(
|
|
3540
|
+
* { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
|
|
3541
|
+
* { start: new Date(2014, 0, 17), end: new Date(2014, 0, 21) }
|
|
3542
|
+
* )
|
|
3543
|
+
* //=> true
|
|
3544
|
+
*
|
|
3545
|
+
* @example
|
|
3546
|
+
* // For non-overlapping time intervals:
|
|
3547
|
+
* areIntervalsOverlapping(
|
|
3548
|
+
* { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
|
|
3549
|
+
* { start: new Date(2014, 0, 21), end: new Date(2014, 0, 22) }
|
|
3550
|
+
* )
|
|
3551
|
+
* //=> false
|
|
3552
|
+
*
|
|
3553
|
+
* @example
|
|
3554
|
+
* // For adjacent time intervals:
|
|
3555
|
+
* areIntervalsOverlapping(
|
|
3556
|
+
* { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
|
|
3557
|
+
* { start: new Date(2014, 0, 20), end: new Date(2014, 0, 30) }
|
|
3558
|
+
* )
|
|
3559
|
+
* //=> false
|
|
3560
|
+
*
|
|
3561
|
+
* @example
|
|
3562
|
+
* // Using the inclusive option:
|
|
3563
|
+
* areIntervalsOverlapping(
|
|
3564
|
+
* { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
|
|
3565
|
+
* { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) }
|
|
3566
|
+
* )
|
|
3567
|
+
* //=> false
|
|
3568
|
+
* areIntervalsOverlapping(
|
|
3569
|
+
* { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) },
|
|
3570
|
+
* { start: new Date(2014, 0, 20), end: new Date(2014, 0, 24) },
|
|
3571
|
+
* { inclusive: true }
|
|
3572
|
+
* )
|
|
3573
|
+
* //=> true
|
|
3574
|
+
*/
|
|
3575
|
+
function areIntervalsOverlapping(intervalLeft, intervalRight, options) {
|
|
3576
|
+
requiredArgs(2, arguments);
|
|
3577
|
+
var leftStartTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.start).getTime();
|
|
3578
|
+
var leftEndTime = toDate(intervalLeft === null || intervalLeft === void 0 ? void 0 : intervalLeft.end).getTime();
|
|
3579
|
+
var rightStartTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.start).getTime();
|
|
3580
|
+
var rightEndTime = toDate(intervalRight === null || intervalRight === void 0 ? void 0 : intervalRight.end).getTime();
|
|
3581
|
+
|
|
3582
|
+
// Throw an exception if start date is after end date or if any date is `Invalid Date`
|
|
3583
|
+
if (!(leftStartTime <= leftEndTime && rightStartTime <= rightEndTime)) {
|
|
3584
|
+
throw new RangeError('Invalid interval');
|
|
3585
|
+
}
|
|
3586
|
+
if (options !== null && options !== void 0 && options.inclusive) {
|
|
3587
|
+
return leftStartTime <= rightEndTime && rightStartTime <= leftEndTime;
|
|
3588
|
+
}
|
|
3589
|
+
return leftStartTime < rightEndTime && rightStartTime < leftEndTime;
|
|
3590
|
+
}
|
|
3591
|
+
|
|
3520
3592
|
/**
|
|
3521
3593
|
* @name max
|
|
3522
3594
|
* @category Common Helpers
|
|
@@ -7683,7 +7755,7 @@
|
|
|
7683
7755
|
|
|
7684
7756
|
/** Render the Footer component (empty as default).*/
|
|
7685
7757
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7686
|
-
function Footer(props) {
|
|
7758
|
+
function Footer$1(props) {
|
|
7687
7759
|
var _a = useDayPicker(), footer = _a.footer, styles = _a.styles, tfoot = _a.classNames.tfoot;
|
|
7688
7760
|
if (!footer)
|
|
7689
7761
|
return React__default.createElement(React__default.Fragment, null);
|
|
@@ -8837,7 +8909,7 @@
|
|
|
8837
8909
|
});
|
|
8838
8910
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
8839
8911
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
8840
|
-
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer;
|
|
8912
|
+
var FooterComponent = (_c = components === null || components === void 0 ? void 0 : components.Footer) !== null && _c !== void 0 ? _c : Footer$1;
|
|
8841
8913
|
return (React__default.createElement("table", { id: props.id, className: classNames.table, style: styles.table, role: "grid", "aria-labelledby": props['aria-labelledby'] },
|
|
8842
8914
|
!hideHead && React__default.createElement(HeadComponent, null),
|
|
8843
8915
|
React__default.createElement("tbody", { className: classNames.tbody, style: styles.tbody }, weeks.map(function (week) { return (React__default.createElement(RowComponent, { displayMonth: props.displayMonth, key: week.weekNumber, dates: week.dates, weekNumber: week.weekNumber })); })),
|
|
@@ -10945,6 +11017,8 @@
|
|
|
10945
11017
|
verticalAlign: 'middle',
|
|
10946
11018
|
fill: fill,
|
|
10947
11019
|
overflow: 'hidden',
|
|
11020
|
+
minWidth: '25px',
|
|
11021
|
+
minHeight: '25px',
|
|
10948
11022
|
}, viewBox: "0 0 1024 1024", version: "1.1" },
|
|
10949
11023
|
React__default.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" })));
|
|
10950
11024
|
}
|
|
@@ -11243,27 +11317,41 @@
|
|
|
11243
11317
|
// set setCalendarHasError to true. This will display an error message and
|
|
11244
11318
|
// prevent the submission of the selected dates.
|
|
11245
11319
|
var checkForContinuousSelection = function (_a) {
|
|
11246
|
-
var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError;
|
|
11247
|
-
var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
11248
|
-
var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to)
|
|
11249
|
-
var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from)
|
|
11250
|
-
var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to)
|
|
11320
|
+
var setCalendarHasError = _a.setCalendarHasError, rangeContext = _a.rangeContext, calendarRange = _a.calendarRange, calendarHasError = _a.calendarHasError, disabledDates = _a.disabledDates;
|
|
11321
|
+
var calendarRangeFrom = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from) && endOfDay(calendarRange.from);
|
|
11322
|
+
var calendarRangeTo = (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) && endOfDay(calendarRange.to);
|
|
11323
|
+
var rangeContextFrom = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.from) && endOfDay(rangeContext.from);
|
|
11324
|
+
var rangeContextTo = (rangeContext === null || rangeContext === void 0 ? void 0 : rangeContext.to) && endOfDay(rangeContext.to);
|
|
11251
11325
|
// Checking if rangeFrom is equal to or before rangeContextTo
|
|
11252
11326
|
var startIsEqualOrBeforeRangeContextEnd = calendarRangeFrom && rangeContextTo
|
|
11253
|
-
? isBefore(
|
|
11254
|
-
isEqual(
|
|
11327
|
+
? isBefore(calendarRangeFrom, rangeContextTo) ||
|
|
11328
|
+
isEqual(calendarRangeFrom, rangeContextTo)
|
|
11255
11329
|
: null;
|
|
11256
11330
|
// Checking if rangeTo is equal to or after rangeContextFrom
|
|
11257
11331
|
var endIsEqualOrAfterRangeContextStart = calendarRangeTo && rangeContextFrom && rangeContextTo
|
|
11258
|
-
? isAfter(
|
|
11259
|
-
isEqual(
|
|
11332
|
+
? isAfter(calendarRangeTo, rangeContextFrom) ||
|
|
11333
|
+
isEqual(calendarRangeTo, rangeContextFrom)
|
|
11260
11334
|
: null;
|
|
11335
|
+
// Check if selection overlapping unavailable dates
|
|
11336
|
+
var selectionOverlappingUnavailableDate = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.find(function (range) {
|
|
11337
|
+
var rangeFrom = endOfDay(range.from);
|
|
11338
|
+
var rangeTo = endOfDay(range.to);
|
|
11339
|
+
return (rangeContextFrom &&
|
|
11340
|
+
rangeContextTo &&
|
|
11341
|
+
areIntervalsOverlapping({ start: rangeContextFrom, end: rangeContextTo }, { start: rangeFrom, end: rangeTo }) &&
|
|
11342
|
+
calendarRangeFrom &&
|
|
11343
|
+
calendarRangeTo &&
|
|
11344
|
+
areIntervalsOverlapping({ start: calendarRangeFrom, end: calendarRangeTo }, { start: rangeFrom, end: rangeTo }));
|
|
11345
|
+
});
|
|
11261
11346
|
React__default.useEffect(function () {
|
|
11262
11347
|
if ((rangeContext &&
|
|
11263
11348
|
calendarRangeFrom &&
|
|
11264
11349
|
!startIsEqualOrBeforeRangeContextEnd) ||
|
|
11265
|
-
(rangeContext &&
|
|
11266
|
-
|
|
11350
|
+
(rangeContext &&
|
|
11351
|
+
calendarRangeTo &&
|
|
11352
|
+
!endIsEqualOrAfterRangeContextStart) ||
|
|
11353
|
+
selectionOverlappingUnavailableDate) {
|
|
11354
|
+
!!(setCalendarHasError && !calendarHasError) && setCalendarHasError(true);
|
|
11267
11355
|
}
|
|
11268
11356
|
});
|
|
11269
11357
|
};
|
|
@@ -11290,6 +11378,8 @@
|
|
|
11290
11378
|
// Append children to parents
|
|
11291
11379
|
var tooltipClonesCheckIn = [];
|
|
11292
11380
|
var tooltipClonesCheckOut = [];
|
|
11381
|
+
var tooltipClonesCheckInOnly = [];
|
|
11382
|
+
var tooltipClonesCheckOutOnly = [];
|
|
11293
11383
|
var tooltipClonesSpinner = [];
|
|
11294
11384
|
var tooltipClonesOverlappingDates = [];
|
|
11295
11385
|
if (calendarTooltip && calendarButtons.length > 0) {
|
|
@@ -11310,12 +11400,14 @@
|
|
|
11310
11400
|
calendarCheckOutOnly.forEach(function (element) {
|
|
11311
11401
|
var tooltipClone = calendarTooltipCheckOutOnly.cloneNode(true);
|
|
11312
11402
|
element.appendChild(tooltipClone);
|
|
11403
|
+
tooltipClonesCheckOutOnly.push(tooltipClone);
|
|
11313
11404
|
});
|
|
11314
11405
|
}
|
|
11315
11406
|
if (calendarTooltipCheckInOnly && calendarCheckInOnly.length > 0) {
|
|
11316
11407
|
calendarCheckInOnly.forEach(function (element) {
|
|
11317
11408
|
var tooltipClone = calendarTooltipCheckInOnly.cloneNode(true);
|
|
11318
11409
|
element.appendChild(tooltipClone);
|
|
11410
|
+
tooltipClonesCheckInOnly.push(tooltipClone);
|
|
11319
11411
|
});
|
|
11320
11412
|
}
|
|
11321
11413
|
if (loadingSpinner && calendarMonthContainer) {
|
|
@@ -11335,6 +11427,8 @@
|
|
|
11335
11427
|
tooltipClonesCheckOut.forEach(function (clone) { return clone.remove(); });
|
|
11336
11428
|
tooltipClonesSpinner.forEach(function (clone) { return clone.remove(); });
|
|
11337
11429
|
tooltipClonesOverlappingDates.forEach(function (clone) { return clone.remove(); });
|
|
11430
|
+
tooltipClonesCheckInOnly.forEach(function (clone) { return clone.remove(); });
|
|
11431
|
+
tooltipClonesCheckOutOnly.forEach(function (clone) { return clone.remove(); });
|
|
11338
11432
|
};
|
|
11339
11433
|
});
|
|
11340
11434
|
};
|
|
@@ -11416,7 +11510,7 @@
|
|
|
11416
11510
|
var css_248z$9 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
11417
11511
|
styleInject(css_248z$9);
|
|
11418
11512
|
|
|
11419
|
-
var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n
|
|
11513
|
+
var css_248z$8 = ".will-calendar-filter-container {\n display: flex;\n justify-content: center;\n user-select: none;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n font-size: 25px;\n}\n\n.will-calendar-filter-container .rdp-month {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n border: 1px solid var(--will-primary);\n border-radius: 50%;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n background-color: var(--will-primary);\n opacity: 1;\n}\n\n.will-calendar-filter-container .my-today:not(.rdp-day_selected) { \n font-weight: 700;\n opacity: 1;\n color: var(--will-primary);\n}\n\n.will-calendar-filter-container .rdp-cell {\n position: relative;\n}\n\n.will-calendar-filter-container .rdp-cell button {\n font-weight: 500;\n}\n\n.will-calendar-filter-container .rdp-cell button.booked {\n font-weight: 400;\n cursor: not-allowed;\n}\n\n.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {\n color: var(--will-transparent-black);\n opacity: 1\n}\n\n@media (max-width: 960px) {\n .will-calendar-filter-container .rdp-month .rdp-nav {\n border: none;\n border-radius: initial;\n }\n\n .will-calendar-filter-container .rdp-month.rdp-caption_start {\n padding-left: 10px;\n }\n \n .will-calendar-filter-container .rdp-month.rdp-caption_end {\n padding-right: 10px;\n }\n}\n\n/* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n position: absolute;\n top: -42px;\n transform: translateX(calc(-50% + 20px));\n display: none;\n white-space: nowrap;\n z-index: 2;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only > div,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only > div {\n background-color: white;\n position: relative;\n padding: 5px 10px;\n border: 1px solid var(--will-primary);\n border-radius: 5px;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-tooltip::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only::before,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only::before {\n content: \"\";\n width: 10px;\n height: 10px;\n border: 1px solid var(--will-primary);\n position: absolute;\n bottom: -4px;\n left:calc(50% - 5.555px);\n rotate: 45deg;\n z-index: 0;\n background-color: var(--will-white);\n}\n\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .rdp-cell:hover .will-calendar-tooltip-check-in-only {\n display: block;\n}\n\n/* Loading spinner */\n\n.will-root .will-calendar-filter-container .rdp-months {\n position: relative;\n}\n\n.will-root .will-calendar-filter-container .will-calendar-spinner {\n position: absolute;\n top:0;\n bottom:0;\n left: 0;\n right: 0;\n background-color: var(--will-white-transparent);\n z-index: 3;\n display: none;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n}\n\n/* No active selection */\n\n.will-root .will-calendar-filter-container .no-active-selection-start,\n.will-root .will-calendar-filter-container .no-active-selection-mid,\n.will-root .will-calendar-filter-container .no-active-selection-end { \n position: initial;\n \n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before,\n.will-root .will-calendar-filter-container .no-active-selection-mid::before,\n.will-root .will-calendar-filter-container .no-active-selection-end::before { \n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px dashed var(--will-grey);\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-start::before {\n border-right: none;\n border-top-left-radius: 50%;\n border-bottom-left-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-mid::before {\n border-right: none;\n border-left: none;\n}\n\n.will-root .will-calendar-filter-container .no-active-selection-end::before {\n border-left: none;\n border-top-right-radius: 50%;\n border-bottom-right-radius: 50%;\n}\n\n.will-root .will-calendar-filter-container .rdp-day_selected.rdp-day_range_middle.checkout-option {\n background-color: var(--will-primary-lightest);\n color: inherit;\n}\n\n/* Overlapping date */\n\n.will-root .will-calendar-filter-container .overlapping-date {\n user-select: none;\n pointer-events: none;\n}\n\n.will-root .will-calendar-filter-container .overlapping-date:hover {\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n /* Tooltips */\n.will-root .will-calendar-filter-container .will-calendar-tooltip,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-overlapping-date,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out-only,\n.will-root .will-calendar-filter-container .will-calendar-tooltip-check-in-only {\n top: -70px;\n white-space: wrap;\n max-width: 120px;\n}\n}\n\n\n";
|
|
11420
11514
|
styleInject(css_248z$8);
|
|
11421
11515
|
|
|
11422
11516
|
var Calendar = React__default.forwardRef(function (_a, ref) {
|
|
@@ -11476,6 +11570,7 @@
|
|
|
11476
11570
|
rangeContext: rangeContext,
|
|
11477
11571
|
calendarRange: calendarRange,
|
|
11478
11572
|
calendarHasError: calendarHasError,
|
|
11573
|
+
disabledDates: newDisableCalendarDates === null || newDisableCalendarDates === void 0 ? void 0 : newDisableCalendarDates.disabledDates,
|
|
11479
11574
|
});
|
|
11480
11575
|
return (React__default.createElement("div", { className: "will-filter-bar-calendar", ref: ref },
|
|
11481
11576
|
React__default.createElement("div", { className: "will-calendar-filter-container" },
|
|
@@ -11757,7 +11852,7 @@
|
|
|
11757
11852
|
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11758
11853
|
};
|
|
11759
11854
|
|
|
11760
|
-
var css_248z$6 = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n }\n\n .will-filter-bar-tab-button.light {\n color: var(--will-white)\n }\n\n .will-filter-bar-tab-button.dark {\n color: var(--will-black)\n }\n\n .will-filter-bar-tab-button.light.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.dark.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-
|
|
11855
|
+
var css_248z$6 = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n }\n\n .will-filter-bar-tab-button.light {\n color: var(--will-white)\n }\n\n .will-filter-bar-tab-button.dark {\n color: var(--will-black)\n }\n\n .will-filter-bar-tab-button.light.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.dark.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-lavender);\n }\n\n \n\n";
|
|
11761
11856
|
styleInject(css_248z$6);
|
|
11762
11857
|
|
|
11763
11858
|
var TabButton = function (_a) {
|
|
@@ -12024,7 +12119,57 @@
|
|
|
12024
12119
|
};
|
|
12025
12120
|
};
|
|
12026
12121
|
|
|
12027
|
-
var
|
|
12122
|
+
var Footer = function (_a) {
|
|
12123
|
+
var calendarHasError = _a.calendarHasError, calendarRange = _a.calendarRange, handleClearDates = _a.handleClearDates, language = _a.language, palette = _a.palette;
|
|
12124
|
+
var t = useTranslation().t;
|
|
12125
|
+
var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 600 });
|
|
12126
|
+
var nights = nightsCount({
|
|
12127
|
+
calendarRange: calendarRange,
|
|
12128
|
+
});
|
|
12129
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
12130
|
+
React__default.createElement("div", { className: "will-calendar-footer-actions-wrapper" },
|
|
12131
|
+
React__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12132
|
+
calendarHasError ? (React__default.createElement("span", null, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (React__default.createElement("div", null,
|
|
12133
|
+
React__default.createElement("span", null, parseDate({
|
|
12134
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12135
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12136
|
+
language: language,
|
|
12137
|
+
}) || t('common:checkIn')),
|
|
12138
|
+
React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12139
|
+
React__default.createElement("span", null, parseDate({
|
|
12140
|
+
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12141
|
+
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12142
|
+
language: language,
|
|
12143
|
+
}) || t('common:checkOut')))),
|
|
12144
|
+
React__default.createElement("span", { className: "will-calendar-footer-booked" }, calendarHasError
|
|
12145
|
+
? t("filterBar:calendar.minNights")
|
|
12146
|
+
: nights
|
|
12147
|
+
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12148
|
+
: '')),
|
|
12149
|
+
React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12150
|
+
isMobile &&
|
|
12151
|
+
renderCalendarErrorMessage({
|
|
12152
|
+
palette: palette,
|
|
12153
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12154
|
+
})),
|
|
12155
|
+
React__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12156
|
+
React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates"), variant: "text" }))),
|
|
12157
|
+
React__default.createElement("div", { className: "will-calendar-footer-error" }, calendarHasError &&
|
|
12158
|
+
!isMobile &&
|
|
12159
|
+
renderCalendarErrorMessage({
|
|
12160
|
+
palette: palette,
|
|
12161
|
+
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12162
|
+
}))));
|
|
12163
|
+
};
|
|
12164
|
+
/////////
|
|
12165
|
+
var renderCalendarErrorMessage = function (_a) {
|
|
12166
|
+
var message = _a.message, palette = _a.palette;
|
|
12167
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
12168
|
+
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12169
|
+
React__default.createElement("span", null, message || '')));
|
|
12170
|
+
};
|
|
12171
|
+
|
|
12172
|
+
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 align-items: center;\n margin-top: 10px;\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 margin-top: 10px;\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}";
|
|
12028
12173
|
styleInject(css_248z);
|
|
12029
12174
|
|
|
12030
12175
|
function FilterCalendar(_a) {
|
|
@@ -12033,7 +12178,6 @@
|
|
|
12033
12178
|
// Translations
|
|
12034
12179
|
useUpdateTranslations({ language: language });
|
|
12035
12180
|
var t = useTranslation().t;
|
|
12036
|
-
var isMobile = reactResponsiveExports.useMediaQuery({ maxWidth: 690 });
|
|
12037
12181
|
var _b = useFilterCalendar({
|
|
12038
12182
|
onSubmit: onSubmit,
|
|
12039
12183
|
setToggleCalendar: setToggleCalendar,
|
|
@@ -12048,9 +12192,6 @@
|
|
|
12048
12192
|
var filtersRef = useCloseFilterSection({
|
|
12049
12193
|
handleSelectedFilter: setToggleCalendar,
|
|
12050
12194
|
}).filtersRef;
|
|
12051
|
-
var nights = nightsCount({
|
|
12052
|
-
calendarRange: calendarRange,
|
|
12053
|
-
});
|
|
12054
12195
|
return (React__default.createElement("div", { className: "will-root", style: themePalette }, toggleCalendar && (React__default.createElement("div", { className: "will-calendar-wrapper", ref: filtersRef },
|
|
12055
12196
|
React__default.createElement("div", { className: "will-calendar-header" },
|
|
12056
12197
|
React__default.createElement("h2", null, t('filterBar:calendar.title')),
|
|
@@ -12058,47 +12199,8 @@
|
|
|
12058
12199
|
React__default.createElement("div", { className: "will-calendar-main" },
|
|
12059
12200
|
React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, calendarOffset: calendarOffset, selectedPath: '/rooms', language: language, disableCalendarDates: disableCalendarDates, requestDates: requestDates, disabledDates: disabledDates, setDisabledDates: setDisabledDates, updateCalendarMonthNavigation: updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation: setUpdateCalendarMonthNavigation, updateCalendarDefaultMonth: updateCalendarDefaultMonth, loadingData: loadingData, showFeedback: showFeedback, noActiveSelection: noActiveSelection, palette: palette, setCalendarHasError: setCalendarHasError, setUpdatedForSubmit: setUpdatedForSubmit, rangeContext: rangeContext, calendarHasError: calendarHasError })),
|
|
12060
12201
|
React__default.createElement("div", { className: "will-calendar-footer" },
|
|
12061
|
-
React__default.createElement(
|
|
12062
|
-
React__default.createElement("div", { className: "will-calendar-footer-dates" },
|
|
12063
|
-
calendarHasError ? (React__default.createElement("span", null, t("common:errors.calendarErrors.checkInAvailabilityGuide"))) : (React__default.createElement("div", null,
|
|
12064
|
-
React__default.createElement("span", null, parseDate({
|
|
12065
|
-
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from,
|
|
12066
|
-
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12067
|
-
language: language,
|
|
12068
|
-
}) || t('common:checkIn')),
|
|
12069
|
-
React__default.createElement("span", { className: "will-calendar-footer-dates-separator" }, "-"),
|
|
12070
|
-
React__default.createElement("span", null, parseDate({
|
|
12071
|
-
date: calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to,
|
|
12072
|
-
dateFormat: 'EEEEEE d.M.yyyy',
|
|
12073
|
-
language: language,
|
|
12074
|
-
}) || t('common:checkOut')))),
|
|
12075
|
-
React__default.createElement("span", { className: "will-calendar-footer-booked" }, calendarHasError
|
|
12076
|
-
? t("filterBar:calendar.minNights")
|
|
12077
|
-
: nights
|
|
12078
|
-
? "".concat(nights, " ").concat(t("common:".concat(nights === 1 ? 'night' : 'nights')))
|
|
12079
|
-
: '')),
|
|
12080
|
-
calendarHasError &&
|
|
12081
|
-
isMobile &&
|
|
12082
|
-
renderCalendarErrorMessage({
|
|
12083
|
-
palette: palette,
|
|
12084
|
-
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12085
|
-
}),
|
|
12086
|
-
React__default.createElement("div", { className: "will-calendar-footer-actions" },
|
|
12087
|
-
React__default.createElement(SubmitButton, { onClick: handleClearDates, disabled: !(calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from), label: t("common:clearDates") }))),
|
|
12088
|
-
calendarHasError &&
|
|
12089
|
-
!isMobile &&
|
|
12090
|
-
renderCalendarErrorMessage({
|
|
12091
|
-
palette: palette,
|
|
12092
|
-
message: t("common:errors.calendarErrors.checkInAvailabilityError"),
|
|
12093
|
-
}))))));
|
|
12202
|
+
React__default.createElement(Footer, { calendarHasError: calendarHasError, calendarRange: calendarRange, handleClearDates: handleClearDates, language: language, palette: palette }))))));
|
|
12094
12203
|
}
|
|
12095
|
-
/////////
|
|
12096
|
-
var renderCalendarErrorMessage = function (_a) {
|
|
12097
|
-
var message = _a.message, palette = _a.palette;
|
|
12098
|
-
return (React__default.createElement("div", { className: "will-calendar-footer-error" },
|
|
12099
|
-
React__default.createElement(IconsSvg, { fill: (palette === null || palette === void 0 ? void 0 : palette.error) || 'inherit', size: 25, icon: "warning" }),
|
|
12100
|
-
React__default.createElement("span", { style: { marginLeft: '10px' } }, message || '')));
|
|
12101
|
-
};
|
|
12102
12204
|
|
|
12103
12205
|
exports.Button = Button$1;
|
|
12104
12206
|
exports.FilterBar = FilterBar;
|