keski_lib_catalog 1.3.13 → 1.3.14

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Carousel from 'react-material-ui-carousel';
-import { Box, Slide, Card, Typography, Chip, Button, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container } from '@mui/material';
+import { Box, Slide, Card, Typography, Chip, Button, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
@@ -1064,6 +1064,273 @@ var List = /*#__PURE__*/function (_AtomicElements) {
   return List;
 }(AtomicElements);
 
+function Layout1$6(content) {
+  return /*#__PURE__*/React.createElement(Grid$1, {
+    container: true,
+    sx: {
+      minHeight: '250px',
+      width: '100%',
+      margin: 'auto',
+      padding: '0px'
+    }
+  }, /*#__PURE__*/React.createElement(Item$3, {
+    title: content.component.title,
+    content: content.component.subcomponent,
+    side: content.component.justify_content
+  }));
+}
+function Item$3(props) {
+  var content = props.content,
+    title = props.title;
+  var _useState = useState([]),
+    arrayFourElements = _useState[0],
+    setArrayFourElements = _useState[1];
+  var visible = true;
+  var theme = useTheme();
+  var isXsScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  var isSmScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
+  var isMdScreen = useMediaQuery(theme.breakpoints.between('md', 'lg'));
+  var isLgScreen = useMediaQuery(theme.breakpoints.up('lg'));
+  function divideArreglo(arreglo, tamanoMaximo) {
+    var subarreglos = [];
+    var subarregloActual = [];
+    for (var i = 0; i < arreglo.length; i++) {
+      subarregloActual.push(arreglo[i]);
+      if (subarregloActual.length === tamanoMaximo || i === arreglo.length - 1) {
+        subarreglos.push(subarregloActual);
+        subarregloActual = [];
+      }
+    }
+    return subarreglos;
+  }
+  useEffect(function () {
+    var tamanoMaximo;
+    if (isSmScreen) {
+      tamanoMaximo = 2;
+    } else if (isMdScreen) {
+      tamanoMaximo = 3;
+    } else if (isLgScreen) {
+      tamanoMaximo = 4;
+    } else if (isXsScreen) {
+      tamanoMaximo = 1;
+    }
+    setArrayFourElements(divideArreglo(content, tamanoMaximo));
+  }, [isXsScreen, isSmScreen, isMdScreen, isLgScreen, content]);
+  if (!arrayFourElements) {
+    return null;
+  } else {
+    return content.length >= 1 ? /*#__PURE__*/React.createElement(Carousel, {
+      autoPlay: true,
+      indicators: false,
+      swipe: true,
+      cycleNavigation: true,
+      sx: {
+        width: '100%',
+        height: '250px',
+        paddingTop: '60px',
+        position: 'relative'
+      }
+    }, arrayFourElements.map(function (items, i) {
+      return /*#__PURE__*/React.createElement(Container, {
+        maxWidth: "lg"
+      }, /*#__PURE__*/React.createElement(Grid$1, {
+        container: true,
+        key: i,
+        spacing: 0,
+        sx: {
+          margin: 'auto',
+          padding: 'auto'
+        }
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          position: 'absolute',
+          top: {
+            xs: '-40px',
+            sm: '-80px'
+          },
+          zIndex: 1
+        }
+      }, " ", /*#__PURE__*/React.createElement(Typography, {
+        component: 'h2',
+        dangerouslySetInnerHTML: {
+          __html: title ? title : ''
+        },
+        sx: {
+          height: '100%',
+          fontSize: {
+            xl: '3em',
+            lg: '3em',
+            md: '2.25em',
+            sm: '1.875em',
+            xs: '1.875em'
+          }
+        }
+      })), items.map(function (item, j) {
+        return /*#__PURE__*/React.createElement(Grid$1, {
+          item: true,
+          key: j,
+          xs: 12,
+          sm: 6,
+          md: 4,
+          lg: 3,
+          xl: 3,
+          sx: {
+            margin: {
+              xs: '0px',
+              sm: '0px'
+            },
+            width: 'object-fit',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            '&.MuiGrid-item': {
+              paddingLeft: '17px',
+              paddingTop: '10px'
+            }
+          }
+        }, /*#__PURE__*/React.createElement(Slide, {
+          direction: "left",
+          "in": visible
+        }, /*#__PURE__*/React.createElement(Card, {
+          elevation: 0,
+          sx: {
+            width: '100%',
+            height: '100%',
+            borderRadius: '10px',
+            background: 'none'
+          }
+        }, /*#__PURE__*/React.createElement(CardMedia, {
+          component: "img",
+          image: item.image.url ? item.image.url : 'none',
+          alt: item.description ? item.description : 'none',
+          sx: {
+            width: '100%',
+            height: '140px',
+            transform: "translate(" + item.image_transform_x + "%, " + item.image_transform_y + "%) scale(" + (item.image_scale ? item.image_scale : '1') + ")"
+          }
+        }))));
+      })));
+    })) : null;
+  }
+}
+
+var Brands = /*#__PURE__*/function (_AtomicElements) {
+  _inheritsLoose(Brands, _AtomicElements);
+  function Brands() {
+    var _this;
+    _this = _AtomicElements.call(this) || this;
+    _this.layout = [Layout1$6];
+    _this.layoutFootprint = ['brands_layout_1.png'];
+    _this.layoutFootprintReq = [{
+      'type': 0,
+      'title': 'Tittle',
+      'description': 'Description',
+      'image_scale': 'image scale',
+      'image_transform_x': 'image transform x',
+      'image_transform_y': 'image transform y',
+      'image': 'Image'
+    }];
+    return _this;
+  }
+  return Brands;
+}(AtomicElements);
+
+function Layout1$7(content) {
+  var _content$component$su, _content$component$su2;
+  var visible = true;
+  return /*#__PURE__*/React.createElement(Slide, {
+    direction: "left",
+    "in": visible
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: {
+        xs: '100%',
+        md: '100%'
+      },
+      color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
+      textAlign: content.component.justify_content
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    component: 'h2',
+    dangerouslySetInnerHTML: {
+      __html: content.component.title ? content.component.title : 'Agregue titulo'
+    },
+    sx: {
+      marginBottom: '16px',
+      whiteSpace: 'pre-wrap',
+      fontSize: {
+        xs: "1.875em",
+        sm: "2.25em",
+        md: "3em",
+        lg: "3em",
+        xl: "3em"
+      },
+      fontWeight: "bold"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      width: content.component.justify_content == "center" ? "100%" : {
+        xl: "70%",
+        lg: "72%",
+        md: "84%",
+        sm: "100%",
+        xs: "100%"
+      }
+    }
+  }, (_content$component$su2 = content.component.subcomponent) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Accordion, {
+      key: index,
+      elevation: 2
+    }, /*#__PURE__*/React.createElement(AccordionSummary, {
+      "aria-controls": "panel1a-content",
+      id: "panel1a-header",
+      expandIcon: '+',
+      sx: {
+        marginBottom: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      component: 'h3',
+      dangerouslySetInnerHTML: {
+        __html: item.subtitle ? item.subtitle : 'Agregue pregunta'
+      },
+      sx: {
+        fontSize: '1.25em',
+        fontWeight: 'bold'
+      }
+    })), /*#__PURE__*/React.createElement(AccordionDetails, {
+      sx: {
+        padding: '16px'
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      component: 'p',
+      dangerouslySetInnerHTML: {
+        __html: item.description ? item.description : 'Agregue respuesta'
+      },
+      sx: {
+        fontSize: '1.125em'
+      }
+    })));
+  }))));
+}
+
+var FAQ = /*#__PURE__*/function (_AtomicElements) {
+  _inheritsLoose(FAQ, _AtomicElements);
+  function FAQ() {
+    var _this;
+    _this = _AtomicElements.call(this) || this;
+    _this.layout = [Layout1$7];
+    _this.layoutFootprint = ['faq_layout_1.png'];
+    _this.layoutFootprintReq = [{
+      'type': 0,
+      'title': 'Tittle',
+      'subtitle': 'Subtitle',
+      'description': 'Description'
+    }];
+    return _this;
+  }
+  return FAQ;
+}(AtomicElements);
+
 function CanvasContainer(props) {
   var _json$component$bg_im;
   var json = props.json,
@@ -1095,9 +1362,9 @@ function CanvasContainer(props) {
         xs: '64px 0px'
       },
       width: '100%',
-      height: '100%'
+      height: json.type === 6 ? '250px' : '100%'
     }
-  }, /*#__PURE__*/React.createElement(Container, {
+  }, json.type === 6 || json.component.layout === 1 ? children : /*#__PURE__*/React.createElement(Container, {
     maxWidth: "lg",
     sx: {
       padding: '0px',
@@ -1201,7 +1468,9 @@ var Sections = /*#__PURE__*/function () {
     this.gallery = new Section(new Gallery());
     this.text = new Section(new Text());
     this.list = new Section(new List());
-    this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list];
+    this.brands = new Section(new Brands());
+    this.faq = new Section(new FAQ());
+    this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.brands, this.faq];
   }
   var _proto2 = Sections.prototype;
   _proto2.getSectionList = function getSectionList() {
@@ -1211,7 +1480,9 @@ var Sections = /*#__PURE__*/function () {
       '2': 'Citas/Testimonios',
       '3': 'Galeria',
       '4': 'Texto',
-      '5': 'Lista'
+      '5': 'Lista',
+      '6': 'Marcas',
+      '7': 'FAQ'
     };
   };
   _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {