josenanodev-react-components-library 0.0.11 → 0.0.15

package/dist/cjs/components/Multicalendar/Multicalendar.css

@@ -1,191 +1,191 @@
-.multicalendar {
-  display: grid;
-  color: black;
-  width: 100%;
-  height: 100%;
-  grid-template-areas:
-    "fil con"
-    "fil hor"
-    "ver gri";
-  text-align: center;
-  transition: 0.5s;
-}
-
-.multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.multicalendar .controls {
-  grid-area: con;
-  height: 100%;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  border-bottom: var(--border-tenues);
-  
-}
-
-.multicalendar .div-upper-left-component {
-  grid-area: fil;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  background-color: white;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  border-right: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-  justify-content: flex-end;
-}
-
-
-.multicalendar .vertical-axis {
-  grid-area: ver;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 5px;
-  z-index: 1;
-}
-
-.multicalendar .horizontal-axis {
-  grid-area: hor;
-  position: relative;
-  max-width: 100%;
-  height: 100%;
-}
-
-.multicalendar .controls .div-dates-navigation {
-  display: flex;
-  align-items: center;
-}
-
-.multicalendar .controls .div-dates-navigation button {
-  cursor: pointer;
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  border: 1px solid rgb(216, 216, 216);
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: black;
-  font-size: 14px;
-  touch-action: manipulation;
-  border-radius: 6px;
-  background: rgb(255, 255, 255);
-  font-weight: normal;
-  height: calc(100% - 16px);
-}
-
-.multicalendar .controls .div-aditional-controls-components {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.multicalendar .div-main-container {
-  grid-area: gri;
-  height: 100%;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-}
-
-.multicalendar .div-main-container .div-cargando-contenedor-principal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-  background-color: rgba(236, 236, 236, 0.8);
-}
-
-.multicalendar .main-container {
-  position: relative;
-  min-width: 100%;
-  height: 100%;
-  overflow-x: scroll;
-}
-
-.multicalendar .vertical-axis .div-list-element-column {
-  height: 100%;
-  overflow-y: scroll;
-  box-sizing: border-box;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 64px;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  z-index: 2;
-  position: absolute;
-  background-color: transparent;
-  border: none;
-  height: 100%;
-  width: 32px;
-  font-size: 1em;
-  color: var(--primary-color);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-  height: 75%;
-  background: rgb(255 255 255);
-  box-shadow: 0px 0px 8px 8px white;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
-  background: rgb(247, 247, 247);
-  box-shadow: 0px 0px 8px 8px rgb(247 247 247);
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
-  background: rgb(167, 167, 167);
-  box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
-  left: 5px;
-}
-
-.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
-  right: 5px;
-}
-
-.multicalendar .horizontal-axis .div-dates-row {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  overflow-x: scroll;
-  border-bottom: 1px solid rgb(235, 235, 235);
-  box-sizing: border-box;
-}
+.multicalendar {
+  display: grid;
+  color: black;
+  width: 100%;
+  height: 100%;
+  grid-template-areas:
+    "fil con"
+    "fil hor"
+    "ver gri";
+  text-align: center;
+  transition: 0.5s;
+}
+
+.multicalendar .div-upper-left-component {
+  grid-area: fil;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: white;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  border-right: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.multicalendar .controls {
+  grid-area: con;
+  height: 100%;
+  padding: 2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  border-bottom: var(--border-tenues);
+  
+}
+
+.multicalendar .div-upper-left-component {
+  grid-area: fil;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: white;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  border-right: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+}
+
+
+.multicalendar .vertical-axis {
+  grid-area: ver;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 5px;
+  z-index: 1;
+}
+
+.multicalendar .horizontal-axis {
+  grid-area: hor;
+  position: relative;
+  max-width: 100%;
+  height: 100%;
+}
+
+.multicalendar .controls .div-dates-navigation {
+  display: flex;
+  align-items: center;
+}
+
+.multicalendar .controls .div-dates-navigation button {
+  cursor: pointer;
+  margin: 0px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid rgb(216, 216, 216);
+  padding: 4px 8px;
+  box-sizing: border-box;
+  color: black;
+  font-size: 14px;
+  touch-action: manipulation;
+  border-radius: 6px;
+  background: rgb(255, 255, 255);
+  font-weight: normal;
+  height: calc(100% - 16px);
+}
+
+.multicalendar .controls .div-aditional-controls-components {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.multicalendar .div-main-container {
+  grid-area: gri;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.multicalendar .div-main-container .div-cargando-contenedor-principal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  background-color: rgba(236, 236, 236, 0.8);
+}
+
+.multicalendar .main-container {
+  position: relative;
+  min-width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+}
+
+.multicalendar .vertical-axis .div-list-element-column {
+  height: 100%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 64px;
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
+  z-index: 2;
+  position: absolute;
+  background-color: transparent;
+  border: none;
+  height: 100%;
+  width: 32px;
+  font-size: 1em;
+  color: var(--primary-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  height: 75%;
+  background: rgb(255 255 255);
+  box-shadow: 0px 0px 8px 8px white;
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:hover,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:hover {
+  background: rgb(247, 247, 247);
+  box-shadow: 0px 0px 8px 8px rgb(247 247 247);
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button:active,
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button:active {
+  background: rgb(167, 167, 167);
+  box-shadow: 0px 0px 8px 8px rgb(167, 167, 167);
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
+  left: 5px;
+}
+
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
+  right: 5px;
+}
+
+.multicalendar .horizontal-axis .div-dates-row {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  overflow-x: scroll;
+  border-bottom: 1px solid rgb(235, 235, 235);
+  box-sizing: border-box;
+}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import "./Multicalendar.css";
-import { MulticalendarPropsType } from "./types";
-declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
-export default Multicalendar;
+/// <reference types="react" />
+import "./Multicalendar.css";
+import { MulticalendarPropsType } from "./types";
+declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, draggingOverDateCells, waitTimeForCalls, callsOnScrollingMoves, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, }: MulticalendarPropsType) => JSX.Element;
+export default Multicalendar;