willba-component-library 0.2.100 → 0.2.102

package/README.md

@@ -188,3 +188,4 @@ ReactDOM.render(<App />, document.querySelector('#app'))
 | ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]` |
 | fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                               |
 | tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]`                                                |
+| locationIds          | `string[]` | Specifies an array of location identifiers to be included as query parameters in the redirect URL after filter submission. Each ID will be appended as a separate `locationId` parameter. Default is `undefined`. For example: `['1', '2']` results in `?locationId=1&locationId=2`                     |

package/lib/assets/SpinnerSvg.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const SpinnerSVG: ({ fill, size, }: {
+    fill?: string | undefined;
+    size?: number | undefined;
+}) => React.JSX.Element;

package/lib/components/FilterBar/components/buttons/close-button/CloseButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './CloseButton.css';
+interface CloseButtonPropsType {
+    handleClose: () => void;
+}
+export declare const CloseButton: ({ handleClose }: CloseButtonPropsType) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import './SubmitButton.css';
+export declare const SubmitButton: ({ onClick }: any) => React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DateRange } from 'react-day-picker';
+import { CalendarOffset } from '../../FilterBarTypes';
+import 'react-day-picker/dist/style.css';
+import './Calendar.css';
+type Props = {
+    calendarRange: DateRange | undefined;
+    setCalendarRange: (range: DateRange | undefined) => void;
+    calendarOffset?: CalendarOffset;
+    selectedPath: string;
+    locale?: string;
+};
+export declare const Calendar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    handleSelectedFilter: (arg: boolean) => void;
+};
+export declare const useCloseFilterSection: ({ handleSelectedFilter }: Props) => {
+    filtersRef: import("react").MutableRefObject<HTMLDivElement | null>;
+};
+export {};

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

@@ -0,0 +1,5 @@
+type Props = {
+    language?: string;
+};
+export declare const useUpdateTranslations: ({ language }: Props) => void;
+export {};

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

@@ -0,0 +1,6 @@
+import { DateRange } from 'react-day-picker';
+type Props = {
+    calendarRange?: DateRange;
+};
+export declare const parseDates: ({ calendarRange }: Props) => string | null;
+export {};

package/lib/core/utils/handleOverlappingDates.d.ts

@@ -0,0 +1 @@
+export declare const handleOverlappingDates: () => void;

package/lib/core/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { parseDates } from './parseDates';
+export { parseDate } from './parseDate';
+export { nightsCount } from './nightsCount';

package/lib/core/utils/nightsCount.d.ts

@@ -0,0 +1,6 @@
+import { DateRange } from 'react-day-picker';
+type Props = {
+    calendarRange?: DateRange;
+};
+export declare const nightsCount: ({ calendarRange }: Props) => number | undefined;
+export {};

package/lib/core/utils/parseDate.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    date?: Date;
+    dateFormat?: string;
+    language?: string;
+};
+export declare const parseDate: ({ date, dateFormat, language, }: Props) => string | null;
+export {};

package/lib/core/utils/parseDates.d.ts

@@ -0,0 +1,6 @@
+import { DateRange } from 'react-day-picker';
+type Props = {
+    calendarRange?: DateRange;
+};
+export declare const parseDates: ({ calendarRange }: Props) => string | null;
+export {};

package/lib/index.esm.js

@@ -11622,7 +11622,10 @@ var parseGuests = function (_a) {
     var guestLabel = _a.guestLabel, guestsLabel = _a.guestsLabel, guestsPlaceholder = _a.guestsPlaceholder, ageCategoryCounts = _a.ageCategoryCounts, ageCategories = _a.ageCategories;
     var parsedData = Object.entries(ageCategoryCounts).reduce(function (acc, _a) {
         var _b = __read(_a, 2), key = _b[0], value = _b[1];
-        var ageCategoryId = key[key.length - 1];
+        var parts = key.split('-');
+        if (parts.length < 2)
+            return acc;
+        var ageCategoryId = parts[1];
         var ageCategory = ageCategories.find(function (c) { return c.id === ageCategoryId; });
         if (ageCategory && value) {
             return {
@@ -11635,7 +11638,7 @@ var parseGuests = function (_a) {
     var htmlString = parsedData.html.length > 1 ? parsedData.html.join(' + ') : '';
     return {
         content: parsedData.total
-            ? "<span style=\"display: inline-block; min-width: 10px\">".concat(parsedData.total, "</span> ").concat(parsedData.total > 1 ? guestsLabel : guestLabel).concat(htmlString ? " &nbsp; ( ".concat(htmlString, " )") : '')
+            ? "<span class=\"will-guest-count\">".concat(parsedData.total, "</span> ").concat(parsedData.total > 1 ? guestsLabel : guestLabel).concat(htmlString ? " &nbsp; ( ".concat(htmlString, " )") : '')
             : guestsPlaceholder,
         data: parsedData,
     };
@@ -11917,7 +11920,7 @@ var Categories = function (_a) {
             React__default__default.createElement("span", null, itm))); }))));
 };
 
-var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n  \n}\n\n\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root { \n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;  \n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 45px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark)\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light)\n}\n\n";
+var css_248z$1 = ".will-root {\n  z-index: 999;\n  width: fit-content;\n  min-width: 796px;\n  max-height: 100vh;\n  position: relative;\n}\n\n.will-root.is-full-width {\n  width: 100%;\n  min-width: auto;\n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px;\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white);\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {\n    width: 100%;\n    min-width: auto;\n    max-height: 100vh;\n    z-index: 3;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top: 0;\n    padding: 45px 20px;\n    position: relative;\n  }\n}\n\n/* Common */\n\n.will-filter-bar-header.dark,\n.will-filter-bar-container.dark {\n  box-shadow: var(--will-box-shadow-dark);\n}\n\n.will-filter-bar-header.light,\n.will-filter-bar-container.light {\n  box-shadow: var(--will-box-shadow-light);\n}\n\n.will-guest-count {\n  display: inline-block;\n  min-width: 10px;\n}\n";
 styleInject(css_248z$1);
 
 function FilterBar(_a) {