keski_lib_catalog 1.3.12 → 1.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +269 -146
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +270 -147
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.modern.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import Carousel from 'react-material-ui-carousel';
3
- import { Box, Slide, Card, Typography, Chip, Button, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container } from '@mui/material';
3
+ import { Box, Slide, Card, Typography, Chip, Button, CardMedia, Grid as Grid$1, useTheme, useMediaQuery, CardContent, Container, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
4
4
  import Avatar from '@mui/material/Avatar';
5
5
  import { styled } from '@mui/material/styles';
6
6
  import Paper from '@mui/material/Paper';
@@ -153,6 +153,7 @@ function Item(props) {
153
153
  WebkitBoxOrient: 'vertical'
154
154
  }
155
155
  }, /*#__PURE__*/React.createElement(Typography, {
156
+ component: 'h2',
156
157
  dangerouslySetInnerHTML: {
157
158
  __html: content.description ? content.description : 'Agregue título'
158
159
  },
@@ -167,6 +168,7 @@ function Item(props) {
167
168
  }
168
169
  }
169
170
  })), /*#__PURE__*/React.createElement(Typography, {
171
+ component: 'p',
170
172
  dangerouslySetInnerHTML: {
171
173
  __html: content.title ? content.title : 'Agregue subtítulo'
172
174
  },
@@ -281,6 +283,7 @@ function Layout1$1(content) {
281
283
  backgroundColor: (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label_color
282
284
  }
283
285
  })), /*#__PURE__*/React.createElement(Typography, {
286
+ component: 'h1',
284
287
  dangerouslySetInnerHTML: {
285
288
  __html: (_content$component$su6 = content.component.subcomponent[0]) !== null && _content$component$su6 !== void 0 && _content$component$su6.title ? (_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.title : 'Agregue titulo'
286
289
  },
@@ -297,6 +300,7 @@ function Layout1$1(content) {
297
300
  fontWeight: "bold"
298
301
  }
299
302
  }), /*#__PURE__*/React.createElement(Typography, {
303
+ component: 'p',
300
304
  dangerouslySetInnerHTML: {
301
305
  __html: (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.description ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.description : 'Agregue descripción'
302
306
  },
@@ -353,7 +357,7 @@ var Item$1 = styled(Paper)(function (_ref) {
353
357
  return {};
354
358
  });
355
359
  function Layout1$2(content) {
356
- 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, _content$component$su12, _content$component$su13, _content$component$su14, _content$component$su15, _content$component$su16, _content$component$su17, _content$component$su18, _content$component$su19;
360
+ 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, _content$component$su12, _content$component$su13, _content$component$su14, _content$component$su15, _content$component$su16, _content$component$su17, _content$component$su18, _content$component$su19, _content$component$su20, _content$component$su21;
357
361
  var visible = true;
358
362
  return /*#__PURE__*/React.createElement(Grid, {
359
363
  container: true,
@@ -385,14 +389,15 @@ function Layout1$2(content) {
385
389
  backgroundPosition: 'center'
386
390
  }
387
391
  }, /*#__PURE__*/React.createElement(CardMedia, {
392
+ component: "img",
388
393
  sx: {
389
394
  width: "100%",
390
- paddingTop: '56.25%',
391
395
  backgroundSize: 'center',
392
396
  backgroundPosition: 'center',
393
397
  transform: "translate(\n " + ((_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.image_transform_x) + "%\n ,\n " + ((_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image_transform_y) + "%)" + ("scale(" + ((_content$component$su3 = content.component.subcomponent[0]) !== null && _content$component$su3 !== void 0 && _content$component$su3.image_scale ? (_content$component$su4 = content.component.subcomponent[0]) === null || _content$component$su4 === void 0 ? void 0 : _content$component$su4.image_scale : "1") + ")")
394
398
  },
395
- image: (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.image ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.image.url : 'none'
399
+ alt: (_content$component$su5 = content.component.subcomponent[0]) !== null && _content$component$su5 !== void 0 && _content$component$su5.title ? (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.title : 'imagen Keski',
400
+ image: (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.image ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.image.url : 'none'
396
401
  }))))), /*#__PURE__*/React.createElement(Grid, {
397
402
  item: true,
398
403
  xs: 12,
@@ -429,23 +434,24 @@ function Layout1$2(content) {
429
434
  width: "100%",
430
435
  background: "none"
431
436
  }
432
- }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su7 = content.component.subcomponent[0]) === null || _content$component$su7 === void 0 ? void 0 : _content$component$su7.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
437
+ }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
433
438
  disabled: true,
434
439
  color: "info",
435
- label: (_content$component$su8 = content.component.subcomponent[0]) !== null && _content$component$su8 !== void 0 && _content$component$su8.label ? (_content$component$su9 = content.component.subcomponent[0]) === null || _content$component$su9 === void 0 ? void 0 : _content$component$su9.label : 'Agregue etiqueta',
440
+ label: (_content$component$su10 = content.component.subcomponent[0]) !== null && _content$component$su10 !== void 0 && _content$component$su10.label ? (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.label : 'Agregue etiqueta',
436
441
  sx: {
437
442
  marginBottom: '16px',
438
443
  fontSize: '1em',
439
444
  borderRadius: '6px',
440
- backgroundColor: (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.label_color
445
+ backgroundColor: (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.label_color
441
446
  }
442
447
  })), /*#__PURE__*/React.createElement(Box, {
443
448
  sx: {
444
449
  marginBottom: '16px'
445
450
  }
446
451
  }, /*#__PURE__*/React.createElement(Typography, {
452
+ component: 'h2',
447
453
  dangerouslySetInnerHTML: {
448
- __html: (_content$component$su11 = content.component.subcomponent[0]) !== null && _content$component$su11 !== void 0 && _content$component$su11.title ? (_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.title : 'Agregue titulo'
454
+ __html: (_content$component$su13 = content.component.subcomponent[0]) !== null && _content$component$su13 !== void 0 && _content$component$su13.title ? (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.title : 'Agregue titulo'
449
455
  },
450
456
  sx: {
451
457
  whiteSpace: 'pre-wrap',
@@ -462,8 +468,9 @@ function Layout1$2(content) {
462
468
  marginBottom: '16px'
463
469
  }
464
470
  }, /*#__PURE__*/React.createElement(Typography, {
471
+ component: 'p',
465
472
  dangerouslySetInnerHTML: {
466
- __html: (_content$component$su13 = content.component.subcomponent[0]) !== null && _content$component$su13 !== void 0 && _content$component$su13.description ? (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.description : 'Agregue descripción'
473
+ __html: (_content$component$su15 = content.component.subcomponent[0]) !== null && _content$component$su15 !== void 0 && _content$component$su15.description ? (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.description : 'Agregue descripción'
467
474
  },
468
475
  sx: {
469
476
  whiteSpace: 'pre-wrap',
@@ -475,17 +482,17 @@ function Layout1$2(content) {
475
482
  xl: "1.125em"
476
483
  }
477
484
  }
478
- })), ((_content$component$su15 = content.component.subcomponent[0]) === null || _content$component$su15 === void 0 ? void 0 : _content$component$su15.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
485
+ })), ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.button_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
479
486
  variant: "contained",
480
487
  color: "primary",
481
- href: (_content$component$su16 = content.component.subcomponent[0]) === null || _content$component$su16 === void 0 ? void 0 : _content$component$su16.button_action,
482
- target: ((_content$component$su17 = content.component.subcomponent[0]) === null || _content$component$su17 === void 0 ? void 0 : _content$component$su17.link) == 4 ? '_blank' : '_self',
488
+ href: (_content$component$su18 = content.component.subcomponent[0]) === null || _content$component$su18 === void 0 ? void 0 : _content$component$su18.button_action,
489
+ target: ((_content$component$su19 = content.component.subcomponent[0]) === null || _content$component$su19 === void 0 ? void 0 : _content$component$su19.link) == 4 ? '_blank' : '_self',
483
490
  sx: {
484
491
  width: 'auto',
485
492
  padding: '8px 20px',
486
493
  borderRadius: '40px'
487
494
  }
488
- }, (_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')))))));
495
+ }, (_content$component$su20 = content.component.subcomponent[0]) !== null && _content$component$su20 !== void 0 && _content$component$su20.button_title ? (_content$component$su21 = content.component.subcomponent[0]) === null || _content$component$su21 === void 0 ? void 0 : _content$component$su21.button_title : 'Nombre botón')))))));
489
496
  }
490
497
 
491
498
  var TextPlusImg = /*#__PURE__*/function (_AtomicElements) {
@@ -534,6 +541,7 @@ function Layout1$3(content) {
534
541
  width: '100%'
535
542
  }
536
543
  }, /*#__PURE__*/React.createElement(Typography, {
544
+ component: 'h2',
537
545
  dangerouslySetInnerHTML: {
538
546
  __html: content.component.title ? content.component.title : 'Agregue titulo'
539
547
  },
@@ -625,6 +633,7 @@ function Layout1$4(content) {
625
633
  textAlign: content.component.justify_content
626
634
  }
627
635
  }, /*#__PURE__*/React.createElement(Typography, {
636
+ component: 'h2',
628
637
  dangerouslySetInnerHTML: {
629
638
  __html: (_content$component$su2 = content.component.subcomponent[0]) !== null && _content$component$su2 !== void 0 && _content$component$su2.title ? (_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.title : 'Agregue titulo'
630
639
  },
@@ -651,6 +660,7 @@ function Layout1$4(content) {
651
660
  }
652
661
  }
653
662
  }, /*#__PURE__*/React.createElement(Typography, {
663
+ component: 'p',
654
664
  dangerouslySetInnerHTML: {
655
665
  __html: (_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'
656
666
  },
@@ -790,6 +800,7 @@ function Item$2(props) {
790
800
  }
791
801
  }
792
802
  }, /*#__PURE__*/React.createElement(Typography, {
803
+ component: 'h2',
793
804
  dangerouslySetInnerHTML: {
794
805
  __html: title ? title : 'Agregue un título'
795
806
  },
@@ -856,6 +867,7 @@ function Item$2(props) {
856
867
  }
857
868
  }
858
869
  }, /*#__PURE__*/React.createElement(Typography, {
870
+ component: 'h3',
859
871
  dangerouslySetInnerHTML: {
860
872
  __html: item.title ? item.title : 'Agrega título'
861
873
  },
@@ -875,6 +887,7 @@ function Item$2(props) {
875
887
  }
876
888
  }
877
889
  }), /*#__PURE__*/React.createElement(Typography, {
890
+ component: 'p',
878
891
  dangerouslySetInnerHTML: {
879
892
  __html: item.subtitle ? item.subtitle : 'Agrega subtítulo'
880
893
  },
@@ -1051,163 +1064,271 @@ var List = /*#__PURE__*/function (_AtomicElements) {
1051
1064
  return List;
1052
1065
  }(AtomicElements);
1053
1066
 
1054
- var Item$3 = styled(Paper)(function (_ref) {
1055
- var theme = _ref.theme;
1056
- return _extends({
1057
- backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff'
1058
- }, theme.typography.body2, {
1059
- padding: theme.spacing(2),
1060
- textAlign: 'left',
1061
- color: theme.palette.text.secondary
1062
- });
1063
- });
1064
1067
  function Layout1$6(content) {
1065
- 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, _content$component$su12, _content$component$su13, _content$component$su14;
1066
- var visible = true;
1067
- return /*#__PURE__*/React.createElement(Container, {
1068
- maxWidth: "lg"
1069
- }, /*#__PURE__*/React.createElement(Grid, {
1068
+ return /*#__PURE__*/React.createElement(Grid$1, {
1070
1069
  container: true,
1071
- spacing: 4,
1072
- direction: content.component.justify_content != 'right' ? 'row' : 'row-reverse'
1073
- }, /*#__PURE__*/React.createElement(Grid, {
1074
- item: true,
1075
- xs: 12,
1076
- sm: 12,
1077
- md: 6,
1078
- lg: 6,
1079
- xl: 6
1080
- }, /*#__PURE__*/React.createElement(Slide, {
1081
- direction: "right",
1082
- "in": visible
1083
- }, /*#__PURE__*/React.createElement(Item$3, {
1084
- elevation: 0,
1085
- sx: {
1086
- height: "90%",
1087
- width: "100%",
1088
- background: "none"
1089
- }
1090
- }, /*#__PURE__*/React.createElement(Card, {
1091
1070
  sx: {
1092
- borderRadius: "24px",
1093
- background: "none",
1094
- backgroundSize: 'center',
1095
- backgroundPosition: 'center'
1096
- }
1097
- }, /*#__PURE__*/React.createElement(CardMedia, {
1098
- sx: {
1099
- width: "100%",
1100
- paddingTop: '56.25%',
1101
- backgroundSize: 'center',
1102
- backgroundPosition: 'center'
1103
- },
1104
- image: (_content$component$su = content.component.subcomponent[0]) !== null && _content$component$su !== void 0 && _content$component$su.image ? (_content$component$su2 = content.component.subcomponent[0]) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.image.url : 'none'
1105
- }))))), /*#__PURE__*/React.createElement(Grid, {
1106
- item: true,
1107
- xs: 12,
1108
- sm: 12,
1109
- md: 6,
1110
- lg: 6,
1111
- xl: 6
1112
- }, /*#__PURE__*/React.createElement(Grow, _extends({
1113
- "in": visible,
1114
- style: {
1115
- transformOrigin: '0 0 0'
1071
+ minHeight: '250px',
1072
+ width: '100%',
1073
+ margin: 'auto',
1074
+ padding: '0px'
1116
1075
  }
1117
- }, {
1118
- timeout: 1000
1119
- } ), /*#__PURE__*/React.createElement(Item$3, {
1120
- elevation: 0,
1121
- sx: {
1122
- height: "90%",
1123
- width: "100%",
1124
- background: "none"
1076
+ }, /*#__PURE__*/React.createElement(Item$3, {
1077
+ title: content.component.title,
1078
+ content: content.component.subcomponent,
1079
+ side: content.component.justify_content
1080
+ }));
1081
+ }
1082
+ function Item$3(props) {
1083
+ var content = props.content,
1084
+ title = props.title;
1085
+ var _useState = useState([]),
1086
+ arrayFourElements = _useState[0],
1087
+ setArrayFourElements = _useState[1];
1088
+ var visible = true;
1089
+ var theme = useTheme();
1090
+ var isXsScreen = useMediaQuery(theme.breakpoints.down('sm'));
1091
+ var isSmScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
1092
+ var isMdScreen = useMediaQuery(theme.breakpoints.between('md', 'lg'));
1093
+ var isLgScreen = useMediaQuery(theme.breakpoints.up('lg'));
1094
+ function divideArreglo(arreglo, tamanoMaximo) {
1095
+ var subarreglos = [];
1096
+ var subarregloActual = [];
1097
+ for (var i = 0; i < arreglo.length; i++) {
1098
+ subarregloActual.push(arreglo[i]);
1099
+ if (subarregloActual.length === tamanoMaximo || i === arreglo.length - 1) {
1100
+ subarreglos.push(subarregloActual);
1101
+ subarregloActual = [];
1102
+ }
1125
1103
  }
1126
- }, /*#__PURE__*/React.createElement(Box, null, ((_content$component$su3 = content.component.subcomponent[0]) === null || _content$component$su3 === void 0 ? void 0 : _content$component$su3.label_active) && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Chip, {
1127
- disabled: true,
1128
- color: "info",
1129
- label: (_content$component$su4 = content.component.subcomponent[0]) !== null && _content$component$su4 !== void 0 && _content$component$su4.label ? (_content$component$su5 = content.component.subcomponent[0]) === null || _content$component$su5 === void 0 ? void 0 : _content$component$su5.label : 'Agregue etiqueta',
1130
- sx: {
1131
- marginBottom: '16px',
1132
- fontSize: '1em',
1133
- borderRadius: '6px',
1134
- backgroundColor: (_content$component$su6 = content.component.subcomponent[0]) === null || _content$component$su6 === void 0 ? void 0 : _content$component$su6.label_color
1104
+ return subarreglos;
1105
+ }
1106
+ useEffect(function () {
1107
+ var tamanoMaximo;
1108
+ if (isSmScreen) {
1109
+ tamanoMaximo = 2;
1110
+ } else if (isMdScreen) {
1111
+ tamanoMaximo = 3;
1112
+ } else if (isLgScreen) {
1113
+ tamanoMaximo = 4;
1114
+ } else if (isXsScreen) {
1115
+ tamanoMaximo = 1;
1135
1116
  }
1136
- })), /*#__PURE__*/React.createElement(Box, {
1117
+ setArrayFourElements(divideArreglo(content, tamanoMaximo));
1118
+ }, [isXsScreen, isSmScreen, isMdScreen, isLgScreen, content]);
1119
+ if (!arrayFourElements) {
1120
+ return null;
1121
+ } else {
1122
+ return content.length >= 1 ? /*#__PURE__*/React.createElement(Carousel, {
1123
+ autoPlay: true,
1124
+ indicators: false,
1125
+ swipe: true,
1126
+ cycleNavigation: true,
1127
+ sx: {
1128
+ width: '100%',
1129
+ height: '250px',
1130
+ paddingTop: '60px',
1131
+ position: 'relative'
1132
+ }
1133
+ }, arrayFourElements.map(function (items, i) {
1134
+ return /*#__PURE__*/React.createElement(Container, {
1135
+ maxWidth: "lg"
1136
+ }, /*#__PURE__*/React.createElement(Grid$1, {
1137
+ container: true,
1138
+ key: i,
1139
+ spacing: 0,
1140
+ sx: {
1141
+ margin: 'auto',
1142
+ padding: 'auto'
1143
+ }
1144
+ }, /*#__PURE__*/React.createElement(Box, {
1145
+ sx: {
1146
+ position: 'absolute',
1147
+ top: {
1148
+ xs: '-40px',
1149
+ sm: '-80px'
1150
+ },
1151
+ zIndex: 1
1152
+ }
1153
+ }, " ", /*#__PURE__*/React.createElement(Typography, {
1154
+ component: 'h2',
1155
+ dangerouslySetInnerHTML: {
1156
+ __html: title ? title : ''
1157
+ },
1158
+ sx: {
1159
+ height: '100%',
1160
+ fontSize: {
1161
+ xl: '3em',
1162
+ lg: '3em',
1163
+ md: '2.25em',
1164
+ sm: '1.875em',
1165
+ xs: '1.875em'
1166
+ }
1167
+ }
1168
+ })), items.map(function (item, j) {
1169
+ return /*#__PURE__*/React.createElement(Grid$1, {
1170
+ item: true,
1171
+ key: j,
1172
+ xs: 12,
1173
+ sm: 6,
1174
+ md: 4,
1175
+ lg: 3,
1176
+ xl: 3,
1177
+ sx: {
1178
+ margin: {
1179
+ xs: '0px',
1180
+ sm: '0px'
1181
+ },
1182
+ width: 'object-fit',
1183
+ display: 'flex',
1184
+ justifyContent: 'center',
1185
+ alignItems: 'center',
1186
+ '&.MuiGrid-item': {
1187
+ paddingLeft: '17px',
1188
+ paddingTop: '10px'
1189
+ }
1190
+ }
1191
+ }, /*#__PURE__*/React.createElement(Slide, {
1192
+ direction: "left",
1193
+ "in": visible
1194
+ }, /*#__PURE__*/React.createElement(Card, {
1195
+ elevation: 0,
1196
+ sx: {
1197
+ width: '100%',
1198
+ height: '100%',
1199
+ borderRadius: '10px',
1200
+ background: 'none'
1201
+ }
1202
+ }, /*#__PURE__*/React.createElement(CardMedia, {
1203
+ component: "img",
1204
+ image: item.image.url ? item.image.url : 'none',
1205
+ alt: item.description ? item.description : 'none',
1206
+ sx: {
1207
+ width: '100%',
1208
+ height: '140px',
1209
+ transform: "translate(" + item.image_transform_x + "%, " + item.image_transform_y + "%) scale(" + (item.image_scale ? item.image_scale : '1') + ")"
1210
+ }
1211
+ }))));
1212
+ })));
1213
+ })) : null;
1214
+ }
1215
+ }
1216
+
1217
+ var Brands = /*#__PURE__*/function (_AtomicElements) {
1218
+ _inheritsLoose(Brands, _AtomicElements);
1219
+ function Brands() {
1220
+ var _this;
1221
+ _this = _AtomicElements.call(this) || this;
1222
+ _this.layout = [Layout1$6];
1223
+ _this.layoutFootprint = ['brands_layout_1.png'];
1224
+ _this.layoutFootprintReq = [{
1225
+ 'type': 0,
1226
+ 'title': 'Tittle',
1227
+ 'description': 'Description',
1228
+ 'image_scale': 'image scale',
1229
+ 'image_transform_x': 'image transform x',
1230
+ 'image_transform_y': 'image transform y',
1231
+ 'image': 'Image'
1232
+ }];
1233
+ return _this;
1234
+ }
1235
+ return Brands;
1236
+ }(AtomicElements);
1237
+
1238
+ function Layout1$7(content) {
1239
+ var _content$component$su, _content$component$su2;
1240
+ var visible = true;
1241
+ return /*#__PURE__*/React.createElement(Slide, {
1242
+ direction: "left",
1243
+ "in": visible
1244
+ }, /*#__PURE__*/React.createElement(Box, {
1137
1245
  sx: {
1138
- marginBottom: '16px'
1246
+ width: {
1247
+ xs: '100%',
1248
+ md: '100%'
1249
+ },
1250
+ color: (_content$component$su = content.component.subcomponent[0]) === null || _content$component$su === void 0 ? void 0 : _content$component$su.text_color,
1251
+ textAlign: content.component.justify_content
1139
1252
  }
1140
1253
  }, /*#__PURE__*/React.createElement(Typography, {
1254
+ component: 'h2',
1141
1255
  dangerouslySetInnerHTML: {
1142
- __html: (_content$component$su7 = content.component.subcomponent[0]) !== null && _content$component$su7 !== void 0 && _content$component$su7.title ? (_content$component$su8 = content.component.subcomponent[0]) === null || _content$component$su8 === void 0 ? void 0 : _content$component$su8.title : 'Agregue titulo'
1256
+ __html: content.component.title ? content.component.title : 'Agregue titulo'
1143
1257
  },
1144
1258
  sx: {
1259
+ marginBottom: '16px',
1145
1260
  whiteSpace: 'pre-wrap',
1146
1261
  fontSize: {
1147
- xs: "2em",
1148
- md: "2em",
1149
- lg: "2em",
1262
+ xs: "1.875em",
1263
+ sm: "2.25em",
1264
+ md: "3em",
1265
+ lg: "3em",
1150
1266
  xl: "3em"
1151
- }
1152
- }
1153
- })), /*#__PURE__*/React.createElement(Box, {
1154
- sx: {
1155
- marginBottom: '16px'
1267
+ },
1268
+ fontWeight: "bold"
1156
1269
  }
1157
- }, /*#__PURE__*/React.createElement(Typography, {
1158
- dangerouslySetInnerHTML: {
1159
- __html: (_content$component$su9 = content.component.subcomponent[0]) !== null && _content$component$su9 !== void 0 && _content$component$su9.description ? (_content$component$su10 = content.component.subcomponent[0]) === null || _content$component$su10 === void 0 ? void 0 : _content$component$su10.description : 'Agregue descripción'
1160
- },
1270
+ }), /*#__PURE__*/React.createElement(Box, {
1161
1271
  sx: {
1162
- whiteSpace: 'pre-wrap',
1163
- fontSize: {
1164
- xs: "1.125em",
1165
- md: "1.125em",
1166
- lg: "1em"
1272
+ width: content.component.justify_content == "center" ? "100%" : {
1273
+ xl: "70%",
1274
+ lg: "72%",
1275
+ md: "84%",
1276
+ sm: "100%",
1277
+ xs: "100%"
1167
1278
  }
1168
1279
  }
1169
- })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
1170
- variant: "contained",
1171
- href: (_content$component$su11 = content.component.subcomponent[0]) === null || _content$component$su11 === void 0 ? void 0 : _content$component$su11.button_action,
1172
- target: ((_content$component$su12 = content.component.subcomponent[0]) === null || _content$component$su12 === void 0 ? void 0 : _content$component$su12.link) == 4 ? '_blank' : '_self',
1173
- sx: {
1174
- width: 'auto',
1175
- padding: '14px 40px',
1176
- borderRadius: '40px'
1177
- }
1178
- }, (_content$component$su13 = content.component.subcomponent[0]) !== null && _content$component$su13 !== void 0 && _content$component$su13.button_title ? (_content$component$su14 = content.component.subcomponent[0]) === null || _content$component$su14 === void 0 ? void 0 : _content$component$su14.button_title : 'Nombre botón'))))))));
1280
+ }, (_content$component$su2 = content.component.subcomponent) === null || _content$component$su2 === void 0 ? void 0 : _content$component$su2.map(function (item, index) {
1281
+ return /*#__PURE__*/React.createElement(Accordion, {
1282
+ key: index,
1283
+ elevation: 2
1284
+ }, /*#__PURE__*/React.createElement(AccordionSummary, {
1285
+ "aria-controls": "panel1a-content",
1286
+ id: "panel1a-header",
1287
+ expandIcon: '+',
1288
+ sx: {
1289
+ marginBottom: '16px'
1290
+ }
1291
+ }, /*#__PURE__*/React.createElement(Typography, {
1292
+ component: 'h3',
1293
+ dangerouslySetInnerHTML: {
1294
+ __html: item.subtitle ? item.subtitle : 'Agregue pregunta'
1295
+ },
1296
+ sx: {
1297
+ fontSize: '1.25em',
1298
+ fontWeight: 'bold'
1299
+ }
1300
+ })), /*#__PURE__*/React.createElement(AccordionDetails, {
1301
+ sx: {
1302
+ padding: '16px'
1303
+ }
1304
+ }, /*#__PURE__*/React.createElement(Typography, {
1305
+ component: 'p',
1306
+ dangerouslySetInnerHTML: {
1307
+ __html: item.description ? item.description : 'Agregue respuesta'
1308
+ },
1309
+ sx: {
1310
+ fontSize: '1.125em'
1311
+ }
1312
+ })));
1313
+ }))));
1179
1314
  }
1180
1315
 
1181
- var ImagPlusText = /*#__PURE__*/function (_AtomicElements) {
1182
- _inheritsLoose(ImagPlusText, _AtomicElements);
1183
- function ImagPlusText() {
1316
+ var FAQ = /*#__PURE__*/function (_AtomicElements) {
1317
+ _inheritsLoose(FAQ, _AtomicElements);
1318
+ function FAQ() {
1184
1319
  var _this;
1185
1320
  _this = _AtomicElements.call(this) || this;
1186
- _this.layout = [Layout1$6];
1187
- _this.layoutFootprint = ['imgPlusText_layout_1.png'];
1321
+ _this.layout = [Layout1$7];
1322
+ _this.layoutFootprint = ['faq_layout_1.png'];
1188
1323
  _this.layoutFootprintReq = [{
1189
1324
  'type': 0,
1190
- 'label': 'Label',
1191
- 'label_color': 'Label color',
1192
- 'label_active': 'Label active',
1193
- 'title': 'Title',
1194
- 'description': 'Text',
1195
- 'button_title': 'Button Title',
1196
- 'button_action': 'Button Action',
1197
- 'image': 'image',
1198
- 'image_scale': 'image scale',
1199
- 'link': 'Link'
1200
- }, {
1201
- 'type': 0,
1202
- 'title': 'Title',
1203
- 'description': 'Text',
1204
- 'button_title': 'Button Title',
1205
- 'button_action': 'Button Action',
1206
- 'image': 'req_hor'
1325
+ 'title': 'Tittle',
1326
+ 'subtitle': 'Subtitle',
1327
+ 'description': 'Description'
1207
1328
  }];
1208
1329
  return _this;
1209
1330
  }
1210
- return ImagPlusText;
1331
+ return FAQ;
1211
1332
  }(AtomicElements);
1212
1333
 
1213
1334
  function CanvasContainer(props) {
@@ -1241,9 +1362,9 @@ function CanvasContainer(props) {
1241
1362
  xs: '64px 0px'
1242
1363
  },
1243
1364
  width: '100%',
1244
- height: '100%'
1365
+ height: json.type === 6 ? '250px' : '100%'
1245
1366
  }
1246
- }, /*#__PURE__*/React.createElement(Container, {
1367
+ }, json.type === 6 || json.component.layout === 1 ? children : /*#__PURE__*/React.createElement(Container, {
1247
1368
  maxWidth: "lg",
1248
1369
  sx: {
1249
1370
  padding: '0px',
@@ -1347,8 +1468,9 @@ var Sections = /*#__PURE__*/function () {
1347
1468
  this.gallery = new Section(new Gallery());
1348
1469
  this.text = new Section(new Text());
1349
1470
  this.list = new Section(new List());
1350
- this.imgPlusText = new Section(new ImagPlusText());
1351
- this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.imgPlusText];
1471
+ this.brands = new Section(new Brands());
1472
+ this.faq = new Section(new FAQ());
1473
+ this.sections = [this.banner, this.textPlusImg, this.quotes, this.gallery, this.text, this.list, this.brands, this.faq];
1352
1474
  }
1353
1475
  var _proto2 = Sections.prototype;
1354
1476
  _proto2.getSectionList = function getSectionList() {
@@ -1359,7 +1481,8 @@ var Sections = /*#__PURE__*/function () {
1359
1481
  '3': 'Galeria',
1360
1482
  '4': 'Texto',
1361
1483
  '5': 'Lista',
1362
- '6': 'Imagen + Texto'
1484
+ '6': 'Marcas',
1485
+ '7': 'FAQ'
1363
1486
  };
1364
1487
  };
1365
1488
  _proto2.getLayoutsFromSection = function getLayoutsFromSection(index) {