josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/cjs/components/Multicalendar/MulticalendarOwnFunctions.js

@@ -0,0 +1,192 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authomaticScrollInGrid = exports.startAuthomaticScrollInGrid = exports.defineMonthsArray = exports.defineListElementsArrayVisibleList = exports.defineYOffset = exports.defineVisibleDatesArray = exports.defineXOffset = exports.defineMinimalVisibleDate = exports.minimalDateMilliseconds = exports.scrollByDate = void 0;
+const react_1 = __importDefault(require("react"));
+//Utils
+const jsToSqlDate_1 = __importDefault(require("../../utils/jsToSqlDate"));
+const monthYearString_1 = __importDefault(require("../../utils/monthYearString"));
+//Variables
+const constants_1 = require("../../common/constants");
+/**
+ *
+ * @param dateObject Date Object
+ * @param elementRef ref of the element that will be scrolled
+ * @param leftPagination number of cells to the left
+ * @param cellsWidth width of cells
+ */
+function scrollByDate(dateObject, elementRef, leftPagination, cellsWidth) {
+    //nueva posicion de scroll horizontal = cantidad de dias hasta hoy * ancho de celda
+    if (elementRef.current !== null) {
+        elementRef.current.scrollLeft =
+            ((Date.parse(dateObject.toString()) -
+                (Date.parse(new Date().toString()) -
+                    (leftPagination) * constants_1.millisecondsOfOneDay)) /
+                constants_1.millisecondsOfOneDay) *
+                cellsWidth;
+    }
+}
+exports.scrollByDate = scrollByDate;
+/**
+ *
+ * @param xPosition position X of grid
+ * @param cellsWidth width of grid cells
+ * @param leftPagination number of cells to the left
+ * @param initialDateOffset offset of cells for the initial date
+ * @returns milliseconds of the minimal date
+ */
+function minimalDateMilliseconds(xPosition, cellsWidth, leftPagination, initialDateOffset) {
+    let minimalDate = new Date(Date.parse(new Date().toString()) +
+        constants_1.millisecondsOfOneDay *
+            (Math.floor(xPosition / cellsWidth) - leftPagination - initialDateOffset));
+    minimalDate.setHours(12, 0, 0, 0);
+    return Date.parse(minimalDate.toString());
+}
+exports.minimalDateMilliseconds = minimalDateMilliseconds;
+/**
+ *
+ * @param millisecondsOfMinimalDate milliseconds of the minimal date
+ * @param initialDateOffset offset of number of cells for initial date
+ * @returns The minimal visible date object
+ */
+function defineMinimalVisibleDate(millisecondsOfMinimalDate, initialDateOffset) {
+    return new Date(millisecondsOfMinimalDate + initialDateOffset * constants_1.millisecondsOfOneDay);
+}
+exports.defineMinimalVisibleDate = defineMinimalVisibleDate;
+/**
+ *
+ * @param xPosition current x position in the grid horizontal scroll
+ * @param cellsWidth width of grid cells
+ * @param chunkRenderX extra rendered cells in a row
+ * @returns number X offset
+ */
+function defineXOffset(xPosition, cellsWidth, chunkRenderX) {
+    return Math.floor(xPosition / cellsWidth) - chunkRenderX;
+}
+exports.defineXOffset = defineXOffset;
+/**
+ *
+ * @param paginationWidth width of pagination of horizontal axis of the grid
+ * @param chunkRenderX extra rendered cells in every row
+ * @param minimalDateMilliseconds milliseconds of the minimal date
+ * @returns an array containing all the dates that should be rendered base on position of x scroll
+ */
+function defineVisibleDatesArray(paginationWidth, chunkRenderX, minimalDateMilliseconds) {
+    let array = [];
+    for (let index = 0; index < paginationWidth + chunkRenderX * 2; index++) {
+        array[index] = new Date(minimalDateMilliseconds + constants_1.millisecondsOfOneDay * (index + 1));
+    }
+    return array;
+}
+exports.defineVisibleDatesArray = defineVisibleDatesArray;
+/**
+ *
+ * @param yPosition current y position in the grid vertical scroll
+ * @param cellsHeight height of grid cells
+ * @param chunkRenderY extra rendered cells in every column
+ * @returns number Y offset
+ */
+function defineYOffset(yPosition, cellsHeight, chunkRenderY) {
+    let desfase = Math.floor(yPosition / cellsHeight) - chunkRenderY;
+    if (desfase < 0)
+        desfase = 0;
+    return desfase;
+}
+exports.defineYOffset = defineYOffset;
+/**
+ *
+ * @param paginationHeight height of pagination of the vertical axis of the grid
+ * @param chunkRenderY extra rendered cells in every column
+ * @param offset offset from top of the list
+ * @param listElementsIds all ids array
+ * @returns Array of the destinies that will be rendered
+ */
+function defineListElementsArrayVisibleList(paginationHeight, chunkRenderY, offset, listElementsIds) {
+    let array = [];
+    for (let index = 0; index < paginationHeight + chunkRenderY * 2; index++) {
+        if (listElementsIds[index + offset] && index + offset >= 0)
+            array[index] = listElementsIds[index + offset];
+    }
+    return array;
+}
+exports.defineListElementsArrayVisibleList = defineListElementsArrayVisibleList;
+/**
+ *
+ * @param leftPagination number of cells to the left
+ * @param language language object for traductions
+ * @returns string of the date, month followed by year
+ */
+function defineMonthsArray(leftPagination, rightPagination, language) {
+    let minimumDateMilliseconds = Date.parse(new Date().toString()) - leftPagination * constants_1.millisecondsOfOneDay;
+    let maximumDateMilliseconds = Date.parse(new Date().toString()) + rightPagination * constants_1.millisecondsOfOneDay;
+    let array = [];
+    let sideArray = [];
+    for (let index = 0; index * constants_1.millisecondsOfOneDay + minimumDateMilliseconds < maximumDateMilliseconds; index++) {
+        let dateObject = new Date(constants_1.millisecondsOfOneDay * index + minimumDateMilliseconds);
+        let firstDayOfTheMonth = dateObject;
+        firstDayOfTheMonth.setDate(1);
+        firstDayOfTheMonth.setHours(12, 0, 0, 0);
+        let dateString = (0, monthYearString_1.default)(dateObject, language);
+        if (!sideArray.includes(dateString)) {
+            sideArray.push(dateString);
+            array.push(react_1.default.createElement("option", {
+                key: (0, jsToSqlDate_1.default)(firstDayOfTheMonth),
+                value: (0, jsToSqlDate_1.default)(firstDayOfTheMonth),
+            }, dateString));
+        }
+    }
+    return array;
+}
+exports.defineMonthsArray = defineMonthsArray;
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridRef ref ofthe grid container
+ */
+function startAuthomaticScrollInGrid(holdingClic, xClientPosition, yClientPosition, widthHorizontalBorder, widthVerticalBorder, gridRef) {
+    if (holdingClic && gridRef.current !== null) {
+        if (xClientPosition < widthHorizontalBorder)
+            gridRef.current.scrollLeft -= 10;
+        if (xClientPosition > gridRef.current.offsetWidth - widthHorizontalBorder)
+            gridRef.current.scrollLeft += 10;
+        if (yClientPosition < widthVerticalBorder)
+            gridRef.current.scrollTop -= 10;
+        if (yClientPosition > gridRef.current.offsetHeight - widthVerticalBorder)
+            gridRef.current.scrollTop += 10;
+    }
+}
+exports.startAuthomaticScrollInGrid = startAuthomaticScrollInGrid;
+/**
+ *
+ * @param holdingClic boolean to know if mouse id down
+ * @param xClientPosition position x of the client
+ * @param yClientPosition position y of the client
+ * @param widthHorizontalBorder horizontal border of activation
+ * @param widthVerticalBorder vertical border of activation
+ * @param gridContainer grid container
+ */
+function authomaticScrollInGrid(holdingClic, xClientPosition, yClientPosition, widthHorizontalBorder, widthVerticalBorder, gridContainer) {
+    if (holdingClic) {
+        if (xClientPosition) {
+            if (xClientPosition < widthHorizontalBorder)
+                gridContainer.scrollLeft -= widthHorizontalBorder - xClientPosition;
+            if (xClientPosition > gridContainer.offsetWidth - widthHorizontalBorder)
+                gridContainer.scrollLeft +=
+                    xClientPosition + widthHorizontalBorder - gridContainer.offsetWidth;
+        }
+        if (yClientPosition) {
+            if (yClientPosition < widthVerticalBorder)
+                gridContainer.scrollTop -= widthVerticalBorder - yClientPosition;
+            if (yClientPosition > gridContainer.offsetHeight - widthVerticalBorder)
+                gridContainer.scrollTop +=
+                    yClientPosition + widthVerticalBorder - gridContainer.offsetHeight;
+        }
+    }
+}
+exports.authomaticScrollInGrid = authomaticScrollInGrid;

package/dist/cjs/components/Multicalendar/subcomponents/composites/CellsRow/CellsRow.css

@@ -0,0 +1,5 @@
+.cells-row {
+  display: flex;
+  flex-flow: row;
+}
+

package/dist/{components → cjs/components}/Multicalendar/subcomponents/composites/CellsRow/CellsRow.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./CellsRow.css";
-import { CellsRowsPropsType } from "./types";
-declare const CellsRow: ({ listElementId, visibleDatesArray, width, height, cellsWidth, cellsHeight, ReactCellChildren, }: CellsRowsPropsType) => React.JSX.Element;
-export default CellsRow;
+import React from "react";
+import "./CellsRow.css";
+import { CellsRowsPropsType } from "./types";
+declare const CellsRow: ({ listElementId, visibleDatesArray, width, height, cellsWidth, cellsHeight, ReactCellChildren, }: CellsRowsPropsType) => React.JSX.Element;
+export default CellsRow;

package/dist/cjs/components/Multicalendar/subcomponents/composites/CellsRow/CellsRow.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./CellsRow.css");
+//Componentes
+const Cell_1 = __importDefault(require("../../individuals/Cell/Cell"));
+//Utils
+const jsToSqlDate_1 = __importDefault(require("../../../../../utils/jsToSqlDate"));
+const CellsRow = ({ listElementId, visibleDatesArray, width, height, cellsWidth, cellsHeight, ReactCellChildren, }) => {
+    //Render
+    return (react_1.default.createElement("div", { className: "cells-row", style: {
+            width: width,
+            height: height,
+        } }, visibleDatesArray.length > 0 &&
+        visibleDatesArray.map((date) => (react_1.default.createElement(Cell_1.default, { key: listElementId + date.toString(), date: (0, jsToSqlDate_1.default)(date), listElementId: listElementId, width: cellsWidth, heigth: cellsHeight, ReactCellChildren: ReactCellChildren })))));
+};
+exports.default = CellsRow;

package/dist/cjs/components/Multicalendar/subcomponents/composites/CellsRow/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface CellsRowsPropsType {
+  listElementId: string | number;
+  visibleDatesArray: Date[];
+  width: number;
+  height: number;
+  cellsWidth: number;
+  cellsHeight: number;
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/cjs/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.css

@@ -0,0 +1,6 @@
+.dates-grid {
+  box-sizing: border-box;
+}
+.dates-grid .div-cells-row-height {
+  box-sizing: border-box;
+}

package/dist/{components → cjs/components}/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./DatesGrid.css";
-import { DatesGridPropTypes } from "./types";
-declare const DatesGrid: ({ gridWidth, gridHeight, xOffset, yOffset, cellsWidth, cellsHeight, visibleListElementsIdsArray, visibleDates, ReactCellChildren, }: DatesGridPropTypes) => React.JSX.Element;
-export default DatesGrid;
+import React from "react";
+import "./DatesGrid.css";
+import { DatesGridPropTypes } from "./types";
+declare const DatesGrid: ({ gridWidth, gridHeight, xOffset, yOffset, cellsWidth, cellsHeight, visibleListElementsIdsArray, visibleDates, ReactCellChildren, }: DatesGridPropTypes) => React.JSX.Element;
+export default DatesGrid;

package/dist/cjs/components/Multicalendar/subcomponents/composites/DatesGrid/DatesGrid.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./DatesGrid.css");
+//Componentes
+const CellsRow_1 = __importDefault(require("../CellsRow/CellsRow"));
+const DatesGrid = ({ gridWidth, gridHeight, xOffset, yOffset, cellsWidth, cellsHeight, visibleListElementsIdsArray, visibleDates, ReactCellChildren, }) => {
+    return (react_1.default.createElement("div", { className: "dates-grid", style: {
+            width: gridWidth,
+        } },
+        react_1.default.createElement("div", { className: "div-cells-row-height", style: {
+                height: gridHeight,
+                paddingTop: yOffset * cellsHeight,
+                paddingLeft: xOffset * cellsWidth,
+            } }, visibleListElementsIdsArray.map((listElementId) => (react_1.default.createElement(CellsRow_1.default, { key: listElementId, listElementId: listElementId, visibleDatesArray: visibleDates, width: visibleDates.length * cellsWidth, height: cellsHeight, cellsWidth: cellsWidth, cellsHeight: cellsHeight, ReactCellChildren: ReactCellChildren }))))));
+};
+exports.default = DatesGrid;

package/dist/cjs/components/Multicalendar/subcomponents/composites/DatesGrid/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface DatesGridPropTypes {
+  gridWidth: number;
+  gridHeight: number;
+  xOffset: number;
+  yOffset: number;
+  cellsWidth: number;
+  cellsHeight: number;
+  visibleListElementsIdsArray: string[] | number[];
+  visibleDates: Date[];
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/cjs/components/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.css

@@ -0,0 +1,3 @@
+.list-element-column {
+  box-sizing: border-box;
+}

package/dist/{components → cjs/components}/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./ListElementsColumn.css";
-import { ListElementsColumnPropsType } from "./types";
-declare const ListElementsColumn: ({ ReactListElementChildren, listHeight, yOffset, elementsHeight, idsArray, }: ListElementsColumnPropsType) => React.JSX.Element;
-export default ListElementsColumn;
+import React from "react";
+import "./ListElementsColumn.css";
+import { ListElementsColumnPropsType } from "./types";
+declare const ListElementsColumn: ({ ReactListElementChildren, listHeight, yOffset, elementsHeight, idsArray, }: ListElementsColumnPropsType) => React.JSX.Element;
+export default ListElementsColumn;

package/dist/cjs/components/Multicalendar/subcomponents/composites/ListElementsColumn/ListElementsColumn.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./ListElementsColumn.css");
+const ListElement_1 = __importDefault(require("../../individuals/ListElement/ListElement"));
+const ListElementsColumn = ({ ReactListElementChildren, listHeight, yOffset, elementsHeight, idsArray, }) => {
+    return (react_1.default.createElement("div", { className: "list-element-column", style: {
+            height: listHeight,
+            paddingTop: yOffset * elementsHeight,
+        } }, idsArray.map((listElementId) => (react_1.default.createElement(ListElement_1.default, { key: listElementId, height: elementsHeight, listElementId: listElementId, ReactListElementChildren: ReactListElementChildren })))));
+};
+exports.default = ListElementsColumn;

package/dist/cjs/components/Multicalendar/subcomponents/composites/ListElementsColumn/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactListElementChildrenType } from "../../../types";
+
+export interface ListElementsColumnPropsType {
+  ReactListElementChildren: ReactListElementChildrenType;
+  listHeight: number | string;
+  yOffset: number;
+  elementsHeight: number;
+  idsArray: string[] | number[];
+}

package/dist/cjs/components/Multicalendar/subcomponents/individuals/Cell/Cell.css

@@ -0,0 +1,6 @@
+.cell {
+  position: relative;
+  border: 1px solid rgb(200, 200, 200);
+  border-radius: 6px;
+}
+

package/dist/{components → cjs/components}/Multicalendar/subcomponents/individuals/Cell/Cell.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./Cell.css";
-import { CellPropsType } from "./types";
-declare const _default: React.MemoExoticComponent<({ date, listElementId, width, heigth, ReactCellChildren }: CellPropsType) => React.JSX.Element>;
-export default _default;
+import React from "react";
+import "./Cell.css";
+import { CellPropsType } from "./types";
+declare const _default: React.MemoExoticComponent<({ date, listElementId, width, heigth, ReactCellChildren }: CellPropsType) => React.JSX.Element>;
+export default _default;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/Cell/Cell.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./Cell.css");
+const Cell = ({ date, listElementId, width, heigth, ReactCellChildren }) => {
+    return (react_1.default.createElement("div", { className: "cell", style: { width: width, height: heigth } },
+        react_1.default.createElement(ReactCellChildren, { date: date, listElementId: listElementId })));
+};
+exports.default = react_1.default.memo(Cell);

package/dist/cjs/components/Multicalendar/subcomponents/individuals/Cell/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactCellChildrenType } from "../../../types";
+
+export interface CellPropsType {
+  date: string;
+  /**Date in SQL format, i.e. 1993-03-29 */
+  listElementId: string | number;
+  width: number;
+  heigth: number;
+  ReactCellChildren: ReactCellChildrenType;
+}

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.css

@@ -0,0 +1,60 @@
+.dates-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row;
+  overflow-y: hidden;
+}
+
+.dates-row .date-cell {
+  position: relative;
+}
+
+.dates-row .date-cell .div-date-cell,
+.dates-row .date-cell .div-date-cell-today {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.dates-row .date-cell .div-date-cell-today div {
+  border-radius: 4px;
+  background: var(--primary-color);
+  color: rgb(255, 255, 255);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 800;
+  width: 40px;
+  height: 40px;
+  padding: 1px 0;
+}
+
+.dates-row .date-cell .div-date-cell p,
+.dates-row .date-cell .div-date-cell-today p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.dates-row .date-cell .month-start {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  border-left: 1px solid rgb(235, 235, 235);
+}
+
+.dates-row .date-cell .month-start p {
+  margin: 0;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding-left: 8px;
+  padding-top: 8px;
+}
+

package/dist/{components → cjs/components}/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./DatesRow.css";
-import { DatesRowPropsType } from "./types";
-declare const DatesRow: ({ visibleDates, width, height, cellsWidth, cellsHeight, offset, language, }: DatesRowPropsType) => React.JSX.Element;
-export default DatesRow;
+import React from "react";
+import "./DatesRow.css";
+import { DatesRowPropsType } from "./types";
+declare const DatesRow: ({ visibleDates, width, height, cellsWidth, cellsHeight, offset, language, }: DatesRowPropsType) => React.JSX.Element;
+export default DatesRow;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./DatesRow.css");
+const DatesRow = ({ visibleDates, width, height, cellsWidth, cellsHeight, offset, language, }) => {
+    //Variables
+    const weekdaysAbreviations = [
+        language["sunday"].slice(0, 2),
+        language["monday"].slice(0, 2),
+        language["tuesday"].slice(0, 2),
+        language["wednesday"].slice(0, 2),
+        language["thursday"].slice(0, 2),
+        language["friday"].slice(0, 2),
+        language["saturday"].slice(0, 2),
+    ];
+    const monthsNames = [
+        language["january"],
+        language["february"],
+        language["march"],
+        language["april"],
+        language["may"],
+        language["june"],
+        language["july"],
+        language["august"],
+        language["september"],
+        language["october"],
+        language["november"],
+        language["december"],
+    ];
+    return (react_1.default.createElement("div", { className: "dates-row", style: {
+            width: width,
+            height: height,
+            paddingLeft: offset * cellsWidth,
+        } }, visibleDates.length > 0 &&
+        visibleDates.map((dateObject) => (react_1.default.createElement("div", { key: dateObject.toString(), className: "date-cell", style: {
+                width: cellsWidth,
+                height: cellsHeight,
+            } },
+            react_1.default.createElement("div", { className: dateObject.getDate() === new Date().getDate() &&
+                    dateObject.getMonth() === new Date().getMonth() &&
+                    dateObject.getFullYear() === new Date().getFullYear()
+                    ? "div-date-cell-today"
+                    : "div-date-cell" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", null, weekdaysAbreviations[dateObject.getDay()]),
+                    react_1.default.createElement("p", null, dateObject.getDate()))),
+            dateObject.getDate() === 1 && (react_1.default.createElement("div", { className: "month-start" },
+                react_1.default.createElement("p", null,
+                    monthsNames[dateObject.getMonth()],
+                    " ",
+                    dateObject.getFullYear()))))))));
+};
+exports.default = DatesRow;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DatesRow/types.d.ts

@@ -0,0 +1,11 @@
+import { languageType } from "../../../../../languages/types";
+
+export interface DatesRowPropsType {
+    visibleDates: Date[];
+    width: number;
+    height: number;
+    cellsWidth: number;
+    cellsHeight: number;
+    offset: number;
+    language: languageType;
+  }

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.css

@@ -0,0 +1,14 @@
+ .dropdown-month-navigation {
+    position: relative;
+    display: flex;
+    width: 200px;
+    margin: 0px 10px;
+    border: 1px solid rgb(216, 216, 216);
+    color: black;
+    background-color: white;
+    border-radius: 6px;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 18px;
+    height: 28px;
+  }

package/dist/{components → cjs/components}/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./DropdownMonthNavigation.css";
-import { DropdownMonthNavigationPropsType } from "./types";
-declare const DropdownMonthNavigation: ({ visibleMonth, visibleYear, onChangeAction, options, }: DropdownMonthNavigationPropsType) => React.JSX.Element;
-export default DropdownMonthNavigation;
+import React from "react";
+import "./DropdownMonthNavigation.css";
+import { DropdownMonthNavigationPropsType } from "./types";
+declare const DropdownMonthNavigation: ({ visibleMonth, visibleYear, onChangeAction, options, }: DropdownMonthNavigationPropsType) => React.JSX.Element;
+export default DropdownMonthNavigation;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./DropdownMonthNavigation.css");
+//Utils
+const jsToSqlDate_1 = __importDefault(require("../../../../../utils/jsToSqlDate"));
+const DropdownMonthNavigation = ({ visibleMonth, visibleYear, onChangeAction, options, }) => {
+    return (react_1.default.createElement("select", { className: "dropdown-month-navigation", value: (0, jsToSqlDate_1.default)(new Date(visibleYear, visibleMonth, 1, 12, 0, 0, 0)), onChange: (e) => onChangeAction(e.target.value) }, options));
+};
+exports.default = DropdownMonthNavigation;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/types.d.ts

@@ -0,0 +1,6 @@
+export interface DropdownMonthNavigationPropsType {
+  visibleMonth: number;
+  visibleYear: number;
+  onChangeAction: Function;
+  options: JSX.Element[];
+}

package/dist/cjs/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.css

@@ -0,0 +1,14 @@
+.list-element {
+  position: relative;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  background-color: white;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.list-element:hover {
+  background-color: rgb(240, 240, 240);
+}
+
+

package/dist/{components → cjs/components}/Multicalendar/subcomponents/individuals/ListElement/ListElement.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./ListElement.css";
-import { ListElementPropsType } from "./types";
-declare const _default: React.MemoExoticComponent<({ listElementId, ReactListElementChildren, height, }: ListElementPropsType) => React.JSX.Element>;
-export default _default;
+import React from "react";
+import "./ListElement.css";
+import { ListElementPropsType } from "./types";
+declare const _default: React.MemoExoticComponent<({ listElementId, ReactListElementChildren, height, }: ListElementPropsType) => React.JSX.Element>;
+export default _default;

package/dist/cjs/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./ListElement.css");
+const ListElement = ({ listElementId, ReactListElementChildren, height, }) => {
+    return (react_1.default.createElement("div", { className: "list-element", style: {
+            height: height,
+        } },
+        react_1.default.createElement(ReactListElementChildren, { listElementId: listElementId })));
+};
+exports.default = react_1.default.memo(ListElement);

package/dist/cjs/components/Multicalendar/subcomponents/individuals/ListElement/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactListElementChildrenType } from "../../../types";
+
+export interface ListElementPropsType {
+  listElementId: string | number;
+  ReactListElementChildren: ReactListElementChildrenType;
+  height: number;
+}