keski_lib_catalog 1.2.7 → 1.3.1

package/dist/index.js

@@ -104,7 +104,7 @@ function Item(props) {
       display: 'flex',
       width: {
         xs: '100%',
-        md: '70%'
+        md: '100%'
       },
       justifyContent: getSideRender(side),
       margin: getSideMargin(side),
@@ -130,24 +130,53 @@ function Item(props) {
       marginBottom: '16px',
       borderRadius: '50%'
     }
+  }), /*#__PURE__*/React__default.createElement(material.Box, {
+    sx: {
+      width: {
+        xs: "100%",
+        xl: "90%",
+        lg: "90%"
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Typography, {
+    dangerouslySetInnerHTML: {
+      __html: content.description ? content.description : 'Agregue título'
+    },
+    sx: {
+      marginBottom: '16px',
+      fontSize: {
+        xl: '1.75em',
+        lg: '1.75em',
+        md: '1.5em',
+        sm: '1.5em',
+        xs: '1.5em'
+      }
+    }
   }), /*#__PURE__*/React__default.createElement(material.Typography, {
-    className: "xmiddle",
+    dangerouslySetInnerHTML: {
+      __html: content.subtitle ? content.subtitle : 'Agregue subtítulo'
+    },
     sx: {
       marginBottom: '16px',
-      minHeight: {
-        xs: '270px',
-        md: '90px'
-      },
-      whiteSpace: 'pre-wrap'
+      fontSize: {
+        xl: '1.125em',
+        lg: '1.125em',
+        md: '1.125em',
+        sm: '1.125em',
+        xs: '1.125em'
+      }
     }
-  }, content.description ? content.description : 'Agregue descripción'), /*#__PURE__*/React__default.createElement(material.Typography, {
-    className: "small",
+  })), content.label_active && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Chip, {
+    disabled: true,
+    color: "info",
+    label: content.label ? content.label : 'Agregue etiqueta',
     sx: {
       marginBottom: '16px',
-      textAlign: 'right',
-      whiteSpace: 'pre-wrap'
+      fontSize: '1em',
+      borderRadius: '6px',
+      backgroundColor: content.label_color
     }
-  }, content.subtitle ? content.subtitle : 'Agregue subtítulo'))));
+  })))));
 }
 
 var Quotes = /*#__PURE__*/function (_AtomicElements) {
@@ -161,6 +190,9 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
       'type': 1,
       'subtitle': 'Subtitle',
       'description': 'Description',
+      'label': 'Label',
+      'label_color': 'Label color',
+      'label_active': 'Label active',
       'image': 'sqr'
     }];
     return _this;
@@ -203,7 +235,7 @@ function Layout1$1(content) {
         lg: '80vh'
       },
       justifyContent: 'center',
-      margin: '1em',
+      paddingLeft: content.component.bg_type === 3 ? '24px' : '0px',
       color: (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.text_color
     }
   }, ((_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.label_active) && /*#__PURE__*/React__default.createElement(material.Box, null, /*#__PURE__*/React__default.createElement(material.Chip, {
@@ -305,8 +337,20 @@ function Layout1$2(content) {
     lg: 6,
     xl: 6,
     sx: {
-      paddingLeft: "16px",
-      paddingRight: "16px",
+      paddingLeft: {
+        xl: "16px",
+        lg: "16px",
+        md: "16px",
+        sm: "0px",
+        xs: "0px"
+      },
+      paddingRight: {
+        xl: "16px",
+        lg: "16px",
+        md: "16px",
+        sm: "0px",
+        xs: "0px"
+      },
       paddingTop: "10px"
     }
   }, /*#__PURE__*/React__default.createElement(material.Slide, {
@@ -344,8 +388,20 @@ function Layout1$2(content) {
     lg: 6,
     xl: 6,
     sx: {
-      paddingLeft: "16px",
-      paddingRight: "16px",
+      paddingLeft: {
+        xl: "16px",
+        lg: "16px",
+        md: "16px",
+        sm: "0px",
+        xs: "0px"
+      },
+      paddingRight: {
+        xl: "16px",
+        lg: "16px",
+        md: "16px",
+        sm: "0px",
+        xs: "0px"
+      },
       paddingTop: "10px"
     }
   }, /*#__PURE__*/React__default.createElement(Grow, _extends({
@@ -415,7 +471,7 @@ function Layout1$2(content) {
     target: ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto',
-      padding: '14px 40px',
+      padding: '8px 20px',
       borderRadius: '40px'
     }
   }, (_content$component$su18 = content.component.subcomponent[0]) !== null && _content$component$su18 !== void 0 && _content$component$su18.button_title ? (_content$component$su19 = content.component.subcomponent[0]) === null || _content$component$su19 === void 0 ? void 0 : _content$component$su19.button_title : 'Nombre botón')))))));
@@ -457,7 +513,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 function Layout1$3(content) {
-  var _content$component$su;
+  var _content$component$su, _content$component$su2, _content$component$su3;
   var visible = true;
   return /*#__PURE__*/React__default.createElement(material.Slide, {
     direction: "left",
@@ -467,31 +523,78 @@ function Layout1$3(content) {
       width: '100%'
     }
   }, /*#__PURE__*/React__default.createElement(material.Typography, {
-    className: "title-xlarge",
+    dangerouslySetInnerHTML: {
+      __html: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.title ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.title : 'Agregue titulo'
+    },
     sx: {
-      margin: '16px auto',
-      whiteSpace: 'pre-wrap'
+      whiteSpace: 'pre-wrap',
+      fontSize: {
+        xs: "1.875em",
+        sm: "1.875em",
+        md: "2.25em",
+        lg: "3em",
+        xl: "3em"
+      }
     }
-  }, content.component.title ? content.component.title : 'Agregue un título'), /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true
-  }, (_content$component$su = content.component.subcomponent) === null || _content$component$su === void 0 ? void 0 : _content$component$su.map(function (img, index) {
+  }), /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    direction: {
+      xl: "row",
+      lg: "row",
+      md: "row",
+      sm: "column",
+      xs: "column"
+    }
+  }, (_content$component$su3 = content.component.subcomponent) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.map(function (img, index) {
     return /*#__PURE__*/React__default.createElement(material.Grid, {
       key: index,
       item: true,
       xs: 12,
-      md: 4
-    }, /*#__PURE__*/React__default.createElement(material.Box, {
-      component: "img",
-      src: img.image.url ? img.image.url : 'https://wozapps-develop.s3.us-east-2.amazonaws.com/gerry/resources/landing/bbb84144-02cd-4cf8-a1be-21ba47e7c4fa.jpeg',
+      sm: 12,
+      md: 4,
+      lg: 4,
+      xl: 4
+    }, /*#__PURE__*/React__default.createElement(material.Card, {
+      elevation: 0,
       sx: {
+        borderRadius: '50px',
         width: {
-          xs: '100%',
-          md: '95%'
+          xl: '350px',
+          lg: '350px',
+          md: '450px',
+          sm: '700px',
+          xs: '250px'
         },
-        aspectRatio: '16/9',
-        marginBottom: '16px'
+        height: {
+          xl: '350px',
+          lg: '350px',
+          md: '450px',
+          sm: '700px',
+          xs: '250px'
+        }
       }
-    }));
+    }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
+      sx: {
+        width: {
+          xl: '350px',
+          lg: '350px',
+          md: '450px',
+          sm: '700px',
+          xs: '250px'
+        },
+        height: {
+          xl: '350px',
+          lg: '350px',
+          md: '450px',
+          sm: '700px',
+          xs: '250px'
+        }
+      },
+      image: img.image.url ? img.image.url : 'https://wozapps-develop.s3.us-east-2.amazonaws.com/gerry/resources/landing/bbb84144-02cd-4cf8-a1be-21ba47e7c4fa.jpeg'
+    })));
   }))));
 }
 
@@ -588,7 +691,7 @@ function Layout1$5(content) {
       minHeight: '550px',
       width: '100%',
       margin: 'auto',
-      padding: '8px'
+      padding: '0px'
     }
   }, /*#__PURE__*/React__default.createElement(Item$2, {
     title: content.component.title,
@@ -683,22 +786,31 @@ function Item$2(props) {
           top: '-50px'
         }
       }, /*#__PURE__*/React__default.createElement(material.Typography, {
-        className: "title-xlarge",
+        dangerouslySetInnerHTML: {
+          __html: title ? title : 'Agregue un título'
+        },
         sx: {
-          height: '100%'
+          height: '100%',
+          fontSize: {
+            xl: '3em',
+            lg: '3em',
+            md: '2.25em',
+            sm: '1.875em',
+            xs: '1.875em'
+          }
         }
-      }, title ? title : 'Agregue un título')), items.map(function (item, j) {
+      })), items.map(function (item, j) {
         var _ref;
         return /*#__PURE__*/React__default.createElement(material.Grid, {
           item: true,
-          className: "containerdegrid",
           key: j,
           sm: 6,
           md: 4,
           lg: 3,
+          xl: 3,
           sx: {
             margin: {
-              xs: 'auto',
+              xs: '0px',
               sm: '0px'
             },
             width: 'object-fit',
@@ -706,8 +818,8 @@ function Item$2(props) {
             justifyContent: 'center',
             alignItems: 'center',
             '&.MuiGrid-item': {
-              paddingLeft: '0px',
-              paddingTop: '0px'
+              paddingLeft: '10px',
+              paddingTop: '10px'
             }
           }
         }, /*#__PURE__*/React__default.createElement(material.Slide, {
@@ -722,8 +834,8 @@ function Item$2(props) {
           }, _ref["borderRadius"] = '10px', _ref.backgroundColor = '#fff', _ref.marginTop = '20px', _ref)
         }, /*#__PURE__*/React__default.createElement(material.CardMedia, {
           component: "img",
-          height: "290px",
-          width: "290px",
+          height: "305px",
+          width: "305px",
           image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
           sx: {
             aspectRatio: '1/1'
@@ -737,17 +849,28 @@ function Item$2(props) {
             }
           }
         }, /*#__PURE__*/React__default.createElement(material.Typography, {
-          className: "title",
+          dangerouslySetInnerHTML: {
+            __html: item.title ? item.title : 'Agrega título'
+          },
           sx: {
             display: '-webkit-box',
             WebkitLineClamp: 1,
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'pre-wrap'
+            whiteSpace: 'pre-wrap',
+            fontSize: {
+              xs: '1em',
+              sm: '1em',
+              md: '1em',
+              lg: '1em',
+              xl: '1em'
+            }
           }
-        }, item.title ? item.title : 'Agrega título'), /*#__PURE__*/React__default.createElement(material.Typography, {
-          className: "middle",
+        }), /*#__PURE__*/React__default.createElement(material.Typography, {
+          dangerouslySetInnerHTML: {
+            __html: item.subtitle ? item.subtitle : 'Agrega subtítulo'
+          },
           sx: {
             minHeight: '54px',
             display: '-webkit-box',
@@ -755,15 +878,25 @@ function Item$2(props) {
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'pre-wrap'
+            whiteSpace: 'pre-wrap',
+            fontSize: {
+              xs: '1em',
+              sm: '1em',
+              md: '1em',
+              lg: '1em',
+              xl: '1em'
+            }
           }
-        }, item.subtitle ? item.subtitle : 'Agrega subtítulo'), /*#__PURE__*/React__default.createElement(material.Button, {
+        }), item.button_active && /*#__PURE__*/React__default.createElement(material.Button, {
           variant: "contained",
           href: item.button_action ? item.button_action : '#',
           target: item.link == 4 ? '_blank' : '_self',
           sx: {
             width: 'auto',
-            marginTop: '16px'
+            marginTop: '16px',
+            padding: '4px 10px',
+            borderRadius: '50px',
+            fontSize: '12px'
           }
         }, item.button_title ? item.button_title : 'Nombre botón')))));
       }));
@@ -779,8 +912,20 @@ function Item$2(props) {
         height: '40px'
       }
     }, /*#__PURE__*/React__default.createElement(material.Typography, {
-      className: "title-xlarge"
-    }, title ? title : 'Agregue un título')), content.map(function (item, i) {
+      dangerouslySetInnerHTML: {
+        __html: title ? title : 'Agregue un título'
+      },
+      sx: {
+        height: '100%',
+        fontSize: {
+          xl: '3em',
+          lg: '3em',
+          md: '2.25em',
+          sm: '1.875em',
+          xs: '1.875em'
+        }
+      }
+    })), content.map(function (item, i) {
       var _ref2;
       return /*#__PURE__*/React__default.createElement(material.Grid, {
         item: true,
@@ -822,17 +967,28 @@ function Item$2(props) {
           }
         }
       }, /*#__PURE__*/React__default.createElement(material.Typography, {
-        className: "title",
+        dangerouslySetInnerHTML: {
+          __html: item.title ? item.title : 'Agrega título'
+        },
         sx: {
           display: '-webkit-box',
           WebkitLineClamp: 1,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          whiteSpace: 'pre-wrap'
+          whiteSpace: 'pre-wrap',
+          fontSize: {
+            xs: '1em',
+            sm: '1em',
+            md: '1em',
+            lg: '1em',
+            xl: '1em'
+          }
         }
-      }, item.title ? item.title : 'Agrega título'), /*#__PURE__*/React__default.createElement(material.Typography, {
-        className: "middle",
+      }), /*#__PURE__*/React__default.createElement(material.Typography, {
+        dangerouslySetInnerHTML: {
+          __html: item.subtitle ? item.subtitle : 'Agrega subtítulo'
+        },
         sx: {
           minHeight: '54px',
           display: '-webkit-box',
@@ -840,9 +996,16 @@ function Item$2(props) {
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          whiteSpace: 'pre-wrap'
+          whiteSpace: 'pre-wrap',
+          fontSize: {
+            xs: '1em',
+            sm: '1em',
+            md: '1em',
+            lg: '1em',
+            xl: '1em'
+          }
         }
-      }, item.subtitle ? item.subtitle : 'Agrega subtítulo'), /*#__PURE__*/React__default.createElement(material.Button, {
+      }), /*#__PURE__*/React__default.createElement(material.Button, {
         variant: "contained",
         href: item.button_action ? item.button_action : '#',
         target: item.link == 4 ? '_blank' : '_self',
@@ -866,6 +1029,7 @@ var List = /*#__PURE__*/function (_AtomicElements) {
       'type': 1,
       'title': 'Title',
       'subtitle': 'Subtitle',
+      'button_active': 'Button active',
       'button_title': 'Button Title',
       'button_action': 'Button Action',
       'image': 'sqr',
@@ -1058,7 +1222,13 @@ function CanvasContainer(props) {
         lg: '0px 24px',
         sm: '0px 0px',
         xs: '0px 0px'
-      } : '64px 24px',
+      } : {
+        xl: '64px 24px',
+        lg: '64px 24px',
+        md: '64px 0px',
+        sm: '64px 0px',
+        xs: '64px 0px'
+      },
       width: '100%',
       height: '100%'
     }
@@ -1070,7 +1240,9 @@ function CanvasContainer(props) {
         paddingLeft: json.type == 0 ? {
           sx: '0px',
           sm: '0px',
-          md: '0px'
+          md: '0px',
+          lg: '24px',
+          xl: '24px'
         } : {
           xs: '24px',
           md: '24px',
@@ -1081,7 +1253,9 @@ function CanvasContainer(props) {
         paddingRight: json.type == 0 ? {
           sx: '0px',
           sm: '0px',
-          md: '0px'
+          md: '0px',
+          lg: '24px',
+          xl: '24px'
         } : {
           xs: '24px',
           md: '24px',