josenanodev-react-components-library 0.0.7 → 0.0.9

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

@@ -1,18 +1,5 @@
 export type languageType = {[key: string]: string} & {
-    "of": string
-    "Automatized": string,
-    "properties": string,
-    "stablishment": string,
-    "stablishments": string,
-    "Loading": string,
     "Today": string,
-    "Filters": string,
-    "Search": string,
-    "Property Manager": string,
-    "Zones": string,
-    "Properties": string,
-    "Categories": string,
-    "Clear filters": string,
     "monday": string,
     "tuesday": string,
     "wednesday": string,
@@ -32,161 +19,4 @@ export type languageType = {[key: string]: string} & {
     "october": string,
     "november": string,
     "december": string,
-    "days": string,
-    "Reload": string,
-    "Reload properties": string,
-    "Reload prices": string,
-    "Competitors": string,
-    "Quick view": string,
-    "View KPIs": string,
-    "Recommended price": string,
-    "Minimal price": string,
-    "Base price": string,
-    "PMS price": string,
-    "Change by quantity": string,
-    "Change by percentage": string,
-    "Competitors price": string,
-    "Minimal stay": string,
-    "Availability": string,
-    "Auto adjustment": string,
-    "Ajust leftout days": string,
-    "Send prices to OTAs": string,
-    "Update competitors prices": string,
-    "Go back to original values": string,
-    "Updating competitors prices": string,
-    "Select price type": string,
-    "Base": string,
-    "Recommended": string,
-    "Minimal": string,
-    "It is the ideal price of the market": string,
-    "It is the price desired by the property manager": string,
-    "It is the highest value between recommended and base price": string,
-    "Go back": string,
-    "Apply": string,
-    "Send": string,
-    "Cancel": string,
-    "Schedule": string,
-    "Menu": string,
-    "Multidashboard": string,
-    "Settings": string,
-    "General report": string,
-    "Property resume": string,
-    "Price settings": string,
-    "Update competitors prices up to 1 year": string,
-    "Performance manager": string,
-    "Pickup": string,
-    "Forecast": string,
-    "Rate shopper": string,
-    "Aspirational compset": string,
-    "Individual dashboard": string,
-    "Individual report": string,
-    "Schedule automatic prices sends": string,
-    "Send new prices now": string,
-    "Select date range": string,
-    "Custom range": string,
-    "Generate prices Excel file": string,
-    "Select channels, Mark Up and currency": string,
-    "Channel": string,
-    "Mark Up": string,
-    "MLOS": string,
-    "Currency": string,
-    "Add channel": string,
-    "Export to Excel": string,
-    "Save settings": string,
-    "Controls": string,
-    "General data": string,
-    "Work days": string,
-    "Weekends and holydays": string,
-    "Fixed expenses": string,
-    "Varaible expenses": string,
-    "Local currency": string,
-    "Symbol": string,
-    "Cleaning fee": string,
-    "Weekdays discounts": string,
-    "Seasons discounts": string,
-    "High": string,
-    "Medium high": string,
-    "Medium": string,
-    "Medium low": string,
-    "Low": string,
-    "Left out days": string,
-    "Release": string,
-    "Increase": string,
-    "Occupation rules": string,
-    "Apply rules": string,
-    "Max OCC": string,
-    "Max ADR": string,
-    "Final autoprice": string,
-    "Release (N days)": string,
-    "% Occupation": string,
-    "% Discount": string,
-    "Maximum": string,
-    "Pax. Mapped": string,
-    "Minimal occ.": string,
-    "Maxmimum occ.": string,
-    "Type of adjustment": string,
-    "Personalized": string,
-    "Price per guest": string,
-    "Occupation": string,
-    "Pax occupation": string,
-    "Price": string,
-    "Guests": string,
-    "Regular price rised by:": string,
-    "Regular price decreased by:": string,
-    "PAX price": string,
-    "Go back to Multiprice": string,
-    "Seasons": string,
-    "1º Fortnight": string;
-    "2º Fortnight": string;
-    "Workdays": string;
-    "Weekend": string;
-    "Go back to initial price settings": string;
-    "Settings saved succesfully": string;
-    "Seasons and minimal stays saved succesfully": string;
-    "An error has ocurred, try again later": string;
-    "All task have been succesfully achived. We are waiting to recieve data from the OTA. This task can take up to 15min.": string,
-    "It was no possible to send the task to update the competitors prices": string;
-    "Server is under mantanance, please wait until the service is brought back to you": string;
-    "There has been an error, please try again": string;
-    "prices will be sent periodically": string;
-    "Selected dates": string;
-    "Days range": string;
-    "Revenue": string;
-    "ADR": string;
-    "Appliable days of the week": string;
-    "Manual edition": string;
-    "Period": string;
-    "Protect prices": string;
-    "Protect MLOS": string;
-    "Unprotect prices": string;
-    "Unprotect MLOS": string;
-    "Import prices from PMS": string;
-    "Settings type": string;
-    "Customized": string;
-    "Prices have been successfully sent": string;
-    "There has been an error while trying to send the selected prices, please try again later": string;
-    "Copy settings to other properties": string;
-    "Select the properties to which the settings will be copied": string;
-    "NOTE: All the settings on the selected properties will be overwriten, previous settings in each of the will be lost": string;
-    "Request import": string;
-    "Atention!": string;
-    "You are trying to lower a price below the minimal price, this can't be done, the price will stay at the minimum": string;
-    "Don't show this again": string;
-    "Import successfully requested, this task can take up to 10 minutes": string;
-    "Import requested have failed, please try again later": string;
-    "Some custom changes are not protected": string;
-    "There are unprotected custom changes that will be sent. Remember to protect any change in base price or minimal stay, otherwise the changes will be lost on further calculus": string;
-    "Protect changes and send": string;
-    "Send changes without protecting": string;
-    "Please define base price values before saving": string;
-    "Please define pax mapped before saving": string;
-    "Do you want to save your changes?": string;
-    "A request will be sent to save your settings": string;
-    "Minimal price by season": string;
-    "Minimum price according to costs": string;
-    "Break even": string;
-    "The minimal price of a season can't be lower than the minimal price according to costs": string;
-    "Season": string;
-    "Event": string;
-    "Holiday": string;
   }

package/dist/cjs/mocks/ReactComponentMocksForTesting/CellChildrenMock.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const CellChildrenMock = ({ date, listElementId }) => {
-    return (react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { style: { userSelect: "none" } },
         date,
         react_1.default.createElement("br", null),
         listElementId));

package/dist/cjs/stories/css-presets.css

@@ -0,0 +1,77 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: black;
+}
+
+body p {
+  line-height: normal;
+  margin: 0;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+:root {
+  --primary-color: #ec6321;
+  --secondary-color: #46ba0d;
+  --green-palette-one: #7bce51;
+  --green-palette-two: #52ac25;
+  --green-palette-three: #3a8117;
+  --green-palette-four: #27580f;
+  --green-palette-five: #1b3a0c;
+}
+
+input[type="checkbox"] {
+  /* Add if not using autoprefixer */
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* For iOS < 15 */
+  background-color: white;
+  /* Not removed via appearance */
+  margin: 0;
+
+  font: inherit;
+  color: dimgray;
+  min-width: 1.15em;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid dimgray;
+  border-radius: 0.15em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  transform: scale(0);
+  transform-origin: bottom left;
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--primary-color);
+  /* Windows High Contrast Mode */
+  background-color: CanvasText;
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"]:focus {
+  outline: max(2px, 0.08em) solid rgb(145, 145, 145);
+  outline-offset: max(2px, 0.08em);
+}
+
+input[type="checkbox"]:disabled {
+  color: rgb(165, 165, 165);
+  cursor: not-allowed;
+}

package/dist/esm/components/Multicalendar/Multicalendar.css

@@ -11,19 +11,37 @@
   transition: 0.5s;
 }
 
-.multicalendar .controles {
+.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;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   box-sizing: border-box;
   border-bottom: var(--border-tenues);
+  
 }
 
-.multicalendar .filtros-logo {
+.multicalendar .div-upper-left-component {
   grid-area: fil;
   position: relative;
   width: 100%;
@@ -38,19 +56,8 @@
   justify-content: flex-end;
 }
 
-.multicalendar .filtros-logo .logo {
-  max-height: 68px;
-  width: fit-content;
-  align-self: center;
-}
-
-.multicalendar .filtros-logo .pop-up-filtros {
-  position: absolute;
-  top: 100%;
-  left: 8px;
-}
 
-.multicalendar .eje-vertical {
+.multicalendar .vertical-axis {
   grid-area: ver;
   position: relative;
   width: 100%;
@@ -59,19 +66,19 @@
   z-index: 1;
 }
 
-.multicalendar .eje-horizontal {
+.multicalendar .horizontal-axis {
   grid-area: hor;
   position: relative;
   max-width: 100%;
   height: 100%;
 }
 
-.multicalendar .controles .div-dropdown-fechas-boton-hoy {
+.multicalendar .controls .div-dates-navigation {
   display: flex;
   align-items: center;
 }
 
-.multicalendar .controles .div-dropdown-fechas-boton-hoy button {
+.multicalendar .controls .div-dates-navigation button {
   cursor: pointer;
   margin: 0px;
   position: relative;
@@ -89,131 +96,13 @@
   height: calc(100% - 16px);
 }
 
-.multicalendar .controles {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.multicalendar .controles .reload-properties-button,
-.multicalendar .controles .reload-prices-button {
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  font-size: 14px;
-  color: rgb(255, 255, 255);
-  font-weight: 600;
-  border-radius: 4px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 2px;
-  background: var(--primary-color);
-  width: 180px;
-  transition: all 0.2s;
-}
-
-.multicalendar .controles .reload-properties-button:disabled,
-.multicalendar .controles .reload-prices-button:disabled {
-  background: rgb(255, 255, 255);
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.multicalendar .controles .reload-properties-button svg,
-.multicalendar .controles .reload-prices-button svg {
-  animation-name: refrescando-precios-giro;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  font-size: 20px;
-}
-
-.multicalendar .controles .boton-refrescar {
-  height: 30px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  text-decoration: none;
-  width: auto;
-  touch-action: manipulation;
-  font-size: 14px;
-  line-height: 14px;
-  letter-spacing: normal;
-  color: rgb(255, 255, 255);
-  font-weight: 600;
-  border-radius: 4px;
-  border-color: transparent;
-  border-style: solid;
-  border-width: 2px;
-  background: var(--primary-color);
-  width: 90px;
-  transition: all 0.2s;
-}
-
-.multicalendar .controles .boton-refrescar:focus {
-  outline: none;
-}
-
-.multicalendar .controles .boton-refrescar:disabled {
-  background: rgb(255, 255, 255);
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-
-.multicalendar .controles .boton-refrescar svg {
-  animation-name: refrescando-precios-giro;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  font-size: 26px;
-}
-
-.multicalendar .controles .div-boton-toggle-reservaciones {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.multicalendar .controles .div-boton-toggle-reservaciones p {
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: dimgray;
-  font-weight: 600;
-  font-size: 16px;
-  height: 100%;
-}
-
-.multicalendar .controles .div-boton-toggle-multidashboard-pickup {
-  display: flex;
-  align-items: center;
-  height: 28px;
-}
-
-.multicalendar .controles .div-boton-toggle-multidashboard-pickup p {
+.multicalendar .controls .div-aditional-controls-components {
   display: flex;
+  justify-content: flex-end;
   align-items: center;
-  margin: 0px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  color: dimgray;
-  font-weight: 600;
-  font-size: 14px;
-  height: 100%;
 }
 
-.multicalendar .div-contenedor-principal {
+.multicalendar .div-main-container {
   grid-area: gri;
   height: 100%;
   position: relative;
@@ -221,7 +110,7 @@
   overflow: hidden;
 }
 
-.multicalendar .div-contenedor-principal .div-cargando-contenedor-principal {
+.multicalendar .div-main-container .div-cargando-contenedor-principal {
   position: absolute;
   top: 0;
   left: 0;
@@ -234,53 +123,28 @@
   background-color: rgba(236, 236, 236, 0.8);
 }
 
-.multicalendar .contendor-principal {
+.multicalendar .main-container {
   position: relative;
   min-width: 100%;
   height: 100%;
   overflow-x: scroll;
 }
 
-.multicalendar .contendor-principal .div-filas-celdas {
-  box-sizing: border-box;
-}
-
-.multicalendar .contendor-principal .div-filas-celdas .div-altura-filas-celdas {
-  box-sizing: border-box;
-}
-
-.multicalendar .eje-vertical .lista-anuncios {
+.multicalendar .vertical-axis .div-list-element-column {
   height: 100%;
   overflow-y: scroll;
   box-sizing: border-box;
 }
 
-.multicalendar .eje-vertical .lista-anuncios .div-cargando-lista-anuncios {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 2;
-  background-color: rgba(72, 72, 72, 0.1);
-}
-
-.multicalendar .eje-vertical .lista-anuncios .div-altura-lista-anuncios {
-  box-sizing: border-box;
-}
-
-.multicalendar .eje-horizontal .div-botones-fechas {
+.multicalendar .horizontal-axis .div-weeks-buttons {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 64px;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente {
+.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;
@@ -297,27 +161,27 @@
   box-shadow: 0px 0px 8px 8px white;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-pasada:hover,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente:hover {
+.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 .eje-horizontal .div-botones-fechas .boton-semana-pasada:active,
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente:active {
+.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 .eje-horizontal .div-botones-fechas .boton-semana-pasada {
+.multicalendar .horizontal-axis .div-weeks-buttons .past-week-button {
   left: 5px;
 }
 
-.multicalendar .eje-horizontal .div-botones-fechas .boton-semana-siguiente {
+.multicalendar .horizontal-axis .div-weeks-buttons .next-week-button {
   right: 5px;
 }
 
-.multicalendar .eje-horizontal .div-fila-fechas {
+.multicalendar .horizontal-axis .div-dates-row {
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -325,57 +189,3 @@
   border-bottom: 1px solid rgb(235, 235, 235);
   box-sizing: border-box;
 }
-
-.multicalendar .div-multidashboard-pickup {
-  grid-area: das;
-  height: 100%;
-  background: rgb(255, 255, 255);
-  border-left: 1px solid rgb(228, 228, 228);
-  overflow-y: auto;
-  transition: all 0.5s;
-}
-
-.div-multidashboard-pickup-abierto {
-  width: 540px;
-}
-
-.div-multidashboard-pickup-cerrado {
-  width: 0px;
-}
-
-.multicalendar .div-multidashboard-pickup::-webkit-scrollbar {
-  display: none;
-}
-
-@keyframes refrescando-precios-giro {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media screen and (max-width: 970px) {
-  .multicalendar .controles .boton-refrescar {
-    font-size: 12px;
-    width: 75px;
-  }
-  .multicalendar .boton-competidores .boton-desplegable {
-    font-size: 12px;
-  }
-  .multicalendar .boton-sin-cambios-que-sincronizar {
-    min-width: 175px;
-    font-size: 12px;
-  }
-  .multicalendar .controles .div-boton-toggle-multidashboard-pickup p {
-    font-size: 12px;
-  }
-  .multicalendar .dropdown-navegador-meses {
-    width: 155px;
-    font-size: 12px;
-  }
-  .multicalendar .controles .div-dropdown-fechas-boton-hoy button {
-    font-size: 12px;
-  }
-}

package/dist/esm/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, cellsWidth, cellsHeight, verticalAxisWidth, horizontalAxisHeight, horizontalInitialCellQuantity, chunkRenderX, chunkRenderY, dynamicPagination, draggingOverDateCells, logoUrl, waitTimeForCalls, callsOnScrollingStops, }: MulticalendarPropsType) => JSX.Element;
+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;