josenanodev-react-components-library 1.0.4 → 1.0.5

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

@@ -1,60 +0,0 @@
-.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/esm/components/Multicalendar/subcomponents/individuals/DatesRow/DatesRow.js

@@ -1,51 +0,0 @@
-import React from "react";
-import "./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.createElement("div", { className: "dates-row", style: {
-            width: width,
-            height: height,
-            paddingLeft: offset * cellsWidth,
-        } }, visibleDates.length > 0 &&
-        visibleDates.map((dateObject) => (React.createElement("div", { key: dateObject.toString(), className: "date-cell", style: {
-                width: cellsWidth,
-                height: cellsHeight,
-            } },
-            React.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.createElement("div", null,
-                    React.createElement("p", null, weekdaysAbreviations[dateObject.getDay()]),
-                    React.createElement("p", null, dateObject.getDate()))),
-            dateObject.getDate() === 1 && (React.createElement("div", { className: "month-start" },
-                React.createElement("p", null,
-                    monthsNames[dateObject.getMonth()],
-                    " ",
-                    dateObject.getFullYear()))))))));
-};
-export default DatesRow;

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

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

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

@@ -1,14 +0,0 @@
- .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/esm/components/Multicalendar/subcomponents/individuals/DropdownMonthNavigation/DropdownMonthNavigation.js

@@ -1,8 +0,0 @@
-import React from "react";
-import "./DropdownMonthNavigation.css";
-//Utils
-import jsToSqlDate from "../../../../../utils/jsToSqlDate";
-const DropdownMonthNavigation = ({ visibleMonth, visibleYear, onChangeAction, options, }) => {
-    return (React.createElement("select", { className: "dropdown-month-navigation", value: jsToSqlDate(new Date(visibleYear, visibleMonth, 1, 12, 0, 0, 0)), onChange: (e) => onChangeAction(e.target.value) }, options));
-};
-export default DropdownMonthNavigation;

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

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

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

@@ -1,14 +0,0 @@
-.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/esm/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.js

@@ -1,9 +0,0 @@
-import React from "react";
-import "./ListElement.css";
-const ListElement = ({ listElementId, ReactListElementChildren, height, }) => {
-    return (React.createElement("div", { className: "list-element", style: {
-            height: height,
-        } },
-        React.createElement(ReactListElementChildren, { listElementId: listElementId })));
-};
-export default React.memo(ListElement);

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

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

package/dist/esm/components/Multicalendar/types.d.ts

@@ -1,48 +0,0 @@
-import { languageType } from "../../languages/types";
-
-export interface MulticalendarPropsType {
-  multicalendarId: string;
-  ReactCellChildren: ReactCellChildrenType;
-  ReactListElementChildren: ReactListElementChildrenType;
-  listElementsIdsArray: string[] | number[];
-  language: languageType;
-  pastDatesVisible?: boolean;
-  cellsWidth?: number;
-  cellsHeight?: number;
-  verticalAxisWidth?: number;
-  horizontalAxisHeight?: number;
-  pastDaysInitialQuantity?: number;
-  futureDaysInitialQuantity?: number;
-  chunkRenderX?: number;
-  chunkRenderY?: number;
-  authomaticScrollOnDraggingOverEdges?: boolean;
-  dynamicDaysQuantity?: boolean;
-  waitTimeForCalls?: number;
-  callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
-  callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
-  aditionalControlsComponents?: JSX.Element | JSX.Element[];
-  upperLeftComponent?: JSX.Element;
-  autoSavePosition?: boolean;
-  onScrollTopChanges?: (scrollTop: number) => void
-  onScrollLeftChanges?: (scrollLeft: number) => void
-}
-
-export interface RenderCoordinatesType {
-  x: number;
-  y: number;
-}
-
-export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
-
-export type ReactListElementChildrenType =
-  React.ElementType<ListElementChildrenPropsType>;
-
-export type CellChildrenPropsType = { [key: string]: any } & {
-  /**Date in SQL format, i.e. 1993-03-29 */
-  date: string;
-  listElementId: string | number;
-};
-
-export type ListElementChildrenPropsType = { [key: string]: any } & {
-  listElementId: string | number;
-};

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.css

@@ -1,40 +0,0 @@
-.trc-multiple-joined-buttons-bar {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-
-.trc-multiple-joined-buttons-bar button {
-  border: var(--primary-color) solid 2px;
-  border-left-width: 1px;
-  border-right-width: 1px;
-  color: var(--primary-color);
-  background-color: rgb(255, 255, 255);
-  padding: 5px 15px;
-  box-sizing: border-box;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.trc-multiple-joined-buttons-bar button:hover {
-  background-color: rgb(240, 240, 240);
-}
-
-.trc-multiple-joined-buttons-bar button.selected {
-  background-color: var(--primary-color);
-  color: white;
-}
-
-.trc-multiple-joined-buttons-bar button.left-side-button {
-  border-left-width: 2px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.trc-multiple-joined-buttons-bar button.right-side-button {
-  border-right-width: 2px;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}

package/dist/esm/components/MultipleJoinedButtonsBar/MultipleJoinedButtonsBar.js

@@ -1,23 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./MultipleJoinedButtonsBar.css";
-const MultipleJoinedButtonsBar = ({ options, onSelectOption, initialSelectedValue, externalSelectedValue, }) => {
-    //States
-    const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
-    //Effects
-    useEffect(() => {
-        if (externalSelectedValue &&
-            options.map((option) => option._id).includes(externalSelectedValue)) {
-            setSelectedValue(externalSelectedValue);
-        }
-    }, [externalSelectedValue]);
-    return (React.createElement("div", { className: "trc-multiple-joined-buttons-bar" }, options.map((option, index) => (React.createElement("button", { key: option._id, className: (selectedValue === option._id ? "selected" : "") +
-            (index === 0
-                ? " left-side-button"
-                : index === options.length - 1
-                    ? " right-side-button"
-                    : ""), onClick: () => {
-            setSelectedValue(option._id);
-            onSelectOption(option._id);
-        } }, option.visibleValue)))));
-};
-export default MultipleJoinedButtonsBar;

package/dist/esm/components/MultipleJoinedButtonsBar/types.d.ts

@@ -1,6 +0,0 @@
-export interface MultipleJoinedButtonsBarPropsType<T> {
-  options: { _id: T; visibleValue: string }[];
-  onSelectOption: (selectedValue: T) => void;
-  initialSelectedValue?: T;
-  externalSelectedValue?: T;
-}

package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.css

@@ -1,244 +0,0 @@
-.trc-parallel-selection-list {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.trc-parallel-selection-list .div-lists {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  flex-grow: 1;
-  min-height: calc(100% - 80px);
-  max-height: 100%;
-}
-
-.trc-parallel-selection-list .div-lists .div-left-list {
-  grid-area: lef;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 10px;
-  width: 50%;
-  height: 100%;
-}
-
-.trc-parallel-selection-list .div-lists .div-right-list {
-  grid-area: rig;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 10px;
-  width: 50%;
-  height: 100%;
-}
-
-.trc-parallel-selection-list .div-action-buttons {
-  grid-area: but;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  padding: 10px 20px;
-  width: 100%;
-  height: 80px;
-}
-
-.trc-parallel-selection-list .list-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: dimgray;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.trc-parallel-selection-list .div-search-bar {
-  width: 100%;
-  border: 1px solid rgb(185, 185, 185);
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-  padding: 6px;
-  height: 30px;
-  box-sizing: border-box;
-  color: dimgray;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.trc-parallel-selection-list .div-search-bar input {
-  border: none;
-  padding-left: 10px;
-  width: 100%;
-}
-
-.trc-parallel-selection-list .div-search-bar input:focus {
-  outline: none;
-}
-
-.trc-parallel-selection-list .list-container {
-  width: 100%;
-  display: flex;
-  flex-flow: column;
-  box-sizing: border-box;
-  border: 1px solid rgb(169, 169, 169);
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  border-top: none;
-  height: calc(100% - 60px);
-}
-
-.trc-parallel-selection-list .list-container .apply-all-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 30px;
-  border: none;
-  background-color: transparent;
-  color: dimgray;
-  font-weight: 700;
-  border-bottom: 1px solid rgb(169, 169, 169);
-  box-sizing: border-box;
-  padding: 5px 0;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-
-.trc-parallel-selection-list .list-container .apply-all-button svg {
-  width: 20px;
-  height: 20px;
-}
-
-.trc-parallel-selection-list .list-container .apply-all-button:hover {
-  background-color: rgb(238, 238, 238);
-}
-
-.trc-parallel-selection-list .list-container .scrollable-section {
-  overflow-y: auto;
-  height: calc(100% - 30px);
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll
-  .div-datum-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgb(169, 169, 169);
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll
-  .div-datum-wrapper
-  .div-custom-component-wrapper {
-  position: relative;
-  height: 100%;
-  width: calc(100% - 50px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll
-  .div-datum-wrapper
-  .visible-default-name {
-  box-sizing: border-box;
-  padding: 17px 10px;
-  font-size: 16px;
-  font-weight: 600;
-  color: dimgray;
-  height: 50px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: calc(100% - 50px);
-  text-align: start;
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll
-  .div-datum-wrapper
-  .apply-to-one-button {
-  height: 30px;
-  width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px;
-  background-color: transparent;
-  border: none;
-  border-radius: 15px;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-
-.trc-parallel-selection-list
-  .list-container
-  .scrollable-section
-  .resizable-div-for-scroll
-  .div-datum-wrapper
-  .apply-to-one-button:hover {
-  background-color: rgb(238, 238, 238);
-}
-
-.trc-parallel-selection-list .div-action-buttons button {
-  box-sizing: border-box;
-  padding: 10px 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: solid 2px;
-  border-radius: 6px;
-  font-size: 16px;
-  font-weight: 600;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-
-.trc-parallel-selection-list .div-action-buttons .cancel-button {
-  border-color: dimgray;
-  color: dimgray;
-}
-
-.trc-parallel-selection-list .div-action-buttons .cancel-button:hover {
-  background-color: dimgray;
-  color: white;
-}
-
-.trc-parallel-selection-list .div-action-buttons .apply-button {
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-.trc-parallel-selection-list .div-action-buttons .apply-button:hover {
-  background-color: var(--primary-color);
-  color: white;
-}