keski_lib_catalog 1.0.35 → 1.0.37

package/dist/index.modern.js

@@ -161,7 +161,7 @@ var Quotes = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 function Layout1$1(content) {
-  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8;
+  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9;
   var visible = true;
   return /*#__PURE__*/React.createElement(Slide, {
     direction: "left",
@@ -194,11 +194,12 @@ function Layout1$1(content) {
   }, (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.description ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.description : 'Agregue descripción'), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     href: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.button_action,
+    target: ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto',
       marginBottom: '16px'
     }
-  }, (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.button_title ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_title : 'Nombre botón'))));
+  }, (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.button_title ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.button_title : 'Nombre botón'))));
 }
 
 var Banner = /*#__PURE__*/function (_AtomicElements) {
@@ -214,7 +215,6 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
       'description': 'Description',
       'button_title': 'Button Title',
       'button_action': 'Button action',
-      'image': 'background',
       'text_color': 'Text color',
       'link': 'Link'
     }];
@@ -224,7 +224,7 @@ var Banner = /*#__PURE__*/function (_AtomicElements) {
 }(AtomicElements);
 
 function Layout1$2(content) {
-  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9, _content$component$su10;
+  var _content$component$su, _content$component$su2, _content$component$su3, _content$component$su4, _content$component$su5, _content$component$su6, _content$component$su7, _content$component$su8, _content$component$su9, _content$component$su10, _content$component$su11;
   var visible = true;
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
@@ -280,10 +280,11 @@ function Layout1$2(content) {
   }, (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.description ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.description : 'Agregue descripción')), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     href: (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.button_action,
+    target: ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.link) == 4 ? '_blank' : '_self',
     sx: {
       width: 'auto'
     }
-  }, (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.button_title ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.button_title : 'Nombre botón'))))));
+  }, (_content$component$su10 = content.component.subcomponent[0]) !== null && _content$component$su10 !== void 0 && _content$component$su10.button_title ? (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_title : 'Nombre botón'))))));
 }
 
 var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -299,7 +300,7 @@ var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
       'description': 'Text',
       'button_title': 'Button Title',
       'button_action': 'Button Action',
-      'image': 'Image',
+      'image': 'req_hor',
       'link': 'Link'
     }, {
       'type': 0,
@@ -361,7 +362,6 @@ var Gallery = /*#__PURE__*/function (_AtomicElements) {
     _this.layoutFootprint = ['gallery_layout_1.png'];
     _this.layoutFootprintReq = [{
       'type': 1,
-      'title': 'Tittle',
       'image': 'req_hor'
     }];
     return _this;
@@ -417,14 +417,23 @@ var Text = /*#__PURE__*/function (_AtomicElements) {
 
 function Layout1$5(content) {
   return /*#__PURE__*/React.createElement(Grid, {
-    container: true
+    container: true,
+    sx: {
+      minHeight: '550px',
+      width: '100%',
+      margin: 'auto',
+      padding: '8px'
+    }
   }, /*#__PURE__*/React.createElement(Item$1, {
+    title: content.component.title,
     content: content.component.subcomponent,
     side: content.component.justify_content
   }));
 }
 function Item$1(props) {
-  var content = props.content;
+  var content = props.content,
+    side = props.side,
+    title = props.title;
   var _useState = useState([]),
     arrayFourElements = _useState[0],
     setArrayFourElements = _useState[1];
@@ -463,126 +472,216 @@ function Item$1(props) {
     return null;
   } else {
     return content.length > 4 ? /*#__PURE__*/React.createElement(Carousel, {
-      autoPlay: true,
-      indicators: true,
+      autoPlay: false,
+      indicators: false,
       navButtonsAlwaysVisible: true,
+      navButtonsProps: {
+        style: {
+          backgroundColor: 'transparent',
+          borderRadius: 0,
+          color: '#767676'
+        }
+      },
+      navButtonsWrapperProps: {
+        style: {
+          top: '0',
+          bottom: 'unset'
+        }
+      },
       sx: {
         width: '100%',
-        height: '100%'
+        height: '520px',
+        paddingTop: '50px',
+        "& .css-hn784z": {
+          left: {
+            xs: 'calc(100% - 120px)'
+          },
+          height: 'auto'
+        },
+        "& .css-1abc02a": {
+          height: 'auto'
+        }
       }
     }, arrayFourElements.map(function (items, i) {
       return /*#__PURE__*/React.createElement(Grid, {
         container: true,
         key: i,
-        spacing: 3
-      }, items.map(function (item, j) {
+        spacing: 3,
+        sx: {
+          margin: 'auto',
+          padding: 'auto'
+        }
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          position: 'absolute',
+          top: '-50px'
+        }
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: "title-xlarge",
+        sx: {
+          height: '100%'
+        }
+      }, title ? title : 'Agregue un título')), items.map(function (item, j) {
         var _ref;
         return /*#__PURE__*/React.createElement(Grid, {
           item: true,
+          className: "containerdegrid",
           key: j,
           sm: 6,
           md: 4,
-          lg: 3
+          lg: 3,
+          sx: {
+            margin: {
+              xs: 'auto',
+              sm: '0px'
+            },
+            width: 'object-fit',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            '&.MuiGrid-item': {
+              paddingLeft: '0px',
+              paddingTop: '0px'
+            }
+          }
         }, /*#__PURE__*/React.createElement(Slide, {
           direction: "left",
           "in": visible
         }, /*#__PURE__*/React.createElement(Card, {
           sx: (_ref = {
-            width: '300px',
-            maxWidth: 512,
+            maxWidth: 300,
             boxShadow: 'none',
             borderRadius: 0,
             border: '1px solid #e5e5e5'
-          }, _ref["borderRadius"] = '10px', _ref)
+          }, _ref["borderRadius"] = '10px', _ref.backgroundColor = '#fff', _ref.marginTop = '20px', _ref)
         }, /*#__PURE__*/React.createElement(CardMedia, {
           component: "img",
-          height: "300px",
-          width: "300px",
-          image: "https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80",
+          height: "290px",
+          width: "290px",
+          image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
           sx: {
             aspectRatio: '1/1'
           }
         }), /*#__PURE__*/React.createElement(CardContent, {
           sx: {
             padding: '8px 16px',
+            textAlign: side,
             '&.MuiCardContent-root:last-child': {
               paddingBottom: '8px'
             }
           }
-        }, /*#__PURE__*/React.createElement(Box, {
-          component: "div",
+        }, /*#__PURE__*/React.createElement(Typography, {
+          className: "title",
           sx: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center'
+            display: '-webkit-box',
+            WebkitLineClamp: 1,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
           }
-        }, /*#__PURE__*/React.createElement(Box, {
+        }, item.title ? item.title : 'Agrega título'), /*#__PURE__*/React.createElement(Typography, {
+          className: "middle",
           sx: {
-            maxWidth: '80%',
+            minHeight: '54px',
             display: '-webkit-box',
             WebkitLineClamp: 2,
             WebkitBoxOrient: 'vertical',
             overflow: 'hidden',
             textOverflow: 'ellipsis'
           }
-        }, /*#__PURE__*/React.createElement(Typography, {
-          className: "simple"
-        }, "Pan de muertos de masa madre real madrid"))), /*#__PURE__*/React.createElement(Typography, null, "$4000")))));
+        }, item.subtitle ? item.subtitle : 'Agrega subtítulo'), /*#__PURE__*/React.createElement(Button, {
+          variant: "contained",
+          href: item.button_action ? item.button_action : '#',
+          target: item.link == 4 ? '_blank' : '_self',
+          sx: {
+            width: 'auto',
+            marginTop: '16px'
+          }
+        }, item.button_title ? item.button_title : 'Nombre botón')))));
       }));
-    })) : content.map(function (item, i) {
+    })) : /*#__PURE__*/React.createElement(Grid, {
+      container: true,
+      sx: {
+        width: '100%',
+        gap: '0px'
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        width: '100%',
+        height: '40px'
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "title-xlarge"
+    }, title ? title : 'Agregue un título')), content.map(function (item, i) {
       var _ref2;
       return /*#__PURE__*/React.createElement(Grid, {
         item: true,
         key: i,
+        xs: 12,
         sm: 6,
         md: 4,
-        lg: 3
+        lg: 3,
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '16px'
+        }
       }, /*#__PURE__*/React.createElement(Slide, {
         direction: "left",
         "in": visible
       }, /*#__PURE__*/React.createElement(Card, {
         sx: (_ref2 = {
           width: '300px',
-          maxWidth: 512,
+          maxWidth: 300,
           boxShadow: 'none',
           borderRadius: 0,
           border: '1px solid #e5e5e5'
-        }, _ref2["borderRadius"] = '10px', _ref2)
+        }, _ref2["borderRadius"] = '10px', _ref2.backgroundColor = '#fff', _ref2)
       }, /*#__PURE__*/React.createElement(CardMedia, {
         component: "img",
         height: "300px",
         width: "300px",
-        image: "https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80",
+        image: item.image.url ? item.image.url : 'https://via.placeholder.com/300x300.png?text=No+Image',
         sx: {
           aspectRatio: '1/1'
         }
       }), /*#__PURE__*/React.createElement(CardContent, {
         sx: {
           padding: '8px 16px',
+          textAlign: side,
           '&.MuiCardContent-root:last-child': {
             paddingBottom: '8px'
           }
         }
-      }, /*#__PURE__*/React.createElement(Box, {
-        component: "div",
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: "title",
         sx: {
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
+          display: '-webkit-box',
+          WebkitLineClamp: 1,
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
         }
-      }, /*#__PURE__*/React.createElement(Box, {
+      }, item.title ? item.title : 'Agrega título'), /*#__PURE__*/React.createElement(Typography, {
+        className: "middle",
         sx: {
-          maxWidth: '80%',
+          minHeight: '54px',
           display: '-webkit-box',
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
           textOverflow: 'ellipsis'
         }
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: "simple"
-      }, "Pan de muertos de masa madre real madrid"))), /*#__PURE__*/React.createElement(Typography, null, "$4000")))));
-    });
+      }, item.subtitle ? item.subtitle : 'Agrega subtítulo'), /*#__PURE__*/React.createElement(Button, {
+        variant: "contained",
+        href: item.button_action ? item.button_action : '#',
+        target: item.link == 4 ? '_blank' : '_self',
+        sx: {
+          width: 'auto',
+          marginTop: '16px'
+        }
+      }, item.button_title ? item.button_title : 'Nombre botón')))));
+    }));
   }
 }
 
@@ -595,9 +694,12 @@ var List = /*#__PURE__*/function (_AtomicElements) {
     _this.layoutFootprint = ['list_layout_1.png'];
     _this.layoutFootprintReq = [{
       'type': 1,
+      'title': 'Title',
       'subtitle': 'Subtitle',
-      'description': 'Description',
-      'image': 'Image'
+      'button_title': 'Button Title',
+      'button_action': 'Button Action',
+      'image': 'sqr',
+      'link': 'Link'
     }];
     return _this;
   }