josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/cjs/Services/MulticalendarStatesAndSettings.d.ts

@@ -0,0 +1,34 @@
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @returns saved height scroll position of selected multicalendar
+ */
+export declare const getMulticalendarScrollTopPosition: (multicalendarId: string) => string | null;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @param scrollTop scroll height number
+ */
+export declare const setMulticalendarScrollTopPosition: (multicalendarId: string, scrollTop: string) => void;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ */
+export declare const eraseMulticalendarScrollTopPosition: (multicalendarId: string) => void;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @returns saved horizontal scroll position of selected multicalendar
+ */
+export declare const getMulticalendarScrollLeftPosition: (multicalendarId: string) => string | null;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @param xScroll left scroll number
+ */
+export declare const setMulticalendarScrollLeftPosition: (multicalendarId: string, scrollLeft: string) => void;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ */
+export declare const eraseMulticalendarScrollLeftPosition: (multicalendarId: string) => void;

package/dist/cjs/Services/MulticalendarStatesAndSettings.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eraseMulticalendarScrollLeftPosition = exports.setMulticalendarScrollLeftPosition = exports.getMulticalendarScrollLeftPosition = exports.eraseMulticalendarScrollTopPosition = exports.setMulticalendarScrollTopPosition = exports.getMulticalendarScrollTopPosition = void 0;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @returns saved height scroll position of selected multicalendar
+ */
+const getMulticalendarScrollTopPosition = (multicalendarId) => {
+    return sessionStorage.getItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
+};
+exports.getMulticalendarScrollTopPosition = getMulticalendarScrollTopPosition;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @param scrollTop scroll height number
+ */
+const setMulticalendarScrollTopPosition = (multicalendarId, scrollTop) => {
+    sessionStorage.setItem(`MulticalendarScrollTopPosition-${multicalendarId}`, scrollTop);
+};
+exports.setMulticalendarScrollTopPosition = setMulticalendarScrollTopPosition;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ */
+const eraseMulticalendarScrollTopPosition = (multicalendarId) => {
+    sessionStorage.removeItem(`MulticalendarScrollTopPosition-${multicalendarId}`);
+};
+exports.eraseMulticalendarScrollTopPosition = eraseMulticalendarScrollTopPosition;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @returns saved horizontal scroll position of selected multicalendar
+ */
+const getMulticalendarScrollLeftPosition = (multicalendarId) => {
+    return sessionStorage.getItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
+};
+exports.getMulticalendarScrollLeftPosition = getMulticalendarScrollLeftPosition;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ * @param xScroll left scroll number
+ */
+const setMulticalendarScrollLeftPosition = (multicalendarId, scrollLeft) => {
+    sessionStorage.setItem(`MulticalendarScrollLeftPosition-${multicalendarId}`, scrollLeft);
+};
+exports.setMulticalendarScrollLeftPosition = setMulticalendarScrollLeftPosition;
+/**
+ *
+ * @param multicalendarId id of the multicalendar (multicalendarId prop)
+ */
+const eraseMulticalendarScrollLeftPosition = (multicalendarId) => {
+    sessionStorage.removeItem(`MulticalendarScrollLeftPosition-${multicalendarId}`);
+};
+exports.eraseMulticalendarScrollLeftPosition = eraseMulticalendarScrollLeftPosition;

package/dist/cjs/Services/accessToken.d.ts

@@ -0,0 +1,3 @@
+export declare const getAccessToken: () => string | null;
+export declare const setAccessToken: (token: string) => void;
+export declare const eraseAccessToken: () => void;

package/dist/cjs/Services/accessToken.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eraseAccessToken = exports.setAccessToken = exports.getAccessToken = void 0;
+const getAccessToken = () => {
+    return localStorage.getItem("access_token_turbosuite");
+};
+exports.getAccessToken = getAccessToken;
+const setAccessToken = (token) => {
+    localStorage.setItem("access_token_turbosuite", token);
+};
+exports.setAccessToken = setAccessToken;
+const eraseAccessToken = () => {
+    localStorage.removeItem("access_token_turbosuite");
+};
+exports.eraseAccessToken = eraseAccessToken;

package/dist/cjs/common/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const access: string;
+export declare const propertyManagerCode: string;
+export declare const propertyManagerLookAndFeelCode: string;
+export declare const languageCode: string;
+export declare const millisecondsOfOneDay = 86400000;

package/dist/cjs/common/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.millisecondsOfOneDay = exports.languageCode = exports.propertyManagerLookAndFeelCode = exports.propertyManagerCode = exports.access = void 0;
+exports.access = window.access;
+exports.propertyManagerCode = window.propertyManagerCode;
+exports.propertyManagerLookAndFeelCode = window.propertyManagerLookAndFeelCode;
+exports.languageCode = window.languageCode;
+exports.millisecondsOfOneDay = 86400000;

package/dist/cjs/common/turboSuiteUrls.d.ts

@@ -0,0 +1,7 @@
+declare let turboSuiteUrls: {
+    testEnviroment: string;
+    apiV1Prod: string;
+    apiV1PreProd: string;
+    middleware: string;
+};
+export default turboSuiteUrls;

package/dist/cjs/common/turboSuiteUrls.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+let turboSuiteUrls = {
+    testEnviroment: "http://localhost",
+    apiV1Prod: "https://api.turbosuite.es/v1/",
+    apiV1PreProd: "https://api.demo.turbosuite.com/v1/",
+    middleware: window.actionUrl,
+};
+exports.default = turboSuiteUrls;

package/dist/cjs/common/types.d.ts

@@ -0,0 +1,113 @@
+import { languageType } from "./assets/languages/types";
+
+export interface customWindow extends Window {
+  access: string;
+  propertyManagerCode: string;
+  propertyManagerLookAndFeelCode: string;
+  languageCode: string;
+  actionUrl: string;
+}
+
+export interface SagaActionParamsType<T> {
+  type: string;
+  payload: T;
+  repeatsLeft: number;
+  persistentReduxAction: string;
+  reduxError: string;
+  showErrorMessage?: boolean;
+  millisecondsWait?: number;
+}
+
+export interface NotificationsReducerStateType {
+  quickNotifications: QuickNotificationsType[];
+}
+
+export interface lookAndFeelType {
+  code: string;
+  logoUrl: string;
+  primaryColor: string;
+  secondaryColor: string;
+  fontFamily: "Roboto" | "Bitter" | "Dosis" | "Figtree" | "Mulish" | "Nunito Sans";
+  enabled: boolean;
+  propertyManagerCode?: string;
+}
+
+export interface AppSettingsReducerStateType {
+  view: "multidestiny";
+  language: languageType;
+  lookAndFeel?: lookAndFeelType;
+}
+
+export interface DestiniesReducerStateType {
+  countries: CountryType[];
+  regions: RegionType[];
+  provinces: ProvinceType[];
+  municipalities: MunicipalityType[];
+  mixedDestinies: DestinyType[];
+}
+
+export interface DatesReducerStateType {
+  draggingOverDateCells: boolean;
+}
+
+export interface QuickNotificationsType {
+  text: string;
+  creation: Date;
+  type: "info" | "error" | "ok";
+}
+
+export interface CountryType {
+  code: string;
+  name: string;
+}
+
+export interface RegionType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+}
+
+export interface ProvinceType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+  region: {
+    code: string;
+    name: string;
+  };
+}
+
+export interface MunicipalityType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+  region: {
+    code: string;
+    name: string;
+  };
+  province: {
+    code: string;
+    name: string;
+  };
+}
+
+export type DestinyType = (CountryType | RegionType | ProvinceType | MunicipalityType) & {
+  type: "country" | "region" | "province" | "municipality";
+};
+
+export type SeasonsType = "high" | "medium high" | "medium" | "medium low" | "low"
+
+export type EventsType = "1" | "2" | "3"
+
+export type HolidaysType = "1" | "2" | "3"
+
+export type OccupationsType = "high" | "medium" | "low"

package/dist/cjs/components/BubbleMenu/BubbleMenu.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type BubbleMenuProps = {
+    options: {
+        icon: JSX.Element;
+        text: string;
+        visible: boolean;
+        optionCallback: () => void;
+    }[];
+    language?: "en" | "es";
+};
+declare const BubbleMenu: ({ options, language }: BubbleMenuProps) => React.JSX.Element;
+export default BubbleMenu;

package/dist/cjs/components/BubbleMenu/BubbleMenu.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const BubbleMenu_module_scss_1 = __importDefault(require("./BubbleMenu.module.scss"));
+//icons
+const bs_1 = require("react-icons/bs");
+const io5_1 = require("react-icons/io5");
+const BubbleMenuDictionary = {
+    en: {
+        menu: "menu",
+        close: "close",
+    },
+    es: {
+        menu: "menú",
+        close: "cerrar",
+    },
+};
+const BubbleMenu = ({ options, language = "en" }) => {
+    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("button", { className: BubbleMenu_module_scss_1.default["menu-button"], onClick: () => setShowMenu(!showMenu) },
+            showMenu ? react_1.default.createElement(bs_1.BsX, null) : react_1.default.createElement(io5_1.IoMenu, null),
+            react_1.default.createElement("p", null, showMenu
+                ? BubbleMenuDictionary[language]["close"]
+                : BubbleMenuDictionary[language]["menu"])),
+        react_1.default.createElement("section", { className: BubbleMenu_module_scss_1.default["menu-container"], "data-status": showMenu ? "visible" : "hidden", onClick: () => setShowMenu(false) },
+            react_1.default.createElement("ul", null, options
+                .filter((option) => option.visible)
+                .map((option, index) => (react_1.default.createElement("li", { key: option.text, style: { transitionDelay: `${index * 100}ms` } },
+                react_1.default.createElement("button", { onClick: () => setTimeout(option.optionCallback, 300 + options.length * 100) },
+                    option.icon,
+                    option.text))))))));
+};
+exports.default = BubbleMenu;

package/dist/cjs/components/BubbleMenu/BubbleMenu.module.scss

@@ -0,0 +1,113 @@
+.menu-container {
+  position: fixed;
+  top: 0px;
+  padding-top: 80px;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  transition: background-color 300ms ease-in-out;
+  &[data-status="visible"] {
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 1;
+    ul li {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+  }
+  &[data-status="hidden"] {
+    background-color: transparent;
+    z-index: -1;
+    ul li {
+      opacity: 0;
+      transform: translateX(-110px);
+    }
+  }
+  ul {
+    list-style: none;
+    padding-inline-start: 5px;
+    li {
+      transition: all 300ms ease-in-out;
+      button {
+        border-width: 3px;
+        border-style: solid;
+        border-color: #959595;
+        box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
+        color: #959595;
+        background-color: rgba(255, 255, 255, 0.9);
+        -webkit-tap-highlight-color: transparent;
+        user-select: none;
+        cursor: pointer;
+        transition: all 100ms ease-in-out;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 100px;
+        margin: 15px 0px;
+        border-radius: 50px;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        svg {
+          min-width: 40px;
+          min-height: 40px;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+          box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
+        }
+      }
+    }
+  }
+}
+
+.menu-button {
+  position: fixed;
+  z-index: 2;
+  top: 30px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 25px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #959595;
+  box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
+  color: #959595;
+  background-color: rgba(255, 255, 255, 0.9);
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  cursor: pointer;
+  transition: all 100ms ease-in-out;
+  svg {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 100%;
+    height: 34px;
+    color: #0d280b;
+    path {
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  p {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    color: #0d280b;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+  &:active {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
+  }
+}

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type CalendarDatePickerProps = {
+    mode: "single" | "multiple" | "range" | "booking";
+    onSelectedDatesChange: (dates: Date[]) => void;
+    language?: "es" | "en";
+    customDates?: {
+        color: string;
+        dates: Date[];
+        selectable: boolean;
+        crossed?: boolean;
+        clickSideEffect?: (date: Date) => void;
+    }[];
+    title?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    customStyle?: React.CSSProperties;
+};
+declare const CalendarDatePicker: ({ mode, onSelectedDatesChange, language, customDates, title, minimumDate, maximumDate, customStyle, }: CalendarDatePickerProps) => React.JSX.Element;
+export default CalendarDatePicker;

package/dist/cjs/components/CalendarDatePicker/CalendarDatePicker.js

@@ -0,0 +1,191 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const CalendarDatePicker_module_scss_1 = __importDefault(require("./CalendarDatePicker.module.scss"));
+const bs_1 = require("react-icons/bs");
+const InputBoxWithConfirmation_1 = __importDefault(require("../InputBoxWithConfirmation/InputBoxWithConfirmation"));
+const CalendarScrollableSection_1 = __importDefault(require("./subcomponents/CalendarScrollableSection"));
+const calendarDatePickerDictionary = {
+    en: {
+        january: "january",
+        february: "february",
+        march: "march",
+        april: "april",
+        may: "may",
+        june: "june",
+        july: "july",
+        august: "august",
+        september: "september",
+        october: "october",
+        november: "november",
+        december: "december",
+        monday: "monday",
+        tuesday: "tuesday",
+        wednesday: "wednesday",
+        thursday: "thursday",
+        friday: "friday",
+        saturday: "saturday",
+        sunday: "sunday",
+        today: "today",
+    },
+    es: {
+        january: "enero",
+        february: "febrero",
+        march: "marzo",
+        april: "abril",
+        may: "mayo",
+        june: "junio",
+        july: "julio",
+        august: "agosto",
+        september: "septiembre",
+        october: "octubre",
+        november: "noviembre",
+        december: "diciembre",
+        monday: "lunes",
+        tuesday: "martes",
+        wednesday: "miércoles",
+        thursday: "jueves",
+        friday: "viernes",
+        saturday: "sábado",
+        sunday: "domingo",
+        today: "hoy",
+    },
+};
+const getMonthName = (month, language) => {
+    switch (month) {
+        case 0:
+            return calendarDatePickerDictionary[language].january;
+        case 1:
+            return calendarDatePickerDictionary[language].february;
+        case 2:
+            return calendarDatePickerDictionary[language].march;
+        case 3:
+            return calendarDatePickerDictionary[language].april;
+        case 4:
+            return calendarDatePickerDictionary[language].may;
+        case 5:
+            return calendarDatePickerDictionary[language].june;
+        case 6:
+            return calendarDatePickerDictionary[language].july;
+        case 7:
+            return calendarDatePickerDictionary[language].august;
+        case 8:
+            return calendarDatePickerDictionary[language].september;
+        case 9:
+            return calendarDatePickerDictionary[language].october;
+        case 10:
+            return calendarDatePickerDictionary[language].november;
+        case 11:
+            return calendarDatePickerDictionary[language].december;
+        default:
+            return "";
+    }
+};
+const CalendarDatePicker = ({ mode, onSelectedDatesChange = () => { }, language = "en", customDates = [], title, minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), customStyle, }) => {
+    const [dates, setDates] = (0, react_1.useState)([]);
+    const [year, setYear] = (0, react_1.useState)(new Date().getFullYear());
+    const [month, setMonth] = (0, react_1.useState)(new Date().getMonth());
+    const [reloadKey, setReloadKey] = (0, react_1.useState)(Math.random());
+    const isDateValidForChange = (date) => {
+        const minimumMonthFirstDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), 1);
+        const maximumMonthLastDate = new Date(maximumDate.getFullYear(), maximumDate.getMonth() + 1, 0);
+        const isDateHigherThanMinimumMonthFirstDate = date.valueOf() >= minimumMonthFirstDate.valueOf();
+        const isDateLowerThanMaximumMonthLastDate = date.valueOf() <= maximumMonthLastDate.valueOf();
+        return isDateHigherThanMinimumMonthFirstDate && isDateLowerThanMaximumMonthLastDate;
+    };
+    return (react_1.default.createElement("div", { className: CalendarDatePicker_module_scss_1.default["calendar-date-picker"], style: customStyle },
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["title"] },
+            react_1.default.createElement(bs_1.BsFillCalendar3WeekFill, null),
+            title,
+            react_1.default.createElement("button", { className: CalendarDatePicker_module_scss_1.default["today-button"], onClick: () => {
+                    const today = new Date();
+                    if (isDateValidForChange(today)) {
+                        setMonth(today.getMonth());
+                        setYear(today.getFullYear());
+                        setReloadKey(Math.random());
+                    }
+                } }, calendarDatePickerDictionary[language]["today"].slice(0, 1).toUpperCase() +
+                calendarDatePickerDictionary[language]["today"].slice(1))),
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["month-and-year"] },
+            react_1.default.createElement("select", { style: { fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily }, className: CalendarDatePicker_module_scss_1.default["month-input"], value: month, onChange: (event) => {
+                    const numericValue = Number(event.target.value);
+                    setMonth(numericValue);
+                    setReloadKey(Math.random());
+                } }, Array(12)
+                .fill(0)
+                .map((_, index) => {
+                const referenceDate = new Date(year, index, 1);
+                const isDisabled = !isDateValidForChange(referenceDate);
+                return (react_1.default.createElement("option", { key: getMonthName(index, language), value: index, disabled: isDisabled }, getMonthName(index, language)));
+            })),
+            react_1.default.createElement(InputBoxWithConfirmation_1.default, { inputType: "number", divWrapperCustomStyle: {
+                    width: "4ch",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, inputBoxCustomStyle: {
+                    padding: 0,
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, maxLength: 4, defaultValue: year.toString(), overrideCurrentValue: year.toString(), minimumValue: minimumDate.getFullYear().toString(), maximumValue: maximumDate.getFullYear().toString(), onConfirmAction: (inputCurrentValue) => {
+                    let numericValue = Number(inputCurrentValue);
+                    const referenceDate = new Date(numericValue, month, 1);
+                    if (!isDateValidForChange(referenceDate)) {
+                        if (referenceDate.valueOf() < minimumDate.valueOf()) {
+                            setYear(minimumDate.getFullYear());
+                            setMonth(minimumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                        else if (referenceDate.valueOf() > maximumDate.valueOf()) {
+                            setYear(maximumDate.getFullYear());
+                            setMonth(maximumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                    }
+                    else {
+                        setYear(numericValue);
+                        setReloadKey(Math.random());
+                    }
+                } })),
+        react_1.default.createElement("section", { className: CalendarDatePicker_module_scss_1.default["week-days"] },
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].monday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].tuesday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].wednesday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].thursday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].friday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].saturday.slice(0, 1).toUpperCase()),
+            react_1.default.createElement("p", null, calendarDatePickerDictionary[language].sunday.slice(0, 1).toUpperCase())),
+        react_1.default.createElement(CalendarScrollableSection_1.default, { key: reloadKey, dates: dates, year: year, month: month, mode: mode, onSelectedDatesChange: (selectedDates) => {
+                onSelectedDatesChange(selectedDates);
+                setDates(selectedDates);
+            }, onFocusedMonth: (month, year) => {
+                setMonth(month);
+                setYear(year);
+            }, customDates: customDates, minimumDate: minimumDate, maximumDate: maximumDate })));
+};
+exports.default = CalendarDatePicker;